chore(deps): update dependency vue-tsc to v1.0.5 (#2527)

Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2527
Co-authored-by: renovate <renovatebot@kolaente.de>
Co-committed-by: renovate <renovatebot@kolaente.de>

.drone.yml

@@ -46,7 +46,7 @@ steps:
       PNPM_CACHE_FOLDER: .cache/pnpm
       CYPRESS_CACHE_FOLDER: .cache/cypress
     commands:
-      - corepack enable && corepack prepare pnpm@7.9.3 --activate && pnpm config set store-dir .cache/pnpm
+      - corepack enable && pnpm config set store-dir .cache/pnpm
       - pnpm install --fetch-timeout 100000
 #    depends_on:
 #      - restore-cache
@@ -57,7 +57,7 @@ steps:
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
     commands:
-      - corepack enable && corepack prepare pnpm@7.9.3 --activate && pnpm config set store-dir .cache/pnpm
+      - corepack enable && pnpm config set store-dir .cache/pnpm
       - pnpm run lint
     depends_on:
       - dependencies
@@ -68,7 +68,7 @@ steps:
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
     commands:
-      - corepack enable && corepack prepare pnpm@7.9.3 --activate && pnpm config set store-dir .cache/pnpm
+      - corepack enable && pnpm config set store-dir .cache/pnpm
       - pnpm run build
     depends_on:
       - dependencies
@@ -77,7 +77,7 @@ steps:
     image: node:18-alpine
     pull: true
     commands:
-      - corepack enable && corepack prepare pnpm@7.9.3 --activate && pnpm config set store-dir .cache/pnpm
+      - corepack enable && pnpm config set store-dir .cache/pnpm
       - pnpm run test:unit
     depends_on:
       - dependencies
@@ -89,7 +89,7 @@ steps:
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
     commands:
-      - corepack enable && corepack prepare pnpm@7.9.3 --activate && pnpm config set store-dir .cache/pnpm
+      - corepack enable && pnpm config set store-dir .cache/pnpm
       - pnpm run typecheck
     depends_on:
       - dependencies
@@ -107,7 +107,7 @@ steps:
         from_secret: cypress_project_key
     commands:
       - sed -i 's/localhost/api/g' dist/index.html
-      - corepack enable && corepack prepare pnpm@7.9.3 --activate && pnpm config set store-dir .cache/pnpm
+      - corepack enable && pnpm config set store-dir .cache/pnpm
       - pnpm cypress install
       - pnpm run serve:dist & npx wait-on http://localhost:4173
       - pnpm run test:frontend --browser chrome --record
@@ -147,7 +147,7 @@ steps:
     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
+      - sed -i 's|http://localhost:3456|https://try.vikunja.io|g' dist-preview/index.html
       - apk add --no-cache perl-utils
       - shasum -a 384 -c ./scripts/deploy-preview-netlify.js.sha384
       - node ./scripts/deploy-preview-netlify.js
@@ -202,7 +202,7 @@ steps:
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
     commands:
-      - corepack enable && corepack prepare pnpm@7.9.3 --activate && pnpm config set store-dir .cache/.pnp
+      - corepack enable && pnpm config set store-dir .cache/.pnp
       - pnpm install --fetch-timeout 100000
       - pnpm run lint
       - "echo '{\"VERSION\": \"'$(git describe --tags --always --abbrev=10 | sed 's/-/+/' | sed 's/^v//' | sed 's/-g/-/')'\"}' > src/version.json"
@@ -278,7 +278,7 @@ steps:
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
     commands:
-      - corepack enable && corepack prepare pnpm@7.9.3 --activate && pnpm config set store-dir .cache/pnpm
+      - corepack enable && pnpm config set store-dir .cache/pnpm
       - pnpm install --fetch-timeout 100000
       - pnpm run lint
       - "echo '{\"VERSION\": \"'$(git describe --tags --always --abbrev=10 | sed 's/-/+/' | sed 's/^v//' | sed 's/-g/-/')'\"}' > src/version.json"
@@ -659,6 +659,6 @@ steps:
         from_secret: crowdin_key
 ---
 kind: signature
-hmac: 9e9585222c466c67b426df40c76670f1a539c363a52075ff34e7f4518e67da2d
+hmac: c885a0e50db729842402494aa645dd3ac662828b691108550f6bf302158295ba
 
 ...

.envrc

@@ -0,0 +1 @@
+use flake

.eslintrc.cjs

@@ -1,3 +1,6 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution")
+
 module.exports = {
 	'root': true,
 	'env': {
@@ -9,7 +12,7 @@ module.exports = {
 	'extends': [
 		'eslint:recommended',
 		'plugin:vue/vue3-essential',
-		'@vue/typescript',
+		'@vue/eslint-config-typescript/recommended',
 	],
 	'rules': {
 		'vue/html-quotes': [
@@ -28,7 +31,6 @@ module.exports = {
 			'error',
 			'never',
 		],
-		'vue/script-setup-uses-vars': 'error',
 
 		// see https://segmentfault.com/q/1010000040813116/a-1020000041134455 (original in chinese)
 		'no-unused-vars': 'off',
@@ -40,6 +42,7 @@ module.exports = {
 	'parserOptions': {
 		'parser': '@typescript-eslint/parser',
 		'ecmaVersion': 2022,
+		'sourceType': 'module',
 	},
 	'ignorePatterns': [
 		'*.test.*',

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -0,0 +1,58 @@
+name: Bug Report
+description: Found something you weren't expecting? Report it here!
+labels: kind/bug
+body:
+  - type: markdown
+    attributes:
+      value: |
+        NOTE: If your issue is a security concern, please send an email to security@vikunja.io instead of opening a public issue.
+  - type: markdown
+    attributes:
+      value: |
+        Please fill out this issue template to report a bug.
+        
+        1. If you want to propose a new feature, please open a discussion thread in the forum: https://community.vikunja.io
+        2. Please ask questions or configuration/deploy problems on our [Matrix Room](https://matrix.to/#/#vikunja:matrix.org) or forum (https://community.vikunja.io).
+        3. Make sure you are using the latest release and
+           take a moment to check that your issue hasn't been reported before.
+        4. Please give all relevant information below for bug reports, because
+           incomplete details will be handled as an invalid report and closed.
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: |
+        Please provide a description of your issue here, with a URL if you were able to reproduce the issue (see below).
+  - type: input
+    id: frontend-version
+    attributes:
+      label: Vikunja Frontend Version
+      description: Vikunja frontend version (or commit reference) of your instance
+    validations:
+      required: true
+  - type: input
+    id: api-version
+    attributes:
+      label: Vikunja API Version
+      description: Vikunja API version (or commit reference) of your instance
+    validations:
+      required: true
+  - type: input
+    id: browser-version
+    attributes:
+      label: Browser and version
+      description: If your issue is related to a frontend problem, please provide the browser and version you used to reproduce it.
+  - type: dropdown
+    id: can-reproduce
+    attributes:
+      label: Can you reproduce the bug on the Vikunja demo site?
+      options:
+        - "Yes"
+        - "No"
+    validations:
+      required: true
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: Screenshots
+      description: If this issue involves the Web Interface, please provide one or more screenshots

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,17 @@
+blank_issues_enabled: false
+contact_links:
+  - name: API issues
+    url: https://code.vikunja.io/api/issues
+    about: This is the frontend repo. Please open api-related bug reports and discussions in the api 0repo. Not sure if your issue is frontend or api? Ask in Matrix or the forum first.
+  - name: Forum
+    url: https://community.vikunja.io/
+    about: Feature Requests, Questions, configuration or deployment problems should be discussed in the forum.
+  - name: Security-related issues
+    url: https://vikunja.io/contact/#security
+    about: For security concerns, please send a mail to security@vikunja.io instead of opening a public issue.
+  - name: Chat on Matrix
+    url: https://matrix.to/#/#vikunja:matrix.org
+    about: Please ask any quick questions here.
+  - name: Translations
+    url: https://crowdin.com/project/vikunja
+    about: Any problems or requests for new languages about translations should be handled in crowdin.

.gitignore

@@ -2,6 +2,7 @@
 node_modules
 /dist*
 *.zip
+.direnv/
 
 # local env files
 .env.local

Dockerfile

@@ -6,31 +6,22 @@ WORKDIR /build
 ARG USE_RELEASE=false
 ARG RELEASE_VERSION=main
 
+ENV PNPM_CACHE_FOLDER .cache/pnpm/
+ADD .  ./
+
 RUN \
   if [ $USE_RELEASE = true ]; then \
     wget https://dl.vikunja.io/frontend/vikunja-frontend-$RELEASE_VERSION.zip -O frontend-release.zip && \
     unzip frontend-release.zip -d dist/ && \
     exit 0; \
-  fi
-
-ENV PNPM_CACHE_FOLDER .cache/pnpm/
-
-# pnpm fetch does require only lockfile
-COPY pnpm-lock.yaml ./
-
-RUN \
+  fi && \
   # https://pnpm.io/installation#using-corepack
   corepack enable && \
-  corepack prepare pnpm@7.9.3 --activate && \
+  # we don't use corepack prepare here by intend since
+  # we have renovate to keep our dependencies up to date
   # Build the frontend
-	pnpm fetch
-
-ADD .  ./
-
-RUN apk add --no-cache git
-
-RUN \
-	pnpm install --offline && \
+  pnpm install && \
+  apk add --no-cache git && \
   echo '{"VERSION": "'$(git describe --tags --always --abbrev=10 | sed 's/-/+/' | sed 's/^v//' | sed 's/-g/-/')'"}' > src/version.json && \
   pnpm run build
 

cypress/e2e/list/list-view-gantt.spec.ts

@@ -16,10 +16,12 @@ describe('List View Gantt', () => {
 	})
 
 	it('Shows tasks from the current and next month', () => {
-		const now = new Date()
-		const nextMonth = now
+		const now = Date.UTC(2022, 8, 25)
+		cy.clock(now, ['Date'])
+
+		const nextMonth = new Date(now)
 		nextMonth.setDate(1)
-		nextMonth.setMonth(now.getMonth() + 1)
+		nextMonth.setMonth(9)
 
 		cy.visit('/lists/1/gantt')
 
@@ -32,7 +34,7 @@ describe('List View Gantt', () => {
 		const now = new Date()
 		const tasks = TaskFactory.create(1, {
 			start_date: formatISO(now),
-			end_date: formatISO(now.setDate(now.getDate() + 4))
+			end_date: formatISO(now.setDate(now.getDate() + 4)),
 		})
 		cy.visit('/lists/1/gantt')
 
@@ -63,7 +65,7 @@ describe('List View Gantt', () => {
 		const now = new Date()
 		TaskFactory.create(1, {
 			start_date: formatISO(now),
-			end_date: formatISO(now.setDate(now.getDate() + 4))
+			end_date: formatISO(now.setDate(now.getDate() + 4)),
 		})
 		cy.visit('/lists/1/gantt')
 

cypress/e2e/task/task.spec.ts

@@ -12,15 +12,51 @@ import {LabelTaskFactory} from '../../factories/label_task'
 import {BucketFactory} from '../../factories/bucket'
 
 import '../../support/authenticateUser'
+import {TaskAttachmentFactory} from '../../factories/task_attachments'
+
+function addLabelToTaskAndVerify(labelTitle: string) {
+	cy.get('.task-view .action-buttons .button')
+		.contains('Add Labels')
+		.click()
+	cy.get('.task-view .details.labels-list .multiselect input')
+		.type(labelTitle)
+	cy.get('.task-view .details.labels-list .multiselect .search-results')
+		.children()
+		.first()
+		.click()
+
+	cy.get('.global-notification', { timeout: 4000 })
+		.should('contain', 'Success')
+	cy.get('.task-view .details.labels-list .multiselect .input-wrapper span.tag')
+		.should('exist')
+		.should('contain', labelTitle)
+}
+
+function uploadAttachmentAndVerify(taskId: number) {
+	cy.intercept(`${Cypress.env('API_URL')}/tasks/${taskId}/attachments`).as('uploadAttachment')
+	cy.get('.task-view .action-buttons .button')
+		.contains('Add Attachments')
+		.click()
+	cy.get('input[type=file]', {timeout: 1000})
+		.selectFile('cypress/fixtures/image.jpg', {force: true}) // The input is not visible, but on purpose
+	cy.wait('@uploadAttachment')
+
+	cy.get('.attachments .attachments .files a.attachment')
+		.should('exist')
+}
 
 describe('Task', () => {
 	let namespaces
 	let lists
+	let buckets
 
 	beforeEach(() => {
 		UserFactory.create(1)
 		namespaces = NamespaceFactory.create(1)
 		lists = ListFactory.create(1)
+		buckets = BucketFactory.create(1, {
+			list_id: lists[0].id,
+		})
 		TaskFactory.truncate()
 		UserListFactory.truncate()
 	})
@@ -80,6 +116,7 @@ describe('Task', () => {
 	describe('Task Detail View', () => {
 		beforeEach(() => {
 			TaskCommentFactory.truncate()
+			LabelTaskFactory.truncate()
 		})
 
 		it('Shows all task details', () => {
@@ -344,21 +381,31 @@ describe('Task', () => {
 
 			cy.visit(`/tasks/${tasks[0].id}`)
 
-			cy.get('.task-view .action-buttons .button')
-				.contains('Add Labels')
-				.click()
-			cy.get('.task-view .details.labels-list .multiselect input')
-				.type(labels[0].title)
-			cy.get('.task-view .details.labels-list .multiselect .search-results')
-				.children()
-				.first()
+			addLabelToTaskAndVerify(labels[0].title)
+		})
+		
+		it('Can add a label to a task and it shows up on the kanban board afterwards', () => {
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+				list_id: lists[0].id,
+				bucket_id: buckets[0].id,
+			})
+			const labels = LabelFactory.create(1)
+			LabelTaskFactory.truncate()
+			
+			cy.visit(`/lists/${lists[0].id}/kanban`)
+			
+			cy.get('.bucket .task')
+				.contains(tasks[0].title)
 				.click()
 			
-			cy.get('.global-notification', { timeout: 4000 })
-				.should('contain', 'Success')
-			cy.get('.task-view .details.labels-list .multiselect .input-wrapper span.tag')
-				.should('exist')
-				.should('contain', labels[0].title)
+			addLabelToTaskAndVerify(labels[0].title)
+			
+			cy.get('.modal-content .close')
+				.click()
+			
+			cy.get('.bucket .task')
+				.should('contain.text', labels[0].title)
 		})
 
 		it('Can remove a label from a task', () => {
@@ -417,5 +464,87 @@ describe('Task', () => {
 			cy.get('.global-notification')
 				.should('contain', 'Success')
 		})
+		
+		it('Can set a priority for a task', () => {
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+			})
+			cy.visit(`/tasks/${tasks[0].id}`)
+
+			cy.get('.task-view .action-buttons .button')
+				.contains('Set Priority')
+				.click()
+			cy.get('.task-view .columns.details .column')
+				.contains('Priority')
+				.get('.select select')
+				.select('Urgent')
+			cy.get('.global-notification')
+				.should('contain', 'Success')
+
+			cy.get('.task-view .columns.details .column')
+				.contains('Priority')
+				.get('.select select')
+				.should('have.value', '4')
+		})
+
+		it('Can set the progress for a task', () => {
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+			})
+			cy.visit(`/tasks/${tasks[0].id}`)
+
+			cy.get('.task-view .action-buttons .button')
+				.contains('Set Progress')
+				.click()
+			cy.get('.task-view .columns.details .column')
+				.contains('Progress')
+				.get('.select select')
+				.select('50%')
+			cy.get('.global-notification')
+				.should('contain', 'Success')
+			
+			cy.wait(200)
+
+			cy.get('.task-view .columns.details .column')
+				.contains('Progress')
+				.get('.select select')
+				.should('be.visible')
+				.should('have.value', '0.5')
+		})
+		
+		it('Can add an attachment to a task', () => {
+			TaskAttachmentFactory.truncate()
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+			})
+			cy.visit(`/tasks/${tasks[0].id}`)
+
+			uploadAttachmentAndVerify(tasks[0].id)
+		})
+
+		it('Can add an attachment to a task and see it appearing on kanban', () => {
+			TaskAttachmentFactory.truncate()
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+				list_id: lists[0].id,
+				bucket_id: buckets[0].id,
+			})
+			const labels = LabelFactory.create(1)
+			LabelTaskFactory.truncate()
+
+			cy.visit(`/lists/${lists[0].id}/kanban`)
+
+			cy.get('.bucket .task')
+				.contains(tasks[0].title)
+				.click()
+
+			uploadAttachmentAndVerify(tasks[0].id)
+
+			cy.get('.modal-content .close')
+				.click()
+
+			cy.get('.bucket .task .footer .icon svg.fa-paperclip')
+				.should('exist')
+		})
 	})
 })

cypress/factories/task_attachments.ts

@@ -0,0 +1,17 @@
+import {Factory} from '../support/factory'
+import {formatISO} from 'date-fns'
+
+export class TaskAttachmentFactory extends Factory {
+	static table = 'task_attachments'
+	
+	static factory() {
+		const now = new Date()
+
+		return {
+			id: '{increment}',
+			task_id: 1,
+			file_id: 1,
+			created: formatISO(now),
+		}
+	}
+}

flake.lock

@@ -0,0 +1,25 @@
+{
+  "nodes": {
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1664753041,
+        "narHash": "sha256-0ogaD8PaGHluARFeupofvk1Nq9gpVeZdlFM0Kcwguys=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "a62844b302507c7531ad68a86cb7aa54704c9cb4",
+        "type": "github"
+      },
+      "original": {
+        "id": "nixpkgs",
+        "type": "indirect"
+      }
+    },
+    "root": {
+      "inputs": {
+        "nixpkgs": "nixpkgs"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,10 @@
+{
+  description = "Vikunja frontend dev environment";
+
+  outputs = { self, nixpkgs }:
+    let pkgs = nixpkgs.legacyPackages.x86_64-linux;
+    in {
+      defaultPackage.x86_64-linux =
+        pkgs.mkShell { buildInputs = [ pkgs.nodePackages.pnpm pkgs.cypress ]; };
+    };
+}

index.html

@@ -1,10 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<title>Vikunja</title>
 	<meta charset="utf-8">
-	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width,initial-scale=1.0">
+	<title>Vikunja</title>
 	<meta name="description" content="Vikunja (/vɪˈkuːnjə/) - The to-do app to organize your life.">
 	<meta name="theme-color" content="#1973ff"/>
 

package.json

@@ -24,15 +24,15 @@
     "@fortawesome/vue-fontawesome": "3.0.1",
     "@github/hotkey": "2.0.1",
     "@kyvg/vue3-notification": "2.4.1",
-    "@sentry/tracing": "7.13.0",
-    "@sentry/vue": "7.13.0",
+    "@sentry/tracing": "7.15.0",
+    "@sentry/vue": "7.15.0",
     "@types/is-touch-device": "1.0.0",
     "@types/lodash.clonedeep": "4.5.7",
     "@types/sortablejs": "1.15.0",
-    "@vueuse/core": "9.2.0",
-    "@vueuse/router": "9.2.0",
+    "@vueuse/core": "9.3.0",
+    "@vueuse/router": "9.3.0",
     "axios": "0.27.2",
-    "blurhash": "2.0.0",
+    "blurhash": "2.0.3",
     "bulma-css-variables": "0.9.33",
     "camel-case": "4.1.2",
     "codemirror": "5.65.9",
@@ -41,63 +41,66 @@
     "easymde": "2.18.0",
     "flatpickr": "4.6.13",
     "flexsearch": "0.7.21",
+    "floating-vue": "2.0.0-beta.20",
     "highlight.js": "11.6.0",
     "is-touch-device": "1.0.1",
     "lodash.clonedeep": "4.5.0",
     "lodash.debounce": "4.0.8",
-    "marked": "4.1.0",
-    "minimist": "1.2.6",
-    "pinia": "2.0.22",
+    "marked": "4.1.1",
+    "minimist": "1.2.7",
+    "pinia": "2.0.23",
     "register-service-worker": "1.7.2",
     "snake-case": "3.0.4",
     "sortablejs": "1.15.0",
     "ufo": "0.8.5",
-    "v-tooltip": "4.0.0-beta.17",
-    "vue": "3.2.39",
-    "vue-advanced-cropper": "2.8.3",
+    "vue": "3.2.40",
+    "vue-advanced-cropper": "2.8.6",
     "vue-drag-resize": "2.0.3",
-    "vue-flatpickr-component": "9.0.6",
+    "vue-flatpickr-component": "9.0.8",
     "vue-i18n": "9.2.2",
     "vue-router": "4.1.5",
-    "vuex": "4.0.2",
     "workbox-precaching": "6.5.4",
     "zhyswan-vuedraggable": "4.1.3"
   },
   "devDependencies": {
     "@4tw/cypress-drag-drop": "2.2.1",
-    "@cypress/vite-dev-server": "3.1.1",
+    "@cypress/vite-dev-server": "3.3.1",
     "@cypress/vue": "4.2.0",
     "@faker-js/faker": "7.5.0",
+    "@rushstack/eslint-patch": "1.2.0",
     "@types/dompurify": "2.3.4",
     "@types/flexsearch": "0.7.3",
-    "@typescript-eslint/eslint-plugin": "5.38.0",
-    "@typescript-eslint/parser": "5.38.0",
+    "@types/lodash.debounce": "4.0.7",
+    "@types/marked": "4.0.7",
+    "@types/node": "16.11.65",
+    "@typescript-eslint/eslint-plugin": "5.40.0",
+    "@typescript-eslint/parser": "5.40.0",
     "@vitejs/plugin-legacy": "2.2.0",
-    "@vitejs/plugin-vue": "3.1.0",
+    "@vitejs/plugin-vue": "3.1.2",
     "@vue/eslint-config-typescript": "11.0.2",
-    "@vue/test-utils": "2.0.2",
+    "@vue/test-utils": "2.1.0",
     "@vue/tsconfig": "0.1.3",
     "autoprefixer": "10.4.12",
     "browserslist": "4.21.4",
-    "caniuse-lite": "1.0.30001406",
-    "cypress": "10.8.0",
-    "esbuild": "0.15.8",
-    "eslint": "8.23.1",
-    "eslint-plugin-vue": "9.5.1",
-    "express": "4.18.1",
-    "happy-dom": "6.0.4",
-    "netlify-cli": "11.8.0",
-    "postcss": "8.4.16",
+    "caniuse-lite": "1.0.30001418",
+    "cypress": "10.10.0",
+    "esbuild": "0.15.10",
+    "eslint": "8.25.0",
+    "eslint-plugin-vue": "9.6.0",
+    "express": "4.18.2",
+    "happy-dom": "7.4.0",
+    "netlify-cli": "12.0.7",
+    "postcss": "8.4.17",
     "postcss-preset-env": "7.8.2",
-    "rollup": "2.79.1",
-    "rollup-plugin-visualizer": "5.8.1",
+    "rollup": "3.0.0",
+    "rollup-plugin-visualizer": "5.8.2",
     "sass": "1.55.0",
-    "typescript": "4.8.3",
-    "vite": "3.1.3",
+    "typescript": "4.8.4",
+    "vite": "3.1.7",
     "vite-plugin-pwa": "0.13.1",
     "vite-svg-loader": "3.6.0",
-    "vitest": "0.23.4",
-    "vue-tsc": "0.40.13",
+    "vitest": "0.24.1",
+    "vue-tsc": "1.0.5",
     "wait-on": "6.0.1",
     "workbox-cli": "6.5.4"
   },
@@ -107,5 +110,5 @@
     }
   },
   "license": "AGPL-3.0-or-later",
-  "packageManager": "pnpm@7.12.1"
+  "packageManager": "pnpm@7.13.4"
 }

renovate.json

@@ -6,7 +6,7 @@
   ],
   "packageRules": [
     {
-      "matchPackageNames": ["netlify-cli"],
+      "matchPackageNames": ["netlify-cli", "happy-dom"],
       "extends": ["schedule:weekly"]
     },
     {

src/App.vue

@@ -18,7 +18,6 @@
 import {computed, watch, type Ref} from 'vue'
 import {useRouter} from 'vue-router'
 import {useRouteQuery} from '@vueuse/router'
-import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 import isTouchDevice from 'is-touch-device'
 import {success} from '@/message'
@@ -34,17 +33,20 @@ import Ready from '@/components/misc/ready.vue'
 import {setLanguage} from './i18n'
 import AccountDeleteService from '@/services/accountDelete'
 
+import {useBaseStore} from '@/stores/base'
 import {useColorScheme} from '@/composables/useColorScheme'
 import {useBodyClass} from '@/composables/useBodyClass'
+import {useAuthStore} from './stores/auth'
 
-const store = useStore()
+const baseStore = useBaseStore()
+const authStore = useAuthStore()
 const router = useRouter()
 
 useBodyClass('is-touch', isTouchDevice())
-const keyboardShortcutsActive = computed(() => store.state.keyboardShortcutsActive)
+const keyboardShortcutsActive = computed(() => baseStore.keyboardShortcutsActive)
 
-const authUser = computed(() => store.getters['auth/authUser'])
-const authLinkShare = computed(() => store.getters['auth/authLinkShare'])
+const authUser = computed(() => authStore.authUser)
+const authLinkShare = computed(() => authStore.authLinkShare)
 
 const {t} = useI18n({useScope: 'global'})
 
@@ -58,7 +60,7 @@ watch(accountDeletionConfirm, async (accountDeletionConfirm) => {
 	const accountDeletionService = new AccountDeleteService()
 	await accountDeletionService.confirm(accountDeletionConfirm)
 	success({message: t('user.deletion.confirmSuccess')})
-	store.dispatch('auth/refreshUserInfo')
+	authStore.refreshUserInfo()
 }, { immediate: true })
 
 // setup password reset redirect

src/components/date/datemathHelp.vue

@@ -6,13 +6,13 @@
 			{{ $t('input.datemathHelp.intro') }}
 		</p>
 		<p>
-			<i18n-t keypath="input.datemathHelp.expression">
+			<i18n-t keypath="input.datemathHelp.expression" scope="global">
 				<code>now</code>
 				<code>||</code>
 			</i18n-t>
 		</p>
 		<p>
-			<i18n-t keypath="input.datemathHelp.similar">
+			<i18n-t keypath="input.datemathHelp.similar" scope="global">
 				<BaseButton
 					href="https://grafana.com/docs/grafana/latest/dashboards/time-range-controls/"
 					target="_blank">
@@ -99,7 +99,7 @@
 			<tr>
 				<td><code>{{ exampleDate }}||+1M/d</code></td>
 				<td>
-					<i18n-t keypath="input.datemathHelp.examples.datePlusMonth">
+					<i18n-t keypath="input.datemathHelp.examples.datePlusMonth" scope="global">
 						<code>{{ exampleDate }}</code>
 					</i18n-t>
 				</td>

src/components/date/datepickerWithRange.vue

@@ -71,7 +71,6 @@
 
 <script lang="ts" setup>
 import {computed, ref, watch} from 'vue'
-import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import flatPickr from 'vue-flatpickr-component'
@@ -81,8 +80,9 @@ 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'
+import {useAuthStore} from '@/stores/auth'
 
-const store = useStore()
+const authStore = useAuthStore()
 const {t} = useI18n({useScope: 'global'})
 
 const emit = defineEmits(['update:modelValue'])
@@ -93,7 +93,7 @@ const props = defineProps({
 })
 
 // FIXME: This seems to always contain the default value - that breaks the picker
-const weekStart = computed<number>(() => store.state.auth.settings.weekStart ?? 0)
+const weekStart = computed(() => authStore.settings.weekStart ?? 0)
 const flatPickerConfig = computed(() => ({
 	altFormat: t('date.altFormatLong'),
 	altInput: true,
@@ -118,7 +118,13 @@ watch(
 	newValue => {
 		from.value = newValue.dateFrom
 		to.value = newValue.dateTo
+		// Only set the date back to flatpickr when it's an actual date.
+		// Otherwise flatpickr runs in an endless loop and slows down the browser.
+		const dateFrom = new Date(from.value)
+		const dateTo = new Date(to.value)
+		if (dateTo.getTime() === dateTo.getTime() && dateFrom.getTime() === dateFrom.getTime()) {
 			flatpickrRange.value = `${from.value} to ${to.value}`
+		}
 	},
 )
 

src/components/home/MenuButton.vue

@@ -1,8 +1,8 @@
 <template>
 	<BaseButton
 		class="menu-show-button"
-		@click="$store.commit('toggleMenu')"
-		@shortkey="() => $store.commit('toggleMenu')"
+		@click="baseStore.toggleMenu()"
+		@shortkey="() => baseStore.toggleMenu()"
 		v-shortcut="'Control+e'"
 		:title="$t('keyboardShortcuts.toggleMenu')"
 		:aria-label="menuActive ? $t('misc.hideMenu') : $t('misc.showMenu')"
@@ -11,12 +11,12 @@
 
 <script setup lang="ts">
 import {computed} from 'vue'
-import {useStore} from '@/store'
+import {useBaseStore} from '@/stores/base'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 
-const store = useStore()
-const menuActive = computed(() => store.state.menuActive)
+const baseStore = useBaseStore()
+const menuActive = computed(() => baseStore.menuActive)
 </script>
 
 <style lang="scss" scoped>

src/components/home/TheNavigation.vue

@@ -70,7 +70,7 @@
 						{{ $t('navigation.privacy') }}
 					</dropdown-item>
 					<dropdown-item
-						@click="$store.commit('keyboardShortcutsActive', true)"
+						@click="baseStore.setKeyboardShortcutsActive(true)"
 					>
 						{{ $t('keyboardShortcuts.title') }}
 					</dropdown-item>
@@ -92,10 +92,7 @@
 
 <script setup lang="ts">
 import {ref, computed, onMounted, nextTick} from 'vue'
-import {useStore} from '@/store'
-import {useRouter} from 'vue-router'
 
-import {QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
 import {RIGHTS as Rights} from '@/constants/rights'
 
 import Update from '@/components/home/update.vue'
@@ -109,16 +106,23 @@ import MenuButton from '@/components/home/MenuButton.vue'
 
 import {getListTitle} from '@/helpers/getListTitle'
 
-const store = useStore()
+import {useBaseStore} from '@/stores/base'
+import {useConfigStore} from '@/stores/config'
+import {useAuthStore} from '@/stores/auth'
 
-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 menuActive = computed(() => store.state.menuActive)
+const baseStore = useBaseStore()
+const currentList = computed(() => baseStore.currentList)
+const background = computed(() => baseStore.background)
+const canWriteCurrentList = computed(() => baseStore.currentList.maxRight > Rights.READ)
+const menuActive = computed(() => baseStore.menuActive)
+
+const authStore = useAuthStore()
+const userInfo = computed(() => authStore.info)
+const userAvatar = computed(() => authStore.avatarUrl)
+
+const configStore = useConfigStore()
+const imprintUrl = computed(() => configStore.legal.imprintUrl)
+const privacyPolicyUrl = computed(() => configStore.legal.privacyPolicyUrl)
 
 const usernameDropdown = ref()
 const listTitle = ref()
@@ -132,15 +136,12 @@ onMounted(async () => {
 	listTitle.value.style.setProperty('--nav-username-width', `${usernameWidth}px`)
 })
 
-const router = useRouter()
-
 function logout() {
-	store.dispatch('auth/logout')
-	router.push({name: 'user.login'})
+	authStore.logout()
 }
 
 function openQuickActions() {
-	store.commit(QUICK_ACTIONS_ACTIVE, true)
+	baseStore.setQuickActionsActive(true)
 }
 </script>
 

src/components/home/contentAuth.vue

@@ -2,7 +2,7 @@
 	<div class="content-auth">
 		<BaseButton
 			v-if="menuActive"
-			@click="$store.commit('menuActive', false)"
+			@click="baseStore.setMenuActive(false)"
 			class="menu-hide-button d-print-none"
 		>
 			<icon icon="times"/>
@@ -26,7 +26,7 @@
 			>
 				<BaseButton
 					v-if="menuActive"
-					@click="$store.commit('menuActive', false)"
+					@click="baseStore.setMenuActive(false)"
 					class="mobile-overlay d-print-none"
 				/>
 
@@ -60,82 +60,34 @@
 </template>
 
 <script lang="ts" setup>
-import {watch, computed, shallowRef, watchEffect, type VNode, h} from 'vue'
-import {useStore} from '@/store'
-import {useRoute, useRouter} from 'vue-router'
-import {useEventListener} from '@vueuse/core'
+import {watch, computed} from 'vue'
+import {useRoute} from 'vue-router'
 
-import {CURRENT_LIST, KEYBOARD_SHORTCUTS_ACTIVE, MENU_ACTIVE} from '@/store/mutation-types'
-import {useLabelStore} from '@/stores/labels'
 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)
+import {useBaseStore} from '@/stores/base'
+import {useLabelStore} from '@/stores/labels'
 
-	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}
-}
+import {useRouteWithModal} from '@/composables/useRouteWithModal'
+import {useRenewTokenOnFocus} from '@/composables/useRenewTokenOnFocus'
 
 const {routeWithModal, currentModal, closeModal} = useRouteWithModal()
 
-const store = useStore()
-
-const background = computed(() => store.state.background)
-const blurHash = computed(() => store.state.blurHash)
-const menuActive = computed(() => store.state.menuActive)
+const baseStore = useBaseStore()
+const background = computed(() => baseStore.background)
+const blurHash = computed(() => baseStore.blurHash)
+const menuActive = computed(() => baseStore.menuActive)
 
 function showKeyboardShortcuts() {
-	store.commit(KEYBOARD_SHORTCUTS_ACTIVE, true)
+	baseStore.setKeyboardShortcutsActive(true)
 }
 
 const route = useRoute()
 
 // hide menu on mobile
-watch(() => route.fullPath, () => window.innerWidth < 769 && store.commit(MENU_ACTIVE, false))
+watch(() => route.fullPath, () => window.innerWidth < 769 && baseStore.setMenuActive(false))
 
 // FIXME: this is really error prone
 // Reset the current list highlight in menu if the current route is not list related.
@@ -157,47 +109,14 @@ watch(() => route.name as string, (routeName) => {
 			routeName.startsWith('user.settings')
 		)
 	) {
-		store.dispatch(CURRENT_LIST, {list: null})
+		baseStore.handleSetCurrentList({list: null})
 	}
 })
 
 // TODO: Reset the title if the page component does not set one itself
 
-function useRenewTokenOnFocus() {
-	const router = useRouter()
-
-	const userInfo = computed(() => store.state.auth.info)
-	const authenticated = computed(() => store.state.auth.authenticated)
-
-	// Try renewing the token every time vikunja is loaded initially
-	// (When opening the browser the focus event is not fired)
-	store.dispatch('auth/renewToken')
-
-	// Check if the token is still valid if the window gets focus again to maybe renew it
-	useEventListener('focus', () => {
-		if (!authenticated.value) {
-			return
-		}
-
-		const expiresIn = (userInfo.value !== null ? userInfo.value.exp : 0) - +new Date() / 1000
-
-		// If the token expiry is negative, it is already expired and we have no choice but to redirect
-		// the user to the login page
-		if (expiresIn < 0) {
-			store.dispatch('auth/checkAuth')
-			router.push({name: 'user.login'})
-			return
-		}
-
-		// Check if the token is valid for less than 60 hours and renew if thats the case
-		if (expiresIn < 60 * 3600) {
-			store.dispatch('auth/renewToken')
-			console.debug('renewed token')
-		}
-	})
-}
-
 useRenewTokenOnFocus()
+
 const labelStore = useLabelStore()
 labelStore.loadAllLabels()
 </script>

src/components/home/contentLinkShare.vue

@@ -24,15 +24,16 @@
 
 <script lang="ts" setup>
 import {computed} from 'vue'
-import {useStore} from '@/store'
+
+import {useBaseStore} from '@/stores/base'
 
 import Logo from '@/components/home/Logo.vue'
 import PoweredByLink from './PoweredByLink.vue'
 
-const store = useStore()
-const currentList = computed(() => store.state.currentList)
-const background = computed(() => store.state.background)
-const logoVisible = computed(() => store.state.logoVisible)
+const baseStore = useBaseStore()
+const currentList = computed(() => baseStore.currentList)
+const background = computed(() => baseStore.background)
+const logoVisible = computed(() => baseStore.logoVisible)
 </script>
 
 <style lang="scss" scoped>

src/components/home/navigation.vue

@@ -141,7 +141,6 @@
 
 <script setup lang="ts">
 import {ref, computed, onMounted, onBeforeMount} from 'vue'
-import {useStore} from '@/store'
 import draggable from 'zhyswan-vuedraggable'
 import type {SortableEvent} from 'sortablejs'
 
@@ -151,7 +150,6 @@ import NamespaceSettingsDropdown from '@/components/namespace/namespace-settings
 import PoweredByLink from '@/components/home/PoweredByLink.vue'
 import Logo from '@/components/home/Logo.vue'
 
-import {MENU_ACTIVE} from '@/store/mutation-types'
 import {calculateItemPosition} from '@/helpers/calculateItemPosition'
 import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
 import {getListTitle} from '@/helpers/getListTitle'
@@ -159,6 +157,8 @@ import {useEventListener} from '@vueuse/core'
 import type {IList} from '@/modelTypes/IList'
 import type {INamespace} from '@/modelTypes/INamespace'
 import ColorBubble from '@/components/misc/colorBubble.vue'
+
+import {useBaseStore} from '@/stores/base'
 import {useListStore} from '@/stores/lists'
 import {useNamespaceStore} from '@/stores/namespaces'
 
@@ -168,10 +168,10 @@ const dragOptions = {
 	ghostClass: 'ghost',
 }
 
-const store = useStore()
+const baseStore = useBaseStore()
 const namespaceStore = useNamespaceStore()
-const currentList = computed(() => store.state.currentList)
-const menuActive = computed(() => store.state.menuActive)
+const currentList = computed(() => baseStore.currentList)
+const menuActive = computed(() => baseStore.menuActive)
 const loading = computed(() => namespaceStore.isLoading)
 
 
@@ -202,7 +202,7 @@ const listStore = useListStore()
 
 function resize() {
 	// Hide the menu by default on mobile
-	store.commit(MENU_ACTIVE, window.innerWidth >= 770)
+	baseStore.setMenuActive(window.innerWidth >= 770)
 }
 
 function toggleLists(namespaceId: INamespace['id']) {
@@ -262,7 +262,7 @@ async function saveListPosition(e: SortableEvent) {
 	)
 
 	try {
-		// create a copy of the list in order to not violate vuex mutations
+		// create a copy of the list in order to not violate pinia manipulation
 		await listStore.updateList({
 			...list,
 			position,

src/components/input/colorPicker.vue

@@ -34,9 +34,8 @@
 	</div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
-
+<script setup lang="ts">
+import {computed, ref, toRef, watch} from 'vue'
 import {createRandomID} from '@/helpers/randomId'
 
 const DEFAULT_COLORS = [
@@ -48,17 +47,12 @@ const DEFAULT_COLORS = [
 	'#00db60',
 ]
 
-export default defineComponent({
-	name: 'colorPicker',
-	data() {
-		return {
-			color: '',
-			lastChangeTimeout: null,
-			defaultColors: DEFAULT_COLORS,
-			colorListID: createRandomID(),
-		}
-	},
-	props: {
+const color = ref('')
+const lastChangeTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
+const defaultColors = ref(DEFAULT_COLORS)
+const colorListID = ref(createRandomID())
+
+const props = defineProps({
 	modelValue: {
 		type: String,
 		required: true,
@@ -67,47 +61,43 @@ export default defineComponent({
 		type: String,
 		default: 'top',
 	},
-	},
-	emits: ['update:modelValue'],
-	watch: {
-		modelValue: {
-			handler(modelValue) {
-				this.color = modelValue
-			},
-			immediate: true,
-		},
-		color() {
-			this.update()
-		},
-	},
-	computed: {
-		isEmpty() {
-			return this.color === '#000000' || this.color === ''
-		},
-	},
-	methods: {
-		update(force = false) {
+})
 
-			if(this.isEmpty && !force) {
+const emit = defineEmits(['update:modelValue'])
+
+const modelValue = toRef(props, 'modelValue')
+watch(
+	modelValue,
+	(newValue) => {
+		color.value = newValue
+	},
+	{immediate: true},
+)
+
+watch(color, () => update())
+
+const isEmpty = computed(() => color.value === '#000000' || color.value === '')
+
+function update(force = false) {
+	if(isEmpty.value && !force) {
 		return
 	}
 
-			if (this.lastChangeTimeout !== null) {
-				clearTimeout(this.lastChangeTimeout)
+	if (lastChangeTimeout.value !== null) {
+		clearTimeout(lastChangeTimeout.value)
 	}
 
-			this.lastChangeTimeout = setTimeout(() => {
-				this.$emit('update:modelValue', this.color)
+	lastChangeTimeout.value = setTimeout(() => {
+		emit('update:modelValue', color.value)
 	}, 500)
-		},
-		reset() {
+}
+
+function reset() {
 	// FIXME: I havn't found a way to make it clear to the user the color war reset.
 	//  Not sure if verte is capable of this - it does not show the change when setting this.color = ''
-			this.color = ''
-			this.update(true)
-		},
-	},
-})
+	color.value = ''
+	update(true)
+}
 </script>
 
 <style lang="scss" scoped>

src/components/input/datepicker.vue

@@ -1,10 +1,8 @@
 <template>
 	<div class="datepicker">
-		<slot :date="date" :openPopup="toggleDatePopup">
 		<BaseButton @click.stop="toggleDatePopup" class="show" :disabled="disabled || undefined">
 			{{ date === null ? chooseDateLabel : formatDateShort(date) }}
 		</BaseButton>
-		</slot>
 
 		<transition name="fade">
 			<div v-if="show" class="datepicker-popup" ref="datepickerPopup">
@@ -90,12 +88,10 @@
 	</div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
-
+<script setup lang="ts">
+import {ref, onMounted, onBeforeUnmount, toRef, watch, computed, type PropType} from 'vue'
 import flatPickr from 'vue-flatpickr-component'
 import 'flatpickr/dist/flatpickr.css'
-import {i18n} from '@/i18n'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 
@@ -104,141 +100,140 @@ import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
 import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import {createDateFromString} from '@/helpers/time/createDateFromString'
+import {useAuthStore} from '@/stores/auth'
+import {useI18n} from 'vue-i18n'
 
-export default defineComponent({
-	name: 'datepicker',
-	data() {
-		return {
-			date: null,
-			show: false,
-			changed: false,
-		}
-	},
-	components: {
-		flatPickr,
-		BaseButton,
-	},
-	props: {
+const props = defineProps({
 	modelValue: {
+		type: [Date, null, String] as PropType<Date | null | string>,
 		validator: prop => prop instanceof Date || prop === null || typeof prop === 'string',
+		default: null,
 	},
 	chooseDateLabel: {
 		type: String,
 		default() {
-				return i18n.global.t('input.datepicker.chooseDate')
+			const {t} = useI18n({useScope: 'global'})
+			return t('input.datepicker.chooseDate')
 		},
 	},
 	disabled: {
 		type: Boolean,
 		default: false,
 	},
-	},
-	emits: ['update:modelValue', 'close', 'close-on-change'],
-	mounted() {
-		document.addEventListener('click', this.hideDatePopup)
-	},
-	beforeUnmount() {
-		document.removeEventListener('click', this.hideDatePopup)
-	},
-	watch: {
-		modelValue: {
-			handler: 'setDateValue',
-			immediate: true,
-		},
-	},
-	computed: {
-		flatPickerConfig() {
-			return {
-				altFormat: this.$t('date.altFormatLong'),
+})
+
+const emit = defineEmits(['update:modelValue', 'close', 'close-on-change'])
+
+const {t} = useI18n({useScope: 'global'})
+
+const date = ref<Date | null>()
+const show = ref(false)
+const changed = ref(false)
+
+onMounted(() => document.addEventListener('click', hideDatePopup))
+onBeforeUnmount(() =>document.removeEventListener('click', hideDatePopup))
+
+const modelValue = toRef(props, 'modelValue')
+watch(
+	modelValue,
+	setDateValue,
+	{immediate: true},
+)
+
+const authStore = useAuthStore()
+const weekStart = computed(() => authStore.settings.weekStart)
+const flatPickerConfig = computed(() => ({
+	altFormat: t('date.altFormatLong'),
 	altInput: true,
 	dateFormat: 'Y-m-d H:i',
 	enableTime: true,
 	time_24hr: true,
 	inline: true,
 	locale: {
-					firstDayOfWeek: this.$store.state.auth.settings.weekStart,
+		firstDayOfWeek: weekStart.value,
 	},
-			}
-		},
-		// Since flatpickr dates are strings, we need to convert them to native date objects.
-		// To make that work, we need a separate variable since flatpickr does not have a change event.
-		flatPickrDate: {
-			set(newValue) {
-				this.date = createDateFromString(newValue)
-				this.updateData()
+}))
+
+// Since flatpickr dates are strings, we need to convert them to native date objects.
+// To make that work, we need a separate variable since flatpickr does not have a change event.
+const flatPickrDate = computed({
+	set(newValue: string | Date) {
+		date.value = createDateFromString(newValue)
+		updateData()
 	},
 	get() {
-				if (!this.date) {
+		if (!date.value) {
 			return ''
 		}
 
-				return formatDate(this.date, 'yyy-LL-dd H:mm')
+		return formatDate(date.value, 'yyy-LL-dd H:mm')
 	},
-		},
-	},
-	methods: {
-		formatDateShort,
-		setDateValue(newVal) {
-			if (newVal === null) {
-				this.date = null
+})
+
+
+function setDateValue(dateString: string | Date | null) {
+	if (dateString === null) {
+		date.value = null
 		return
 	}
-			this.date = createDateFromString(newVal)
-		},
-		updateData() {
-			this.changed = true
-			this.$emit('update:modelValue', this.date)
-		},
-		toggleDatePopup() {
-			if (this.disabled) {
+	date.value = createDateFromString(dateString)
+}
+
+function updateData() {
+	changed.value = true
+	emit('update:modelValue', date.value)
+}
+
+function toggleDatePopup() {
+	if (props.disabled) {
 		return
 	}
 
-			this.show = !this.show
-		},
-		hideDatePopup(e) {
-			if (this.show) {
-				closeWhenClickedOutside(e, this.$refs.datepickerPopup, this.close)
+	show.value = !show.value
+}
+
+const datepickerPopup = ref<HTMLElement | null>(null)
+function hideDatePopup(e) {
+	if (show.value) {
+		closeWhenClickedOutside(e, datepickerPopup.value, close)
 	}
-		},
-		close() {
+}
+
+function close() {
 	// Kind of dirty, but the timeout allows us to enter a time and click on "confirm" without
 	// having to click on another input field before it is actually used.
 	setTimeout(() => {
-				this.show = false
-				this.$emit('close', this.changed)
-				if (this.changed) {
-					this.changed = false
-					this.$emit('close-on-change', this.changed)
+		show.value = false
+		emit('close', changed.value)
+		if (changed.value) {
+			changed.value = false
+			emit('close-on-change', changed.value)
 		}
 	}, 200)
-		},
-		setDate(date) {
-			if (this.date === null) {
-				this.date = new Date()
+}
+
+function setDate(dateString: string) {
+	if (date.value === null) {
+		date.value = new Date()
 	}
 
-			const interval = calculateDayInterval(date)
+	const interval = calculateDayInterval(dateString)
 	const newDate = new Date()
 	newDate.setDate(newDate.getDate() + interval)
 	newDate.setHours(calculateNearestHours(newDate))
 	newDate.setMinutes(0)
 	newDate.setSeconds(0)
-			this.date = newDate
-			this.flatPickrDate = newDate
-			this.updateData()
-		},
-		getDayIntervalFromString(date) {
-			return calculateDayInterval(date)
-		},
-		getWeekdayFromStringInterval(date) {
-			const interval = calculateDayInterval(date)
+	date.value = newDate
+	flatPickrDate.value = newDate
+	updateData()
+}
+
+function getWeekdayFromStringInterval(dateString: string) {
+	const interval = calculateDayInterval(dateString)
 	const newDate = new Date()
 	newDate.setDate(newDate.getDate() + interval)
 	return formatDate(newDate, 'E')
-		},
-	},
-})
+}
 </script>
 
 <style lang="scss" scoped>

src/components/input/editor.vue

@@ -4,7 +4,7 @@
 
 		<vue-easymde
 			:configs="config"
-			@change="bubble"
+			@change="() => bubble()"
 			@update:modelValue="handleInput"
 			class="content"
 			v-if="isEditActive"
@@ -66,32 +66,28 @@
 	</div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
+<script setup lang="ts">
+import {computed, nextTick, onMounted, ref, toRefs, watch} from 'vue'
 
 import VueEasymde from './vue-easymde.vue'
 import {marked} from 'marked'
 import DOMPurify from 'dompurify'
-import {setupMarkdownRenderer} from '@/helpers/markdownRenderer'
 
 import {createEasyMDEConfig} from './editorConfig'
 
-import AttachmentModel from '../../models/attachment'
-import AttachmentService from '../../services/attachment'
-import {findCheckboxesInText} from '../../helpers/checklistFromText'
+import AttachmentModel from '@/models/attachment'
+import AttachmentService from '@/services/attachment'
+
+import {setupMarkdownRenderer} from '@/helpers/markdownRenderer'
+import {findCheckboxesInText} from '@/helpers/checklistFromText'
 import {createRandomID} from '@/helpers/randomId'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import ButtonLink from '@/components/misc/ButtonLink.vue'
+import type { IAttachment } from '@/modelTypes/IAttachment'
+import type { ITask } from '@/modelTypes/ITask'
 
-export default defineComponent({
-	name: 'editor',
-	components: {
-		VueEasymde,
-		BaseButton,
-		ButtonLink,
-	},
-	props: {
+const props = defineProps({
 	modelValue: {
 		type: String,
 		default: '',
@@ -135,96 +131,108 @@ export default defineComponent({
 		type: String,
 		default: '',
 	},
-	},
-	emits: ['update:modelValue'],
-	computed: {
-		showPreviewText() {
-			return this.isPreviewActive && this.text === '' && this.emptyText !== ''
-		},
-		showEditButton() {
-			return !this.isEditActive && this.text !== ''
-		},
-	},
-	data() {
-		return {
-			text: '',
-			changeTimeout: null,
-			isEditActive: false,
-			isPreviewActive: true,
+})
 
-			preview: '',
-			attachmentService: null,
-			loadedAttachments: {},
-			config: createEasyMDEConfig({
-				placeholder: this.placeholder,
-				uploadImage: this.uploadEnabled,
-				imageUploadFunction: this.uploadCallback,
-			}),
-			checkboxId: createRandomID(),
-		}
+const emit = defineEmits(['update:modelValue'])
+
+const text = ref('')
+const changeTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
+const isEditActive = ref(false)
+const isPreviewActive = ref(true)
+
+const showPreviewText = computed(() => isPreviewActive.value && text.value === '' && props.emptyText !== '')
+const showEditButton = computed(() => !isEditActive.value && text.value !== '')
+
+const preview = ref('')
+const attachmentService = new AttachmentService()
+
+type CacheKey = `${ITask['id']}-${IAttachment['id']}`
+const loadedAttachments = ref<{[key: CacheKey]: string}>({})
+const config = ref(createEasyMDEConfig({
+	placeholder: props.placeholder,
+	uploadImage: props.uploadEnabled,
+	imageUploadFunction: props.uploadCallback,
+}))
+
+const checkboxId = ref(createRandomID())
+
+const {modelValue} = toRefs(props)
+
+watch(
+	modelValue,
+	async (value) => {
+		text.value = value
+		await nextTick()
+		renderPreview()
 	},
-	watch: {
-		modelValue(modelValue) {
-			this.text = modelValue
-			this.$nextTick(this.renderPreview)
-		},
-		text(newVal, oldVal) {
+)
+
+watch(
+	text,
+	(newVal, oldVal) => {
 		// Only bubble the new value if it actually changed, but not if the component just got mounted and the text changed from the outside.
-			if (oldVal === '' && this.text === this.modelValue) {
+		if (oldVal === '' && text.value === modelValue.value) {
 			return
 		}
-			this.bubble()
+		bubble()
 	},
-	},
-	mounted() {
-		if (this.modelValue !== '') {
-			this.text = this.modelValue
+)
+
+
+onMounted(() => {
+	if (modelValue.value !== '') {
+		text.value = modelValue.value
 	}
 
-		if (this.previewIsDefault && this.hasPreview) {
-			this.$nextTick(this.renderPreview)
+	if (props.previewIsDefault && props.hasPreview) {
+		nextTick(() => renderPreview())
 		return
 	}
 
-		this.isPreviewActive = false
-		this.isEditActive = true
-	},
-	methods: {
-		// This gets triggered when only pasting content into the editor.
-		// A change event would not get generated by that, an input event does.
-		// Therefore, we're using this handler to catch paste events.
-		// But because this also gets triggered when typing into the editor, we give
-		// it a higher timeout to make the timouts cancel each other in that case so
-		// that in the end, only one change event is triggered to the outside per change.
-		handleInput(val) {
+	isPreviewActive.value = false
+	isEditActive.value = true
+})
+
+
+// This gets triggered when only pasting content into the editor.
+// A change event would not get generated by that, an input event does.
+// Therefore, we're using this handler to catch paste events.
+// But because this also gets triggered when typing into the editor, we give
+// it a higher timeout to make the timouts cancel each other in that case so
+// that in the end, only one change event is triggered to the outside per change.
+function handleInput(val: string) {
 	// Don't bubble if the text is up to date
-			if (val === this.text) {
+	if (val === text.value) {
 		return
 	}
 
-			this.text = val
-			this.bubble(1000)
-		},
-		bubble(timeout = 500) {
-			if (this.changeTimeout !== null) {
-				clearTimeout(this.changeTimeout)
+	text.value = val
+	bubble(1000)
+}
+
+function bubble(timeout = 500) {
+	if (changeTimeout.value !== null) {
+		clearTimeout(changeTimeout.value)
 	}
 
-			this.changeTimeout = setTimeout(() => {
-				this.$emit('update:modelValue', this.text)
+	changeTimeout.value = setTimeout(() => {
+		emit('update:modelValue', text.value)
 	}, timeout)
-		},
-		replaceAt(str, index, replacement) {
-			return str.substr(0, index) + replacement + str.substr(index + replacement.length)
-		},
-		findNthIndex(str, n) {
+}
+
+function replaceAt(str: string, index: number, replacement: string) {
+	return str.slice(0, index) + replacement + str.slice(index + replacement.length)
+}
+
+function findNthIndex(str: string, n: number) {
 	const checkboxes = findCheckboxesInText(str)
 	return checkboxes[n]
-		},
-		renderPreview() {
-			setupMarkdownRenderer(this.checkboxId)
+}
 
-			this.preview = DOMPurify.sanitize(marked(this.text), {ADD_ATTR: ['target']})
+function renderPreview() {
+	setupMarkdownRenderer(checkboxId.value)
+
+	preview.value = DOMPurify.sanitize(marked(text.value), {ADD_ATTR: ['target']})
 
 	// Since the render function is synchronous, we can't do async http requests in it.
 	// Therefore, we can't resolve the blob url at (markdown) compile time.
@@ -233,78 +241,70 @@ export default defineComponent({
 	// dom tree. If we're calling this right after setting this.preview it could be the images were
 	// not already made available.
 	// Some docs at https://stackoverflow.com/q/62865160/10924593
-			this.$nextTick(async () => {
-				const attachmentImage = document.getElementsByClassName('attachment-image')
+	nextTick().then(async () => {
+		const attachmentImage = document.querySelectorAll<HTMLImageElement>('.attachment-image')
 		if (attachmentImage) {
-					for (const img of attachmentImage) {
+			Array.from(attachmentImage).forEach(async (img) => {
 				// The url is something like /tasks/<id>/attachments/<id>
-						const parts = img.dataset.src.substr(window.API_URL.length + 1).split('/')
-						const taskId = parseInt(parts[1])
-						const attachmentId = parseInt(parts[3])
-						const cacheKey = `${taskId}-${attachmentId}`
+				const parts = img.dataset.src?.slice(window.API_URL.length + 1).split('/')
+				const taskId = Number(parts[1])
+				const attachmentId = Number(parts[3])
+				const cacheKey: CacheKey = `${taskId}-${attachmentId}`
 
-						if (typeof this.loadedAttachments[cacheKey] !== 'undefined') {
-							img.src = this.loadedAttachments[cacheKey]
-							continue
+				if (typeof loadedAttachments.value[cacheKey] !== 'undefined') {
+					img.src = loadedAttachments.value[cacheKey]
+					return
 				}
 
 				const attachment = new AttachmentModel({taskId: taskId, id: attachmentId})
 
-						if (this.attachmentService === null) {
-							this.attachmentService = new AttachmentService()
-						}
-
-						const url = await this.attachmentService.getBlobUrl(attachment)
+				const url = await attachmentService.getBlobUrl(attachment)
 				img.src = url
-						this.loadedAttachments[cacheKey] = url
-					}
+				loadedAttachments.value[cacheKey] = url
+			})
 		}
 
-				const textCheckbox = document.getElementsByClassName(`text-checkbox-${this.checkboxId}`)
+		const textCheckbox = document.querySelectorAll<HTMLInputElement>(`.text-checkbox-${checkboxId.value}`)
 		if (textCheckbox) {
-					for (const check of textCheckbox) {
-						check.removeEventListener('change', this.handleCheckboxClick)
-						check.addEventListener('change', this.handleCheckboxClick)
-						check.parentElement.classList.add('has-checkbox')
-					}
+			Array.from(textCheckbox).forEach(check => {
+				check.removeEventListener('change', handleCheckboxClick)
+				check.addEventListener('change', handleCheckboxClick)
+				check.parentElement?.classList.add('has-checkbox')
+			})
 		}
 	})
-		},
-		handleCheckboxClick(e) {
-			// Find the original markdown checkbox this is targeting
-			const checked = e.target.checked
-			const numMarkdownCheck = parseInt(e.target.dataset.checkboxNum)
+}
 
-			const index = this.findNthIndex(this.text, numMarkdownCheck)
+function handleCheckboxClick(e: Event) {
+	// Find the original markdown checkbox this is targeting
+	const checked = (e.target as HTMLInputElement).checked
+	const numMarkdownCheck = Number((e.target as HTMLInputElement).dataset.checkboxNum)
+
+	const index = findNthIndex(text.value, numMarkdownCheck)
 	if (index < 0 || typeof index === 'undefined') {
 		console.debug('no index found')
 		return
 	}
-			console.debug(index, this.text.substr(index, 9))
+	console.debug(index, text.value.slice(index, 9))
 
-			const listPrefix = this.text.substr(index, 1)
+	const listPrefix = text.value.slice(index, 1)
 
-			if (checked) {
-				this.text = this.replaceAt(this.text, index, `${listPrefix} [x] `)
+	text.value = replaceAt(text.value, index, `${listPrefix} ${checked ? '[x]' : '[ ]'} `)
+	bubble()
+	renderPreview()
+}
+
+function toggleEdit() {
+	if (isEditActive.value) {
+		isPreviewActive.value = true
+		isEditActive.value = false
+		renderPreview()
+		bubble(0) // save instantly
 	} else {
-				this.text = this.replaceAt(this.text, index, `${listPrefix} [ ] `)
+		isPreviewActive.value = false
+		isEditActive.value = true
 	}
-			this.bubble()
-			this.renderPreview()
-		},
-		toggleEdit() {
-			if (this.isEditActive) {
-				this.isPreviewActive = true
-				this.isEditActive = false
-				this.renderPreview()
-				this.bubble(0) // save instantly
-			} else {
-				this.isPreviewActive = false
-				this.isEditActive = true
-			}
-		},
-	},
-})
+}
 </script>
 
 <style lang="scss">

src/components/input/fancycheckbox.vue

@@ -4,8 +4,9 @@
 			:checked="checked"
 			:disabled="disabled || undefined"
 			:id="checkBoxId"
-			@change="(event) => updateData(event.target.checked)"
-			type="checkbox"/>
+			@change="(event: Event) => updateData((event.target as HTMLInputElement).checked)"
+			type="checkbox"
+		/>
 		<label :for="checkBoxId" class="check">
 			<svg height="18px" viewBox="0 0 18 18" width="18px">
 				<path
@@ -19,21 +20,17 @@
 	</div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
+<script setup lang="ts">
+import {ref, toRef, watch} from 'vue'
 
 import {createRandomID} from '@/helpers/randomId'
 
-export default defineComponent({
-	name: 'fancycheckbox',
-	data() {
-		return {
-			checked: false,
-			checkBoxId: `fancycheckbox_${createRandomID()}`,
-		}
-	},
-	props: {
+const checked = ref(false)
+const checkBoxId = `fancycheckbox_${createRandomID()}`
+
+const props = defineProps({
 	modelValue: {
+		type: Boolean,
 		required: false,
 	},
 	disabled: {
@@ -41,25 +38,24 @@ export default defineComponent({
 		required: false,
 		default: false,
 	},
-	},
-	emits: ['update:modelValue', 'change'],
-	watch: {
-		modelValue: {
-			handler(modelValue) {
-				this.checked = modelValue
-
-			},
-			immediate: true,
-		},
-	},
-	methods: {
-		updateData(checked: boolean) {
-			this.checked = checked
-			this.$emit('update:modelValue', checked)
-			this.$emit('change', checked)
-		},
-	},
 })
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const modelValue = toRef(props, 'modelValue')
+
+watch(
+	modelValue,
+	newValue => {
+		checked.value = newValue
+	},
+	{immediate: true},
+)
+
+function updateData(newChecked: boolean) {
+	checked.value = newChecked
+	emit('update:modelValue', newChecked)
+	emit('change', newChecked)
+}
 </script>
 
 

src/components/input/multiselect.vue

@@ -39,11 +39,11 @@
 			<div class="search-results" :class="{'search-results-inline': inline}" v-if="searchResultsVisible">
 				<BaseButton
 					class="is-fullwidth"
-					v-for="(data, key) in filteredSearchResults"
-					:key="key"
-					:ref="`result-${key}`"
-					@keydown.up.prevent="() => preSelect(key - 1)"
-					@keydown.down.prevent="() => preSelect(key + 1)"
+					v-for="(data, index) in filteredSearchResults"
+					:key="index"
+					:ref="(el) => setResult(el, index)"
+					@keydown.up.prevent="() => preSelect(index - 1)"
+					@keydown.down.prevent="() => preSelect(index + 1)"
 					@click.prevent.stop="() => select(data)"
 				>
 					<span>
@@ -59,7 +59,7 @@
 				<BaseButton
 					v-if="creatableAvailable"
 					class="is-fullwidth"
-					:ref="`result-${filteredSearchResults.length}`"
+					:ref="(el) => setResult(el, filteredSearchResults.length)"
 					@keydown.up.prevent="() => preSelect(filteredSearchResults.length - 1)"
 					@keydown.down.prevent="() => preSelect(filteredSearchResults.length + 1)"
 					@keyup.enter.prevent="create"
@@ -82,9 +82,10 @@
 	</div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
-import {i18n} from '@/i18n'
+<script setup lang="ts">
+import {computed, onBeforeUnmount, onMounted, ref, toRefs, watch, type ComponentPublicInstance, type PropType} from 'vue'
+import {useI18n} from 'vue-i18n'
+
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 
 import BaseButton from '@/components/base/BaseButton.vue'
@@ -98,55 +99,31 @@ function elementInResults(elem: string | any, label: string, query: string): boo
 	return elem === query
 }
 
-export default defineComponent({
-	name: 'multiselect',
-	components: {
-		BaseButton,
-	},
-	data() {
-		return {
-			query: '',
-			searchTimeout: null,
-			localLoading: false,
-			showSearchResults: false,
-			internalValue: null,
-		}
-	},
-	props: {
+const props = defineProps({
 	// When true, shows a loading spinner
 	loading: {
 		type: Boolean,
-			default() {
-				return false
-			},
+		default: false,
 	},
 	// The placeholder of the search input
 	placeholder: {
 		type: String,
-			default() {
-				return ''
-			},
+		default: '',
 	},
 	// The search results where the @search listener needs to put the results into
 	searchResults: {
-			type: Array,
-			default() {
-				return []
-			},
+		type: Array as PropType<{[id: string]: any}>,
+		default: () => [],
 	},
 	// The name of the property of the searched object to show the user.
 	// If empty the component will show all raw data of an entry.
 	label: {
 		type: String,
-			default() {
-				return ''
-			},
+		default: '',
 	},
 	// The object with the value, updated every time an entry is selected.
 	modelValue: {
-			default() {
-				return null
-			},
+		default: null,
 	},
 	// If true, will provide an "add this as a new value" entry which fires an @create event when clicking on it.
 	creatable: {
@@ -157,14 +134,16 @@ export default defineComponent({
 	createPlaceholder: {
 		type: String,
 		default() {
-				return i18n.global.t('input.multiselect.createPlaceholder')
+			const {t} = useI18n({useScope: 'global'}) 
+			return t('input.multiselect.createPlaceholder')
 		},
 	},
 	// The text shown next to an option.
 	selectPlaceholder: {
 		type: String,
 		default() {
-				return i18n.global.t('input.multiselect.selectPlaceholder')
+			const {t} = useI18n({useScope: 'global'}) 
+			return t('input.multiselect.selectPlaceholder')
 		},
 	},
 	// If true, allows for selecting multiple items. v-model will be an array with all selected values in that case.
@@ -185,136 +164,151 @@ export default defineComponent({
 	// The delay in ms after which the search event will be fired. Used to avoid hitting the network on every keystroke.
 	searchDelay: {
 		type: Number,
-			default() {
-				return 200
-			},
+		default: 200,
 	},
 	closeAfterSelect: {
 		type: Boolean,
 		default: true,
 	},
-	},
+})
 
-	/**
-	 * Available events:
-	 *   @search: Triggered every time the search query input changes
-	 *   @select: Triggered every time an option from the search results is selected. Also triggers a change in v-model.
-	 *   @create: If nothing or no exact match was found and `creatable` is true, this event is triggered with the current value of the search query.
-	 *   @remove: If `multiple` is enabled, this will be fired every time an item is removed from the array of selected items.
-	 */
-	emits: ['update:modelValue', 'search', 'select', 'create', 'remove'],
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: null): void
+	// @search: Triggered every time the search query input changes
+  (e: 'search', query: string): void
+	// @select: Triggered every time an option from the search results is selected. Also triggers a change in v-model.
+  (e: 'select', value: null): void
+	// @create: If nothing or no exact match was found and `creatable` is true, this event is triggered with the current value of the search query.
+  (e: 'create', query: string): void
+	// @remove: If `multiple` is enabled, this will be fired every time an item is removed from the array of selected items.
+  (e: 'remove', value: null): void
+}>()
 
-	mounted() {
-		document.addEventListener('click', this.hideSearchResultsHandler)
-	},
-	beforeUnmount() {
-		document.removeEventListener('click', this.hideSearchResultsHandler)
-	},
-	watch: {
-		modelValue: {
-			handler(value) {
-				this.setSelectedObject(value)
-			},
+const query = ref('')
+const searchTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
+const localLoading = ref(false)
+const showSearchResults = ref(false)
+const internalValue = ref<string | {[key: string]: any} | any[] | null>(null)
+
+onMounted(() => document.addEventListener('click', hideSearchResultsHandler))
+onBeforeUnmount(() => document.removeEventListener('click', hideSearchResultsHandler))
+
+const {modelValue, searchResults} = toRefs(props)
+
+watch(
+	modelValue,
+	(value) => setSelectedObject(value),
+	{
 		immediate: true,
 		deep: true,
 	},
-	},
-	computed: {
-		searchResultsVisible() {
-			if (this.query === '' && !this.showEmpty) {
+)
+
+const searchResultsVisible = computed(() => {
+	if (query.value === '' && !props.showEmpty) {
 		return false
 	}
 
-			return this.showSearchResults && (
-				(this.filteredSearchResults.length > 0) ||
-				(this.creatable && this.query !== '')
+	return showSearchResults.value && (
+		(filteredSearchResults.value.length > 0) ||
+		(props.creatable && query.value !== '')
 	)
-		},
-		creatableAvailable() {
-			const hasResult = this.filteredSearchResults.some(elem => elementInResults(elem, this.label, this.query))
-			const hasQueryAlreadyAdded = Array.isArray(this.internalValue) && this.internalValue.some(elem => elementInResults(elem, this.label, this.query))
+})
 
-			return this.creatable 
-				&& this.query !== '' 
+const creatableAvailable = computed(() => {
+	const hasResult = filteredSearchResults.value.some((elem: any) => elementInResults(elem, props.label, query.value))
+	const hasQueryAlreadyAdded = Array.isArray(internalValue.value) && internalValue.value.some(elem => elementInResults(elem, props.label, query.value))
+
+	return props.creatable 
+		&& query.value !== '' 
 		&& !(hasResult || hasQueryAlreadyAdded)
-		},
-		filteredSearchResults() {
-			if (this.multiple && this.internalValue !== null && Array.isArray(this.internalValue)) {
-				return this.searchResults.filter(item => !this.internalValue.some(e => e === item))
+})
+
+const filteredSearchResults = computed(() => {
+	const currentInternal = internalValue.value
+	if (props.multiple && currentInternal !== null && Array.isArray(currentInternal)) {
+		return searchResults.value.filter((item: any) => !currentInternal.some(e => e === item))
 	}
 
-			return this.searchResults
-		},
-		hasMultiple() {
-			return this.multiple && Array.isArray(this.internalValue) && this.internalValue.length > 0
-		},
-	},
-	methods: {
-		// Searching will be triggered with a 200ms delay to avoid searching on every keyup event.
-		search() {
+	return searchResults.value
+})
+
+const hasMultiple = computed(() => {
+	return props.multiple && Array.isArray(internalValue.value) && internalValue.value.length > 0
+})
+
+const searchInput = ref<HTMLInputElement | null>(null)
+// Searching will be triggered with a 200ms delay to avoid searching on every keyup event.
+function search() {
 
 	// Updating the query with a binding does not work on mobile for some reason,
 	// getting the value manual does.
-			this.query = this.$refs.searchInput.value
+	query.value = searchInput.value?.value || ''
 
-			if (this.searchTimeout !== null) {
-				clearTimeout(this.searchTimeout)
-				this.searchTimeout = null
+	if (searchTimeout.value !== null) {
+		clearTimeout(searchTimeout.value)
+		searchTimeout.value = null
 	}
 
-			this.localLoading = true
+	localLoading.value = true
 
-			this.searchTimeout = setTimeout(() => {
-				this.$emit('search', this.query)
+	searchTimeout.value = setTimeout(() => {
+		emit('search', query.value)
 		setTimeout(() => {
-					this.localLoading = false
+			localLoading.value = false
 		}, 100) // The duration of the loading timeout of the services
-				this.showSearchResults = true
-			}, this.searchDelay)
-		},
-		hideSearchResultsHandler(e) {
-			closeWhenClickedOutside(e, this.$refs.multiselectRoot, this.closeSearchResults)
-		},
-		closeSearchResults() {
-			this.showSearchResults = false
-		},
-		handleFocus() {
+		showSearchResults.value = true
+	}, props.searchDelay)
+}
+
+const multiselectRoot = ref<HTMLElement | null>(null)
+function hideSearchResultsHandler(e: MouseEvent) {
+	closeWhenClickedOutside(e, multiselectRoot.value, closeSearchResults)
+}
+
+function closeSearchResults() {
+	showSearchResults.value = false
+}
+
+function handleFocus() {
 	// We need the timeout to avoid the hideSearchResultsHandler hiding the search results right after the input
 	// is focused. That would lead to flickering pre-loaded search results and hiding them right after showing.
 	setTimeout(() => {
-				this.showSearchResults = true
+		showSearchResults.value = true
 	}, 10)
-		},
-		select(object) {
-			if (this.multiple) {
-				if (this.internalValue === null) {
-					this.internalValue = []
+}
+
+function select(object: {[key: string]: any}) {
+	if (props.multiple) {
+		if (internalValue.value === null) {
+			internalValue.value = []
 		}
 
-				this.internalValue.push(object)
+		(internalValue.value as any[]).push(object)
 	} else {
-				this.internalValue = object
+		internalValue.value = object
 	}
 
-			this.$emit('update:modelValue', this.internalValue)
-			this.$emit('select', object)
-			this.setSelectedObject(object)
-			if (this.closeAfterSelect && this.filteredSearchResults.length > 0 && !this.creatableAvailable) {
-				this.closeSearchResults()
+	emit('update:modelValue', internalValue.value)
+	emit('select', object)
+	setSelectedObject(object)
+	if (props.closeAfterSelect && filteredSearchResults.value.length > 0 && !creatableAvailable.value) {
+		closeSearchResults()
 	}
-		},
-		setSelectedObject(object, resetOnly = false) {
-			this.internalValue = object
+}
+
+function setSelectedObject(object: string | {[id: string]: any} | null, resetOnly = false) {
+	internalValue.value = object
 
 	// We assume we're getting an array when multiple is enabled and can therefore leave the query
 	// value etc as it is
-			if (this.multiple) {
-				this.query = ''
+	if (props.multiple) {
+		query.value = ''
 		return
 	}
 
 	if (object === null) {
-				this.query = ''
+		query.value = ''
 		return
 	}
 
@@ -322,15 +316,25 @@ export default defineComponent({
 		return
 	}
 
-			this.query = this.label !== '' ? object[this.label] : object
-		},
-		preSelect(index) {
+	query.value = props.label !== '' ? object[props.label] : object
+}
+
+const results = ref<(Element | ComponentPublicInstance)[]>([])
+function setResult(el: Element | ComponentPublicInstance | null, index: number) {
+	if (el === null) {
+		delete results.value[index]
+	} else {
+		results.value[index] = el
+	}
+}
+
+function preSelect(index: number) {
 	if (index < 0) {
-				this.$refs.searchInput.focus()
+		searchInput.value?.focus()
 		return
 	}
 
-			const elems = this.$refs[`result-${index}`]
+	const elems = results.value[index]
 	if (typeof elems === 'undefined' || elems.length === 0) {
 		return
 	}
@@ -341,51 +345,52 @@ export default defineComponent({
 	}
 
 	elems.focus()
-		},
-		create() {
-			if (this.query === '') {
+}
+
+function create() {
+	if (query.value === '') {
 		return
 	}
 
-			this.$emit('create', this.query)
-			this.setSelectedObject(this.query, true)
-			this.closeSearchResults()
-		},
-		createOrSelectOnEnter() {
+	emit('create', query.value)
+	setSelectedObject(query.value, true)
+	closeSearchResults()
+}
 
-			if (!this.creatableAvailable && this.searchResults.length === 1) {
-				this.select(this.searchResults[0])
+function createOrSelectOnEnter() {
+	if (!creatableAvailable.value && searchResults.value.length === 1) {
+		select(searchResults.value[0])
 		return
 	}
 
-			if (!this.creatableAvailable) {
+	if (!creatableAvailable.value) {
 		// Check if there's an exact match for our search term
-				const exactMatch = this.filteredSearchResults.find(elem => elementInResults(elem, this.label, this.query))
+		const exactMatch = filteredSearchResults.value.find((elem: any) => elementInResults(elem, props.label, query.value))
 		if(exactMatch) {
-					this.select(exactMatch)
+			select(exactMatch)
 		}
 
 		return
 	}
 
-			this.create()
-		},
-		remove(item) {
-			for (const ind in this.internalValue) {
-				if (this.internalValue[ind] === item) {
-					this.internalValue.splice(ind, 1)
+	create()
+}
+
+function remove(item: any) {
+	for (const ind in internalValue.value) {
+		if (internalValue.value[ind] === item) {
+			internalValue.value.splice(ind, 1)
 			break
 		}
 	}
 
-			this.$emit('update:modelValue', this.internalValue)
-			this.$emit('remove', item)
-		},
-		focus() {
-			this.$refs.searchInput.focus()
-		},
-	},
-})
+	emit('update:modelValue', internalValue.value)
+	emit('remove', item)
+}
+
+function focus() {
+	searchInput.value?.focus()
+}
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,6 +1,6 @@
 <template>
 	<dropdown>
-		<template v-if="isSavedFilter">
+		<template v-if="isSavedFilter(list)">
 			<dropdown-item
 				:to="{ name: 'filter.settings.edit', params: { listId: list.id } }"
 				icon="pen"
@@ -55,13 +55,13 @@
 			>
 				{{ $t('menu.archive') }}
 			</dropdown-item>
-			<task-subscription
+			<Subscription
 				class="has-no-shadow"
 				:is-button="false"
 				entity="list"
 				:entity-id="list.id"
 				:model-value="list.subscription"
-				@update:model-value="sub => subscription = sub"
+				@update:model-value="setSubscriptionInStore"
 				type="dropdown"
 			/>
 			<dropdown-item
@@ -77,14 +77,16 @@
 
 <script setup lang="ts">
 import {ref, computed, watchEffect, type PropType} from 'vue'
-import {useStore} from '@/store'
 
-import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
+import {isSavedFilter} 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 Subscription from '@/components/misc/subscription.vue'
 import type {IList} from '@/modelTypes/IList'
 import type {ISubscription} from '@/modelTypes/ISubscription'
+import {useConfigStore} from '@/stores/config'
+import {useListStore} from '@/stores/lists'
+import {useNamespaceStore} from '@/stores/namespaces'
 
 const props = defineProps({
 	list: {
@@ -93,12 +95,23 @@ const props = defineProps({
 	},
 })
 
+const listStore = useListStore()
+const namespaceStore = useNamespaceStore()
 const subscription = ref<ISubscription | null>(null)
 watchEffect(() => {
 	subscription.value = props.list.subscription ?? null
 })
 
-const store = useStore()
-const backgroundsEnabled = computed(() => store.state.config.enabledBackgroundProviders?.length > 0)
-const isSavedFilter = computed(() => getSavedFilterIdFromListId(props.list.id) > 0)
+const configStore = useConfigStore()
+const backgroundsEnabled = computed(() => configStore.enabledBackgroundProviders?.length > 0)
+
+function setSubscriptionInStore(sub: ISubscription) {
+	subscription.value = sub
+	const updatedList = {
+		...props.list,
+		subscription: sub,
+	}
+	listStore.setList(updatedList)
+	namespaceStore.setListInNamespaceById(updatedList)
+}
 </script>

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

@@ -29,37 +29,41 @@
 	</modal>
 </template>
 
-<script lang="ts">
-import {defineComponent, ref} from 'vue'
+<script setup lang="ts">
+import {computed, ref, watch} from 'vue'
 
 import Filters from '@/components/list/partials/filters.vue'
 
 import {getDefaultParams} from '@/composables/taskList'
 
-export default defineComponent({
-	name: 'filter-popup',
-	components: {
-		Filters,
-	},
-	props: {
+const	props = defineProps({
 	modelValue: {
 		required: true,
 	},
-	},
-	emits: ['update:modelValue'],
-	computed: {
-		value: {
+})
+const emit = defineEmits(['update:modelValue'])
+
+const value = computed({
 	get() {
-				return this.modelValue
+		return props.modelValue
 	},
 	set(value) {
-				this.$emit('update:modelValue', value)
+		emit('update:modelValue', value)
 	},
+})
+
+watch(
+	() => props.modelValue,
+	(modelValue) => {
+		value.value = modelValue
 	},
-		hasFilters() {
+	{immediate: true},
+)
+		
+const hasFilters = computed(() => {
 	// this.value also contains the page parameter which we don't want to include in filters
 	// eslint-disable-next-line no-unused-vars
-			const {filter_by, filter_value, filter_comparator, filter_concat, s} = this.value
+	const {filter_by, filter_value, filter_comparator, filter_concat, s} = value.value
 	const def = {...getDefaultParams()}
 
 	const params = {filter_by, filter_value, filter_comparator, filter_concat, s}
@@ -72,29 +76,13 @@ export default defineComponent({
 	}
 
 	return JSON.stringify(params) !== JSON.stringify(defaultParams)
-		},
-	},
-	watch: {
-		modelValue: {
-			handler(value) {
-				this.value = value
-			},
-			immediate: true,
-		},
-	},
-	setup() {
-		const modalOpen = ref(false)
-
-		return {
-			modalOpen,
-		}
-	},
-	methods: {
-		clearFilters() {
-			this.value = {...getDefaultParams()}
-		},
-	},
 })
+
+const modalOpen = ref(false)
+
+function clearFilters() {
+	value.value = {...getDefaultParams()}
+}
 </script>
 
 <style scoped lang="scss">

src/components/list/partials/filters.vue

@@ -1,21 +1,25 @@
 <template>
 	<card class="filters has-overflow" :title="hasTitle ? $t('filters.title') : ''">
-		<div class="field">
-			<fancycheckbox v-model="params.filter_include_nulls">
+		<div class="field is-flex is-flex-direction-column">
+			<fancycheckbox
+				v-model="params.filter_include_nulls"
+				@update:model-value="change()"
+			>
 				{{ $t('filters.attributes.includeNulls') }}
 			</fancycheckbox>
 			<fancycheckbox
 				v-model="filters.requireAllFilters"
-				@change="setFilterConcat()"
+				@update:model-value="setFilterConcat()"
 			>
 				{{ $t('filters.attributes.requireAll') }}
 			</fancycheckbox>
-			<fancycheckbox @change="setDoneFilter" v-model="filters.done">
+			<fancycheckbox v-model="filters.done" @update:model-value="setDoneFilter">
 				{{ $t('filters.attributes.showDoneTasks') }}
 			</fancycheckbox>
 			<fancycheckbox
 				v-if="!$route.name.includes('list.kanban') || !$route.name.includes('list.table')"
 				v-model="sortAlphabetically"
+				@update:model-value="change()"
 			>
 				{{ $t('filters.attributes.sortAlphabetically') }}
 			</fancycheckbox>
@@ -42,7 +46,7 @@
 				/>
 				<fancycheckbox
 					v-model="filters.usePriority"
-					@change="setPriority"
+					@update:model-value="setPriority"
 				>
 					{{ $t('filters.attributes.enablePriority') }}
 				</fancycheckbox>
@@ -58,7 +62,7 @@
 				/>
 				<fancycheckbox
 					v-model="filters.usePercentDone"
-					@change="setPercentDoneFilter"
+					@update:model-value="setPercentDoneFilter"
 				>
 					{{ $t('filters.attributes.enablePercentDone') }}
 				</fancycheckbox>
@@ -206,6 +210,7 @@ import ListService from '@/services/list'
 import NamespaceService from '@/services/namespace'
 import EditLabels from '@/components/tasks/partials/editLabels.vue'
 
+import {dateIsValid, formatISO} from '@/helpers/time/formatDate'
 import {objectToSnakeCase} from '@/helpers/case'
 import {getDefaultParams} from '@/composables/taskList'
 import {camelCase} from 'camel-case'
@@ -387,7 +392,14 @@ export default defineComponent({
 					this.params.filter_value.push(dateTo)
 				}
 
-				this.filters[camelCase(filterName)] = {dateFrom, dateTo}
+				this.filters[camelCase(filterName)] = {
+					// Passing the dates as string values avoids an endless loop between values changing 
+					// in the datepicker (bubbling up to here) and changing here and bubbling down to the 
+					// datepicker (because there's a new date instance every time this function gets called).
+					// See https://kolaente.dev/vikunja/frontend/issues/2384
+					dateFrom: dateIsValid(dateFrom) ? formatISO(dateFrom) : dateFrom,
+					dateTo: dateIsValid(dateTo) ? formatISO(dateTo) : dateTo,
+				}
 				this.change()
 				return
 			}
@@ -512,7 +524,7 @@ export default defineComponent({
 			// This is not the most ideal solution because it prevents a re-population when filters are changed 
 			// from the outside. It is still fine because we're not changing them from the outside, other than 
 			// loading them initially.
-			if(this[kind].length > 0) {
+			if (this[kind].length > 0) {
 				return
 			}
 
@@ -534,6 +546,7 @@ export default defineComponent({
 			} else {
 				this.params.filter_concat = 'or'
 			}
+			this.change()
 		},
 		setPriority() {
 			this.setSingleValueFilter('priority', 'priority', 'usePriority')
@@ -573,7 +586,7 @@ export default defineComponent({
 				return
 			}
 
-			let ids = []
+			const ids = []
 			this[kind].forEach(u => {
 				ids.push(kind === 'users' ? u.username : u.id)
 			})
@@ -608,7 +621,7 @@ export default defineComponent({
 				return
 			}
 
-			let labelIDs = []
+			const labelIDs = []
 			this.labels.forEach(u => {
 				labelIDs.push(u.id)
 			})

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

@@ -1,8 +1,8 @@
 <template>
 	<router-link
 		:class="{
-			'has-light-text': !colorIsDark(list.hexColor),
-			'has-background': blurHashUrl !== ''
+			'has-light-text': !colorIsDark(list.hexColor) || background !== null,
+			'has-background': blurHashUrl !== '' || background !== null,
 		}"
 		:style="{
 			'background-color': list.hexColor,
@@ -101,7 +101,7 @@ const listStore = useListStore()
 	overflow: hidden;
 
 	&.has-light-text .title {
-		color: var(--grey-100);
+		color: var(--grey-100) !important;
 	}
 
 	&.has-background,

src/components/misc/api-config.vue

@@ -23,17 +23,14 @@
 			</div>
 		</div>
 		<div class="api-url-info" v-else>
-			<i18n-t keypath="apiConfig.use">
+			<i18n-t keypath="apiConfig.use" scope="global">
 				<span class="url" v-tooltip="apiUrl"> {{ apiDomain }} </span>
 			</i18n-t>
 			<br/>
 			<ButtonLink class="api-config__change-button" @click="() => (configureApi = true)">{{ $t('apiConfig.change') }}</ButtonLink>
 		</div>
 
-		<message variant="success" v-if="successMsg !== '' && errorMsg === ''" class="mt-2">
-			{{ successMsg }}
-		</message>
-		<message variant="danger" v-if="errorMsg !== '' && successMsg === ''" class="mt-2">
+		<message variant="danger" v-if="errorMsg !== ''" class="mt-2">
 			{{ errorMsg }}
 		</message>
 	</div>
@@ -74,7 +71,6 @@ watch(() => props.configureOpen, (value) => {
 const {t} = useI18n({useScope: 'global'})
 
 const errorMsg = ref('')
-const successMsg = ref('')
 
 async function setApiUrl() {
 	if (apiUrl.value === '') {
@@ -99,7 +95,6 @@ async function setApiUrl() {
 		emit('foundApi', apiUrl.value)
 	} catch (e) {
 		// Still not found, url is still invalid
-		successMsg.value = ''
 		errorMsg.value = t('apiConfig.error', {domain: apiDomain.value})
 	}
 }

src/components/misc/create-edit.vue

@@ -9,7 +9,7 @@
 			@close="$router.back()"
 			:loading="loading"
 		>
-			<div :class="{'p-4': padding}">
+			<div class="p-4">
 				<slot />
 			</div>
 
@@ -72,10 +72,6 @@ defineProps({
 		type: Boolean,
 		default: false,
 	},
-	padding: {
-		type: Boolean,
-		default: true,
-	},
 })
 
 const emit = defineEmits(['create', 'primary', 'tertiary'])

src/components/misc/error.vue

@@ -1,6 +1,6 @@
 <template>
 	<message variant="danger">
-		<i18n-t keypath="loadingError.failed">
+		<i18n-t keypath="loadingError.failed" scope="global">
 			<ButtonLink @click="reload">{{ $t('loadingError.tryAgain') }}</ButtonLink>
 			<ButtonLink href="https://vikunja.io/contact/">{{ $t('loadingError.contact') }}</ButtonLink>
 		</i18n-t>

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

@@ -33,18 +33,15 @@
 </template>
 
 <script lang="ts" setup>
-import {useStore} from '@/store'
+import {useBaseStore} from '@/stores/base'
 
 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)
+	useBaseStore().setKeyboardShortcutsActive(false)
 }
 </script>
 

src/components/misc/legal.vue

@@ -8,14 +8,13 @@
 
 <script lang="ts" setup>
 import {computed} from 'vue'
-import {useStore} from '@/store'
-
 import BaseButton from '@/components/base/BaseButton.vue'
+import {useConfigStore} from '@/stores/config'
 
-const store = useStore()
+const configStore = useConfigStore()
 
-const imprintUrl = computed(() => store.state.config.legal.imprintUrl)
-const privacyPolicyUrl = computed(() => store.state.config.legal.privacyPolicyUrl)
+const imprintUrl = computed(() => configStore.legal.imprintUrl)
+const privacyPolicyUrl = computed(() => configStore.legal.privacyPolicyUrl)
 </script>
 
 <style lang="scss" scoped>

src/components/misc/modal.vue

@@ -71,10 +71,9 @@ export default {
 
 <script lang="ts" setup>
 import BaseButton from '@/components/base/BaseButton.vue'
-import {onUnmounted, ref, useAttrs, watch} from 'vue'
+import {ref, useAttrs, watchEffect} from 'vue'
 import {useScrollLock} from '@vueuse/core'
 
-
 const props = withDefaults(defineProps<{
 	enabled?: boolean,
 	overflow?: boolean,
@@ -94,14 +93,9 @@ const attrs = useAttrs()
 const modal = ref<HTMLElement | null>(null)
 const scrollLock = useScrollLock(modal)
 
-watch(
-	() => props.enabled,
-	enabled => {
-		scrollLock.value = enabled
-	},
-)
-
-onUnmounted(() => scrollLock.value = false)
+watchEffect(() => {
+	scrollLock.value = props.enabled
+})
 </script>
 
 <style lang="scss" scoped>

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

@@ -26,22 +26,23 @@
 </template>
 
 <script lang="ts" setup>
+import {computed} from 'vue'
+import {useRoute} from 'vue-router'
+import {useI18n} from 'vue-i18n'
+
 import Logo from '@/components/home/Logo.vue'
 import Message from '@/components/misc/message.vue'
 import Legal from '@/components/misc/legal.vue'
 import ApiConfig from '@/components/misc/api-config.vue'
-import {useStore} from '@/store'
-import {computed} from 'vue'
-import {useRoute} from 'vue-router'
-import {useI18n} from 'vue-i18n'
+
 import {useTitle} from '@/composables/useTitle'
+import {useConfigStore} from '@/stores/config'
+
+const configStore = useConfigStore()
+const motd = computed(() => configStore.motd)
 
 const route = useRoute()
-const store = useStore()
 const {t} = useI18n({useScope: 'global'})
-
-const motd = computed(() => store.state.config.motd)
-
 const title = computed(() => t(route.meta?.title as string || ''))
 useTitle(() => title.value)
 </script>

src/components/misc/ready.vue

@@ -42,7 +42,7 @@
 
 <script lang="ts" setup>
 import {ref, computed} from 'vue'
-import {useStore} from '@/store'
+import {useRouter, useRoute} from 'vue-router'
 
 import Logo from '@/assets/logo.svg?component'
 import ApiConfig from '@/components/misc/api-config.vue'
@@ -52,13 +52,14 @@ 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'
 
+import {useBaseStore} from '@/stores/base'
+
 const router = useRouter()
 const route = useRoute()
 
-const store = useStore()
+const baseStore = useBaseStore()
 
 const ready = ref(false)
 const online = useOnline()
@@ -68,14 +69,14 @@ const showLoading = computed(() => !ready.value && error.value === '')
 
 async function load() {
 	try {
-		await store.dispatch('loadApp')
+		await baseStore.loadApp()
 		const redirectTo = getAuthForRoute(route)
 		if (typeof redirectTo !== 'undefined') {
 			await router.push(redirectTo)
 		}
 		ready.value = true
-	} catch (e: any) {
-		error.value = e
+	} catch (e: unknown) {
+		error.value = String(e)
 	}
 }
 

src/components/misc/subscription.vue

@@ -69,17 +69,38 @@ const emit = defineEmits(['update:modelValue'])
 const subscriptionService = shallowRef(new SubscriptionService())
 
 const {t} = useI18n({useScope: 'global'})
+
 const tooltipText = computed(() => {
 	if (disabled.value) {
-		return t('task.subscription.subscribedThroughParent', {
-			entity: props.entity,
-			parent: subscriptionEntity.value,
-		})
+		if (props.entity === 'list' && subscriptionEntity.value === 'namespace') {
+			return t('task.subscription.subscribedListThroughParentNamespace')
+		}
+		if (props.entity === 'task' && subscriptionEntity.value === 'namespace') {
+			return t('task.subscription.subscribedTaskThroughParentNamespace')
+		}
+		if (props.entity === 'task' && subscriptionEntity.value === 'list') {
+			return t('task.subscription.subscribedTaskThroughParentList')
 		}
 
+		return ''
+	}
+
+	switch (props.entity) {
+		case 'namespace':
 			return props.modelValue !== null ?
-		t('task.subscription.subscribed', {entity: props.entity}) :
-		t('task.subscription.notSubscribed', {entity: props.entity})
+				t('task.subscription.subscribedNamespace') :
+				t('task.subscription.notSubscribedNamespace')
+		case 'list':
+			return props.modelValue !== null ?
+				t('task.subscription.subscribedList') :
+				t('task.subscription.notSubscribedList')
+		case 'task':
+			return props.modelValue !== null ?
+				t('task.subscription.subscribedTask') :
+				t('task.subscription.notSubscribedTask')
+	}
+
+	return ''
 })
 
 const buttonText = computed(() => props.modelValue ? t('task.subscription.unsubscribe') : t('task.subscription.subscribe'))
@@ -105,7 +126,20 @@ async function subscribe() {
 	})
 	await subscriptionService.value.create(subscription)
 	emit('update:modelValue', subscription)
-	success({message: t('task.subscription.subscribeSuccess', {entity: props.entity})})
+
+	let message = ''
+	switch (props.entity) {
+		case 'namespace':
+			message = t('task.subscription.subscribeSuccessNamespace')
+			break
+		case 'list':
+			message = t('task.subscription.subscribeSuccessList')
+			break
+		case 'task':
+			message = t('task.subscription.subscribeSuccessTask')
+			break
+	}
+	success({message})
 }
 
 async function unsubscribe() {
@@ -115,6 +149,19 @@ async function unsubscribe() {
 	})
 	await subscriptionService.value.delete(subscription)
 	emit('update:modelValue', null)
-	success({message: t('task.subscription.unsubscribeSuccess', {entity: props.entity})})
+
+	let message = ''
+	switch (props.entity) {
+		case 'namespace':
+			message = t('task.subscription.unsubscribeSuccessNamespace')
+			break
+		case 'list':
+			message = t('task.subscription.unsubscribeSuccessList')
+			break
+		case 'task':
+			message = t('task.subscription.unsubscribeSuccessTask')
+			break
+	}
+	success({message})
 }
 </script>

src/components/misc/user.vue

@@ -2,34 +2,39 @@
 	<div :class="{'is-inline': isInline}" class="user">
 		<img
 			:height="avatarSize"
-			:src="user.getAvatarUrl(avatarSize)"
+			:src="getAvatarUrl(user, avatarSize)"
 			:width="avatarSize"
 			alt=""
 			class="avatar"
-			v-tooltip="user.getDisplayName()"/>
-		<span class="username" v-if="showUsername">{{ user.getDisplayName() }}</span>
+			v-tooltip="getDisplayName(user)"/>
+		<span class="username" v-if="showUsername">{{ getDisplayName(user) }}</span>
 	</div>
 </template>
 
 <script lang="ts" setup>
+import type {PropType} from 'vue'
+
+import {getAvatarUrl, getDisplayName} from '@/models/user'
+import type {IUser} from '@/modelTypes/IUser'
+
 defineProps({
 	user: {
+		type: Object as PropType<IUser>,
 		required: true,
-		type: Object,
 	},
 	showUsername: {
-		required: false,
 		type: Boolean,
+		required: false,
 		default: true,
 	},
 	avatarSize: {
-		required: false,
 		type: Number,
+		required: false,
 		default: 50,
 	},
 	isInline: {
-		required: false,
 		type: Boolean,
+		required: false,
 		default: false,
 	},
 })

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

@@ -33,14 +33,13 @@
 			>
 				{{ $t('menu.archive') }}
 			</dropdown-item>
-			<task-subscription
-				v-if="subscription"
+			<Subscription
 				class="has-no-shadow"
 				:is-button="false"
 				entity="namespace"
 				:entity-id="namespace.id"
 				:model-value="subscription"
-				@update:model-value="sub => subscription = sub"
+				@update:model-value="setSubscriptionInStore"
 				type="dropdown"
 			/>
 			<dropdown-item
@@ -59,9 +58,10 @@ import {ref, onMounted, type PropType} from 'vue'
 
 import Dropdown from '@/components/misc/dropdown.vue'
 import DropdownItem from '@/components/misc/dropdown-item.vue'
-import TaskSubscription from '@/components/misc/subscription.vue'
+import Subscription from '@/components/misc/subscription.vue'
 import type {INamespace} from '@/modelTypes/INamespace'
 import type {ISubscription} from '@/modelTypes/ISubscription'
+import {useNamespaceStore} from '@/stores/namespaces'
 
 const props = defineProps({
 	namespace: {
@@ -70,8 +70,20 @@ const props = defineProps({
 	},
 })
 
+const namespaceStore = useNamespaceStore()
+
 const subscription = ref<ISubscription | null>(null)
 onMounted(() => {
 	subscription.value = props.namespace.subscription
 })
+
+function setSubscriptionInStore(sub: ISubscription) {
+	subscription.value = sub
+	namespaceStore.setNamespaces([
+		{
+			...props.namespace,
+			subscription: sub,
+		},
+	])
+}
 </script>

src/components/notifications/notifications.vue

@@ -24,7 +24,7 @@
 					<div class="detail">
 						<div>
 							<span class="has-text-weight-bold mr-1" v-if="n.notification.doer">
-								{{ n.notification.doer.getDisplayName() }}
+								{{ getDisplayName(n.notification.doer) }}
 							</span>
 							<BaseButton @click="() => to(n, index)()">
 								{{ n.toText(userInfo) }}
@@ -48,19 +48,20 @@
 
 <script lang="ts" setup>
 import {computed, onMounted, onUnmounted, ref} from 'vue'
+import {useRouter} from 'vue-router'
 
 import NotificationService from '@/services/notification'
 import BaseButton from '@/components/base/BaseButton.vue'
 import User from '@/components/misc/user.vue'
 import { NOTIFICATION_NAMES as names, type INotification} from '@/modelTypes/INotification'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
-import {useStore} from '@/store'
-import {useRouter} from 'vue-router'
 import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
+import {getDisplayName} from '@/models/user'
+import {useAuthStore} from '@/stores/auth'
 
 const LOAD_NOTIFICATIONS_INTERVAL = 10000
 
-const store = useStore()
+const authStore = useAuthStore()
 const router = useRouter()
 
 const allNotifications = ref<INotification[]>([])
@@ -73,7 +74,7 @@ const unreadNotifications = computed(() => {
 const notifications = computed(() => {
 	return allNotifications.value ? allNotifications.value.filter(n => n.name !== '') : []
 })
-const userInfo = computed(() => store.state.auth.info)
+const userInfo = computed(() => authStore.info)
 
 let interval: number
 

src/components/quick-actions/quick-actions.vue

@@ -61,7 +61,6 @@ import TeamService from '@/services/team'
 import NamespaceModel from '@/models/namespace'
 import TeamModel from '@/models/team'
 
-import {CURRENT_LIST, LOADING, LOADING_MODULE, QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
 import ListModel from '@/models/list'
 
 import BaseButton from '@/components/base/BaseButton.vue'
@@ -70,7 +69,12 @@ import {getHistory} from '@/modules/listHistory'
 import {parseTaskText, PrefixMode} from '@/modules/parseTaskText'
 import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
 import {PREFIXES} from '@/modules/parseTaskText'
+
+import {useBaseStore} from '@/stores/base'
 import {useListStore} from '@/stores/lists'
+import {useNamespaceStore} from '@/stores/namespaces'
+import {useLabelStore} from '@/stores/labels'
+import {useTaskStore} from '@/stores/tasks'
 
 const TYPE_LIST = 'list'
 const TYPE_TASK = 'task'
@@ -109,8 +113,10 @@ export default defineComponent({
 	},
 	computed: {
 		active() {
-			const active = this.$store.state[QUICK_ACTIONS_ACTIVE]
+			const active = useBaseStore().quickActionsActive
 			if (!active) {
+				// FIXME: computeds shouldn't have side effects.
+				// create a watcher instead
 				this.reset()
 			}
 			return active
@@ -139,7 +145,7 @@ export default defineComponent({
 						}
 
 						if (typeof ncache[l.namespaceId] === 'undefined') {
-							ncache[l.namespaceId] = this.$store.getters['namespaces/getNamespaceById'](l.namespaceId)
+							ncache[l.namespaceId] = useNamespaceStore().getNamespaceById(l.namespaceId)
 						}
 
 						return !ncache[l.namespaceId].isArchived
@@ -178,15 +184,14 @@ export default defineComponent({
 		},
 		loading() {
 			return this.taskService.loading ||
-				(this.$store.state[LOADING] && this.$store.state[LOADING_MODULE] === 'namespaces') ||
-				(this.$store.state[LOADING] && this.$store.state[LOADING_MODULE] === 'lists') ||
+				useNamespaceStore().isLoading || useListStore().isLoading ||
 				this.teamService.loading
 		},
 		placeholder() {
 			if (this.selectedCmd !== null) {
 				switch (this.selectedCmd.action) {
 					case CMD_NEW_TASK:
-						return this.$t('task.create.title')
+						return this.$t('quickActions.newTask')
 					case CMD_NEW_LIST:
 						return this.$t('quickActions.newList')
 					case CMD_NEW_NAMESPACE:
@@ -206,7 +211,7 @@ export default defineComponent({
 					case CMD_NEW_TASK:
 						return this.$t('quickActions.createTask', {title: this.currentList.title})
 					case CMD_NEW_LIST:
-						namespace = this.$store.getters['namespaces/getNamespaceById'](this.currentList.namespaceId)
+						namespace = useNamespaceStore().getNamespaceById(this.currentList.namespaceId)
 						return this.$t('quickActions.createList', {title: namespace.title})
 				}
 			}
@@ -216,7 +221,8 @@ export default defineComponent({
 			return this.$t('quickActions.hint', prefixes)
 		},
 		currentList() {
-			return Object.keys(this.$store.state[CURRENT_LIST]).length === 0 ? null : this.$store.state[CURRENT_LIST]
+			const currentList = useBaseStore().currentList
+			return Object.keys(currentList).length === 0 ? null : currentList
 		},
 		availableCmds() {
 			const cmds = []
@@ -309,7 +315,7 @@ export default defineComponent({
 			}
 
 			if (labels.length > 0) {
-				const labelIds = this.$store.getters['labels/getLabelsByExactTitles'](labels).map(l => l.id)
+				const labelIds = useLabelStore().getLabelsByExactTitles(labels).map(l => l.id)
 				if (labelIds.length > 0) {
 					params.filter_by.push('labels')
 					params.filter_value.push(labelIds.join())
@@ -357,7 +363,7 @@ export default defineComponent({
 			}, 150)
 		},
 		closeQuickActions() {
-			this.$store.commit(QUICK_ACTIONS_ACTIVE, false)
+			useBaseStore().setQuickActionsActive(false)
 		},
 		doAction(type, item) {
 			switch (type) {
@@ -410,7 +416,8 @@ export default defineComponent({
 				return
 			}
 
-			const task = await this.$store.dispatch('tasks/createNewTask', {
+			const taskStore = useTaskStore()
+			const task = await taskStore.createNewTask({
 				title: this.query,
 				listId: this.currentList.id,
 			})
@@ -436,7 +443,7 @@ export default defineComponent({
 		async newNamespace() {
 			const newNamespace = new NamespaceModel({title: this.query})
 
-			await this.$store.dispatch('namespaces/createNamespace', newNamespace)
+			await useNamespaceStore().createNamespace(newNamespace)
 			this.$message.success({message: this.$t('namespace.create.success')})
 			this.closeQuickActions()
 		},

src/components/sharing/linkSharing.vue

@@ -92,8 +92,8 @@
 						</p>
 
 						<p class="mb-2">
-							<i18n-t keypath="list.share.links.sharedBy">
-								<strong>{{ s.sharedBy.getDisplayName() }}</strong>
+							<i18n-t keypath="list.share.links.sharedBy" scope="global">
+								<strong>{{ getDisplayName(s.sharedBy) }}</strong>
 							</i18n-t>
 						</p>
 
@@ -189,7 +189,6 @@
 
 <script setup lang="ts">
 import {ref, watch, computed, shallowReactive} from 'vue'
-import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import {RIGHTS} from '@/constants/rights'
@@ -202,8 +201,10 @@ import LinkShareService from '@/services/linkShare'
 
 import {useCopyToClipboard} from '@/composables/useCopyToClipboard'
 import {success} from '@/message'
+import {getDisplayName} from '@/models/user'
 import type {ListView} from '@/types/ListView'
 import {LIST_VIEWS} from '@/types/ListView'
+import {useConfigStore} from '@/stores/config'
 
 const props = defineProps({
 	listId: {
@@ -241,8 +242,8 @@ watch(
 	{immediate: true},
 )
 
-const store = useStore()
-const frontendUrl = computed(() => store.state.config.frontendUrl)
+const configStore = useConfigStore()
+const frontendUrl = computed(() => configStore.frontendUrl)
 
 async function load(listId: IList['id']) {
 	// If listId == 0 the list on the calling component wasn't already loaded, so we just bail out here

src/components/sharing/userTeam.vue

@@ -28,7 +28,7 @@
 			<tbody>
 			<tr :key="s.id" v-for="s in sharables">
 				<template v-if="shareType === 'user'">
-					<td>{{ s.getDisplayName() }}</td>
+					<td>{{ getDisplayName(s) }}</td>
 					<td>
 						<template v-if="s.id === userInfo.id">
 							<b class="is-success">{{ $t('list.share.userTeam.you') }}</b>
@@ -139,7 +139,6 @@ export default {name: 'userTeamShare'}
 <script setup lang="ts">
 import {ref, reactive, computed, shallowReactive, type Ref} from 'vue'
 import type {PropType} from 'vue'
-import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import UserNamespaceService from '@/services/userNamespace'
@@ -151,7 +150,7 @@ import UserListModel from '@/models/userList'
 import type {IUserList} from '@/modelTypes/IUserList'
 
 import UserService from '@/services/user'
-import UserModel from '@/models/user'
+import UserModel, { getDisplayName } from '@/models/user'
 import type {IUser} from '@/modelTypes/IUser'
 
 import TeamNamespaceService from '@/services/teamNamespace'
@@ -171,6 +170,7 @@ import {RIGHTS} from '@/constants/rights'
 import Multiselect from '@/components/input/multiselect.vue'
 import Nothing from '@/components/misc/nothing.vue'
 import {success} from '@/message'
+import {useAuthStore} from '@/stores/auth'
 
 const props = defineProps({
 	type: {
@@ -208,8 +208,8 @@ const sharables = ref([])
 const showDeleteModal = ref(false)
 
 
-const store = useStore()
-const userInfo = computed(() => store.state.auth.info)
+const authStore = useAuthStore()
+const userInfo = computed(() => authStore.info)
 
 function createShareTypeNameComputed(count: number) {
 	return computed(() => {
@@ -365,7 +365,7 @@ async function toggleType(sharable) {
 
 const found = ref([])
 
-const currentUserId = computed(() => store.state.auth.info.id)
+const currentUserId = computed(() => authStore.info.id)
 async function find(query: string) {
 	if (query === '') {
 		found.value = []

src/components/tasks/add-task.vue

@@ -3,7 +3,7 @@
 		<div class="field is-grouped">
 			<p class="control has-icons-left is-expanded">
 				<textarea
-					:disabled="taskService.loading || undefined"
+					:disabled="loading || undefined"
 					class="add-task-textarea input"
 					:class="{'textarea-empty': newTaskTitle === ''}"
 					:placeholder="$t('list.list.addPlaceholder')"
@@ -21,10 +21,10 @@
 			<p class="control">
 				<x-button
 					class="add-task-button"
-					:disabled="newTaskTitle === '' || taskService.loading || undefined"
+					:disabled="newTaskTitle === '' || loading || undefined"
 					@click="addTask()"
 					icon="plus"
-					:loading="taskService.loading"
+					:loading="loading"
 					:aria-label="$t('list.list.add')"
 				>
 					<span class="button-text">
@@ -41,17 +41,18 @@
 </template>
 
 <script setup lang="ts">
-import {ref, watch, unref, shallowReactive} from 'vue'
+import {computed, ref, unref, watch} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {useStore} from '@/store'
-import {tryOnMounted, debouncedWatch, useWindowSize, type MaybeRef} from '@vueuse/core'
+import {debouncedWatch, type MaybeRef, tryOnMounted, useWindowSize} from '@vueuse/core'
 
-import TaskService from '@/services/task'
 import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'
-
-function cleanupTitle(title: string) {
-	return title.replace(/^((\* |\+ |- )(\[ \] )?)/g, '')
-}
+import type {ITask} from '@/modelTypes/ITask'
+import {parseSubtasksViaIndention} from '@/helpers/parseSubtasksViaIndention'
+import TaskRelationService from '@/services/taskRelation'
+import TaskRelationModel from '@/models/taskRelation'
+import {RELATION_KIND} from '@/types/IRelationKind'
+import {useAuthStore} from '@/stores/auth'
+import {useTaskStore} from '@/stores/tasks'
 
 function useAutoHeightTextarea(value: MaybeRef<string>) {
 	const textarea = ref<HTMLInputElement>()
@@ -134,9 +135,9 @@ const newTaskTitle = ref('')
 const newTaskInput = useAutoHeightTextarea(newTaskTitle)
 
 const {t} = useI18n({useScope: 'global'})
-const store = useStore()
+const authStore = useAuthStore()
+const taskStore = useTaskStore()
 
-const taskService = shallowReactive(new TaskService())
 const errorMessage = ref('')
 
 function resetEmptyTitleError(e) {
@@ -148,6 +149,7 @@ function resetEmptyTitleError(e) {
 	}
 }
 
+const loading = computed(() => taskStore.isLoading)
 async function addTask() {
 	if (newTaskTitle.value === '') {
 		errorMessage.value = t('list.create.addTitleRequired')
@@ -155,30 +157,64 @@ async function addTask() {
 	}
 	errorMessage.value = ''
 
-	if (taskService.loading) {
+	if (loading.value) {
 		return
 	}
 
 	const taskTitleBackup = newTaskTitle.value
-	const newTasks = newTaskTitle.value.split(/[\r\n]+/).map(async uncleanedTitle => {
-		const title = cleanupTitle(uncleanedTitle)
+	// This allows us to find the tasks with the title they had before being parsed
+	// by quick add magic.
+	const createdTasks: { [key: ITask['title']]: ITask } = {}
+	const tasksToCreate = parseSubtasksViaIndention(newTaskTitle.value)
+	const newTasks = tasksToCreate.map(async ({title}) => {
 		if (title === '') {
 			return
 		}
 
-		const task = await store.dispatch('tasks/createNewTask', {
+		const task = await taskStore.createNewTask({
 			title,
-			listId: store.state.auth.settings.defaultListId,
+			listId: authStore.settings.defaultListId,
 			position: props.defaultPosition,
 		})
-		emit('taskAdded', task)
+		createdTasks[title] = task
 		return task
 	})
 
 	try {
 		newTaskTitle.value = ''
 		await Promise.all(newTasks)
-	} catch (e: any) {
+
+		const taskRelationService = new TaskRelationService()
+		const relations = tasksToCreate.map(async t => {
+			const createdTask = createdTasks[t.title]
+			if (typeof createdTask === 'undefined') {
+				return
+			}
+
+			if (t.parent === null) {
+				emit('taskAdded', createdTask)
+				return
+			}
+
+			const createdParentTask = createdTasks[t.parent]
+			if (typeof createdTask === 'undefined' || typeof createdParentTask === 'undefined') {
+				return
+			}
+
+			const rel = await taskRelationService.create(new TaskRelationModel({
+				taskId: createdTask.id,
+				otherTaskId: createdParentTask.id,
+				relationKind: RELATION_KIND.PARENTTASK,
+			}))
+
+			createdTask.relatedTasks[RELATION_KIND.PARENTTASK] = [createdParentTask]
+			// we're only emitting here so that the relation shows up in the task list
+			emit('taskAdded', createdTask)
+
+			return rel
+		})
+		await Promise.all(relations)
+	} catch (e: { message?: string }) {
 		newTaskTitle.value = taskTitleBackup
 		if (e?.message === 'NO_LIST') {
 			errorMessage.value = t('list.create.addListRequired')
@@ -214,7 +250,7 @@ defineExpose({
 }
 
 .add-task-button {
-	height: 2.5rem;
+	height: 100% !important;
 
 	@media screen and (max-width: $mobile) {
 		.button-text {

src/components/tasks/gantt-component.vue

@@ -173,6 +173,7 @@
 
 <script lang="ts">
 import {defineComponent} from 'vue'
+import {mapState} from 'pinia'
 
 import VueDragResize from 'vue-drag-resize'
 import EditTask from './edit-task.vue'
@@ -182,7 +183,6 @@ import TaskModel from '../../models/task'
 import {PRIORITIES as priorities} from '@/constants/priorities'
 import PriorityLabel from './partials/priorityLabel.vue'
 import TaskCollectionService from '../../services/taskCollection'
-import {mapState} from 'vuex'
 import {RIGHTS as Rights} from '@/constants/rights'
 import FilterPopup from '@/components/list/partials/filter-popup.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
@@ -190,6 +190,8 @@ import BaseButton from '@/components/base/BaseButton.vue'
 import {colorIsDark} from '@/helpers/color/colorIsDark'
 import {formatDate} from '@/helpers/time/formatDate'
 
+import {useBaseStore} from '@/stores/base'
+
 export default defineComponent({
 	name: 'GanttChart',
 	components: {
@@ -256,7 +258,7 @@ export default defineComponent({
 	mounted() {
 		this.buildTheGanttChart()
 	},
-	computed: mapState({
+	computed: mapState(useBaseStore, {
 		canWrite: (state) => state.currentList.maxRight > Rights.READ,
 	}),
 	methods: {
@@ -276,13 +278,13 @@ export default defineComponent({
 		prepareGanttDays() {
 			console.debug('prepareGanttDays; start date: ', this.startDate, 'end date:', this.endDate)
 			// Layout: years => [months => [days]]
-			let years = {}
+			const years = {}
 			for (
 				let d = this.startDate;
 				d <= this.endDate;
 				d.setDate(d.getDate() + 1)
 			) {
-				let date = new Date(d)
+				const date = new Date(d)
 				if (years[date.getFullYear() + ''] === undefined) {
 					years[date.getFullYear() + ''] = {}
 				}
@@ -351,7 +353,7 @@ export default defineComponent({
 
 			const didntHaveDates = newTask.startDate === null ? true : false
 
-			let startDate = new Date(this.startDate)
+			const startDate = new Date(this.startDate)
 			startDate.setDate(
 				startDate.getDate() + newRect.left / this.dayWidth,
 			)
@@ -360,7 +362,7 @@ export default defineComponent({
 			startDate.setUTCSeconds(0)
 			startDate.setUTCMilliseconds(0)
 			newTask.startDate = startDate
-			let endDate = new Date(startDate)
+			const endDate = new Date(startDate)
 			endDate.setDate(
 				startDate.getDate() + newRect.width / this.dayWidth,
 			)
@@ -428,7 +430,7 @@ export default defineComponent({
 			if (!this.newTaskFieldActive) {
 				return
 			}
-			let task = new TaskModel({
+			const task = new TaskModel({
 				title: this.newTaskTitle,
 				listId: this.listId,
 			})

src/components/tasks/partials/attachments.vue

@@ -9,7 +9,7 @@
 
 		<input
 			v-if="editEnabled"
-			:disabled="attachmentService.loading || undefined"
+			:disabled="loading || undefined"
 			@change="uploadNewAttachment()"
 			id="files"
 			multiple
@@ -35,10 +35,18 @@
 				:key="a.id"
 				@click="viewOrDownload(a)"
 			>
-				<div class="filename">{{ a.file.name }}</div>
+				<div class="filename">
+					{{ a.file.name }}
+					<span 
+						v-if="task.coverImageAttachmentId === a.id" 
+						class="is-task-cover"
+					>
+						{{ $t('task.attachment.usedAsCover') }}
+					</span>
+				</div>
 				<div class="info">
 					<p class="attachment-info-meta">
-						<i18n-t keypath="task.attachment.createdBy">
+						<i18n-t keypath="task.attachment.createdBy" scope="global">
 							<span v-tooltip="formatDateLong(a.created)">
 								{{ formatDateSince(a.created) }}
 							</span>
@@ -78,6 +86,17 @@
 						>
 							{{ $t('misc.delete') }}
 						</BaseButton>
+						<BaseButton
+							v-if="editEnabled"
+							class="attachment-info-meta-button"
+							@click.prevent.stop="setCoverImage(task.coverImageAttachmentId === a.id ? null : a)"
+						>
+							{{
+								task.coverImageAttachmentId === a.id
+									? $t('task.attachment.unsetAsCover')
+									: $t('task.attachment.setAsCover')
+							}}
+						</BaseButton>
 					</p>
 				</div>
 			</a>
@@ -85,7 +104,7 @@
 
 		<x-button
 			v-if="editEnabled"
-			:disabled="attachmentService.loading"
+			:disabled="loading"
 			@click="filesRef?.click()"
 			class="mb-4"
 			icon="cloud-upload-alt"
@@ -140,38 +159,45 @@
 <script setup lang="ts">
 import {ref, shallowReactive, computed} from 'vue'
 import {useDropZone} from '@vueuse/core'
-import {useStore} from '@/store'
 
 import User from '@/components/misc/user.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 
 import AttachmentService from '@/services/attachment'
+import {SUPPORTED_IMAGE_SUFFIX} from '@/models/attachment'
 import type AttachmentModel from '@/models/attachment'
 import type {IAttachment} from '@/modelTypes/IAttachment'
+import type {ITask} from '@/modelTypes/ITask'
 
+import {useAttachmentStore} from '@/stores/attachments'
 import {formatDateSince, formatDateLong} from '@/helpers/time/formatDate'
 import {uploadFiles, generateAttachmentUrl} from '@/helpers/attachments'
 import {getHumanSize} from '@/helpers/getHumanSize'
 import {useCopyToClipboard} from '@/composables/useCopyToClipboard'
 import {error, success} from '@/message'
+import {useTaskStore} from '@/stores/tasks'
+import {useI18n} from 'vue-i18n'
 
-const props = defineProps({
-	taskId: {
-		type: Number,
-		required: true,
-	},
-	initialAttachments: {
-		type: Array,
-	},
-	editEnabled: {
-		default: true,
-	},
+const taskStore = useTaskStore()
+const {t} = useI18n({useScope: 'global'})
+
+const props = withDefaults(defineProps<{
+	task: ITask,
+	initialAttachments?: IAttachment[],
+	editEnabled: boolean,
+}>(), {
+	editEnabled: true,
 })
 
+// FIXME: this should go through the store
+const emit = defineEmits(['task-changed'])
+
 const attachmentService = shallowReactive(new AttachmentService())
 
-const store = useStore()
-const attachments = computed(() => store.state.attachments.attachments)
+const attachmentStore = useAttachmentStore()
+const attachments = computed(() => attachmentStore.attachments)
+
+const loading = computed(() => attachmentService.loading || taskStore.isLoading)
 
 function onDrop(files: File[] | null) {
 	if (files && files.length !== 0) {
@@ -179,13 +205,14 @@ function onDrop(files: File[] | null) {
 	}
 }
 
-const { isOverDropZone } = useDropZone(document, onDrop)
+const {isOverDropZone} = useDropZone(document, onDrop)
 
 function downloadAttachment(attachment: IAttachment) {
 	attachmentService.download(attachment)
 }
 
 const filesRef = ref<HTMLInputElement | null>(null)
+
 function uploadNewAttachment() {
 	const files = filesRef.value?.files
 
@@ -197,7 +224,7 @@ function uploadNewAttachment() {
 }
 
 function uploadFilesToTask(files: File[] | FileList) {
-	uploadFiles(attachmentService, props.taskId, files)
+	uploadFiles(attachmentService, props.task.id, files)
 }
 
 const attachmentToDelete = ref<AttachmentModel | null>(null)
@@ -213,22 +240,18 @@ async function deleteAttachment() {
 
 	try {
 		const r = await attachmentService.delete(attachmentToDelete.value)
-		store.commit(
-			'attachments/removeById',
-			attachmentToDelete.value.id,
-		)
+		attachmentStore.removeById(attachmentToDelete.value.id)
 		success(r)
 		setAttachmentToDelete(null)
-	} catch(e) {
+	} catch (e) {
 		error(e)
 	}
 }
 
 const attachmentImageBlobUrl = ref<string | null>(null)
-const SUPPORTED_SUFFIX = ['.jpg', '.png', '.bmp', '.gif']
 
 async function viewOrDownload(attachment: AttachmentModel) {
-	if (SUPPORTED_SUFFIX.some((suffix) => attachment.file.name.endsWith(suffix))	) {
+	if (SUPPORTED_IMAGE_SUFFIX.some((suffix) => attachment.file.name.endsWith(suffix))) {
 		attachmentImageBlobUrl.value = await attachmentService.getBlobUrl(attachment)
 	} else {
 		downloadAttachment(attachment)
@@ -236,8 +259,15 @@ async function viewOrDownload(attachment: AttachmentModel) {
 }
 
 const copy = useCopyToClipboard()
-function copyUrl(attachment: AttachmentModel) {
-	copy(generateAttachmentUrl(props.taskId, attachment.id))
+
+function copyUrl(attachment: IAttachment) {
+	copy(generateAttachmentUrl(props.task.id, attachment.id))
+}
+
+async function setCoverImage(attachment: IAttachment | null) {
+	const task = await taskStore.setCoverImage(props.task, attachment)
+	emit('task-changed', task)
+	success({message: t('task.attachment.successfullyChangedCoverImage')})
 }
 </script>
 
@@ -396,5 +426,13 @@ function copyUrl(attachment: AttachmentModel) {
 	}
 }
 
+.is-task-cover {
+	background: var(--primary);
+	color: var(--white);
+	padding: .25rem .35rem;
+	border-radius: 4px;
+	font-size: .75rem;
+}
+
 @include modal-transition();
 </style>

src/components/tasks/partials/comments.vue

@@ -17,7 +17,7 @@
 			<div :key="c.id" class="media comment" v-for="c in comments">
 				<figure class="media-left is-hidden-mobile">
 					<img
-						:src="c.author.getAvatarUrl(48)"
+						:src="getAvatarUrl(c.author, 48)"
 						alt=""
 						class="image is-avatar"
 						height="48"
@@ -27,13 +27,13 @@
 				<div class="media-content">
 					<div class="comment-info">
 						<img
-							:src="c.author.getAvatarUrl(20)"
+							:src="getAvatarUrl(c.author, 20)"
 							alt=""
 							class="image is-avatar d-print-none"
 							height="20"
 							width="20"
 						/>
-						<strong>{{ c.author.getDisplayName() }}</strong>&nbsp;
+						<strong>{{ getDisplayName(c.author) }}</strong>&nbsp;
 						<span v-tooltip="formatDateLong(c.created)" class="has-text-grey">
 							{{ formatDateSince(c.created) }}
 						</span>
@@ -153,7 +153,6 @@
 
 <script setup lang="ts">
 import {ref, reactive, computed, shallowReactive, watch, nextTick} from 'vue'
-import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import Editor from '@/components/input/AsyncEditor'
@@ -167,6 +166,9 @@ import type {ITask} from '@/modelTypes/ITask'
 import {uploadFile} from '@/helpers/attachments'
 import {success} from '@/message'
 import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
+import {getAvatarUrl, getDisplayName} from '@/models/user'
+import {useConfigStore} from '@/stores/config'
+import {useAuthStore} from '@/stores/auth'
 
 const props = defineProps({
 	taskId: {
@@ -179,7 +181,8 @@ const props = defineProps({
 })
 
 const {t} = useI18n({useScope: 'global'})
-const store = useStore()
+const configStore = useConfigStore()
+const authStore = useAuthStore()
 
 const comments = ref<ITaskComment[]>([])
 
@@ -194,9 +197,9 @@ const newComment = reactive(new TaskCommentModel())
 const saved = ref<ITask['id'] | null>(null)
 const saving = ref<ITask['id'] | null>(null)
 
-const userAvatar = computed(() => store.state.auth.info.getAvatarUrl(48))
-const currentUserId = computed(() => store.state.auth.info.id)
-const enabled = computed(() => store.state.config.taskCommentsEnabled)
+const userAvatar = computed(() => getAvatarUrl(authStore.info, 48))
+const currentUserId = computed(() => authStore.info.id)
+const enabled = computed(() => configStore.taskCommentsEnabled)
 const actions = computed(() => {
 	if (!props.canWrite) {
 		return {}

src/components/tasks/partials/createdUpdated.vue

@@ -1,16 +1,16 @@
 <template>
 	<p class="created">
 		<time :datetime="formatISO(task.created)" v-tooltip="formatDateLong(task.created)">
-			<i18n-t keypath="task.detail.created">
+			<i18n-t keypath="task.detail.created" scope="global">
 				<span>{{ formatDateSince(task.created) }}</span>
-				{{ task.createdBy.getDisplayName() }}
+				{{ getDisplayName(task.createdBy) }}
 			</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">
+				<i18n-t keypath="task.detail.updated" scope="global">
 					<span>{{ updatedSince }}</span>
 				</i18n-t>
 			</time>
@@ -18,7 +18,7 @@
 		<template v-if="task.done">
 			<br/>
 			<time :datetime="formatISO(task.doneAt)" v-tooltip="doneFormatted">
-				<i18n-t keypath="task.detail.doneAt">
+				<i18n-t keypath="task.detail.doneAt" scope="global">
 					<span>{{ doneSince }}</span>
 				</i18n-t>
 			</time>
@@ -30,6 +30,7 @@
 import {computed, toRefs, type PropType} from 'vue'
 import type {ITask} from '@/modelTypes/ITask'
 import {formatISO, formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
+import {getDisplayName} from '@/models/user'
 
 const props = defineProps({
 	task: {

src/components/tasks/partials/defer-task.vue

@@ -38,13 +38,13 @@
 </template>
 
 <script setup lang="ts">
-import {ref, shallowReactive, computed, watch, onMounted, onBeforeUnmount, type PropType} from 'vue'
-import {useStore} from '@/store'
+import {ref, shallowReactive, computed, watch, onMounted, onBeforeUnmount, toRef, type PropType} from 'vue'
 import {useI18n} from 'vue-i18n'
 import flatPickr from 'vue-flatpickr-component'
 
 import TaskService from '@/services/task'
 import type {ITask} from '@/modelTypes/ITask'
+import {useAuthStore} from '@/stores/auth'
 
 const props = defineProps({
 	modelValue: {
@@ -55,7 +55,7 @@ const props = defineProps({
 const emit = defineEmits(['update:modelValue'])
 
 const {t} = useI18n({useScope: 'global'})
-const store = useStore()
+const authStore = useAuthStore()
 
 const taskService = shallowReactive(new TaskService())
 const task = ref<ITask>()
@@ -63,12 +63,12 @@ const task = ref<ITask>()
 // We're saving the due date seperately to prevent null errors in very short periods where the task is null.
 const dueDate = ref<Date>()
 const lastValue = ref<Date>()
-const changeInterval = ref<number>()
+const changeInterval = ref<ReturnType<typeof setInterval>>()
 
 watch(
-	() => props.modelValue,
+	toRef(props, 'modelValue'),
 	(value) => {
-		task.value = value
+		task.value = { ...value }
 		dueDate.value = value.dueDate
 		lastValue.value = value.dueDate
 	},
@@ -103,7 +103,7 @@ const flatPickerConfig = computed(() => ({
 	time_24hr: true,
 	inline: true,
 	locale: {
-		firstDayOfWeek: store.state.auth.settings.weekStart,
+		firstDayOfWeek: authStore.settings.weekStart,
 	},
 }))
 
@@ -123,9 +123,10 @@ async function updateDueDate() {
 		return
 	}
 
-	// FIXME: direct prop manipulation
-	task.value.dueDate = new Date(dueDate.value)
-	const newTask = await taskService.update(task.value)
+	const newTask = await taskService.update({
+		...task.value,
+		dueDate: new Date(dueDate.value),
+	})
 	lastValue.value = newTask.dueDate
 	task.value = newTask
 	emit('update:modelValue', newTask)

src/components/tasks/partials/description.vue

@@ -32,11 +32,12 @@
 
 <script setup lang="ts">
 import {ref,computed, watch, type PropType} from 'vue'
-import {useStore} from '@/store'
 
 import Editor from '@/components/input/AsyncEditor'
 
 import type {ITask} from '@/modelTypes/ITask'
+import {useTaskStore} from '@/stores/tasks'
+import TaskModel from '@/models/task'
 
 
 const props = defineProps({
@@ -55,14 +56,14 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue'])
 
-const task = ref<ITask>({description: ''})
+const task = ref<ITask>(new TaskModel())
 const saved = ref(false)
 
 // Since loading is global state, this variable ensures we're only showing the saving icon when saving the description.
 const saving = ref(false)
 
-const store = useStore()
-const loading = computed(() => store.state.loading)
+const taskStore = useTaskStore()
+const loading = computed(() => taskStore.isLoading)
 
 watch(
 	() => props.modelValue,
@@ -77,7 +78,7 @@ async function save() {
 
 	try {
 		// FIXME: don't update state from internal.
-		task.value = await store.dispatch('tasks/update', task.value)
+		task.value = await taskStore.update(task.value)
 		emit('update:modelValue', task.value)
 
 		saved.value = true

src/components/tasks/partials/editAssignees.vue

@@ -28,8 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref, shallowReactive, watch, type PropType} from 'vue'
-import {useStore} from '@/store'
+import {ref, shallowReactive, watch, nextTick, type PropType} from 'vue'
 import {useI18n} from 'vue-i18n'
 
 import User from '@/components/misc/user.vue'
@@ -39,7 +38,9 @@ import BaseButton from '@/components/base/BaseButton.vue'
 import {includesById} from '@/helpers/utils'
 import ListUserService from '@/services/listUsers'
 import {success} from '@/message'
-import type { IUser } from '@/modelTypes/IUser'
+import {useTaskStore} from '@/stores/tasks'
+
+import type {IUser} from '@/modelTypes/IUser'
 
 const props = defineProps({
 	taskId: {
@@ -57,15 +58,16 @@ const props = defineProps({
 		type: Array as PropType<IUser[]>,
 		default: () => [],
 	},
-	})
+})
 const emit = defineEmits(['update:modelValue'])
 
-const store = useStore()
+const taskStore = useTaskStore()
 const {t} = useI18n({useScope: 'global'})
 
 const listUserService = shallowReactive(new ListUserService())
 const foundUsers = ref([])
 const assignees = ref<IUser[]>([])
+let isAdding = false
 
 watch(
 	() => props.modelValue,
@@ -79,13 +81,23 @@ watch(
 )
 
 async function addAssignee(user: IUser) {
-	await store.dispatch('tasks/addAssignee', {user: user, taskId: props.taskId})
+	if (isAdding) {
+		return
+	}
+
+	try {
+		nextTick(() => isAdding = true)
+
+		await taskStore.addAssignee({user: user, taskId: props.taskId})
 		emit('update:modelValue', assignees.value)
 		success({message: t('task.assignee.assignSuccess')})
+	} finally {
+		nextTick(() => isAdding = false)
+	}
 }
 
 async function removeAssignee(user: IUser) {
-	await store.dispatch('tasks/removeAssignee', {user: user, taskId: props.taskId})
+	await taskStore.removeAssignee({user: user, taskId: props.taskId})
 
 	// Remove the assignee from the list
 	for (const a in assignees.value) {
@@ -118,6 +130,7 @@ function clearAllFoundUsers() {
 }
 
 const multiselect = ref()
+
 function focus() {
 	multiselect.value.focus()
 }

src/components/tasks/partials/editLabels.vue

@@ -40,7 +40,6 @@
 
 <script setup lang="ts">
 import {type PropType, ref, computed, shallowReactive, watch} from 'vue'
-import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import LabelModel from '@/models/label'
@@ -49,8 +48,9 @@ import {success} from '@/message'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import Multiselect from '@/components/input/multiselect.vue'
-import type { ILabel } from '@/modelTypes/ILabel'
-import { useLabelStore } from '@/stores/labels'
+import type {ILabel} from '@/modelTypes/ILabel'
+import {useLabelStore} from '@/stores/labels'
+import {useTaskStore} from '@/stores/tasks'
 
 const props = defineProps({
 	modelValue: {
@@ -69,7 +69,6 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue'])
 
-const store = useStore()
 const {t} = useI18n({useScope: 'global'})
 
 const labelTaskService = shallowReactive(new LabelTaskService())
@@ -87,6 +86,7 @@ watch(
 	},
 )
 
+const taskStore = useTaskStore()
 const labelStore = useLabelStore()
 
 const foundLabels = computed(() => labelStore.filterLabelsByQuery(labels.value, query.value))
@@ -97,17 +97,13 @@ function findLabel(newQuery: string) {
 }
 
 async function addLabel(label: ILabel, showNotification = true) {
-	const bubble = () => {
-		emit('update:modelValue', labels.value)
-	}
-	
 	if (props.taskId === 0) {
-		bubble()
+		emit('update:modelValue', labels.value)
 		return
 	}
 
-	await store.dispatch('tasks/addLabel', {label, taskId: props.taskId})
-	bubble()
+	await taskStore.addLabel({label, taskId: props.taskId})
+	emit('update:modelValue', labels.value)
 	if (showNotification) {
 		success({message: t('task.label.addSuccess')})
 	}
@@ -115,7 +111,7 @@ async function addLabel(label: ILabel, showNotification = true) {
 
 async function removeLabel(label: ILabel) {
 	if (props.taskId !== 0) {
-		await store.dispatch('tasks/removeLabel', {label, taskId: props.taskId})
+		await taskStore.removeLabel({label, taskId: props.taskId})
 	}
 
 	for (const l in labels.value) {

src/components/tasks/partials/heading.vue

@@ -38,16 +38,16 @@
 
 <script setup lang="ts">
 import {ref, computed, type PropType} from 'vue'
-import {useStore} from '@/store'
 import {useRouter} from 'vue-router'
 
 import BaseButton from '@/components/base/BaseButton.vue'
+import ColorBubble from '@/components/misc/colorBubble.vue'
 import Done from '@/components/misc/Done.vue'
 
 import {useCopyToClipboard} from '@/composables/useCopyToClipboard'
+import {useTaskStore} from '@/stores/tasks'
 
 import type {ITask} from '@/modelTypes/ITask'
-import ColorBubble from '@/components/misc/colorBubble.vue'
 
 const props = defineProps({
 	task: {
@@ -72,8 +72,8 @@ async function copyUrl() {
 	await copy(absoluteURL)
 }
 
-const store = useStore()
-const loading = computed(() => store.state.loading)
+const taskStore = useTaskStore()
+const loading = computed(() => taskStore.isLoading)
 
 const textIdentifier = computed(() => props.task?.getTextIdentifier() || '')
 
@@ -93,7 +93,7 @@ async function save(title: string) {
 
 	try {
 		saving.value = true
-		const newTask = await store.dispatch('tasks/update', {
+		const newTask = await taskStore.update({
 			...props.task,
 			title,
 		})

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

@@ -6,13 +6,20 @@
 			'draggable': !(loadingInternal || loading),
 			'has-light-text': color !== TASK_DEFAULT_COLOR && !colorIsDark(color),
 		}"
-		:style="{'background-color': color !== TASK_DEFAULT_COLOR ? color : false}"
+		:style="{'background-color': color !== TASK_DEFAULT_COLOR ? color : undefined}"
 		@click.exact="openTaskDetail()"
 		@click.ctrl="() => toggleTaskDone(task)"
 		@click.meta="() => toggleTaskDone(task)"
 	>
+		<img
+			v-if="coverImageBlobUrl"
+			:src="coverImageBlobUrl"
+			alt=""
+			class="cover-image"
+		/>
+		<div class="p-2">
 			<span class="task-id">
-			<Done class="kanban-card__done" :is-done="task.done" variant="small" />
+				<Done class="kanban-card__done" :is-done="task.done" variant="small"/>
 				<template v-if="task.identifier === ''">
 					#{{ task.index }}
 				</template>
@@ -44,11 +51,11 @@
 				<priority-label :priority="task.priority" :done="task.done"/>
 				<div class="assignees" v-if="task.assignees.length > 0">
 					<user
+						v-for="u in task.assignees"
 						:avatar-size="24"
 						:key="task.id + 'assignee' + u.id"
 						:show-username="false"
 						:user="u"
-					v-for="u in task.assignees"
 					/>
 				</div>
 				<checklist-summary :task="task"/>
@@ -63,81 +70,83 @@
 				</span>
 			</div>
 		</div>
+	</div>
 </template>
 
-<script lang="ts">
-import {defineComponent, type PropType} from 'vue'
+<script lang="ts" setup>
+import {ref, computed, watch} from 'vue'
+import {useRouter} from 'vue-router'
 
-import PriorityLabel from '../../../components/tasks/partials/priorityLabel.vue'
-import User from '../../../components/misc/user.vue'
+import PriorityLabel from '@/components/tasks/partials/priorityLabel.vue'
+import User from '@/components/misc/user.vue'
 import Done from '@/components/misc/Done.vue'
-import Labels from '../../../components/tasks/partials/labels.vue'
+import Labels from '@/components/tasks/partials/labels.vue'
 import ChecklistSummary from './checklist-summary.vue'
-import {TASK_DEFAULT_COLOR} from '@/models/task'
+
+import {TASK_DEFAULT_COLOR, getHexColor} from '@/models/task'
 import type {ITask} from '@/modelTypes/ITask'
+import {SUPPORTED_IMAGE_SUFFIX} from '@/models/attachment'
+import AttachmentService from '@/services/attachment'
 
 import {formatDateLong, formatISO, formatDateSince} from '@/helpers/time/formatDate'
 import {colorIsDark} from '@/helpers/color/colorIsDark'
+import {useTaskStore} from '@/stores/tasks'
 
-export default defineComponent({
-	name: 'kanban-card',
-	components: {
-		ChecklistSummary,
-		Done,
-		PriorityLabel,
-		User,
-		Labels,
-	},
-	data() {
-		return {
-			loadingInternal: false,
-			TASK_DEFAULT_COLOR,
-		}
-	},
-	props: {
-		task: {
-			type: Object as PropType<ITask>,
-			required: true,
-		},
-		loading: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-	},
-	computed: {
-		color() {
-			return this.task.getHexColor
-				? this.task.getHexColor() 
-				: TASK_DEFAULT_COLOR
-		},
-	},
-	methods: {
-		formatDateLong,
-		formatISO,
-		formatDateSince,
-		colorIsDark,
-		async toggleTaskDone(task: ITask) {
-			this.loadingInternal = true
+const router = useRouter()
+
+const loadingInternal = ref(false)
+
+const props = withDefaults(defineProps<{
+	task: ITask,
+	loading: boolean,
+}>(), {
+	loading: false,
+})
+
+const color = computed(() => getHexColor(props.task.hexColor))
+
+async function toggleTaskDone(task: ITask) {
+	loadingInternal.value = true
 	try {
-				const done = !task.done
-				await this.$store.dispatch('tasks/update', {
+		await useTaskStore().update({
 			...task,
-					done,
+			done: !task.done,
 		})
 	} finally {
-				this.loadingInternal = false
+		loadingInternal.value = false
 	}
-		},
-		openTaskDetail() {
-			this.$router.push({
+}
+
+function openTaskDetail() {
+	router.push({
 		name: 'task.detail',
-				params: { id: this.task.id },
-				state: { backdropView: this.$router.currentRoute.value.fullPath },
+		params: {id: props.task.id},
+		state: {backdropView: router.currentRoute.value.fullPath},
 	})
-		},
-	},
-})
+}
+
+const coverImageBlobUrl = ref<string | null>(null)
+
+async function maybeDownloadCoverImage() {
+	if (!props.task.coverImageAttachmentId) {
+		coverImageBlobUrl.value = null
+		return
+	}
+
+	const attachment = props.task.attachments.find(a => a.id === props.task.coverImageAttachmentId)
+	if (!attachment || !SUPPORTED_IMAGE_SUFFIX.some((suffix) => attachment.file.name.endsWith(suffix))) {
+		return
+	}
+
+	const attachmentService = new AttachmentService()
+	coverImageBlobUrl.value = await attachmentService.getBlobUrl(attachment)
+}
+
+watch(
+	() => props.task.coverImageAttachmentId,
+	maybeDownloadCoverImage,
+	{immediate: true},
+)
 </script>
 
 <style lang="scss" scoped>
@@ -149,12 +158,11 @@ $task-background: var(--white);
 	cursor: pointer;
 	box-shadow: var(--shadow-xs);
 	display: block;
-	border: 3px solid transparent;
 
 	font-size: .9rem;
-	padding: .4rem;
 	border-radius: $radius;
 	background: $task-background;
+	overflow: hidden;
 
 	&.loader-container.is-loading::after {
 		width: 1.5rem;

src/components/tasks/partials/relatedTasks.vue

@@ -37,7 +37,11 @@
 						@create="createAndRelateTask"
 					>
 						<template #searchResult="{option: task}">
-							<span v-if="typeof task !== 'string'" class="search-result">
+							<span 
+								v-if="typeof task !== 'string'"
+								class="search-result"
+								:class="{'is-strikethrough': task.done}"
+							>
 								<span
 									class="different-list"
 									v-if="task.listId !== listId"
@@ -149,7 +153,6 @@
 import {ref, reactive, shallowReactive, watch, computed, type PropType} from 'vue'
 import {useI18n} from 'vue-i18n'
 import {useRoute} from 'vue-router'
-import {useStore} from '@/store'
 
 import TaskService from '@/services/task'
 import TaskModel from '@/models/task'
@@ -167,6 +170,7 @@ import Fancycheckbox from '@/components/input/fancycheckbox.vue'
 import {useNamespaceStore} from '@/stores/namespaces'
 
 import {error, success} from '@/message'
+import {useTaskStore} from '@/stores/tasks'
 
 const props = defineProps({
 	taskId: {
@@ -190,7 +194,7 @@ const props = defineProps({
 	},
 })
 
-const store = useStore()
+const taskStore = useTaskStore()
 const namespaceStore = useNamespaceStore()
 const route = useRoute()
 const {t} = useI18n({useScope: 'global'})
@@ -344,11 +348,11 @@ async function createAndRelateTask(title: string) {
 }
 
 async function toggleTaskDone(task: ITask) {
-	await store.dispatch('tasks/update', task)
+	await taskStore.update(task)
 	
 	// Find the task in the list and update it so that it is correctly strike through
 	Object.entries(relatedTasks.value).some(([kind, tasks]) => {
-		return tasks.some((t, key) => {
+		return (tasks as ITask[]).some((t, key) => {
 			const found = t.id === task.id
 			if (found) {
 				relatedTasks.value[kind as IRelationKind]![key] = task

src/components/tasks/partials/singleTaskInList.vue

@@ -35,7 +35,7 @@
 				{{ task.title }}
 			</span>
 
-			<labels class="labels ml-2 mr-1" :labels="task.labels" v-if="task.labels.length > 0"/>
+			<labels class="labels ml-2 mr-1" :labels="task.labels" v-if="task.labels.length > 0" />
 			<user
 				:avatar-size="27"
 				:is-inline="true"
@@ -119,6 +119,8 @@ import {formatDateSince, formatISO, formatDateLong} from '@/helpers/time/formatD
 import ColorBubble from '@/components/misc/colorBubble.vue'
 import {useListStore} from '@/stores/lists'
 import {useNamespaceStore} from '@/stores/namespaces'
+import {useBaseStore} from '@/stores/base'
+import {useTaskStore} from '@/stores/tasks'
 
 export default defineComponent({
 	name: 'singleTaskInList',
@@ -187,10 +189,11 @@ export default defineComponent({
 			return list !== null ? list.hexColor : ''
 		},
 		currentList() {
-			return typeof this.$store.state.currentList === 'undefined' ? {
+			const baseStore = useBaseStore()
+			return typeof baseStore.currentList === 'undefined' ? {
 				id: 0,
 				title: '',
-			} : this.$store.state.currentList
+			} : baseStore.currentList
 		},
 		taskDetailRoute() {
 			return {
@@ -208,7 +211,7 @@ export default defineComponent({
 
 		async markAsDone(checked: boolean) {
 			const updateFunc = async () => {
-				const task = await this.$store.dispatch('tasks/update', this.task)
+				const task = await useTaskStore().update(this.task)
 				this.task = task
 				this.$emit('task-updated', task)
 				this.$message.success({
@@ -237,8 +240,7 @@ export default defineComponent({
 			this.task.isFavorite = !this.task.isFavorite
 			this.task = await this.taskService.update(this.task)
 			this.$emit('task-updated', this.task)
-			const namespaceStore = useNamespaceStore()
-			namespaceStore.loadNamespacesIfFavoritesDontExist()
+			useNamespaceStore().loadNamespacesIfFavoritesDontExist()
 		},
 		hideDeferDueDatePopup(e) {
 			if (!this.showDefer) {

src/composables/taskList.ts

@@ -2,6 +2,7 @@ import {ref, shallowReactive, watch, computed} from 'vue'
 import {useRoute} from 'vue-router'
 
 import TaskCollectionService from '@/services/taskCollection'
+import type { ITask } from '@/modelTypes/ITask'
 
 // FIXME: merge with DEFAULT_PARAMS in filters.vue
 export const getDefaultParams = () => ({
@@ -70,7 +71,7 @@ export function useTaskList(listId, sortByDefault = SORT_BY_DEFAULT) {
 	const loading = computed(() => taskCollectionService.loading)
 	const totalPages = computed(() => taskCollectionService.totalPages)
 
-	const tasks = ref([])
+	const tasks = ref<ITask[]>([])
 	async function loadTasks() {
 		tasks.value = []
 		tasks.value = await taskCollectionService.getAll(...getAllTasksParams.value)
@@ -81,10 +82,10 @@ export function useTaskList(listId, sortByDefault = SORT_BY_DEFAULT) {
 	watch(() => route.query, (query) => {
 		const { page: pageQueryValue, search: searchQuery } = query
 		if (searchQuery !== undefined) {
-			search.value = searchQuery
+			search.value = searchQuery as string
 		}
 		if (pageQueryValue !== undefined) {
-			page.value = parseInt(pageQueryValue)
+			page.value = Number(pageQueryValue)
 		}
 
 	}, { immediate: true })

src/composables/useRenewTokenOnFocus.ts

@@ -0,0 +1,40 @@
+import {computed} from 'vue'
+import {useRouter} from 'vue-router'
+import {useEventListener} from '@vueuse/core'
+
+import {useAuthStore} from '@/stores/auth'
+
+export function useRenewTokenOnFocus() {
+	const router = useRouter()
+	const authStore = useAuthStore()
+
+	const userInfo = computed(() => authStore.info)
+	const authenticated = computed(() => authStore.authenticated)
+
+	// Try renewing the token every time vikunja is loaded initially
+	// (When opening the browser the focus event is not fired)
+	authStore.renewToken()
+
+	// Check if the token is still valid if the window gets focus again to maybe renew it
+	useEventListener('focus', () => {
+		if (!authenticated.value) {
+			return
+		}
+
+		const expiresIn = (userInfo.value !== null ? userInfo.value.exp : 0) - +new Date() / 1000
+
+		// If the token expiry is negative, it is already expired and we have no choice but to redirect
+		// the user to the login page
+		if (expiresIn < 0) {
+			authStore.checkAuth()
+			router.push({name: 'user.login'})
+			return
+		}
+
+		// Check if the token is valid for less than 60 hours and renew if thats the case
+		if (expiresIn < 60 * 3600) {
+			authStore.renewToken()
+			console.debug('renewed token')
+		}
+	})
+}

src/composables/useRouteWithModal.ts

@@ -0,0 +1,54 @@
+import { computed, shallowRef, watchEffect, h, type VNode } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+export 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
+
+		const component = route.matched[0]?.components?.default
+
+		if (!component) {
+			currentModal.value = undefined
+			return
+		}
+		currentModal.value = h(component, 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}
+}

src/directives/focus.ts

@@ -1,6 +1,8 @@
-export default {
+import type {Directive} from 'vue'
+
+const focus = <Directive<HTMLElement,string>>{
 	// When the bound element is inserted into the DOM...
-	mounted: (el, {modifiers}) => {
+	mounted(el, {modifiers}) {
 		// Focus the element only if the viewport is big enough
 		// auto focusing elements on mobile can be annoying since in these cases the
 		// keyboard always pops up and takes half of the available space on the screen.
@@ -10,3 +12,5 @@ export default {
 		}
 	},
 }
+
+export default focus

src/helpers/attachments.ts

@@ -2,9 +2,9 @@ import AttachmentModel from '@/models/attachment'
 import type {IAttachment} from '@/modelTypes/IAttachment'
 
 import AttachmentService from '@/services/attachment'
-import { store } from '@/store'
+import {useTaskStore} from '@/stores/tasks'
 
-export function uploadFile(taskId: number, file: File, onSuccess: (url: string) => void) {
+export function uploadFile(taskId: number, file: File, onSuccess?: (url: string) => void) {
 	const attachmentService = new AttachmentService()
 	const files = [file]
 
@@ -15,18 +15,18 @@ export async function uploadFiles(
 	attachmentService: AttachmentService,
 	taskId: number,
 	files: File[] | FileList,
-	onSuccess: Function = () => {},
+	onSuccess?: (attachmentUrl: string) => void,
 ) {
 	const attachmentModel = new AttachmentModel({taskId})
 	const response = await attachmentService.create(attachmentModel, files)
 	console.debug(`Uploaded attachments for task ${taskId}, response was`, response)
 
 	response.success?.map((attachment: IAttachment) => {
-		store.dispatch('tasks/addTaskAttachment', {
+		useTaskStore().addTaskAttachment({
 			taskId,
 			attachment,
 		})
-		onSuccess(generateAttachmentUrl(taskId, attachment.id))
+		onSuccess?.(generateAttachmentUrl(taskId, attachment.id))
 	})
 
 	if (response.errors !== null) {

src/helpers/auth.ts

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

src/helpers/calculateItemPosition.ts

@@ -1,19 +1,18 @@
 export const calculateItemPosition = (positionBefore: number | null, positionAfter: number | null): number => {
-	if (positionBefore === null && positionAfter === null) {
+	if (positionBefore === null) {
+		if (positionAfter === null) {
 			return 0
 		}
 		
-	// If there is no task before, our task is the first task in which case we let it have half of the position of the task after it
-	if (positionBefore === null && positionAfter !== null) {
+		// If there is no task after it, we just add 2^16 to the last position to have enough room in the future
 		return positionAfter / 2
 	}
 	
 	// If there is no task after it, we just add 2^16 to the last position to have enough room in the future
-	if (positionBefore !== null && positionAfter === null) {
+	if (positionAfter === null) {
 		return positionBefore + Math.pow(2, 16)
 	}
 	
 	// If we have both a task before and after it, we acually calculate the position
-	// @ts-ignore - can never be null but TS does not seem to understand that
 	return positionBefore + (positionAfter - positionBefore) / 2
 }

src/helpers/checkAndSetApiUrl.ts

@@ -1,10 +1,9 @@
-import {store} from '@/store'
+import {useConfigStore} from '@/stores/config'
 
 const API_DEFAULT_PORT = '3456'
 
 export const ERROR_NO_API_URL = 'noApiUrlProvided'
 
-const updateConfig = () => store.dispatch('config/update') 
 
 export const checkAndSetApiUrl = (url: string): Promise<string> => {
 	if(url.startsWith('/')) {
@@ -25,6 +24,9 @@ export const checkAndSetApiUrl = (url: string): Promise<string> => {
 	const oldUrl = window.API_URL
 	window.API_URL = urlToCheck.toString()
 
+	const configStore = useConfigStore()
+	const updateConfig = () => configStore.update()
+
 	// Check if the api is reachable at the provided url
 	return updateConfig()
 		.catch(e => {

src/helpers/findAssignees.ts

@@ -1,23 +0,0 @@
-import UserService from '@/services/user'
-import {findPropertyByValue} from '@/helpers/findPropertyByValue'
-
-// Check if the user exists
-function validateUsername(users: IUser[], username: IUser['username']) {
-	return findPropertyByValue(users, 'username', username)
-}
-
-export async function findAssignees(parsedTaskAssignees: string[]) {
-	if (parsedTaskAssignees.length <= 0) {
-		return []
-	}
-
-	const userService = new UserService()
-	const assignees = parsedTaskAssignees.map(async a => {
-		const users = await userService.getAll({}, {s: a})
-		return validateUsername(users, a)
-	})
-
-	const validatedUsers = await Promise.all(assignees)
-	return validatedUsers.filter((item) => Boolean(item))
-}
-

src/helpers/findPropertyByValue.ts

@@ -1,7 +0,0 @@
-// IDEA: maybe use a small fuzzy search here to prevent errors
-export function findPropertyByValue(object, key, value) {
-	return Object.values(object).find(
-		(l) => l[key]?.toLowerCase() === value.toLowerCase(),
-	)
-}
-

src/helpers/markdownRenderer.ts

@@ -8,33 +8,34 @@ export function setupMarkdownRenderer(checkboxId: string) {
 	let checkboxNum = -1
 	marked.use({
 		renderer: {
-			image: (src, title, text) => {
+			image(src: string, title: string, text: string) {
 
 				title = title ? ` title="${title}` : ''
 
 				// If the url starts with the api url, the image is likely an attachment and
 				// we'll need to download and parse it properly.
-				if (src.substr(0, window.API_URL.length + 7) === `${window.API_URL}/tasks/`) {
+				if (src.slice(0, window.API_URL.length + 7) === `${window.API_URL}/tasks/`) {
 					return `<img data-src="${src}" alt="${text}" ${title} class="attachment-image"/>`
 				}
 
 				return `<img src="${src}" alt="${text}" ${title}/>`
 			},
-			checkbox: (checked) => {
+			checkbox(checked: boolean) {
+				let checkedString = ''
 				if (checked) {
-					checked = ' checked="checked"'
+					checkedString = 'checked'
 				}
 
 				checkboxNum++
-				return `<input type="checkbox" data-checkbox-num="${checkboxNum}" ${checked} class="text-checkbox-${checkboxId}"/>`
+				return `<input type="checkbox" data-checkbox-num="${checkboxNum}" ${checkedString} class="text-checkbox-${checkboxId}"/>`
 			},
-			link: (href, title, text) => {
+			link(href: string, title: string, text: string) {
 				const isLocal = href.startsWith(`${location.protocol}//${location.hostname}`)
 				const html = linkRenderer.call(renderer, href, title, text)
 				return isLocal ? html : html.replace(/^<a /, '<a target="_blank" rel="noreferrer noopener nofollow" ')
 			},
 		},
-		highlight: function (code, language) {
+		highlight(code, language) {
 			const validLanguage = hljs.getLanguage(language) ? language : 'plaintext'
 			return hljs.highlight(code, {language: validLanguage}).value
 		},

src/helpers/objectIsEmpty.ts

@@ -1,5 +1,5 @@
 // https://stackoverflow.com/a/32108184/10924593
-export function objectIsEmpty(obj: any): boolean {
+export function objectIsEmpty(obj: Record<string, unknown>): boolean {
 	return obj
 		&& Object.keys(obj).length === 0
 		&& Object.getPrototypeOf(obj) === Object.prototype

src/helpers/parseSubtasksViaIndention.test.ts

@@ -0,0 +1,109 @@
+import {describe, it, expect} from 'vitest'
+import {parseSubtasksViaIndention} from '@/helpers/parseSubtasksViaIndention'
+
+describe('Parse Subtasks via Relation', () => {
+	it('Should not return a parent for a single task', () => {
+		const tasks = parseSubtasksViaIndention('single task')
+		
+		expect(tasks).to.have.length(1)
+		expect(tasks[0].parent).toBeNull()
+	})
+	it('Should not return a parent for multiple tasks without indention', () => {
+		const tasks = parseSubtasksViaIndention(`task one
+task two`)
+
+		expect(tasks).to.have.length(2)
+		expect(tasks[0].parent).toBeNull()
+		expect(tasks[1].parent).toBeNull()
+	})
+	it('Should return a parent for two tasks with indention', () => {
+		const tasks = parseSubtasksViaIndention(`parent task
+  sub task`)
+
+		expect(tasks).to.have.length(2)
+		expect(tasks[0].parent).toBeNull()
+		expect(tasks[0].title).to.eq('parent task')
+		expect(tasks[1].parent).to.eq('parent task')
+		expect(tasks[1].title).to.eq('sub task')
+	})
+	it('Should return a parent for multiple subtasks', () => {
+		const tasks = parseSubtasksViaIndention(`parent task
+  sub task one
+  sub task two`)
+
+		expect(tasks).to.have.length(3)
+		expect(tasks[0].parent).toBeNull()
+		expect(tasks[0].title).to.eq('parent task')
+		expect(tasks[1].title).to.eq('sub task one')
+		expect(tasks[1].parent).to.eq('parent task')
+		expect(tasks[2].title).to.eq('sub task two')
+		expect(tasks[2].parent).to.eq('parent task')
+	})
+	it('Should work with multiple indention levels', () => {
+		const tasks = parseSubtasksViaIndention(`parent task
+  sub task
+    sub sub task`)
+
+		expect(tasks).to.have.length(3)
+		expect(tasks[0].parent).toBeNull()
+		expect(tasks[0].title).to.eq('parent task')
+		expect(tasks[1].title).to.eq('sub task')
+		expect(tasks[1].parent).to.eq('parent task')
+		expect(tasks[2].title).to.eq('sub sub task')
+		expect(tasks[2].parent).to.eq('sub task')
+	})
+	it('Should work with multiple indention levels and multiple tasks', () => {
+		const tasks = parseSubtasksViaIndention(`parent task
+  sub task
+    sub sub task one
+    sub sub task two`)
+
+		expect(tasks).to.have.length(4)
+		expect(tasks[0].parent).toBeNull()
+		expect(tasks[0].title).to.eq('parent task')
+		expect(tasks[1].title).to.eq('sub task')
+		expect(tasks[1].parent).to.eq('parent task')
+		expect(tasks[2].title).to.eq('sub sub task one')
+		expect(tasks[2].parent).to.eq('sub task')
+		expect(tasks[3].title).to.eq('sub sub task two')
+		expect(tasks[3].parent).to.eq('sub task')
+	})
+	it('Should work with multiple indention levels and multiple tasks', () => {
+		const tasks = parseSubtasksViaIndention(`parent task
+  sub task
+    sub sub task one
+      sub sub sub task
+    sub sub task two`)
+
+		expect(tasks).to.have.length(5)
+		expect(tasks[0].parent).toBeNull()
+		expect(tasks[0].title).to.eq('parent task')
+		expect(tasks[1].title).to.eq('sub task')
+		expect(tasks[1].parent).to.eq('parent task')
+		expect(tasks[2].title).to.eq('sub sub task one')
+		expect(tasks[2].parent).to.eq('sub task')
+		expect(tasks[3].title).to.eq('sub sub sub task')
+		expect(tasks[3].parent).to.eq('sub sub task one')
+		expect(tasks[4].title).to.eq('sub sub task two')
+		expect(tasks[4].parent).to.eq('sub task')
+	})
+	it('Should return a parent for multiple subtasks with special stuff', () => {
+		const tasks = parseSubtasksViaIndention(`* parent task
+  * sub task one
+  sub task two`)
+
+		expect(tasks).to.have.length(3)
+		expect(tasks[0].parent).toBeNull()
+		expect(tasks[0].title).to.eq('parent task')
+		expect(tasks[1].title).to.eq('sub task one')
+		expect(tasks[1].parent).to.eq('parent task')
+		expect(tasks[2].title).to.eq('sub task two')
+		expect(tasks[2].parent).to.eq('parent task')
+	})
+	it('Should not break when the first line is indented', () => {
+		const tasks = parseSubtasksViaIndention('  single task')
+
+		expect(tasks).to.have.length(1)
+		expect(tasks[0].parent).toBeNull()
+	})
+})

src/helpers/parseSubtasksViaIndention.ts

@@ -0,0 +1,48 @@
+export interface TaskWithParent {
+	title: string,
+	parent: string | null,
+}
+
+function cleanupTitle(title: string) {
+	return title.replace(/^((\* |\+ |- )(\[ \] )?)/g, '')
+}
+
+const spaceRegex = /^ */
+
+/**
+ * @param taskTitles should be multiple lines of task tiles with indention to declare their parent/subtask
+ * relation between each other.
+ */
+export function parseSubtasksViaIndention(taskTitles: string): TaskWithParent[] {
+	const titles = taskTitles.split(/[\r\n]+/)
+
+	return titles.map((title, index) => {
+		const task: TaskWithParent = {
+			title: cleanupTitle(title),
+			parent: null,
+		}
+
+		if (index === 0) {
+			return task
+		}
+
+		const matched = spaceRegex.exec(title)
+		const matchedSpaces = matched ? matched[0].length : 0
+
+		if (matchedSpaces > 0) {
+			// Go up the tree to find the first task with less indention than the current one
+			let pi = 1
+			let parentSpaces = 0
+			do {
+				task.parent = cleanupTitle(titles[index - pi])
+				pi++
+				const parentMatched = spaceRegex.exec(task.parent)
+				parentSpaces = parentMatched ? parentMatched[0].length : 0
+			} while (parentSpaces >= matchedSpaces)
+			task.title = cleanupTitle(title.replace(spaceRegex, ''))
+			task.parent = task.parent.replace(spaceRegex, '')
+		}
+
+		return task
+	})
+}

src/helpers/randomId.ts

@@ -1,5 +1,5 @@
 const DEFAULT_ID_LENGTH = 9
 
 export function createRandomID(idLength = DEFAULT_ID_LENGTH) {
-	return Math.random().toString(36).substr(2, idLength)
+	return Math.random().toString(36).slice(2, idLength)
 }

src/helpers/redirectToProvider.ts

@@ -1,14 +1,9 @@
-import {createRandomID} from '@/helpers/randomId'
 import {parseURL} from 'ufo'
 
-export interface Provider {
-	name: string
-	key: string
-	authUrl: string
-	clientId: string
-}
+import {createRandomID} from '@/helpers/randomId'
+import type {IProvider} from '@/types/IProvider'
 
-export const redirectToProvider = (provider: Provider, redirectUrl: string = '') => {
+export const redirectToProvider = (provider: IProvider, redirectUrl = '') => {
 
 	// We're not using the redirect url provided by the server to allow redirects when using the electron app.
 	// The implications are not quite clear yet hence the logic to pass in another redirect url still exists.

src/helpers/saveListView.ts

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

src/helpers/savedFilter.ts

@@ -8,3 +8,7 @@ export function getSavedFilterIdFromListId(listId: IList['id']) {
 	}
 	return filterId
 }
+
+export function isSavedFilter(list: IList) {
+	return getSavedFilterIdFromListId(list.id) > 0
+}

src/helpers/scrollIntoView.ts

@@ -0,0 +1,19 @@
+export function scrollIntoView(el: HTMLElement | null | undefined) {
+	if (!el) {
+		return
+	}
+
+	const boundingRect = el.getBoundingClientRect()
+	const scrollY = window.scrollY
+
+	if (
+		boundingRect.top > (scrollY + window.innerHeight) ||
+		boundingRect.top < scrollY
+	) {
+		el.scrollIntoView({
+			behavior: 'smooth',
+			block: 'center',
+			inline: 'nearest',
+		})
+	}
+}

src/helpers/time/calculateDayInterval.ts

@@ -1,5 +1,5 @@
-export function calculateDayInterval(date, currentDay = (new Date().getDay())) {
-	switch (date) {
+export function calculateDayInterval(dateString: string, currentDay = (new Date().getDay())) {
+	switch (dateString) {
 		case 'today':
 			return 0
 		case 'tomorrow':

src/helpers/time/formatDate.ts

@@ -6,7 +6,7 @@ import {i18n} from '@/i18n'
 
 const locales = {en: enGB, de, ch: de, fr, ru}
 
-const dateIsValid = date => {
+export function dateIsValid(date) {
 	if (date === null) {
 		return false
 	}

src/helpers/time/parseDate.ts

@@ -125,16 +125,16 @@ const addTimeToDate = (text: string, date: Date, previousMatch: string | null):
 }
 
 export const getDateFromText = (text: string, now: Date = new Date()) => {
-	const fullDateRegex: RegExp = / ([0-9][0-9]?\/[0-9][0-9]?\/[0-9][0-9]([0-9][0-9])?|[0-9][0-9][0-9][0-9]\/[0-9][0-9]?\/[0-9][0-9]?|[0-9][0-9][0-9][0-9]-[0-9][0-9]?-[0-9][0-9]?)/ig
+	const fullDateRegex = / ([0-9][0-9]?\/[0-9][0-9]?\/[0-9][0-9]([0-9][0-9])?|[0-9][0-9][0-9][0-9]\/[0-9][0-9]?\/[0-9][0-9]?|[0-9][0-9][0-9][0-9]-[0-9][0-9]?-[0-9][0-9]?)/ig
 
 	// 1. Try parsing the text as a "usual" date, like 2021-06-24 or 06/24/2021
 	let results: string[] | null = fullDateRegex.exec(text)
 	let result: string | null = results === null ? null : results[0]
 	let foundText: string | null = result
-	let containsYear: boolean = true
+	let containsYear = true
 	if (result === null) {
 		// 2. Try parsing the date as something like "jan 21" or "21 jan"
-		const monthRegex: RegExp = new RegExp(` (${monthsRegexGroup} [0-9][0-9]?|[0-9][0-9]? ${monthsRegexGroup})`, 'ig')
+		const monthRegex = new RegExp(` (${monthsRegexGroup} [0-9][0-9]?|[0-9][0-9]? ${monthsRegexGroup})`, 'ig')
 		results = monthRegex.exec(text)
 		result = results === null ? null : `${results[0]} ${now.getFullYear()}`.trim()
 		foundText = results === null ? '' : results[0].trim()
@@ -142,7 +142,7 @@ export const getDateFromText = (text: string, now: Date = new Date()) => {
 
 		if (result === null) {
 			// 3. Try parsing the date as "27/01" or "01/27"
-			const monthNumericRegex: RegExp = / ([0-9][0-9]?\/[0-9][0-9]?)/ig
+			const monthNumericRegex = / ([0-9][0-9]?\/[0-9][0-9]?)/ig
 			results = monthNumericRegex.exec(text)
 
 			// Put the year before or after the date, depending on what works
@@ -229,7 +229,7 @@ export const getDateFromTextIn = (text: string, now: Date = new Date()) => {
 }
 
 const getDateFromWeekday = (text: string): dateFoundResult => {
-	const matcher: RegExp = / (next )?(monday|mon|tuesday|tue|wednesday|wed|thursday|thu|friday|fri|saturday|sat|sunday|sun)($| )/g
+	const matcher = / (next )?(monday|mon|tuesday|tue|wednesday|wed|thursday|thu|friday|fri|saturday|sat|sunday|sun)($| )/g
 	const results: string[] | null = matcher.exec(text.toLowerCase()) // The i modifier does not seem to work.
 	if (results === null) {
 		return {
@@ -240,7 +240,7 @@ const getDateFromWeekday = (text: string): dateFoundResult => {
 
 	const date: Date = new Date()
 	const currentDay: number = date.getDay()
-	let day: number = 0
+	let day = 0
 
 	switch (results[2]) {
 		case 'mon':
@@ -285,7 +285,7 @@ const getDateFromWeekday = (text: string): dateFoundResult => {
 	// matched string comes with a space at the end (last part of the regex).
 	let foundText = results[0]
 	if (foundText.endsWith(' ')) {
-		foundText = foundText.substr(0, foundText.length - 1)
+		foundText = foundText.slice(0, foundText.length - 1)
 	}
 
 	return {

src/helpers/time/parseDateOrString.ts

@@ -1,12 +1,11 @@
-export function parseDateOrString(rawValue: string | undefined, fallback: any): string | Date {
+export function parseDateOrString(rawValue: string | undefined, fallback: unknown) {
 	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)
+	return !isNaN(+d)
 		? d
 		: rawValue
 }

src/helpers/utils.ts

@@ -15,7 +15,7 @@ export function isNil(value: unknown) {
 	return value == null
 }
 
-export function omitBy(obj: {}, check: (value: unknown) => boolean) {
+export function omitBy(obj: Record<string, unknown>, check: (value: unknown) => boolean) {
 	if (isNil(obj)) {
 		return {}
 	}

src/i18n/lang/ca-ES.json

@@ -169,6 +169,14 @@
     "title": "List Title",
     "color": "Color",
     "lists": "Lists",
+    "list": {
+      "title": "List",
+      "add": "Add",
+      "addPlaceholder": "Add a new task…",
+      "empty": "This list is currently empty.",
+      "newTaskCta": "Create a new task.",
+      "editTask": "Edit Task"
+    },
     "search": "Type to search for a list…",
     "searchSelect": "Click or press enter to select this list",
     "shared": "Shared Lists",
@@ -270,14 +278,6 @@
         "delete": "Delete"
       }
     },
-    "list": {
-      "title": "List",
-      "add": "Add",
-      "addPlaceholder": "Add a new task…",
-      "empty": "This list is currently empty.",
-      "newTaskCta": "Create a new task.",
-      "editTask": "Edit Task"
-    },
     "gantt": {
       "title": "Gantt",
       "showTasksWithoutDates": "Show tasks which don't have dates set",
@@ -672,13 +672,23 @@
       "updated": "Updated"
     },
     "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.",
+      "subscribedListThroughParentNamespace": "You can't unsubscribe here because you are subscribed to this list through its namespace.",
+      "subscribedTaskThroughParentNamespace": "You can't unsubscribe here because you are subscribed to this task through its namespace.",
+      "subscribedTaskThroughParentList": "You can't unsubscribe here because you are subscribed to this task through its list.",
+      "subscribedNamespace": "You are currently subscribed to this namespace and will receive notifications for changes.",
+      "notSubscribedNamespace": "You are not subscribed to this namespace and won't receive notifications for changes.",
+      "subscribedList": "You are currently subscribed to this list and will receive notifications for changes.",
+      "notSubscribedList": "You are not subscribed to this list and won't receive notifications for changes.",
+      "subscribedTask": "You are currently subscribed to this task and will receive notifications for changes.",
+      "notSubscribedTask": "You are not subscribed to this task 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}"
+      "subscribeSuccessNamespace": "You are now subscribed to this namespace",
+      "unsubscribeSuccessNamespace": "You are now unsubscribed to this namespace",
+      "subscribeSuccessList": "You are now subscribed to this list",
+      "unsubscribeSuccessList": "You are now unsubscribed to this list",
+      "subscribeSuccessTask": "You are now subscribed to this task",
+      "unsubscribeSuccessTask": "You are now unsubscribed to this task"
     },
     "attachment": {
       "title": "Attachments",
@@ -690,7 +700,11 @@
       "deleteTooltip": "Delete this attachment",
       "deleteText1": "Are you sure you want to delete the attachment {filename}?",
       "copyUrl": "Copy URL",
-      "copyUrlTooltip": "Copy the url of this attachment for usage in text"
+      "copyUrlTooltip": "Copy the url of this attachment for usage in text",
+      "setAsCover": "Make cover",
+      "unsetAsCover": "Remove cover",
+      "successfullyChangedCoverImage": "The cover image was successfully changed.",
+      "usedAsCover": "Cover image"
     },
     "comment": {
       "title": "Comments",
@@ -839,6 +853,12 @@
         "text1": "Are you sure you want to remove this user from the team?",
         "text2": "They will lose access to all lists and namespaces this team has access to. This CANNOT BE UNDONE!",
         "success": "The user was successfully deleted from the team."
+      },
+      "leave": {
+        "title": "Leave team",
+        "text1": "Are you sure you want to leave this team?",
+        "text2": "You will loose access to all lists and namespaces this team has access to. If you change your mind you'll need a team admin to add you again.",
+        "success": "You have successfully left the team."
       }
     },
     "attributes": {

src/i18n/lang/cs-CZ.json

@@ -169,6 +169,14 @@
     "title": "Název seznamu",
     "color": "Barva",
     "lists": "Seznamy",
+    "list": {
+      "title": "Seznam",
+      "add": "Přidat",
+      "addPlaceholder": "Přidat nový úkol…",
+      "empty": "Tento seznam je nyní prázdný.",
+      "newTaskCta": "Vytvořit nový úkol.",
+      "editTask": "Upravit úkol"
+    },
     "search": "Začni psát pro vyhledání seznamu…",
     "searchSelect": "Klikněte nebo stiskněte Enter pro výběr tohoto seznamu",
     "shared": "Sdílené seznamy",
@@ -270,14 +278,6 @@
         "delete": "Smazat"
       }
     },
-    "list": {
-      "title": "Seznam",
-      "add": "Přidat",
-      "addPlaceholder": "Přidat nový úkol…",
-      "empty": "Tento seznam je nyní prázdný.",
-      "newTaskCta": "Vytvořit nový úkol.",
-      "editTask": "Upravit úkol"
-    },
     "gantt": {
       "title": "Gantt",
       "showTasksWithoutDates": "Zobrazit úkoly, které nemají nastavené datum",
@@ -672,13 +672,23 @@
       "updated": "Aktualizováno"
     },
     "subscription": {
-      "subscribedThroughParent": "Zde se nemůžete odhlásit, protože jste přihlášeni k odběru {entity} prostřednictvím jeho {parent}.",
-      "subscribed": "Aktuálně jste přihlášeni k odběru {entity} a budete dostávat oznámení o změnách.",
-      "notSubscribed": "Nejste přihlášeni k odběru {entity} a nebudete dostávat upozornění na změny.",
+      "subscribedListThroughParentNamespace": "You can't unsubscribe here because you are subscribed to this list through its namespace.",
+      "subscribedTaskThroughParentNamespace": "You can't unsubscribe here because you are subscribed to this task through its namespace.",
+      "subscribedTaskThroughParentList": "You can't unsubscribe here because you are subscribed to this task through its list.",
+      "subscribedNamespace": "You are currently subscribed to this namespace and will receive notifications for changes.",
+      "notSubscribedNamespace": "You are not subscribed to this namespace and won't receive notifications for changes.",
+      "subscribedList": "You are currently subscribed to this list and will receive notifications for changes.",
+      "notSubscribedList": "You are not subscribed to this list and won't receive notifications for changes.",
+      "subscribedTask": "You are currently subscribed to this task and will receive notifications for changes.",
+      "notSubscribedTask": "You are not subscribed to this task and won't receive notifications for changes.",
       "subscribe": "Odebírat",
       "unsubscribe": "Odhlásit odběr",
-      "subscribeSuccess": "Nyní jste přihlášeni k odběru {entity}",
-      "unsubscribeSuccess": "Nyní jste odhlášeni od odběru {entity}"
+      "subscribeSuccessNamespace": "You are now subscribed to this namespace",
+      "unsubscribeSuccessNamespace": "You are now unsubscribed to this namespace",
+      "subscribeSuccessList": "You are now subscribed to this list",
+      "unsubscribeSuccessList": "You are now unsubscribed to this list",
+      "subscribeSuccessTask": "You are now subscribed to this task",
+      "unsubscribeSuccessTask": "You are now unsubscribed to this task"
     },
     "attachment": {
       "title": "Přílohy",
@@ -690,7 +700,11 @@
       "deleteTooltip": "Smazat tuto přílohu",
       "deleteText1": "Opravdu chcete odstranit přílohu {filename}?",
       "copyUrl": "Kopírovat URL",
-      "copyUrlTooltip": "Kopírovat URL této přílohy pro použití v textu"
+      "copyUrlTooltip": "Kopírovat URL této přílohy pro použití v textu",
+      "setAsCover": "Make cover",
+      "unsetAsCover": "Remove cover",
+      "successfullyChangedCoverImage": "The cover image was successfully changed.",
+      "usedAsCover": "Cover image"
     },
     "comment": {
       "title": "Komentáře",
@@ -839,6 +853,12 @@
         "text1": "Opravdu chcete odebrat tohoto uživatele z týmu?",
         "text2": "Ztratí přístup ke všem seznamům a prostorům, k nimž má tento tým přístup. To NEMŮŽE BÝT VZATO ZPĚT!",
         "success": "Uživatel byl úspěšně odstraněn z týmu."
+      },
+      "leave": {
+        "title": "Leave team",
+        "text1": "Are you sure you want to leave this team?",
+        "text2": "You will loose access to all lists and namespaces this team has access to. If you change your mind you'll need a team admin to add you again.",
+        "success": "You have successfully left the team."
       }
     },
     "attributes": {

src/i18n/lang/de-DE.json

@@ -169,6 +169,14 @@
     "title": "Listentitel",
     "color": "Farbe",
     "lists": "Listen",
+    "list": {
+      "title": "Liste",
+      "add": "Hinzufügen",
+      "addPlaceholder": "Eine neue Aufgabe hinzufügen …",
+      "empty": "Diese Liste ist derzeit leer.",
+      "newTaskCta": "Eine neue Aufgabe erstellen.",
+      "editTask": "Aufgabe bearbeiten"
+    },
     "search": "Tippe, um nach einer Liste zu suchen…",
     "searchSelect": "Klicke auf oder drücke die Eingabetaste, um diese Liste auszuwählen",
     "shared": "Geteilte Listen",
@@ -270,14 +278,6 @@
         "delete": "Löschen"
       }
     },
-    "list": {
-      "title": "Liste",
-      "add": "Hinzufügen",
-      "addPlaceholder": "Eine neue Aufgabe hinzufügen …",
-      "empty": "Diese Liste ist derzeit leer.",
-      "newTaskCta": "Eine neue Aufgabe erstellen.",
-      "editTask": "Aufgabe bearbeiten"
-    },
     "gantt": {
       "title": "Gantt",
       "showTasksWithoutDates": "Aufgaben anzeigen, für die keine Daten festgelegt sind",
@@ -672,13 +672,23 @@
       "updated": "Aktualisiert"
     },
     "subscription": {
-      "subscribedThroughParent": "Du kannst hier nicht de-abonnieren, da du diese {entity} durch {parent} abonniert hast.",
-      "subscribed": "Du erhältst Benachrichtigungen zu dieser {entity}.",
-      "notSubscribed": "Du hast diese {entity} nicht abonniert und erhältst keine Benachrichtigungen über Änderungen.",
+      "subscribedListThroughParentNamespace": "Du kannst hier nicht de-abonnieren, da du diese Liste über ihren Namespace abonniert hast.",
+      "subscribedTaskThroughParentNamespace": "Du kannst hier nicht de-abonnieren, da du diese Aufgabe über ihren Namespace abonniert hast.",
+      "subscribedTaskThroughParentList": "Du kannst hier nicht de-abonnieren, da du diese Aufgabe über ihre Liste abonniert hast.",
+      "subscribedNamespace": "Du hast diesen Namespace abonniert und erhältst Benachrichtigungen über Änderungen.",
+      "notSubscribedNamespace": "Du hast diesen Namespace nicht abonniert und erhältst keine Benachrichtigungen über Änderungen.",
+      "subscribedList": "Du hast diese Liste abonniert und erhältst Benachrichtigungen über Änderungen.",
+      "notSubscribedList": "Du hast diese Liste nicht abonniert und erhältst keine Benachrichtigungen über Änderungen.",
+      "subscribedTask": "Du hast diese Aufgabe abonniert und erhältst Benachrichtigungen über Änderungen.",
+      "notSubscribedTask": "Du hast diese Aufgabe nicht abonniert und erhältst keine Benachrichtigungen über Änderungen.",
       "subscribe": "Abonnieren",
       "unsubscribe": "Abbestellen",
-      "subscribeSuccess": "Du hast jetzt diese {entity} abonniert",
-      "unsubscribeSuccess": "Du hast diese {entity} jetzt abbestellt"
+      "subscribeSuccessNamespace": "Du hast diesen Namespace jetzt abonniert",
+      "unsubscribeSuccessNamespace": "Du hast diesen Namespace jetzt nicht mehr abonniert",
+      "subscribeSuccessList": "Du hast diese Liste jetzt abonniert",
+      "unsubscribeSuccessList": "Du hast diese Liste jetzt nicht mehr abonniert",
+      "subscribeSuccessTask": "Du hast diese Aufgabe jetzt abonniert",
+      "unsubscribeSuccessTask": "Du hast diese Aufgabe jetzt nicht mehr abonniert"
     },
     "attachment": {
       "title": "Anhänge",
@@ -690,7 +700,11 @@
       "deleteTooltip": "Diesen Anhang löschen",
       "deleteText1": "Soll der Anhang {filename} gelöscht werden?",
       "copyUrl": "URL kopieren",
-      "copyUrlTooltip": "Die URL dieses Anhangs zur Verwendung im Text kopieren"
+      "copyUrlTooltip": "Die URL dieses Anhangs zur Verwendung im Text kopieren",
+      "setAsCover": "Als Titelbild setzen",
+      "unsetAsCover": "Titelbild entfernen",
+      "successfullyChangedCoverImage": "Das Titelbild wurde erfolgreich geändert.",
+      "usedAsCover": "Titelbild"
     },
     "comment": {
       "title": "Kommentare",
@@ -839,6 +853,12 @@
         "text1": "Bist du sicher, dass du diese:n Benutzer:in aus dem Team entfernen willst?",
         "text2": "Diese:r Benutzer:in verliert den Zugriff auf alle Listen und Namespaces auf die dieses Team Zugriff hat. Dies kann nicht rückgängig gemacht werden!",
         "success": "Der:die Benutzer:in wurde erfolgreich aus dem Team gelöscht."
+      },
+      "leave": {
+        "title": "Team verlassen",
+        "text1": "Bist du sicher, dass du dieses Team verlassen willst?",
+        "text2": "Du wirst Zugriff auf alle Listen und Namespaces verlieren, auf die dieses Team Zugriff hat. Wenn du deine Meinung änderst, musst du durch einen Team-Admin wieder hinzugefügt werden.",
+        "success": "Du hast das Team erfolgreich verlassen."
       }
     },
     "attributes": {

src/i18n/lang/de-swiss.json

@@ -169,6 +169,14 @@
     "title": "Liste Titl",
     "color": "Farb",
     "lists": "Listene",
+    "list": {
+      "title": "Liste",
+      "add": "Hinzuefüege",
+      "addPlaceholder": "E neui Uufgab erstelle…",
+      "empty": "D'Liste isch momentan leer.",
+      "newTaskCta": "Neui Uufgab erstelle.",
+      "editTask": "Uufgab bearbeite"
+    },
     "search": "Schriib, um nachere Liste z'sueche…",
     "searchSelect": "Druck uf Enter um die Liste uuszwähle",
     "shared": "Teilti Liste",
@@ -270,14 +278,6 @@
         "delete": "Chüble"
       }
     },
-    "list": {
-      "title": "Liste",
-      "add": "Hinzuefüege",
-      "addPlaceholder": "E neui Uufgab erstelle…",
-      "empty": "D'Liste isch momentan leer.",
-      "newTaskCta": "Neui Uufgab erstelle.",
-      "editTask": "Uufgab bearbeite"
-    },
     "gantt": {
       "title": "Gantt",
       "showTasksWithoutDates": "Zeig Uufgabe, wo kei Date hend",
@@ -672,13 +672,23 @@
       "updated": "Aktualisiert"
     },
     "subscription": {
-      "subscribedThroughParent": "Du chasch da nid deabonnierä, weil du zu dere {entity} durch {parent} dezue abonniert bisch.",
-      "subscribed": "Du bisch momentan zu dere {entity} abonniert und bechunsch Benachrichtigunge für Änderige.",
-      "notSubscribed": "Du bisch momentan nid zu dere {entity} abonniert und bechunsch kei Benachrichtigunge für Änderige.",
+      "subscribedListThroughParentNamespace": "Du kannst hier nicht de-abonnieren, da du diese Liste über ihren Namespace abonniert hast.",
+      "subscribedTaskThroughParentNamespace": "Du kannst hier nicht de-abonnieren, da du diese Aufgabe über ihren Namespace abonniert hast.",
+      "subscribedTaskThroughParentList": "Du kannst hier nicht de-abonnieren, da du diese Aufgabe über ihre Liste abonniert hast.",
+      "subscribedNamespace": "Du hast diesen Namespace abonniert und erhältst Benachrichtigungen über Änderungen.",
+      "notSubscribedNamespace": "Du hast diesen Namespace nicht abonniert und erhältst keine Benachrichtigungen über Änderungen.",
+      "subscribedList": "Du hast diese Liste abonniert und erhältst Benachrichtigungen über Änderungen.",
+      "notSubscribedList": "Du hast diese Liste nicht abonniert und erhältst keine Benachrichtigungen über Änderungen.",
+      "subscribedTask": "Du hast diese Aufgabe abonniert und erhältst Benachrichtigungen über Änderungen.",
+      "notSubscribedTask": "Du hast diese Aufgabe nicht abonniert und erhältst keine Benachrichtigungen über Änderungen.",
       "subscribe": "Abooniere",
       "unsubscribe": "Deabonniere",
-      "subscribeSuccess": "Du hesch die {entity} abonniert",
-      "unsubscribeSuccess": "Du hesch die {entity} deabonniert"
+      "subscribeSuccessNamespace": "Du hast diesen Namespace jetzt abonniert",
+      "unsubscribeSuccessNamespace": "Du hast diesen Namespace jetzt nicht mehr abonniert",
+      "subscribeSuccessList": "Du hast diese Liste jetzt abonniert",
+      "unsubscribeSuccessList": "Du hast diese Liste jetzt nicht mehr abonniert",
+      "subscribeSuccessTask": "Du hast diese Aufgabe jetzt abonniert",
+      "unsubscribeSuccessTask": "Du hast diese Aufgabe jetzt nicht mehr abonniert"
     },
     "attachment": {
       "title": "Aahhäng",
@@ -690,7 +700,11 @@
       "deleteTooltip": "De Aahhang lösche",
       "deleteText1": "Bisch du dir sicher, dass du de Aahang {filename} lösche wetsch?",
       "copyUrl": "URL Kopierä",
-      "copyUrlTooltip": "D'Url vo dem Aahang kopiere, um sie im Text zbruuche"
+      "copyUrlTooltip": "D'Url vo dem Aahang kopiere, um sie im Text zbruuche",
+      "setAsCover": "Als Titelbild setzen",
+      "unsetAsCover": "Titelbild entfernen",
+      "successfullyChangedCoverImage": "Das Titelbild wurde erfolgreich geändert.",
+      "usedAsCover": "Titelbild"
     },
     "comment": {
       "title": "Kommentär",
@@ -839,6 +853,12 @@
         "text1": "Bisch du dir sicher, dass du de Benutzer usm Team werfe wetsch?",
         "text2": "Diese:r Benutzer:in verliert den Zugriff auf alle Listen und Namespaces auf die dieses Team Zugriff hat. Dies kann nicht rückgängig gemacht werden!",
         "success": "Benutzer erfolgriich usegworfe."
+      },
+      "leave": {
+        "title": "Team verlassen",
+        "text1": "Bist du sicher, dass du dieses Team verlassen willst?",
+        "text2": "Du wirst Zugriff auf alle Listen und Namespaces verlieren, auf die dieses Team Zugriff hat. Wenn du deine Meinung änderst, musst du durch einen Team-Admin wieder hinzugefügt werden.",
+        "success": "Du hast das Team erfolgreich verlassen."
       }
     },
     "attributes": {

src/i18n/lang/en.json

@@ -169,6 +169,7 @@
     "title": "List Title",
     "color": "Color",
     "lists": "Lists",
+    "list": "List",
     "search": "Type to search for a list…",
     "searchSelect": "Click or press enter to select this list",
     "shared": "Shared Lists",
@@ -616,12 +617,6 @@
       "select": "Select a date range",
       "noTasks": "Nothing to do — Have a nice day!"
     },
-    "create": {
-      "heading": "Create a task in {list}",
-      "title": "Enter the title of the new task…",
-      "descriptionPlaceholder": "Enter your description here…",
-      "description": "Add description…"
-    },
     "detail": {
       "chooseDueDate": "Click here to set a due date",
       "chooseStartDate": "Click here to set a start date",
@@ -681,13 +676,23 @@
       "updated": "Updated"
     },
     "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.",
+      "subscribedListThroughParentNamespace": "You can't unsubscribe here because you are subscribed to this list through its namespace.",
+      "subscribedTaskThroughParentNamespace": "You can't unsubscribe here because you are subscribed to this task through its namespace.",
+      "subscribedTaskThroughParentList": "You can't unsubscribe here because you are subscribed to this task through its list.",
+      "subscribedNamespace": "You are currently subscribed to this namespace and will receive notifications for changes.",
+      "notSubscribedNamespace": "You are not subscribed to this namespace and won't receive notifications for changes.",
+      "subscribedList": "You are currently subscribed to this list and will receive notifications for changes.",
+      "notSubscribedList": "You are not subscribed to this list and won't receive notifications for changes.",
+      "subscribedTask": "You are currently subscribed to this task and will receive notifications for changes.",
+      "notSubscribedTask": "You are not subscribed to this task 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}"
+      "subscribeSuccessNamespace": "You are now subscribed to this namespace",
+      "unsubscribeSuccessNamespace": "You are now unsubscribed to this namespace",
+      "subscribeSuccessList": "You are now subscribed to this list",
+      "unsubscribeSuccessList": "You are now unsubscribed to this list",
+      "subscribeSuccessTask": "You are now subscribed to this task",
+      "unsubscribeSuccessTask": "You are now unsubscribed to this task"
     },
     "attachment": {
       "title": "Attachments",
@@ -699,7 +704,11 @@
       "deleteTooltip": "Delete this attachment",
       "deleteText1": "Are you sure you want to delete the attachment {filename}?",
       "copyUrl": "Copy URL",
-      "copyUrlTooltip": "Copy the url of this attachment for usage in text"
+      "copyUrlTooltip": "Copy the url of this attachment for usage in text",
+      "setAsCover": "Make cover",
+      "unsetAsCover": "Remove cover",
+      "successfullyChangedCoverImage": "The cover image was successfully changed.",
+      "usedAsCover": "Cover image"
     },
     "comment": {
       "title": "Comments",
@@ -848,6 +857,12 @@
         "text1": "Are you sure you want to remove this user from the team?",
         "text2": "They will lose access to all lists and namespaces this team has access to. This CANNOT BE UNDONE!",
         "success": "The user was successfully deleted from the team."
+      },
+      "leave": {
+        "title": "Leave team",
+        "text1": "Are you sure you want to leave this team?",
+        "text2": "You will loose access to all lists and namespaces this team has access to. If you change your mind you'll need a team admin to add you again.",
+        "success": "You have successfully left the team."
       }
     },
     "attributes": {
@@ -939,6 +954,7 @@
     "lists": "Lists",
     "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})",

src/i18n/lang/es-ES.json

@@ -169,6 +169,14 @@
     "title": "List Title",
     "color": "Color",
     "lists": "Lists",
+    "list": {
+      "title": "List",
+      "add": "Add",
+      "addPlaceholder": "Add a new task…",
+      "empty": "This list is currently empty.",
+      "newTaskCta": "Create a new task.",
+      "editTask": "Edit Task"
+    },
     "search": "Type to search for a list…",
     "searchSelect": "Click or press enter to select this list",
     "shared": "Shared Lists",
@@ -270,14 +278,6 @@
         "delete": "Delete"
       }
     },
-    "list": {
-      "title": "List",
-      "add": "Add",
-      "addPlaceholder": "Add a new task…",
-      "empty": "This list is currently empty.",
-      "newTaskCta": "Create a new task.",
-      "editTask": "Edit Task"
-    },
     "gantt": {
       "title": "Gantt",
       "showTasksWithoutDates": "Show tasks which don't have dates set",
@@ -672,13 +672,23 @@
       "updated": "Updated"
     },
     "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.",
+      "subscribedListThroughParentNamespace": "You can't unsubscribe here because you are subscribed to this list through its namespace.",
+      "subscribedTaskThroughParentNamespace": "You can't unsubscribe here because you are subscribed to this task through its namespace.",
+      "subscribedTaskThroughParentList": "You can't unsubscribe here because you are subscribed to this task through its list.",
+      "subscribedNamespace": "You are currently subscribed to this namespace and will receive notifications for changes.",
+      "notSubscribedNamespace": "You are not subscribed to this namespace and won't receive notifications for changes.",
+      "subscribedList": "You are currently subscribed to this list and will receive notifications for changes.",
+      "notSubscribedList": "You are not subscribed to this list and won't receive notifications for changes.",
+      "subscribedTask": "You are currently subscribed to this task and will receive notifications for changes.",
+      "notSubscribedTask": "You are not subscribed to this task 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}"
+      "subscribeSuccessNamespace": "You are now subscribed to this namespace",
+      "unsubscribeSuccessNamespace": "You are now unsubscribed to this namespace",
+      "subscribeSuccessList": "You are now subscribed to this list",
+      "unsubscribeSuccessList": "You are now unsubscribed to this list",
+      "subscribeSuccessTask": "You are now subscribed to this task",
+      "unsubscribeSuccessTask": "You are now unsubscribed to this task"
     },
     "attachment": {
       "title": "Attachments",
@@ -690,7 +700,11 @@
       "deleteTooltip": "Delete this attachment",
       "deleteText1": "Are you sure you want to delete the attachment {filename}?",
       "copyUrl": "Copy URL",
-      "copyUrlTooltip": "Copy the url of this attachment for usage in text"
+      "copyUrlTooltip": "Copy the url of this attachment for usage in text",
+      "setAsCover": "Make cover",
+      "unsetAsCover": "Remove cover",
+      "successfullyChangedCoverImage": "The cover image was successfully changed.",
+      "usedAsCover": "Cover image"
     },
     "comment": {
       "title": "Comments",
@@ -839,6 +853,12 @@
         "text1": "Are you sure you want to remove this user from the team?",
         "text2": "They will lose access to all lists and namespaces this team has access to. This CANNOT BE UNDONE!",
         "success": "The user was successfully deleted from the team."
+      },
+      "leave": {
+        "title": "Leave team",
+        "text1": "Are you sure you want to leave this team?",
+        "text2": "You will loose access to all lists and namespaces this team has access to. If you change your mind you'll need a team admin to add you again.",
+        "success": "You have successfully left the team."
       }
     },
     "attributes": {

src/i18n/lang/fr-FR.json

@@ -169,6 +169,14 @@
     "title": "Nom de la liste",
     "color": "Couleur",
     "lists": "Listes",
+    "list": {
+      "title": "Liste",
+      "add": "Ajouter",
+      "addPlaceholder": "Ajouter une nouvelle tâche…",
+      "empty": "Cette liste est actuellement vide.",
+      "newTaskCta": "Créer une nouvelle tâche.",
+      "editTask": "Modifier la tâche"
+    },
     "search": "Écris pour rechercher une liste…",
     "searchSelect": "Clique ou appuie sur la touche Entrée pour sélectionner cette liste",
     "shared": "Listes partagées",
@@ -270,14 +278,6 @@
         "delete": "Supprimer"
       }
     },
-    "list": {
-      "title": "Liste",
-      "add": "Ajouter",
-      "addPlaceholder": "Ajouter une nouvelle tâche…",
-      "empty": "Cette liste est actuellement vide.",
-      "newTaskCta": "Créer une nouvelle tâche.",
-      "editTask": "Modifier la tâche"
-    },
     "gantt": {
       "title": "Gantt",
       "showTasksWithoutDates": "Afficher les tâches pour lesquelles aucune date n’a été fixée",
@@ -672,13 +672,23 @@
       "updated": "Mis à jour"
     },
     "subscription": {
-      "subscribedThroughParent": "Tu ne peux pas te désabonner ici car tu es abonné·e à cette {entity} par le biais de son {parent}.",
-      "subscribed": "Tu es actuellement abonné·e à cette {entity} et recevras des notifications pour les changements.",
-      "notSubscribed": "Tu n’es pas abonné·e à cette {entity} et ne recevras pas de notifications pour les changements.",
+      "subscribedListThroughParentNamespace": "You can't unsubscribe here because you are subscribed to this list through its namespace.",
+      "subscribedTaskThroughParentNamespace": "You can't unsubscribe here because you are subscribed to this task through its namespace.",
+      "subscribedTaskThroughParentList": "You can't unsubscribe here because you are subscribed to this task through its list.",
+      "subscribedNamespace": "You are currently subscribed to this namespace and will receive notifications for changes.",
+      "notSubscribedNamespace": "You are not subscribed to this namespace and won't receive notifications for changes.",
+      "subscribedList": "You are currently subscribed to this list and will receive notifications for changes.",
+      "notSubscribedList": "You are not subscribed to this list and won't receive notifications for changes.",
+      "subscribedTask": "You are currently subscribed to this task and will receive notifications for changes.",
+      "notSubscribedTask": "You are not subscribed to this task and won't receive notifications for changes.",
       "subscribe": "S’abonner",
       "unsubscribe": "Se désabonner",
-      "subscribeSuccess": "Tu es maintenant abonné·e à cette {entity}",
-      "unsubscribeSuccess": "Tu es maintenant désabonné·e de cette {entity}"
+      "subscribeSuccessNamespace": "You are now subscribed to this namespace",
+      "unsubscribeSuccessNamespace": "You are now unsubscribed to this namespace",
+      "subscribeSuccessList": "You are now subscribed to this list",
+      "unsubscribeSuccessList": "You are now unsubscribed to this list",
+      "subscribeSuccessTask": "You are now subscribed to this task",
+      "unsubscribeSuccessTask": "You are now unsubscribed to this task"
     },
     "attachment": {
       "title": "Pièces jointes",
@@ -690,7 +700,11 @@
       "deleteTooltip": "Supprimer cette pièce jointe",
       "deleteText1": "Supprimer la pièce jointe {filename} ?",
       "copyUrl": "Copier l’URL",
-      "copyUrlTooltip": "Copier l’URL de cette pièce jointe pour l’utiliser dans le texte"
+      "copyUrlTooltip": "Copier l’URL de cette pièce jointe pour l’utiliser dans le texte",
+      "setAsCover": "Make cover",
+      "unsetAsCover": "Remove cover",
+      "successfullyChangedCoverImage": "The cover image was successfully changed.",
+      "usedAsCover": "Cover image"
     },
     "comment": {
       "title": "Commentaires",
@@ -839,6 +853,12 @@
         "text1": "Retirer cette personne de l’équipe ?",
         "text2": "Ils perdront l'accès à toutes les listes et espaces de noms auxquels cette équipe a accès. Ceci NE PEUT PAS ÊTRE ANNULÉ !",
         "success": "Utilisateur·rice retiré·e de l’équipe."
+      },
+      "leave": {
+        "title": "Leave team",
+        "text1": "Are you sure you want to leave this team?",
+        "text2": "You will loose access to all lists and namespaces this team has access to. If you change your mind you'll need a team admin to add you again.",
+        "success": "You have successfully left the team."
       }
     },
     "attributes": {

src/i18n/lang/it-IT.json

@@ -169,6 +169,14 @@
     "title": "Titolo della Lista",
     "color": "Colore",
     "lists": "Liste",
+    "list": {
+      "title": "Lista",
+      "add": "Aggiungi",
+      "addPlaceholder": "Aggiungi una nuova attività…",
+      "empty": "Questa lista è attualmente vuota.",
+      "newTaskCta": "Crea una nuova attività.",
+      "editTask": "Modifica Attività"
+    },
     "search": "Digita per cercare una lista…",
     "searchSelect": "Fare clic o premere invio per selezionare questa lista",
     "shared": "Liste Condivise",
@@ -270,14 +278,6 @@
         "delete": "Elimina"
       }
     },
-    "list": {
-      "title": "Lista",
-      "add": "Aggiungi",
-      "addPlaceholder": "Aggiungi una nuova attività…",
-      "empty": "Questa lista è attualmente vuota.",
-      "newTaskCta": "Crea una nuova attività.",
-      "editTask": "Modifica Attività"
-    },
     "gantt": {
       "title": "Gantt",
       "showTasksWithoutDates": "Mostra attività che non hanno date impostate",
@@ -672,13 +672,23 @@
       "updated": "Aggiornato"
     },
     "subscription": {
-      "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.",
+      "subscribedListThroughParentNamespace": "You can't unsubscribe here because you are subscribed to this list through its namespace.",
+      "subscribedTaskThroughParentNamespace": "You can't unsubscribe here because you are subscribed to this task through its namespace.",
+      "subscribedTaskThroughParentList": "You can't unsubscribe here because you are subscribed to this task through its list.",
+      "subscribedNamespace": "You are currently subscribed to this namespace and will receive notifications for changes.",
+      "notSubscribedNamespace": "You are not subscribed to this namespace and won't receive notifications for changes.",
+      "subscribedList": "You are currently subscribed to this list and will receive notifications for changes.",
+      "notSubscribedList": "You are not subscribed to this list and won't receive notifications for changes.",
+      "subscribedTask": "You are currently subscribed to this task and will receive notifications for changes.",
+      "notSubscribedTask": "You are not subscribed to this task and won't receive notifications for changes.",
       "subscribe": "Iscriviti",
       "unsubscribe": "Disiscriviti",
-      "subscribeSuccess": "Ti sei iscritto a questo {entity}",
-      "unsubscribeSuccess": "Ti sei disiscritto a questo {entity}"
+      "subscribeSuccessNamespace": "You are now subscribed to this namespace",
+      "unsubscribeSuccessNamespace": "You are now unsubscribed to this namespace",
+      "subscribeSuccessList": "You are now subscribed to this list",
+      "unsubscribeSuccessList": "You are now unsubscribed to this list",
+      "subscribeSuccessTask": "You are now subscribed to this task",
+      "unsubscribeSuccessTask": "You are now unsubscribed to this task"
     },
     "attachment": {
       "title": "Allegati",
@@ -690,7 +700,11 @@
       "deleteTooltip": "Elimina questo allegato",
       "deleteText1": "Sei sicuro di voler eliminare l'allegato {filename}?",
       "copyUrl": "Copia URL",
-      "copyUrlTooltip": "Copia l'URL di questo allegato per usarlo nel testo"
+      "copyUrlTooltip": "Copia l'URL di questo allegato per usarlo nel testo",
+      "setAsCover": "Make cover",
+      "unsetAsCover": "Remove cover",
+      "successfullyChangedCoverImage": "The cover image was successfully changed.",
+      "usedAsCover": "Cover image"
     },
     "comment": {
       "title": "Commenti",
@@ -839,6 +853,12 @@
         "text1": "Confermi di voler rimuovere questo utente dal gruppo?",
         "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."
+      },
+      "leave": {
+        "title": "Leave team",
+        "text1": "Are you sure you want to leave this team?",
+        "text2": "You will loose access to all lists and namespaces this team has access to. If you change your mind you'll need a team admin to add you again.",
+        "success": "You have successfully left the team."
       }
     },
     "attributes": {

src/i18n/lang/nl-NL.json

@@ -169,6 +169,14 @@
     "title": "Lijst titel",
     "color": "Kleur",
     "lists": "Lijsten",
+    "list": {
+      "title": "Lijst",
+      "add": "Toevoegen",
+      "addPlaceholder": "Voeg een nieuwe taak toe…",
+      "empty": "Deze lijst is momenteel leeg.",
+      "newTaskCta": "Creëer een nieuwe taak.",
+      "editTask": "Taak bewerken"
+    },
     "search": "Typ om naar een lijst te zoeken…",
     "searchSelect": "Klik of druk op enter om deze lijst te selecteren",
     "shared": "Gedeelde lijsten",
@@ -270,14 +278,6 @@
         "delete": "Verwijderen"
       }
     },
-    "list": {
-      "title": "Lijst",
-      "add": "Toevoegen",
-      "addPlaceholder": "Voeg een nieuwe taak toe…",
-      "empty": "Deze lijst is momenteel leeg.",
-      "newTaskCta": "Creëer een nieuwe taak.",
-      "editTask": "Taak bewerken"
-    },
     "gantt": {
       "title": "Gantt",
       "showTasksWithoutDates": "Toon taken waarvoor geen datums zijn ingesteld",
@@ -672,13 +672,23 @@
       "updated": "Bijgewerkt"
     },
     "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.",
+      "subscribedListThroughParentNamespace": "You can't unsubscribe here because you are subscribed to this list through its namespace.",
+      "subscribedTaskThroughParentNamespace": "You can't unsubscribe here because you are subscribed to this task through its namespace.",
+      "subscribedTaskThroughParentList": "You can't unsubscribe here because you are subscribed to this task through its list.",
+      "subscribedNamespace": "You are currently subscribed to this namespace and will receive notifications for changes.",
+      "notSubscribedNamespace": "You are not subscribed to this namespace and won't receive notifications for changes.",
+      "subscribedList": "You are currently subscribed to this list and will receive notifications for changes.",
+      "notSubscribedList": "You are not subscribed to this list and won't receive notifications for changes.",
+      "subscribedTask": "You are currently subscribed to this task and will receive notifications for changes.",
+      "notSubscribedTask": "You are not subscribed to this task 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}"
+      "subscribeSuccessNamespace": "You are now subscribed to this namespace",
+      "unsubscribeSuccessNamespace": "You are now unsubscribed to this namespace",
+      "subscribeSuccessList": "You are now subscribed to this list",
+      "unsubscribeSuccessList": "You are now unsubscribed to this list",
+      "subscribeSuccessTask": "You are now subscribed to this task",
+      "unsubscribeSuccessTask": "You are now unsubscribed to this task"
     },
     "attachment": {
       "title": "Bijlagen",
@@ -690,7 +700,11 @@
       "deleteTooltip": "Verwijder deze bijlage",
       "deleteText1": "Weet je zeker dat je de bijlage {filename} wilt verwijderen?",
       "copyUrl": "URL kopiëren",
-      "copyUrlTooltip": "Copy the url of this attachment for usage in text"
+      "copyUrlTooltip": "Copy the url of this attachment for usage in text",
+      "setAsCover": "Make cover",
+      "unsetAsCover": "Remove cover",
+      "successfullyChangedCoverImage": "The cover image was successfully changed.",
+      "usedAsCover": "Cover image"
     },
     "comment": {
       "title": "Reacties",
@@ -839,6 +853,12 @@
         "text1": "Weet je zeker dat je deze gebruiker wilt verwijderen uit het team?",
         "text2": "They will lose access to all lists and namespaces this team has access to. This CANNOT BE UNDONE!",
         "success": "The user was successfully deleted from the team."
+      },
+      "leave": {
+        "title": "Leave team",
+        "text1": "Are you sure you want to leave this team?",
+        "text2": "You will loose access to all lists and namespaces this team has access to. If you change your mind you'll need a team admin to add you again.",
+        "success": "You have successfully left the team."
       }
     },
     "attributes": {

src/i18n/lang/pl-PL.json

@@ -169,6 +169,14 @@
     "title": "Tytuł listy",
     "color": "Kolor",
     "lists": "Listy",
+    "list": {
+      "title": "Lista",
+      "add": "Dodaj",
+      "addPlaceholder": "Dodaj nowe zadanie…",
+      "empty": "Ta lista jest obecnie pusta.",
+      "newTaskCta": "Utwórz nowe zadanie.",
+      "editTask": "Edytuj zadanie"
+    },
     "search": "Wpisz, aby wyszukać listę…",
     "searchSelect": "Kliknij lub naciśnij Enter, aby wybrać tę listę",
     "shared": "Współdzielone listy",
@@ -270,14 +278,6 @@
         "delete": "Usuń"
       }
     },
-    "list": {
-      "title": "Lista",
-      "add": "Dodaj",
-      "addPlaceholder": "Dodaj nowe zadanie…",
-      "empty": "Ta lista jest obecnie pusta.",
-      "newTaskCta": "Utwórz nowe zadanie.",
-      "editTask": "Edytuj zadanie"
-    },
     "gantt": {
       "title": "Gantt",
       "showTasksWithoutDates": "Pokaż zadania, które nie mają ustawionych dat",
@@ -672,13 +672,23 @@
       "updated": "Zaktualizowano"
     },
     "subscription": {
-      "subscribedThroughParent": "Nie możesz zrezygnować z subskrypcji, ponieważ subskrybujesz {entity} za pośrednictwem {parent}.",
-      "subscribed": "Obecnie subskrybujesz {entity} i będziesz otrzymywać powiadomienia o zmianach.",
-      "notSubscribed": "Nie subskrybujesz {entity} i nie będziesz otrzymywać powiadomień o zmianach.",
+      "subscribedListThroughParentNamespace": "You can't unsubscribe here because you are subscribed to this list through its namespace.",
+      "subscribedTaskThroughParentNamespace": "You can't unsubscribe here because you are subscribed to this task through its namespace.",
+      "subscribedTaskThroughParentList": "You can't unsubscribe here because you are subscribed to this task through its list.",
+      "subscribedNamespace": "You are currently subscribed to this namespace and will receive notifications for changes.",
+      "notSubscribedNamespace": "You are not subscribed to this namespace and won't receive notifications for changes.",
+      "subscribedList": "You are currently subscribed to this list and will receive notifications for changes.",
+      "notSubscribedList": "You are not subscribed to this list and won't receive notifications for changes.",
+      "subscribedTask": "You are currently subscribed to this task and will receive notifications for changes.",
+      "notSubscribedTask": "You are not subscribed to this task and won't receive notifications for changes.",
       "subscribe": "Subskrybuj",
       "unsubscribe": "Anuluj subskrypcję",
-      "subscribeSuccess": "Od teraz subskrybujesz {entity}",
-      "unsubscribeSuccess": "Już nie subskrybujesz {entity}"
+      "subscribeSuccessNamespace": "You are now subscribed to this namespace",
+      "unsubscribeSuccessNamespace": "You are now unsubscribed to this namespace",
+      "subscribeSuccessList": "You are now subscribed to this list",
+      "unsubscribeSuccessList": "You are now unsubscribed to this list",
+      "subscribeSuccessTask": "You are now subscribed to this task",
+      "unsubscribeSuccessTask": "You are now unsubscribed to this task"
     },
     "attachment": {
       "title": "Załączniki",
@@ -690,7 +700,11 @@
       "deleteTooltip": "Usuń ten załącznik",
       "deleteText1": "Czy na pewno chcesz usunąć załącznik {filename}?",
       "copyUrl": "Kopiuj URL",
-      "copyUrlTooltip": "Skopiuj adres URL tego załącznika do użycia w tekście"
+      "copyUrlTooltip": "Skopiuj adres URL tego załącznika do użycia w tekście",
+      "setAsCover": "Make cover",
+      "unsetAsCover": "Remove cover",
+      "successfullyChangedCoverImage": "The cover image was successfully changed.",
+      "usedAsCover": "Cover image"
     },
     "comment": {
       "title": "Komentarze",
@@ -839,6 +853,12 @@
         "text1": "Czy na pewno chcesz usunąć tego użytkownika z zespołu?",
         "text2": "Utraci on dostęp do wszystkich list i sekcji, do których ma dostęp ten zespół. Tego NIE DA SIĘ COFNĄĆ!",
         "success": "Użytkownik został pomyślnie usunięty z zespołu."
+      },
+      "leave": {
+        "title": "Leave team",
+        "text1": "Are you sure you want to leave this team?",
+        "text2": "You will loose access to all lists and namespaces this team has access to. If you change your mind you'll need a team admin to add you again.",
+        "success": "You have successfully left the team."
       }
     },
     "attributes": {

src/i18n/lang/pt-BR.json

@@ -169,6 +169,14 @@
     "title": "List Title",
     "color": "Color",
     "lists": "Lists",
+    "list": {
+      "title": "List",
+      "add": "Add",
+      "addPlaceholder": "Add a new task…",
+      "empty": "This list is currently empty.",
+      "newTaskCta": "Create a new task.",
+      "editTask": "Edit Task"
+    },
     "search": "Type to search for a list…",
     "searchSelect": "Click or press enter to select this list",
     "shared": "Shared Lists",
@@ -270,14 +278,6 @@
         "delete": "Delete"
       }
     },
-    "list": {
-      "title": "List",
-      "add": "Add",
-      "addPlaceholder": "Add a new task…",
-      "empty": "This list is currently empty.",
-      "newTaskCta": "Create a new task.",
-      "editTask": "Edit Task"
-    },
     "gantt": {
       "title": "Gantt",
       "showTasksWithoutDates": "Show tasks which don't have dates set",
@@ -672,13 +672,23 @@
       "updated": "Updated"
     },
     "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.",
+      "subscribedListThroughParentNamespace": "You can't unsubscribe here because you are subscribed to this list through its namespace.",
+      "subscribedTaskThroughParentNamespace": "You can't unsubscribe here because you are subscribed to this task through its namespace.",
+      "subscribedTaskThroughParentList": "You can't unsubscribe here because you are subscribed to this task through its list.",
+      "subscribedNamespace": "You are currently subscribed to this namespace and will receive notifications for changes.",
+      "notSubscribedNamespace": "You are not subscribed to this namespace and won't receive notifications for changes.",
+      "subscribedList": "You are currently subscribed to this list and will receive notifications for changes.",
+      "notSubscribedList": "You are not subscribed to this list and won't receive notifications for changes.",
+      "subscribedTask": "You are currently subscribed to this task and will receive notifications for changes.",
+      "notSubscribedTask": "You are not subscribed to this task 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}"
+      "subscribeSuccessNamespace": "You are now subscribed to this namespace",
+      "unsubscribeSuccessNamespace": "You are now unsubscribed to this namespace",
+      "subscribeSuccessList": "You are now subscribed to this list",
+      "unsubscribeSuccessList": "You are now unsubscribed to this list",
+      "subscribeSuccessTask": "You are now subscribed to this task",
+      "unsubscribeSuccessTask": "You are now unsubscribed to this task"
     },
     "attachment": {
       "title": "Attachments",
@@ -690,7 +700,11 @@
       "deleteTooltip": "Delete this attachment",
       "deleteText1": "Are you sure you want to delete the attachment {filename}?",
       "copyUrl": "Copy URL",
-      "copyUrlTooltip": "Copy the url of this attachment for usage in text"
+      "copyUrlTooltip": "Copy the url of this attachment for usage in text",
+      "setAsCover": "Make cover",
+      "unsetAsCover": "Remove cover",
+      "successfullyChangedCoverImage": "The cover image was successfully changed.",
+      "usedAsCover": "Cover image"
     },
     "comment": {
       "title": "Comments",
@@ -839,6 +853,12 @@
         "text1": "Are you sure you want to remove this user from the team?",
         "text2": "They will lose access to all lists and namespaces this team has access to. This CANNOT BE UNDONE!",
         "success": "The user was successfully deleted from the team."
+      },
+      "leave": {
+        "title": "Leave team",
+        "text1": "Are you sure you want to leave this team?",
+        "text2": "You will loose access to all lists and namespaces this team has access to. If you change your mind you'll need a team admin to add you again.",
+        "success": "You have successfully left the team."
       }
     },
     "attributes": {

src/i18n/lang/pt-PT.json

@@ -169,6 +169,14 @@
     "title": "Título da Lista",
     "color": "Cor",
     "lists": "Listas",
+    "list": {
+      "title": "Lista",
+      "add": "Adicionar",
+      "addPlaceholder": "Adicionar uma nova tarefa…",
+      "empty": "Esta lista está atualmente vazia.",
+      "newTaskCta": "Cria uma nova tarefa.",
+      "editTask": "Editar Tarefa"
+    },
     "search": "Escreve para pesquisar por uma lista…",
     "searchSelect": "Clica ou pressiona Enter para selecionar esta lista",
     "shared": "Listas Partilhadas",
@@ -270,14 +278,6 @@
         "delete": "Eliminar"
       }
     },
-    "list": {
-      "title": "Lista",
-      "add": "Adicionar",
-      "addPlaceholder": "Adicionar uma nova tarefa…",
-      "empty": "Esta lista está atualmente vazia.",
-      "newTaskCta": "Cria uma nova tarefa.",
-      "editTask": "Editar Tarefa"
-    },
     "gantt": {
       "title": "Gantt",
       "showTasksWithoutDates": "Mostrar tarefas que não têm datas atríbuidas",
@@ -672,13 +672,23 @@
       "updated": "Atualizado"
     },
     "subscription": {
-      "subscribedThroughParent": "Não podes cancelar a tua subscrição aqui porque estás subscrito nesta {entity} através de {parent}.",
-      "subscribed": "Estás atualmente subscrito a esta {entity} e serás notificado de alterações.",
-      "notSubscribed": "Não estás subscrito a esta {entity} e não serás notificado de alterações.",
+      "subscribedListThroughParentNamespace": "Não podes cancelar a tua subscrição aqui porque estás subscrito nesta lista através do seu espaço.",
+      "subscribedTaskThroughParentNamespace": "Não podes cancelar a tua subscrição aqui porque estás subscrito nesta tarefa através do seu espaço.",
+      "subscribedTaskThroughParentList": "Não podes cancelar a tua subscrição aqui porque estás subscrito nesta tarefa através da sua lista.",
+      "subscribedNamespace": "Estás atualmente subscrito a este espaço e serás notificado de alterações.",
+      "notSubscribedNamespace": "Não estás subscrito a este espaço e não serás notificado de alterações.",
+      "subscribedList": "Estás atualmente subscrito a esta lista e serás notificado de alterações.",
+      "notSubscribedList": "Não estás subscrito a esta lista e não serás notificado de alterações.",
+      "subscribedTask": "Estás atualmente subscrito a esta tarefa e serás notificado de alterações.",
+      "notSubscribedTask": "Não estás subscrito a esta tarefa e não serás notificado de alterações.",
       "subscribe": "Subscrever",
       "unsubscribe": "Remover Subscrição",
-      "subscribeSuccess": "Estás agora subscrito a esta {entity}",
-      "unsubscribeSuccess": "Não estás mais subcrito a esta {entity}"
+      "subscribeSuccessNamespace": "Estás agora subscrito a este espaço",
+      "unsubscribeSuccessNamespace": "Não estás mais subcrito a este espaço",
+      "subscribeSuccessList": "Estás agora subscrito a esta lista",
+      "unsubscribeSuccessList": "Não estás mais subcrito a esta lista",
+      "subscribeSuccessTask": "Estás agora subscrito a esta tarefa",
+      "unsubscribeSuccessTask": "Não estás mais subcrito a esta tarefa"
     },
     "attachment": {
       "title": "Anexos",
@@ -690,7 +700,11 @@
       "deleteTooltip": "Eliminar este anexo",
       "deleteText1": "Tens a certeza que pretendes eliminar o anexo {filename}?",
       "copyUrl": "Copiar URL",
-      "copyUrlTooltip": "Copia o url deste anexo para o utilizar no texto"
+      "copyUrlTooltip": "Copia o url deste anexo para o utilizar no texto",
+      "setAsCover": "Criar capa",
+      "unsetAsCover": "Remover capa",
+      "successfullyChangedCoverImage": "A imagem de capa foi alterada com sucesso.",
+      "usedAsCover": "Imagem de capa"
     },
     "comment": {
       "title": "Comentários",
@@ -839,6 +853,12 @@
         "text1": "Tens a certeza que pretendes remover este utilizador da equipa?",
         "text2": "Eles perderão o acesso a todas as listas e espaços a que esta equipa tem acesso. Isto NÃO PODER SER REVERTIDO!",
         "success": "O utilizador foi removido da equipa com sucesso."
+      },
+      "leave": {
+        "title": "Sair da equipa",
+        "text1": "Tens a certeza de que queres sair desta equipa?",
+        "text2": "Vais perder acesso a todas as listas e espaços a que esta equipa tem acesso. Se mudares de ideias, vais necessitar que um administrador da equipa te adicione novamente.",
+        "success": "Saíste da equipa com sucesso."
       }
     },
     "attributes": {

src/i18n/lang/ro-RO.json

@@ -169,6 +169,14 @@
     "title": "List Title",
     "color": "Color",
     "lists": "Lists",
+    "list": {
+      "title": "List",
+      "add": "Add",
+      "addPlaceholder": "Add a new task…",
+      "empty": "This list is currently empty.",
+      "newTaskCta": "Create a new task.",
+      "editTask": "Edit Task"
+    },
     "search": "Type to search for a list…",
     "searchSelect": "Click or press enter to select this list",
     "shared": "Shared Lists",
@@ -270,14 +278,6 @@
         "delete": "Delete"
       }
     },
-    "list": {
-      "title": "List",
-      "add": "Add",
-      "addPlaceholder": "Add a new task…",
-      "empty": "This list is currently empty.",
-      "newTaskCta": "Create a new task.",
-      "editTask": "Edit Task"
-    },
     "gantt": {
       "title": "Gantt",
       "showTasksWithoutDates": "Show tasks which don't have dates set",
@@ -672,13 +672,23 @@
       "updated": "Updated"
     },
     "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.",
+      "subscribedListThroughParentNamespace": "You can't unsubscribe here because you are subscribed to this list through its namespace.",
+      "subscribedTaskThroughParentNamespace": "You can't unsubscribe here because you are subscribed to this task through its namespace.",
+      "subscribedTaskThroughParentList": "You can't unsubscribe here because you are subscribed to this task through its list.",
+      "subscribedNamespace": "You are currently subscribed to this namespace and will receive notifications for changes.",
+      "notSubscribedNamespace": "You are not subscribed to this namespace and won't receive notifications for changes.",
+      "subscribedList": "You are currently subscribed to this list and will receive notifications for changes.",
+      "notSubscribedList": "You are not subscribed to this list and won't receive notifications for changes.",
+      "subscribedTask": "You are currently subscribed to this task and will receive notifications for changes.",
+      "notSubscribedTask": "You are not subscribed to this task 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}"
+      "subscribeSuccessNamespace": "You are now subscribed to this namespace",
+      "unsubscribeSuccessNamespace": "You are now unsubscribed to this namespace",
+      "subscribeSuccessList": "You are now subscribed to this list",
+      "unsubscribeSuccessList": "You are now unsubscribed to this list",
+      "subscribeSuccessTask": "You are now subscribed to this task",
+      "unsubscribeSuccessTask": "You are now unsubscribed to this task"
     },
     "attachment": {
       "title": "Attachments",
@@ -690,7 +700,11 @@
       "deleteTooltip": "Delete this attachment",
       "deleteText1": "Are you sure you want to delete the attachment {filename}?",
       "copyUrl": "Copy URL",
-      "copyUrlTooltip": "Copy the url of this attachment for usage in text"
+      "copyUrlTooltip": "Copy the url of this attachment for usage in text",
+      "setAsCover": "Make cover",
+      "unsetAsCover": "Remove cover",
+      "successfullyChangedCoverImage": "The cover image was successfully changed.",
+      "usedAsCover": "Cover image"
     },
     "comment": {
       "title": "Comments",
@@ -839,6 +853,12 @@
         "text1": "Are you sure you want to remove this user from the team?",
         "text2": "They will lose access to all lists and namespaces this team has access to. This CANNOT BE UNDONE!",
         "success": "The user was successfully deleted from the team."
+      },
+      "leave": {
+        "title": "Leave team",
+        "text1": "Are you sure you want to leave this team?",
+        "text2": "You will loose access to all lists and namespaces this team has access to. If you change your mind you'll need a team admin to add you again.",
+        "success": "You have successfully left the team."
       }
     },
     "attributes": {

src/i18n/lang/ru-RU.json

@@ -169,6 +169,14 @@
     "title": "Название списка",
     "color": "Цвет",
     "lists": "Списки",
+    "list": {
+      "title": "Список",
+      "add": "Добавить",
+      "addPlaceholder": "Добавить новую задачу…",
+      "empty": "Список сейчас пуст.",
+      "newTaskCta": "Создать новую задачу.",
+      "editTask": "Изменить задачу"
+    },
     "search": "Введи запрос для поиска списка…",
     "searchSelect": "Кликни или нажми Enter для выбора этого списка",
     "shared": "Общие списки",
@@ -270,14 +278,6 @@
         "delete": "Удалить"
       }
     },
-    "list": {
-      "title": "Список",
-      "add": "Добавить",
-      "addPlaceholder": "Добавить новую задачу…",
-      "empty": "Список сейчас пуст.",
-      "newTaskCta": "Создать новую задачу.",
-      "editTask": "Изменить задачу"
-    },
     "gantt": {
       "title": "Гант",
       "showTasksWithoutDates": "Показать задачи без установленной даты",
@@ -672,13 +672,23 @@
       "updated": "Дата изменения"
     },
     "subscription": {
-      "subscribedThroughParent": "Ты не можешь отписаться здесь, потому что ты подписан на {entity} через {parent}.",
-      "subscribed": "Ты подписан на {entity} и будешь получать уведомления об изменениях.",
-      "notSubscribed": "Ты не подписан на {entity} и не будешь получать уведомления об изменениях.",
+      "subscribedListThroughParentNamespace": "You can't unsubscribe here because you are subscribed to this list through its namespace.",
+      "subscribedTaskThroughParentNamespace": "You can't unsubscribe here because you are subscribed to this task through its namespace.",
+      "subscribedTaskThroughParentList": "You can't unsubscribe here because you are subscribed to this task through its list.",
+      "subscribedNamespace": "You are currently subscribed to this namespace and will receive notifications for changes.",
+      "notSubscribedNamespace": "You are not subscribed to this namespace and won't receive notifications for changes.",
+      "subscribedList": "You are currently subscribed to this list and will receive notifications for changes.",
+      "notSubscribedList": "You are not subscribed to this list and won't receive notifications for changes.",
+      "subscribedTask": "You are currently subscribed to this task and will receive notifications for changes.",
+      "notSubscribedTask": "You are not subscribed to this task and won't receive notifications for changes.",
       "subscribe": "Подписаться",
       "unsubscribe": "Отписаться",
-      "subscribeSuccess": "Ты подписался на {entity}",
-      "unsubscribeSuccess": "Ты отписался от {entity}"
+      "subscribeSuccessNamespace": "You are now subscribed to this namespace",
+      "unsubscribeSuccessNamespace": "You are now unsubscribed to this namespace",
+      "subscribeSuccessList": "You are now subscribed to this list",
+      "unsubscribeSuccessList": "You are now unsubscribed to this list",
+      "subscribeSuccessTask": "You are now subscribed to this task",
+      "unsubscribeSuccessTask": "You are now unsubscribed to this task"
     },
     "attachment": {
       "title": "Вложения",
@@ -690,7 +700,11 @@
       "deleteTooltip": "Удалить это вложение",
       "deleteText1": "Удалить вложение {filename}?",
       "copyUrl": "Скопировать URL",
-      "copyUrlTooltip": "Скопировать ссылку на это вложение для использования в тексте"
+      "copyUrlTooltip": "Скопировать ссылку на это вложение для использования в тексте",
+      "setAsCover": "Make cover",
+      "unsetAsCover": "Remove cover",
+      "successfullyChangedCoverImage": "The cover image was successfully changed.",
+      "usedAsCover": "Cover image"
     },
     "comment": {
       "title": "Комментарии",
@@ -839,6 +853,12 @@
         "text1": "Удалить этого пользователя из команды?",
         "text2": "Пользователь потеряет доступ ко всем спискам и пространствам имён, к котором есть доступ у команды. Это действие отменить нельзя!",
         "success": "Пользователь удалён из команды."
+      },
+      "leave": {
+        "title": "Leave team",
+        "text1": "Are you sure you want to leave this team?",
+        "text2": "You will loose access to all lists and namespaces this team has access to. If you change your mind you'll need a team admin to add you again.",
+        "success": "You have successfully left the team."
       }
     },
     "attributes": {

src/i18n/lang/sk-SK.json

@@ -169,6 +169,14 @@
     "title": "List Title",
     "color": "Color",
     "lists": "Lists",
+    "list": {
+      "title": "List",
+      "add": "Add",
+      "addPlaceholder": "Add a new task…",
+      "empty": "This list is currently empty.",
+      "newTaskCta": "Create a new task.",
+      "editTask": "Edit Task"
+    },
     "search": "Type to search for a list…",
     "searchSelect": "Click or press enter to select this list",
     "shared": "Shared Lists",
@@ -270,14 +278,6 @@
         "delete": "Delete"
       }
     },
-    "list": {
-      "title": "List",
-      "add": "Add",
-      "addPlaceholder": "Add a new task…",
-      "empty": "This list is currently empty.",
-      "newTaskCta": "Create a new task.",
-      "editTask": "Edit Task"
-    },
     "gantt": {
       "title": "Gantt",
       "showTasksWithoutDates": "Show tasks which don't have dates set",
@@ -672,13 +672,23 @@
       "updated": "Updated"
     },
     "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.",
+      "subscribedListThroughParentNamespace": "You can't unsubscribe here because you are subscribed to this list through its namespace.",
+      "subscribedTaskThroughParentNamespace": "You can't unsubscribe here because you are subscribed to this task through its namespace.",
+      "subscribedTaskThroughParentList": "You can't unsubscribe here because you are subscribed to this task through its list.",
+      "subscribedNamespace": "You are currently subscribed to this namespace and will receive notifications for changes.",
+      "notSubscribedNamespace": "You are not subscribed to this namespace and won't receive notifications for changes.",
+      "subscribedList": "You are currently subscribed to this list and will receive notifications for changes.",
+      "notSubscribedList": "You are not subscribed to this list and won't receive notifications for changes.",
+      "subscribedTask": "You are currently subscribed to this task and will receive notifications for changes.",
+      "notSubscribedTask": "You are not subscribed to this task 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}"
+      "subscribeSuccessNamespace": "You are now subscribed to this namespace",
+      "unsubscribeSuccessNamespace": "You are now unsubscribed to this namespace",
+      "subscribeSuccessList": "You are now subscribed to this list",
+      "unsubscribeSuccessList": "You are now unsubscribed to this list",
+      "subscribeSuccessTask": "You are now subscribed to this task",
+      "unsubscribeSuccessTask": "You are now unsubscribed to this task"
     },
     "attachment": {
       "title": "Attachments",
@@ -690,7 +700,11 @@
       "deleteTooltip": "Delete this attachment",
       "deleteText1": "Are you sure you want to delete the attachment {filename}?",
       "copyUrl": "Copy URL",
-      "copyUrlTooltip": "Copy the url of this attachment for usage in text"
+      "copyUrlTooltip": "Copy the url of this attachment for usage in text",
+      "setAsCover": "Make cover",
+      "unsetAsCover": "Remove cover",
+      "successfullyChangedCoverImage": "The cover image was successfully changed.",
+      "usedAsCover": "Cover image"
     },
     "comment": {
       "title": "Comments",
@@ -839,6 +853,12 @@
         "text1": "Are you sure you want to remove this user from the team?",
         "text2": "They will lose access to all lists and namespaces this team has access to. This CANNOT BE UNDONE!",
         "success": "The user was successfully deleted from the team."
+      },
+      "leave": {
+        "title": "Leave team",
+        "text1": "Are you sure you want to leave this team?",
+        "text2": "You will loose access to all lists and namespaces this team has access to. If you change your mind you'll need a team admin to add you again.",
+        "success": "You have successfully left the team."
       }
     },
     "attributes": {