chore(deps): update dependency express to v4.18.2

Reviewed-on: vikunja/frontend#2509
Co-authored-by: renovate <renovatebot@kolaente.de>
Co-committed-by: renovate <renovatebot@kolaente.de>

.drone.yml

@@ -29,26 +29,91 @@ steps:
 #      AWS_SECRET_ACCESS_KEY:
 #        from_secret: cache_aws_secret_access_key
 #    settings:
+#      debug: true
 #      restore: true
 #      bucket: kolaente.dev-drone-dependency-cache
 #      endpoint: https://s3.fr-par.scw.cloud
 #      region: fr-par
 #      path_style: true
-#      cache_key: '{{ .Repo.Name }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
+#      cache_key: '{{ .Repo.Name }}_{{ checksum "pnpm-lock.yaml" }}_{{ arch }}_{{ os }}'
 #      mount:
-#        - '.cache'
+#        - .cache
 
   - name: dependencies
-    image: node:18
+    image: node:18-alpine
     pull: true
     environment:
-      YARN_CACHE_FOLDER: .cache/yarn/
-      CYPRESS_CACHE_FOLDER: .cache/cypress/
+      PNPM_CACHE_FOLDER: .cache/pnpm
+      CYPRESS_CACHE_FOLDER: .cache/cypress
     commands:
-      - yarn --frozen-lockfile --network-timeout 100000
+      - corepack enable && pnpm config set store-dir .cache/pnpm
+      - pnpm install --fetch-timeout 100000
 #    depends_on:
 #      - restore-cache
 
+  - name: lint
+    image: node:18-alpine
+    pull: true
+    environment:
+      PNPM_CACHE_FOLDER: .cache/pnpm
+    commands:
+      - corepack enable && pnpm config set store-dir .cache/pnpm
+      - pnpm run lint
+    depends_on:
+      - dependencies
+
+  - name: build-prod
+    image: node:18-alpine
+    pull: true
+    environment:
+      PNPM_CACHE_FOLDER: .cache/pnpm
+    commands:
+      - corepack enable && pnpm config set store-dir .cache/pnpm
+      - pnpm run build
+    depends_on:
+      - dependencies
+
+  - name: test-unit
+    image: node:18-alpine
+    pull: true
+    commands:
+      - corepack enable && pnpm config set store-dir .cache/pnpm
+      - pnpm run test:unit
+    depends_on:
+      - dependencies
+
+  - name: typecheck
+    failure: ignore
+    image: node:18-alpine
+    pull: true
+    environment:
+      PNPM_CACHE_FOLDER: .cache/pnpm
+    commands:
+      - corepack enable && pnpm config set store-dir .cache/pnpm
+      - pnpm run typecheck
+    depends_on:
+      - dependencies
+
+  - name: test-frontend
+    image: cypress/browsers:node16.14.0-chrome99-ff97
+    pull: true
+    environment:
+      CYPRESS_API_URL: http://api:3456/api/v1
+      CYPRESS_TEST_SECRET: averyLongSecretToSe33dtheDB
+      PNPM_CACHE_FOLDER: .cache/pnpm
+      CYPRESS_CACHE_FOLDER: .cache/cypress
+      CYPRESS_DEFAULT_COMMAND_TIMEOUT: 60000
+      CYPRESS_RECORD_KEY:
+        from_secret: cypress_project_key
+    commands:
+      - sed -i 's/localhost/api/g' dist/index.html
+      - 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
+    depends_on:
+      - build-prod
+
 #  - name: rebuild-cache
 #    image: meltwater/drone-cache:dev
 #    pull: true
@@ -63,70 +128,14 @@ steps:
 #      endpoint: https://s3.fr-par.scw.cloud
 #      region: fr-par
 #      path_style: true
-#      cache_key: '{{ .Repo.Name }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
+#      cache_key: '{{ .Repo.Name }}_{{ checksum "pnpm-lock.yaml" }}_{{ arch }}_{{ os }}'
 #      mount:
-#        - '.cache'
+#        - .cache
 #    depends_on:
 #      - dependencies
 
-  - name: lint
-    image: node:18
-    pull: true
-    environment:
-      YARN_CACHE_FOLDER: .cache/yarn/
-      CYPRESS_CACHE_FOLDER: .cache/cypress/
-    commands:
-      - yarn run lint
-    depends_on:
-      - dependencies
-
-  - name: build-prod
-    image: node:18
-    pull: true
-    environment:
-      YARN_CACHE_FOLDER: .cache/yarn/
-    commands:
-      - yarn build
-    depends_on:
-      - dependencies
-
-  - name: test-unit
-    image: node:18
-    pull: true
-    commands:
-      - yarn test:unit
-    depends_on:
-      - dependencies
-
-  - name: typecheck
-    failure: ignore
-    image: node:18
-    pull: true
-    commands:
-      - yarn typecheck
-    depends_on:
-      - dependencies
-
-  - name: test-frontend
-    image: cypress/browsers:node16.5.0-chrome94-ff93
-    pull: true
-    environment:
-      CYPRESS_API_URL: http://api:3456/api/v1
-      CYPRESS_TEST_SECRET: averyLongSecretToSe33dtheDB
-      YARN_CACHE_FOLDER: .cache/yarn/
-      CYPRESS_CACHE_FOLDER: .cache/cypress/
-      CYPRESS_DEFAULT_COMMAND_TIMEOUT: 60000
-      CYPRESS_RECORD_KEY:
-        from_secret: cypress_project_key
-    commands:
-      - sed -i 's/localhost/api/g' dist/index.html
-      - yarn serve:dist & npx wait-on http://localhost:4173
-      - yarn test:frontend --browser chrome --record
-    depends_on:
-      - build-prod
-
   - name: deploy-preview
-    image: node:18
+    image: node:18-alpine
     pull: true
     environment:
       NETLIFY_AUTH_TOKEN:
@@ -138,7 +147,8 @@ 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
     depends_on:
@@ -181,21 +191,22 @@ steps:
 #      endpoint: https://s3.fr-par.scw.cloud
 #      region: fr-par
 #      path_style: true
-#      cache_key: '{{ .Repo.Name }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
+#      cache_key: '{{ .Repo.Name }}_{{ checksum "pnpm-lock.yaml" }}_{{ arch }}_{{ os }}'
 #      mount:
-#        - '.cache'
+#        - .cache
 
   - name: build
-    image: node:18
+    image: node:18-alpine
     pull: true
     group: build-static
     environment:
-      YARN_CACHE_FOLDER: .cache/yarn/
+      PNPM_CACHE_FOLDER: .cache/pnpm
     commands:
-      - yarn --frozen-lockfile --network-timeout 100000
-      - yarn run lint
+      - 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"
-      - yarn run build
+      - pnpm run build
       - sed -i 's/http\:\\/\\/localhost\\:3456\\/api\\/v1/\\/api\\/v1/g' dist/index.html # Override the default api url used for developing
 #    depends_on:
 #      - restore-cache
@@ -256,21 +267,22 @@ steps:
 #      endpoint: https://s3.fr-par.scw.cloud
 #      region: fr-par
 #      path_style: true
-#      cache_key: '{{ .Repo.Name }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
+#      cache_key: '{{ .Repo.Name }}_{{ checksum "pnpm-lock.yaml" }}_{{ arch }}_{{ os }}'
 #      mount:
-#        - '.cache'
+#        - .cache
 
   - name: build
-    image: node:18
+    image: node:18-alpine
     pull: true
     group: build-static
     environment:
-      YARN_CACHE_FOLDER: .cache/yarn/
+      PNPM_CACHE_FOLDER: .cache/pnpm
     commands:
-      - yarn --frozen-lockfile --network-timeout 100000
-      - yarn run lint
+      - 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"
-      - yarn run build
+      - pnpm run build
       - sed -i 's/http\:\\/\\/localhost\\:3456\\/api\\/v1/\\/api\\/v1/g' dist/index.html # Override the default api url used for developing
 #    depends_on:
 #      - restore-cache
@@ -647,6 +659,6 @@ steps:
         from_secret: crowdin_key
 ---
 kind: signature
-hmac: 997e1badebe484ac29557c4af356e63db4d3d57f3d32e92d482f117f8cec64da
+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,16 +2,21 @@
 node_modules
 /dist*
 *.zip
+.direnv/
 
 # local env files
 .env.local
 .env.*.local
 
 # Log files
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 stats.html
+pnpm-debug.log*
+lerna-debug.log*
 
 # Editor directories and files
 .idea

.npmrc

@@ -0,0 +1,2 @@
+auto-install-peers=true
+fetch-timeout=100000

.vscode.example/settings.json

@@ -1,5 +1,5 @@
 {
-  "eslint.packageManager": "yarn",
+  "eslint.packageManager": "pnpm",
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
     "source.fixAll": true

Dockerfile

@@ -1,28 +1,32 @@
 # Stage 1: Build application
-FROM node:18 AS compile-image
+FROM node:18-alpine AS compile-image
 
 WORKDIR /build
 
 ARG USE_RELEASE=false
 ARG RELEASE_VERSION=main
 
-ENV YARN_CACHE_FOLDER .cache/yarn/
-COPY .  ./
+ENV PNPM_CACHE_FOLDER .cache/pnpm/
+ADD .  ./
 
 RUN \
   if [ $USE_RELEASE = true ]; then \
-    rm -rf dist/ && \
     wget https://dl.vikunja.io/frontend/vikunja-frontend-$RELEASE_VERSION.zip -O frontend-release.zip && \
     unzip frontend-release.zip -d dist/ && \
     exit 0; \
   fi && \
+  # https://pnpm.io/installation#using-corepack
+  corepack enable && \
+  # we don't use corepack prepare here by intend since
+  # we have renovate to keep our dependencies up to date
   # Build the frontend
-  yarn install --frozen-lockfile --network-timeout 100000 && \
+  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 && \
-  yarn run build
+  pnpm run build
 
 # Stage 2: copy 
-FROM nginx
+FROM nginx:alpine
 
 COPY nginx.conf /etc/nginx/nginx.conf
 COPY run.sh /run.sh
@@ -36,4 +40,10 @@ ENV PGID 1000
 
 LABEL maintainer="maintainers@vikunja.io"
 
+RUN apk add --no-cache \
+  # for sh file
+	bash \
+	# installs usermod and groupmod
+	shadow
+
 CMD "/run.sh"

README.md

@@ -22,23 +22,27 @@ There is a [docker image available](https://hub.docker.com/r/vikunja/api) with s
 ## Project setup
 
 ```shell
-yarn install
+pnpm install
 ```
 
 ### Compiles and hot-reloads for development
 
 ```shell
-yarn run serve
+pnpm run serve
 ```
 
 ### Compiles and minifies for production
 
 ```shell
-yarn run build
+pnpm run build
 ```
 
 ### Lints and fixes files
 
 ```shell
-yarn run lint
+pnpm run lint
 ```
+
+## Sponsors
+
+[![Relm](https://vikunja.io/images/sponsors/relm.png)](https://relm.us)

cypress/README.md

@@ -36,7 +36,7 @@ to get a shell inside the cypress container.
 In that shell you can then execute the tests with
 
 ```shell
-yarn test:frontend
+pnpm run test:frontend
 ```
 
 ### Using The Cypress Dashboard
@@ -44,5 +44,5 @@ yarn test:frontend
 To open the Cypress Dashboard and run tests from there, run
 
 ```shell
-yarn cypress:open
+pnpm run cypress:open
 ```

cypress/docker-compose.yml

@@ -9,7 +9,7 @@ services:
     ports:
       - 3456:3456
   cypress:
-    image: cypress/browsers:node12.18.3-chrome87-ff82
+    image: cypress/browsers:node16.14.0-chrome99-ff97
     volumes:
     - ..:/project
     - $HOME/.cache:/home/node/.cache/

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

@@ -6,7 +6,7 @@ import '../../support/authenticateUser'
 
 describe('List View Gantt', () => {
 	prepareLists()
-	
+
 	it('Hides tasks with no dates', () => {
 		const tasks = TaskFactory.create(1)
 		cy.visit('/lists/1/gantt')
@@ -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/list/list.spec.ts

@@ -59,7 +59,7 @@ describe('Lists', () => {
 			.click()
 		cy.get('#title')
 			.type(`{selectall}${newListName}`)
-		cy.get('footer.modal-card-foot .button')
+		cy.get('footer.card-footer .button')
 			.contains('Save')
 			.click()
 

cypress/e2e/list/namespaces.spec.ts

@@ -63,7 +63,7 @@ describe('Namepaces', () => {
 			.should('equal', newNamespaces[0].title) // wait until the namespace data is loaded
 		cy.get('#namespacetext')
 			.type(`{selectall}${newNamespaceName}`)
-		cy.get('footer.modal-card-foot .button')
+		cy.get('footer.card-footer .button')
 			.contains('Save')
 			.click()
 

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')
+			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('.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)
+			
+			cy.get('.modal-content .close')
 				.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)
+			
+			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"/>
 

netlify.toml

@@ -1,5 +1,5 @@
 [build]
-  command = "yarn build"
+  command = "pnpm run build"
   publish = "dist-preview"
 
 [[redirects]]

package.json

@@ -11,88 +11,96 @@
     "build:dev": "vite build -m development --outDir dist-dev/",
     "lint": "eslint --ignore-pattern '*.test.*' ./src --ext .vue,.js,.ts",
     "cypress:open": "cypress open",
-    "test:unit": "vitest",
+    "test:unit": "vitest --run",
     "test:unit-watch": "vitest watch",
     "test:frontend": "cypress run",
     "typecheck": "vue-tsc --noEmit && vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "browserslist:update": "npx browserslist@latest --update-db"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "6.2.0",
+    "@fortawesome/free-regular-svg-icons": "6.2.0",
+    "@fortawesome/free-solid-svg-icons": "6.2.0",
+    "@fortawesome/vue-fontawesome": "3.0.1",
     "@github/hotkey": "2.0.1",
-    "@kyvg/vue3-notification": "2.3.6",
-    "@sentry/tracing": "7.11.1",
-    "@sentry/vue": "7.11.1",
+    "@kyvg/vue3-notification": "2.4.1",
+    "@sentry/tracing": "7.14.2",
+    "@sentry/vue": "7.14.2",
     "@types/is-touch-device": "1.0.0",
-    "@types/sortablejs": "1.13.0",
-    "@vueuse/core": "9.1.0",
-    "@vueuse/router": "9.1.0",
-    "blurhash": "1.1.5",
+    "@types/lodash.clonedeep": "4.5.7",
+    "@types/sortablejs": "1.15.0",
+    "@vueuse/core": "9.3.0",
+    "@vueuse/router": "9.3.0",
+    "axios": "0.27.2",
+    "blurhash": "2.0.3",
     "bulma-css-variables": "0.9.33",
     "camel-case": "4.1.2",
-    "date-fns": "2.29.1",
-    "dompurify": "2.3.10",
-    "easymde": "2.16.1",
+    "codemirror": "5.65.9",
+    "date-fns": "2.29.3",
+    "dompurify": "2.4.0",
+    "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.0.18",
+    "marked": "4.1.1",
     "minimist": "1.2.6",
+    "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.37",
-    "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.3",
-    "vuex": "4.0.2",
+    "vue-router": "4.1.5",
     "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/vue": "4.1.0",
-    "@faker-js/faker": "7.4.0",
-    "@fortawesome/fontawesome-svg-core": "6.1.2",
-    "@fortawesome/free-regular-svg-icons": "6.1.2",
-    "@fortawesome/free-solid-svg-icons": "6.1.2",
-    "@fortawesome/vue-fontawesome": "3.0.1",
+    "@cypress/vite-dev-server": "3.3.0",
+    "@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.33.1",
-    "@typescript-eslint/parser": "5.33.1",
-    "@vitejs/plugin-legacy": "2.0.1",
-    "@vitejs/plugin-vue": "3.0.3",
-    "@vue/eslint-config-typescript": "11.0.0",
-    "@vue/test-utils": "2.0.2",
+    "@types/lodash.debounce": "4.0.7",
+    "@types/marked": "4.0.7",
+    "@types/node": "16.11.64",
+    "@typescript-eslint/eslint-plugin": "5.39.0",
+    "@typescript-eslint/parser": "5.39.0",
+    "@vitejs/plugin-legacy": "2.2.0",
+    "@vitejs/plugin-vue": "3.1.2",
+    "@vue/eslint-config-typescript": "11.0.2",
+    "@vue/test-utils": "2.1.0",
     "@vue/tsconfig": "0.1.3",
-    "autoprefixer": "10.4.8",
-    "axios": "0.27.2",
-    "browserslist": "4.21.3",
-    "caniuse-lite": "1.0.30001376",
-    "cypress": "10.6.0",
-    "esbuild": "0.15.5",
-    "eslint": "8.22.0",
-    "eslint-plugin-vue": "9.3.0",
-    "express": "4.18.1",
-    "happy-dom": "6.0.4",
-    "netlify-cli": "10.17.4",
-    "postcss": "8.4.16",
-    "postcss-preset-env": "7.8.0",
-    "rollup": "2.78.0",
-    "rollup-plugin-visualizer": "5.7.1",
-    "sass": "1.54.4",
-    "typescript": "4.7.4",
-    "vite": "3.0.8",
-    "vite-plugin-pwa": "0.12.3",
-    "vite-svg-loader": "3.4.0",
-    "vitest": "0.22.1",
-    "vue-tsc": "0.40.1",
+    "autoprefixer": "10.4.12",
+    "browserslist": "4.21.4",
+    "caniuse-lite": "1.0.30001414",
+    "cypress": "10.9.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.2",
+    "postcss": "8.4.17",
+    "postcss-preset-env": "7.8.2",
+    "rollup": "2.79.1",
+    "rollup-plugin-visualizer": "5.8.2",
+    "sass": "1.55.0",
+    "typescript": "4.8.4",
+    "vite": "3.1.6",
+    "vite-plugin-pwa": "0.13.1",
+    "vite-svg-loader": "3.6.0",
+    "vitest": "0.24.0",
+    "vue-tsc": "1.0.1",
     "wait-on": "6.0.1",
     "workbox-cli": "6.5.4"
   },
@@ -102,5 +110,5 @@
     }
   },
   "license": "AGPL-3.0-or-later",
-  "packageManager": "yarn@1.22.19"
+  "packageManager": "pnpm@7.13.2"
 }

renovate.json

@@ -6,7 +6,7 @@
   ],
   "packageRules": [
     {
-      "matchPackageNames": ["netlify-cli"],
+      "matchPackageNames": ["netlify-cli", "happy-dom"],
       "extends": ["schedule:weekly"]
     },
     {
@@ -19,6 +19,12 @@
       "matchPackagePrefixes": [
         "@vueuse/"
       ]
+    },
+    {
+      "matchDepTypes": ["devDependencies"],
+      "automerge": true,
+      "automergeStrategy": "squash",
+      "automergeType": "pr"
     }
   ]
 }

src/App.vue

@@ -15,10 +15,9 @@
 </template>
 
 <script lang="ts" setup>
-import {computed, watch, Ref} from 'vue'
+import {computed, watch, type Ref} from 'vue'
 import {useRouter} from 'vue-router'
 import {useRouteQuery} from '@vueuse/router'
-import {useStore} from 'vuex'
 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/base/BaseButton.vue

@@ -12,12 +12,7 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue'
-
-// see https://v3.vuejs.org/api/sfc-script-setup.html#usage-alongside-normal-script
-export default defineComponent({
-	inheritAttrs: false,
-})
+export default { inheritAttrs: false }
 </script>
 
 <script lang="ts" setup>
@@ -30,7 +25,7 @@ export default defineComponent({
 
 // NOTE: Do NOT use buttons with @click to push routes. => Use router-links instead!
 
-import {ref, watchEffect, computed, useAttrs, PropType} from 'vue'
+import { ref, watchEffect, computed, useAttrs, type PropType } from 'vue'
 
 const BASE_BUTTON_TYPES_MAP = Object.freeze({
 	button: 'button',

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>
@@ -110,10 +110,10 @@
 </template>
 
 <script lang="ts" setup>
-import {format} from 'date-fns'
+import { formatDate } from '@/helpers/time/formatDate'
 import BaseButton from '@/components/base/BaseButton.vue'
 
-const exampleDate = format(new Date(), 'yyyy-MM-dd')
+const exampleDate = formatDate(new Date(), 'yyyy-MM-dd')
 </script>
 
 <style scoped>

src/components/date/datepickerWithRange.vue

@@ -71,7 +71,6 @@
 
 <script lang="ts" setup>
 import {computed, ref, watch} from 'vue'
-import {useStore} from 'vuex'
 import {useI18n} from 'vue-i18n'
 
 import flatPickr from 'vue-flatpickr-component'
@@ -81,11 +80,12 @@ 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(['dateChanged', 'update:modelValue'])
+const emit = defineEmits(['update:modelValue'])
 const props = defineProps({
 	modelValue: {
 		required: false,
@@ -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
-		flatpickrRange.value = `${from.value} to ${to.value}`
+		// 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}`
+		}
 	},
 )
 
@@ -127,7 +133,6 @@ function emitChanged() {
 		dateFrom: from.value === '' ? null : from.value,
 		dateTo: to.value === '' ? null : to.value,
 	}
-	emit('dateChanged', args)
 	emit('update:modelValue', args)
 }
 

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 'vuex'
+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

@@ -16,6 +16,10 @@
 					{{ currentList.title === '' ? $t('misc.loading') : getListTitle(currentList) }}
 				</h1>
 
+				<BaseButton :to="{name: 'list.info', params: {listId: currentList.id}}" class="info-button">
+					<icon icon="circle-info"/>
+				</BaseButton>
+
 				<list-settings-dropdown v-if="canWriteCurrentList && currentList.id !== -1" :list="currentList"/>
 			</template>
 		</div>
@@ -66,7 +70,7 @@
 						{{ $t('navigation.privacy') }}
 					</dropdown-item>
 					<dropdown-item
-						@click="$store.commit('keyboardShortcutsActive', true)"
+						@click="baseStore.setKeyboardShortcutsActive(true)"
 					>
 						{{ $t('keyboardShortcuts.title') }}
 					</dropdown-item>
@@ -88,11 +92,8 @@
 
 <script setup lang="ts">
 import {ref, computed, onMounted, nextTick} from 'vue'
-import {useStore} from 'vuex'
-import {useRouter} from 'vue-router'
 
-import {QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
-import Rights from '@/models/constants/rights.json'
+import {RIGHTS as Rights} from '@/constants/rights'
 
 import Update from '@/components/home/update.vue'
 import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
@@ -103,16 +104,25 @@ import Logo from '@/components/home/Logo.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 import MenuButton from '@/components/home/MenuButton.vue'
 
-const store = useStore()
+import {getListTitle} from '@/helpers/getListTitle'
 
-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)
+import {useBaseStore} from '@/stores/base'
+import {useConfigStore} from '@/stores/config'
+import {useAuthStore} from '@/stores/auth'
+
+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()
@@ -126,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>
 
@@ -282,10 +289,21 @@ $hamburger-menu-icon-width: 28px;
 
 	:deep(.dropdown-trigger) {
 		color: var(--grey-400);
-		margin-left: 1rem;
+		margin-left: .5rem;
 		height: 1rem;
 		width: 1rem;
 		cursor: pointer;
 	}
 }
+
+.info-button {
+	text-align: center;
+	height: 1.25rem;
+	line-height: 1.25rem;
+	width: 2rem;
+	margin-top: .25rem;
+	padding: 0 .5rem;
+	color: var(--grey-400);
+	margin-left: .5rem;
+}
 </style>

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,81 +60,34 @@
 </template>
 
 <script lang="ts" setup>
-import {watch, computed, shallowRef, watchEffect, VNode, h} from 'vue'
-import {useStore} from 'vuex'
-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 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.
@@ -156,48 +109,16 @@ 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()
-store.dispatch('labels/loadAllLabels')
+
+const labelStore = useLabelStore()
+labelStore.loadAllLabels()
 </script>
 
 <style lang="scss" scoped>

src/components/home/contentLinkShare.vue

@@ -6,8 +6,9 @@
 	>
 		<div class="container has-text-centered link-share-view">
 			<div class="column is-10 is-offset-1">
-				<Logo class="logo"/>
+				<Logo class="logo" v-if="logoVisible"/>
 				<h1
+					:class="{'m-0': !logoVisible}"
 					:style="{ 'opacity': currentList.title === '' ? '0': '1' }"
 					class="title">
 					{{ currentList.title === '' ? $t('misc.loading') : currentList.title }}
@@ -23,14 +24,16 @@
 
 <script lang="ts" setup>
 import {computed} from 'vue'
-import {useStore} from 'vuex'
+
+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 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

@@ -56,10 +56,10 @@
 						class="menu-label"
 						v-tooltip="namespaceTitles[nk]"
 					>
-						<span
+						<ColorBubble
 							v-if="n.hexColor !== ''"
-							:style="{ backgroundColor: n.hexColor }"
-							class="color-bubble"
+							:color="n.hexColor"
+							class="mr-1"
 						/>
 						<span class="name">{{ namespaceTitles[nk] }}</span>
 						<div
@@ -114,17 +114,17 @@
 									<span class="icon handle">
 										<icon icon="grip-lines"/>
 									</span>
-									<span
-										:style="{ backgroundColor: l.hexColor }"
-										class="color-bubble"
-										v-if="l.hexColor !== ''">
-									</span>
+									<ColorBubble
+											v-if="l.hexColor !== ''"
+										:color="l.hexColor"
+										class="mr-1"
+									/>
 									<span class="list-menu-title">{{ getListTitle(l) }}</span>
 								</BaseButton>
 								<BaseButton
 									class="favorite"
 									:class="{'is-favorite': l.isFavorite}"
-									@click="toggleFavoriteList(l)"
+									@click="listStore.toggleListFavorite(l)"
 								>
 									<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
 								</BaseButton>
@@ -141,9 +141,8 @@
 
 <script setup lang="ts">
 import {ref, computed, onMounted, onBeforeMount} from 'vue'
-import {useStore} from 'vuex'
 import draggable from 'zhyswan-vuedraggable'
-import {SortableEvent} from 'sortablejs'
+import type {SortableEvent} from 'sortablejs'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
@@ -151,12 +150,17 @@ 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'
 import {useEventListener} from '@vueuse/core'
-import NamespaceModel from '@/models/namespace'
-import ListModel from '@/models/list'
+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'
 
 const drag = ref(false)
 const dragOptions = {
@@ -164,14 +168,15 @@ const dragOptions = {
 	ghostClass: 'ghost',
 }
 
-const store = useStore()
-const currentList = computed(() => store.state.currentList)
-const menuActive = computed(() => store.state.menuActive)
-const loading = computed(() => store.state.loading && store.state.loadingModule === 'namespaces')
+const baseStore = useBaseStore()
+const namespaceStore = useNamespaceStore()
+const currentList = computed(() => baseStore.currentList)
+const menuActive = computed(() => baseStore.menuActive)
+const loading = computed(() => namespaceStore.isLoading)
 
 
 const namespaces = computed(() => {
-	return (store.state.namespaces.namespaces as NamespaceModel[]).filter(n => !n.isArchived)
+	return namespaceStore.namespaces.filter(n => !n.isArchived)
 })
 const activeLists = computed(() => {
 	return namespaces.value.map(({lists}) => {
@@ -193,29 +198,21 @@ const namespaceListsCount = computed(() => {
 useEventListener('resize', resize)
 onMounted(() => resize())
 
-
-function toggleFavoriteList(list: ListModel) {
-	// The favorites pseudo list is always favorite
-	// Archived lists cannot be marked favorite
-	if (list.id === -1 || list.isArchived) {
-		return
-	}
-	store.dispatch('lists/toggleListFavorite', list)
-}
+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: number) {
+function toggleLists(namespaceId: INamespace['id']) {
 	listsVisible.value[namespaceId] = !listsVisible.value[namespaceId]
 }
 
-const listsVisible = ref<{ [id: NamespaceModel['id']]: boolean }>({})
+const listsVisible = ref<{ [id: INamespace['id']]: boolean }>({})
 // FIXME: async action will be unfinished when component mounts
 onBeforeMount(async () => {
-	const namespaces = await store.dispatch('namespaces/loadNamespaces') as NamespaceModel[]
+	const namespaces = await namespaceStore.loadNamespaces()
 	namespaces.forEach(n => {
 		if (typeof listsVisible.value[n.id] === 'undefined') {
 			listsVisible.value[n.id] = true
@@ -223,7 +220,7 @@ onBeforeMount(async () => {
 	})
 })
 
-function updateActiveLists(namespace: NamespaceModel, activeLists: ListModel[]) {
+function updateActiveLists(namespace: INamespace, activeLists: IList[]) {
 	// This is a bit hacky: since we do have to filter out the archived items from the list
 	// for vue draggable updating it is not as simple as replacing it.
 	// To work around this, we merge the active lists with the archived ones. Doing so breaks the order
@@ -234,13 +231,13 @@ function updateActiveLists(namespace: NamespaceModel, activeLists: ListModel[])
 		...namespace.lists.filter(l => l.isArchived),
 	]
 
-	store.commit('namespaces/setNamespaceById', {
+	namespaceStore.setNamespaceById({
 		...namespace,
 		lists,
 	})
 }
 
-const listUpdating = ref<{ [id: NamespaceModel['id']]: boolean }>({})
+const listUpdating = ref<{ [id: INamespace['id']]: boolean }>({})
 
 async function saveListPosition(e: SortableEvent) {
 	if (!e.newIndex && e.newIndex !== 0) return
@@ -249,9 +246,14 @@ async function saveListPosition(e: SortableEvent) {
 	const newNamespaceIndex = parseInt(e.to.dataset.namespaceIndex as string)
 
 	const listsActive = activeLists.value[newNamespaceIndex]
-	const list = listsActive[e.newIndex]
-	const listBefore = listsActive[e.newIndex - 1] ?? null
-	const listAfter = listsActive[e.newIndex + 1] ?? null
+	// If the list was dragged to the last position, Safari will report e.newIndex as the size of the listsActive
+	// array instead of using the position. Because the index is wrong in that case, dragging the list will fail.
+	// To work around that we're explicitly checking that case here and decrease the index.
+	const newIndex = e.newIndex === listsActive.length ? e.newIndex - 1 : e.newIndex 
+	
+	const list = listsActive[newIndex]
+	const listBefore = listsActive[newIndex - 1] ?? null
+	const listAfter = listsActive[newIndex + 1] ?? null
 	listUpdating.value[list.id] = true
 
 	const position = calculateItemPosition(
@@ -260,8 +262,8 @@ async function saveListPosition(e: SortableEvent) {
 	)
 
 	try {
-		// create a copy of the list in order to not violate vuex mutations
-		await store.dispatch('lists/updateList', {
+		// create a copy of the list in order to not violate pinia manipulation
+		await listStore.updateList({
 			...list,
 			position,
 			namespaceId,

src/components/home/update.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="update-notification" v-if="updateAvailable">
 		<p>{{ $t('update.available') }}</p>
-		<x-button @click="refreshApp()" :shadow="false">
+		<x-button @click="refreshApp()" :shadow="false" class="has-no-text-wrap">
 			{{ $t('update.do') }}
 		</x-button>
 	</div>
@@ -43,24 +43,19 @@ function refreshApp() {
 
 <style lang="scss" scoped>
 .update-notification {
-	margin: .5rem;
 	display: flex;
 	align-items: center;
 	background: $warning;
-	padding: 0 .25rem;
+	padding: .5rem;
 	border-radius: $radius;
 	font-size: .9rem;
 	color: var(--grey-900);
 	justify-content: space-between;
 
-	@media screen and (max-width: $desktop) {
-		position: fixed;
-		bottom: 1rem;
-		margin: 0;
-		width: 450px;
-		left: calc(50vw - 225px);
-		padding: .5rem;
-	}
+	position: fixed;
+	bottom: 1rem;
+	width: 450px;
+	left: calc(50vw - 225px);
 
 	@media screen and (max-width: $tablet) {
 		position: fixed;

src/components/input/button.vue

@@ -9,24 +9,27 @@
 			}
 		]"
 	>
-		<icon :icon="icon" v-if="showIconOnly"/>
+		<icon 
+			v-if="showIconOnly"
+			:icon="icon"
+			:style="{'color': iconColor !== '' ? iconColor : false}"
+		/>
 		<span class="icon is-small" v-else-if="icon !== ''">
-			<icon :icon="icon"/>
+			<icon 
+				:icon="icon"
+				:style="{'color': iconColor !== '' ? iconColor : false}"
+			/>
 		</span>
 		<slot />
 	</BaseButton>
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue'
-
-export default defineComponent({
-	name: 'x-button',
-})
+export default { name: 'x-button' }
 </script>
 
 <script setup lang="ts">
-import {computed, useSlots, PropType} from 'vue'
+import {computed, useSlots, type PropType} from 'vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 
 const BUTTON_TYPES_MAP =  Object.freeze({
@@ -46,6 +49,10 @@ const props = defineProps({
 		type: [String, Array],
 		default: '',
 	},
+	iconColor: {
+		type: String,
+		default: '',
+	},
 	loading: {
 		type: Boolean,
 		default: false,
@@ -69,9 +76,11 @@ const showIconOnly = computed(() => props.icon !== '' && typeof slots.default ==
   text-transform: uppercase;
   font-size: 0.85rem;
   font-weight: bold;
+  height: auto;
   min-height: $button-height;
   box-shadow: var(--shadow-sm);
   display: inline-flex;
+  white-space: break-spaces;
 
   &:hover {
     box-shadow: var(--shadow-md);

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,67 +47,57 @@ const DEFAULT_COLORS = [
 	'#00db60',
 ]
 
-export default defineComponent({
-	name: 'colorPicker',
-	data() {
-		return {
-			color: '',
-			lastChangeTimeout: null,
-			defaultColors: DEFAULT_COLORS,
-			colorListID: createRandomID(),
-		}
-	},
-	props: {
-		modelValue: {
-			type: String,
-			required: true,
-		},
-		menuPosition: {
-			type: String,
-			default: 'top',
-		},
-	},
-	emits: ['update:modelValue', 'change'],
-	watch: {
-		modelValue: {
-			handler(modelValue) {
-				this.color = modelValue
-			},
-			immediate: true,
-		},
-		color() {
-			this.update()
-		},
-	},
-	computed: {
-		isEmpty() {
-			return this.color === '#000000' || this.color === ''
-		},
-	},
-	methods: {
-		update(force = false) {
+const color = ref('')
+const lastChangeTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
+const defaultColors = ref(DEFAULT_COLORS)
+const colorListID = ref(createRandomID())
 
-			if(this.isEmpty && !force) {
-				return
-			}
-
-			if (this.lastChangeTimeout !== null) {
-				clearTimeout(this.lastChangeTimeout)
-			}
-
-			this.lastChangeTimeout = setTimeout(() => {
-				this.$emit('update:modelValue', this.color)
-				this.$emit('change')
-			}, 500)
-		},
-		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)
-		},
+const props = defineProps({
+	modelValue: {
+		type: String,
+		required: true,
+	},
+	menuPosition: {
+		type: String,
+		default: 'top',
 	},
 })
+
+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 (lastChangeTimeout.value !== null) {
+		clearTimeout(lastChangeTimeout.value)
+	}
+
+	lastChangeTimeout.value = setTimeout(() => {
+		emit('update:modelValue', color.value)
+	}, 500)
+}
+
+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 = ''
+	color.value = ''
+	update(true)
+}
 </script>
 
 <style lang="scss" scoped>

src/components/input/datepicker.vue

@@ -88,155 +88,152 @@
 	</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'
 
-import {format} from 'date-fns'
+import {formatDate, formatDateShort} from '@/helpers/time/formatDate'
 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,
-		}
+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,
 	},
-	components: {
-		flatPickr,
-		BaseButton,
-	},
-	props: {
-		modelValue: {
-			validator: prop => prop instanceof Date || prop === null || typeof prop === 'string',
-		},
-		chooseDateLabel: {
-			type: String,
-			default() {
-				return i18n.global.t('input.datepicker.chooseDate')
-			},
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
+	chooseDateLabel: {
+		type: String,
+		default() {
+			const {t} = useI18n({useScope: 'global'})
+			return t('input.datepicker.chooseDate')
 		},
 	},
-	emits: ['update:modelValue', 'change', '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'),
-				altInput: true,
-				dateFormat: 'Y-m-d H:i',
-				enableTime: true,
-				time_24hr: true,
-				inline: true,
-				locale: {
-					firstDayOfWeek: this.$store.state.auth.settings.weekStart,
-				},
-			}
-		},
-		// 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()
-			},
-			get() {
-				if (!this.date) {
-					return ''
-				}
-
-				return format(this.date, 'yyy-LL-dd H:mm')
-			},
-		},
-	},
-	methods: {
-		setDateValue(newVal) {
-			if (newVal === null) {
-				this.date = null
-				return
-			}
-			this.date = createDateFromString(newVal)
-		},
-		updateData() {
-			this.changed = true
-			this.$emit('update:modelValue', this.date)
-			this.$emit('change', this.date)
-		},
-		toggleDatePopup() {
-			if (this.disabled) {
-				return
-			}
-
-			this.show = !this.show
-		},
-		hideDatePopup(e) {
-			if (this.show) {
-				closeWhenClickedOutside(e, this.$refs.datepickerPopup, this.close)
-			}
-		},
-		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)
-				}
-			}, 200)
-		},
-		setDate(date) {
-			if (this.date === null) {
-				this.date = new Date()
-			}
-
-			const interval = calculateDayInterval(date)
-			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)
-			const newDate = new Date()
-			newDate.setDate(newDate.getDate() + interval)
-			return format(newDate, 'E')
-		},
+	disabled: {
+		type: Boolean,
+		default: false,
 	},
 })
+
+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: 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.
+const flatPickrDate = computed({
+	set(newValue: string | Date) {
+		date.value = createDateFromString(newValue)
+		updateData()
+	},
+	get() {
+		if (!date.value) {
+			return ''
+		}
+
+		return formatDate(date.value, 'yyy-LL-dd H:mm')
+	},
+})
+
+
+function setDateValue(dateString: string | Date | null) {
+	if (dateString === null) {
+		date.value = null
+		return
+	}
+	date.value = createDateFromString(dateString)
+}
+
+function updateData() {
+	changed.value = true
+	emit('update:modelValue', date.value)
+}
+
+function toggleDatePopup() {
+	if (props.disabled) {
+		return
+	}
+
+	show.value = !show.value
+}
+
+const datepickerPopup = ref<HTMLElement | null>(null)
+function hideDatePopup(e) {
+	if (show.value) {
+		closeWhenClickedOutside(e, datepickerPopup.value, 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(() => {
+		show.value = false
+		emit('close', changed.value)
+		if (changed.value) {
+			changed.value = false
+			emit('close-on-change', changed.value)
+		}
+	}, 200)
+}
+
+function setDate(dateString: string) {
+	if (date.value === null) {
+		date.value = new Date()
+	}
+
+	const interval = calculateDayInterval(dateString)
+	const newDate = new Date()
+	newDate.setDate(newDate.getDate() + interval)
+	newDate.setHours(calculateNearestHours(newDate))
+	newDate.setMinutes(0)
+	newDate.setSeconds(0)
+	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"
@@ -16,14 +16,29 @@
 		<p class="has-text-centered has-text-grey is-italic my-5" v-if="showPreviewText">
 			{{ emptyText }}
 			<template v-if="isEditEnabled">
-				<ButtonLink @click="toggleEdit" class="d-print-none">{{ $t('input.editor.edit') }}</ButtonLink>.
+				<ButtonLink
+					@click="toggleEdit"
+					v-shortcut="editShortcut"
+					class="d-print-none">
+					{{ $t('input.editor.edit') }}
+				</ButtonLink>.
 			</template>
 		</p>
 
 		<ul class="actions d-print-none" v-if="bottomActions.length > 0">
 			<li v-if="isEditEnabled && !showPreviewText && showSave">
-				<BaseButton v-if="showEditButton" @click="toggleEdit">{{ $t('input.editor.edit') }}</BaseButton>
-				<BaseButton v-else-if="isEditActive" @click="toggleEdit" class="done-edit">{{ $t('misc.save') }}</BaseButton>
+				<BaseButton
+					v-if="showEditButton"
+					@click="toggleEdit"
+					v-shortcut="editShortcut">
+					{{ $t('input.editor.edit') }}
+				</BaseButton>
+				<BaseButton
+					v-else-if="isEditActive"
+					@click="toggleEdit"
+					class="done-edit">
+					{{ $t('misc.save') }}
+				</BaseButton>
 			</li>
 			<li v-for="(action, k) in bottomActions" :key="k">
 				<BaseButton @click="action.action">{{ action.title }}</BaseButton>
@@ -32,7 +47,11 @@
 		<template v-else-if="isEditEnabled && showSave">
 			<ul v-if="showEditButton" class="actions d-print-none">
 				<li>
-					<BaseButton @click="toggleEdit">{{ $t('input.editor.edit') }}</BaseButton>
+					<BaseButton
+						@click="toggleEdit"
+						v-shortcut="editShortcut">
+						{{ $t('input.editor.edit') }}
+					</BaseButton>
 				</li>
 			</ul>
 			<x-button
@@ -47,276 +66,245 @@
 	</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 hljs from 'highlight.js/lib/common'
 
 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,
+const props = defineProps({
+	modelValue: {
+		type: String,
+		default: '',
 	},
-	props: {
-		modelValue: {
-			type: String,
-			default: '',
-		},
-		placeholder: {
-			type: String,
-			default: '',
-		},
-		uploadEnabled: {
-			type: Boolean,
-			default: false,
-		},
-		uploadCallback: {
-			type: Function,
-		},
-		hasPreview: {
-			type: Boolean,
-			default: true,
-		},
-		previewIsDefault: {
-			type: Boolean,
-			default: true,
-		},
-		isEditEnabled: {
-			default: true,
-		},
-		bottomActions: {
-			default: () => [],
-		},
-		emptyText: {
-			type: String,
-			default: '',
-		},
-		showSave: {
-			type: Boolean,
-			default: false,
-		},
+	placeholder: {
+		type: String,
+		default: '',
 	},
-	emits: ['update:modelValue', 'change'],
-	computed: {
-		showPreviewText() {
-			return this.isPreviewActive && this.text === '' && this.emptyText !== ''
-		},
-		showEditButton() {
-			return !this.isEditActive && this.text !== ''
-		},
+	uploadEnabled: {
+		type: Boolean,
+		default: false,
 	},
-	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(),
-		}
+	uploadCallback: {
+		type: Function,
 	},
-	watch: {
-		modelValue(modelValue) {
-			this.text = modelValue
-			this.$nextTick(this.renderPreview)
-		},
-		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) {
-				return
-			}
-			this.bubble()
-		},
+	hasPreview: {
+		type: Boolean,
+		default: true,
 	},
-	mounted() {
-		if (this.modelValue !== '') {
-			this.text = this.modelValue
-		}
-
-		if (this.previewIsDefault && this.hasPreview) {
-			this.$nextTick(this.renderPreview)
-			return
-		}
-
-		this.isPreviewActive = false
-		this.isEditActive = true
+	previewIsDefault: {
+		type: Boolean,
+		default: 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) {
-			// Don't bubble if the text is up to date
-			if (val === this.text) {
-				return
-			}
-
-			this.text = val
-			this.bubble(1000)
-		},
-		bubble(timeout = 500) {
-			if (this.changeTimeout !== null) {
-				clearTimeout(this.changeTimeout)
-			}
-
-			this.changeTimeout = setTimeout(() => {
-				this.$emit('update:modelValue', this.text)
-				this.$emit('change', this.text)
-			}, timeout)
-		},
-		replaceAt(str, index, replacement) {
-			return str.substr(0, index) + replacement + str.substr(index + replacement.length)
-		},
-		findNthIndex(str, n) {
-			const checkboxes = findCheckboxesInText(str)
-			return checkboxes[n]
-		},
-		renderPreview() {
-			const renderer = new marked.Renderer()
-			const linkRenderer = renderer.link
-
-			let checkboxNum = -1
-			marked.use({
-				renderer: {
-					image: (src, title, text) => {
-
-						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/`) {
-							return `<img data-src="${src}" alt="${text}" ${title} class="attachment-image"/>`
-						}
-
-						return `<img src="${src}" alt="${text}" ${title}/>`
-					},
-					checkbox: (checked) => {
-						if (checked) {
-							checked = ' checked="checked"'
-						}
-
-						checkboxNum++
-						return `<input type="checkbox" data-checkbox-num="${checkboxNum}" ${checked} class="text-checkbox-${this.checkboxId}"/>`
-					},
-					link: (href, title, text) => {
-						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) {
-					const validLanguage = hljs.getLanguage(language) ? language : 'plaintext'
-					return hljs.highlight(code, {language: validLanguage}).value
-				},
-			})
-
-			this.preview = DOMPurify.sanitize(marked(this.text), {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.
-			// To work around this, we modify the url after rendering it in the vue component.
-			// We're doing the whole thing in the next tick to ensure the image elements are available in the
-			// 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')
-				if (attachmentImage) {
-					for (const img of attachmentImage) {
-						// 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}`
-
-						if (typeof this.loadedAttachments[cacheKey] !== 'undefined') {
-							img.src = this.loadedAttachments[cacheKey]
-							continue
-						}
-
-						const attachment = new AttachmentModel({taskId: taskId, id: attachmentId})
-
-						if (this.attachmentService === null) {
-							this.attachmentService = new AttachmentService()
-						}
-
-						const url = await this.attachmentService.getBlobUrl(attachment)
-						img.src = url
-						this.loadedAttachments[cacheKey] = url
-					}
-				}
-
-				const textCheckbox = document.getElementsByClassName(`text-checkbox-${this.checkboxId}`)
-				if (textCheckbox) {
-					for (const check of textCheckbox) {
-						check.removeEventListener('change', this.handleCheckboxClick)
-						check.addEventListener('change', this.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)
-			if (index < 0 || typeof index === 'undefined') {
-				console.debug('no index found')
-				return
-			}
-			console.debug(index, this.text.substr(index, 9))
-
-			const listPrefix = this.text.substr(index, 1)
-
-			if (checked) {
-				this.text = this.replaceAt(this.text, index, `${listPrefix} [x] `)
-			} else {
-				this.text = this.replaceAt(this.text, index, `${listPrefix} [ ] `)
-			}
-			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
-			}
-		},
+	isEditEnabled: {
+		default: true,
+	},
+	bottomActions: {
+		default: () => [],
+	},
+	emptyText: {
+		type: String,
+		default: '',
+	},
+	showSave: {
+		type: Boolean,
+		default: false,
+	},
+	// If a key is passed the editor will go in "edit" mode when the key is pressed.
+	// Disabled if an empty string is passed.
+	editShortcut: {
+		type: String,
+		default: '',
 	},
 })
+
+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(
+	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 === '' && text.value === modelValue.value) {
+			return
+		}
+		bubble()
+	},
+)
+
+
+onMounted(() => {
+	if (modelValue.value !== '') {
+		text.value = modelValue.value
+	}
+
+	if (props.previewIsDefault && props.hasPreview) {
+		nextTick(() => renderPreview())
+		return
+	}
+
+	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 === text.value) {
+		return
+	}
+
+	text.value = val
+	bubble(1000)
+}
+
+function bubble(timeout = 500) {
+	if (changeTimeout.value !== null) {
+		clearTimeout(changeTimeout.value)
+	}
+
+	changeTimeout.value = setTimeout(() => {
+		emit('update:modelValue', text.value)
+	}, timeout)
+}
+
+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]
+}
+
+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.
+	// To work around this, we modify the url after rendering it in the vue component.
+	// We're doing the whole thing in the next tick to ensure the image elements are available in the
+	// 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
+	nextTick().then(async () => {
+		const attachmentImage = document.querySelectorAll<HTMLImageElement>('.attachment-image')
+		if (attachmentImage) {
+			Array.from(attachmentImage).forEach(async (img) => {
+				// The url is something like /tasks/<id>/attachments/<id>
+				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 loadedAttachments.value[cacheKey] !== 'undefined') {
+					img.src = loadedAttachments.value[cacheKey]
+					return
+				}
+
+				const attachment = new AttachmentModel({taskId: taskId, id: attachmentId})
+
+				const url = await attachmentService.getBlobUrl(attachment)
+				img.src = url
+				loadedAttachments.value[cacheKey] = url
+			})
+		}
+
+		const textCheckbox = document.querySelectorAll<HTMLInputElement>(`.text-checkbox-${checkboxId.value}`)
+		if (textCheckbox) {
+			Array.from(textCheckbox).forEach(check => {
+				check.removeEventListener('change', handleCheckboxClick)
+				check.addEventListener('change', handleCheckboxClick)
+				check.parentElement?.classList.add('has-checkbox')
+			})
+		}
+	})
+}
+
+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, text.value.slice(index, 9))
+
+	const listPrefix = text.value.slice(index, 1)
+
+	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 {
+		isPreviewActive.value = false
+		isEditActive.value = 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,47 +20,42 @@
 	</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: {
-		modelValue: {
-			required: false,
-		},
-		disabled: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-	},
-	emits: ['update:modelValue', 'change'],
-	watch: {
-		modelValue: {
-			handler(modelValue) {
-				this.checked = modelValue
+const checked = ref(false)
+const checkBoxId = `fancycheckbox_${createRandomID()}`
 
-			},
-			immediate: true,
-		},
+const props = defineProps({
+	modelValue: {
+		type: Boolean,
+		required: false,
 	},
-	methods: {
-		updateData(checked) {
-			this.checked = checked
-			this.$emit('update:modelValue', checked)
-			this.$emit('change', checked)
-		},
+	disabled: {
+		type: Boolean,
+		required: false,
+		default: false,
 	},
 })
+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,294 +99,298 @@ function elementInResults(elem: string | any, label: string, query: string): boo
 	return elem === query
 }
 
-export default defineComponent({
-	name: 'multiselect',
-	components: {
-		BaseButton,
+const props = defineProps({
+	// When true, shows a loading spinner
+	loading: {
+		type: Boolean,
+		default: false,
 	},
-	data() {
-		return {
-			query: '',
-			searchTimeout: null,
-			localLoading: false,
-			showSearchResults: false,
-			internalValue: null,
-		}
+	// The placeholder of the search input
+	placeholder: {
+		type: String,
+		default: '',
 	},
-	props: {
-		// When true, shows a loading spinner
-		loading: {
-			type: Boolean,
-			default() {
-				return false
-			},
-		},
-		// The placeholder of the search input
-		placeholder: {
-			type: String,
-			default() {
-				return ''
-			},
-		},
-		// The search results where the @search listener needs to put the results into
-		searchResults: {
-			type: Array,
-			default() {
-				return []
-			},
-		},
-		// 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 ''
-			},
-		},
-		// The object with the value, updated every time an entry is selected.
-		modelValue: {
-			default() {
-				return null
-			},
-		},
-		// If true, will provide an "add this as a new value" entry which fires an @create event when clicking on it.
-		creatable: {
-			type: Boolean,
-			default: false,
-		},
-		// The text shown next to the new value option.
-		createPlaceholder: {
-			type: String,
-			default() {
-				return i18n.global.t('input.multiselect.createPlaceholder')
-			},
-		},
-		// The text shown next to an option.
-		selectPlaceholder: {
-			type: String,
-			default() {
-				return i18n.global.t('input.multiselect.selectPlaceholder')
-			},
-		},
-		// If true, allows for selecting multiple items. v-model will be an array with all selected values in that case.
-		multiple: {
-			type: Boolean,
-			default: false,
-		},
-		// If true, displays the search results inline instead of using a dropdown.
-		inline: {
-			type: Boolean,
-			default: false,
-		},
-		// If true, shows search results when no query is specified.
-		showEmpty: {
-			type: Boolean,
-			default: true,
-		},
-		// 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
-			},
-		},
-		closeAfterSelect: {
-			type: Boolean,
-			default: true,
+	// The search results where the @search listener needs to put the results into
+	searchResults: {
+		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: '',
+	},
+	// The object with the value, updated every time an entry is selected.
+	modelValue: {
+		default: null,
+	},
+	// If true, will provide an "add this as a new value" entry which fires an @create event when clicking on it.
+	creatable: {
+		type: Boolean,
+		default: false,
+	},
+	// The text shown next to the new value option.
+	createPlaceholder: {
+		type: String,
+		default() {
+			const {t} = useI18n({useScope: 'global'}) 
+			return t('input.multiselect.createPlaceholder')
 		},
 	},
-
-	/**
-	 * 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'],
-
-	mounted() {
-		document.addEventListener('click', this.hideSearchResultsHandler)
-	},
-	beforeUnmount() {
-		document.removeEventListener('click', this.hideSearchResultsHandler)
-	},
-	watch: {
-		modelValue: {
-			handler(value) {
-				this.setSelectedObject(value)
-			},
-			immediate: true,
-			deep: true,
+	// The text shown next to an option.
+	selectPlaceholder: {
+		type: String,
+		default() {
+			const {t} = useI18n({useScope: 'global'}) 
+			return t('input.multiselect.selectPlaceholder')
 		},
 	},
-	computed: {
-		searchResultsVisible() {
-			if (this.query === '' && !this.showEmpty) {
-				return false
-			}
-
-			return this.showSearchResults && (
-				(this.filteredSearchResults.length > 0) ||
-				(this.creatable && this.query !== '')
-			)
-		},
-		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 !== '' 
-				&& !(hasResult || hasQueryAlreadyAdded)
-		},
-		filteredSearchResults() {
-			if (this.multiple && this.internalValue !== null && Array.isArray(this.internalValue)) {
-				return this.searchResults.filter(item => !this.internalValue.some(e => e === item))
-			}
-
-			return this.searchResults
-		},
-		hasMultiple() {
-			return this.multiple && Array.isArray(this.internalValue) && this.internalValue.length > 0
-		},
+	// If true, allows for selecting multiple items. v-model will be an array with all selected values in that case.
+	multiple: {
+		type: Boolean,
+		default: false,
 	},
-	methods: {
-		// Searching will be triggered with a 200ms delay to avoid searching on every keyup event.
-		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
-
-			if (this.searchTimeout !== null) {
-				clearTimeout(this.searchTimeout)
-				this.searchTimeout = null
-			}
-
-			this.localLoading = true
-
-			this.searchTimeout = setTimeout(() => {
-				this.$emit('search', this.query)
-				setTimeout(() => {
-					this.localLoading = 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() {
-			// 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
-			}, 10)
-		},
-		select(object) {
-			if (this.multiple) {
-				if (this.internalValue === null) {
-					this.internalValue = []
-				}
-
-				this.internalValue.push(object)
-			} else {
-				this.internalValue = 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()
-			}
-		},
-		setSelectedObject(object, resetOnly = false) {
-			this.internalValue = 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 = ''
-				return
-			}
-
-			if (object === null) {
-				this.query = ''
-				return
-			}
-
-			if (resetOnly) {
-				return
-			}
-
-			this.query = this.label !== '' ? object[this.label] : object
-		},
-		preSelect(index) {
-			if (index < 0) {
-				this.$refs.searchInput.focus()
-				return
-			}
-
-			const elems = this.$refs[`result-${index}`]
-			if (typeof elems === 'undefined' || elems.length === 0) {
-				return
-			}
-
-			if (Array.isArray(elems)) {
-				elems[0].focus()
-				return
-			}
-
-			elems.focus()
-		},
-		create() {
-			if (this.query === '') {
-				return
-			}
-
-			this.$emit('create', this.query)
-			this.setSelectedObject(this.query, true)
-			this.closeSearchResults()
-		},
-		createOrSelectOnEnter() {
-
-			if (!this.creatableAvailable && this.searchResults.length === 1) {
-				this.select(this.searchResults[0])
-				return
-			}
-
-			if (!this.creatableAvailable) {
-				// Check if there's an exact match for our search term
-				const exactMatch = this.filteredSearchResults.find(elem => elementInResults(elem, this.label, this.query))
-				if(exactMatch) {
-					this.select(exactMatch)
-				}
-
-				return
-			}
-
-			this.create()
-		},
-		remove(item) {
-			for (const ind in this.internalValue) {
-				if (this.internalValue[ind] === item) {
-					this.internalValue.splice(ind, 1)
-					break
-				}
-			}
-
-			this.$emit('update:modelValue', this.internalValue)
-			this.$emit('remove', item)
-		},
-		focus() {
-			this.$refs.searchInput.focus()
-		},
+	// If true, displays the search results inline instead of using a dropdown.
+	inline: {
+		type: Boolean,
+		default: false,
+	},
+	// If true, shows search results when no query is specified.
+	showEmpty: {
+		type: Boolean,
+		default: true,
+	},
+	// 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: 200,
+	},
+	closeAfterSelect: {
+		type: Boolean,
+		default: true,
 	},
 })
+
+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
+}>()
+
+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,
+	},
+)
+
+const searchResultsVisible = computed(() => {
+	if (query.value === '' && !props.showEmpty) {
+		return false
+	}
+
+	return showSearchResults.value && (
+		(filteredSearchResults.value.length > 0) ||
+		(props.creatable && query.value !== '')
+	)
+})
+
+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)
+})
+
+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 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.
+	query.value = searchInput.value?.value || ''
+
+	if (searchTimeout.value !== null) {
+		clearTimeout(searchTimeout.value)
+		searchTimeout.value = null
+	}
+
+	localLoading.value = true
+
+	searchTimeout.value = setTimeout(() => {
+		emit('search', query.value)
+		setTimeout(() => {
+			localLoading.value = false
+		}, 100) // The duration of the loading timeout of the services
+		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(() => {
+		showSearchResults.value = true
+	}, 10)
+}
+
+function select(object: {[key: string]: any}) {
+	if (props.multiple) {
+		if (internalValue.value === null) {
+			internalValue.value = []
+		}
+
+		(internalValue.value as any[]).push(object)
+	} else {
+		internalValue.value = object
+	}
+
+	emit('update:modelValue', internalValue.value)
+	emit('select', object)
+	setSelectedObject(object)
+	if (props.closeAfterSelect && filteredSearchResults.value.length > 0 && !creatableAvailable.value) {
+		closeSearchResults()
+	}
+}
+
+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 (props.multiple) {
+		query.value = ''
+		return
+	}
+
+	if (object === null) {
+		query.value = ''
+		return
+	}
+
+	if (resetOnly) {
+		return
+	}
+
+	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) {
+		searchInput.value?.focus()
+		return
+	}
+
+	const elems = results.value[index]
+	if (typeof elems === 'undefined' || elems.length === 0) {
+		return
+	}
+
+	if (Array.isArray(elems)) {
+		elems[0].focus()
+		return
+	}
+
+	elems.focus()
+}
+
+function create() {
+	if (query.value === '') {
+		return
+	}
+
+	emit('create', query.value)
+	setSelectedObject(query.value, true)
+	closeSearchResults()
+}
+
+function createOrSelectOnEnter() {
+	if (!creatableAvailable.value && searchResults.value.length === 1) {
+		select(searchResults.value[0])
+		return
+	}
+
+	if (!creatableAvailable.value) {
+		// Check if there's an exact match for our search term
+		const exactMatch = filteredSearchResults.value.find((elem: any) => elementInResults(elem, props.label, query.value))
+		if(exactMatch) {
+			select(exactMatch)
+		}
+
+		return
+	}
+
+	create()
+}
+
+function remove(item: any) {
+	for (const ind in internalValue.value) {
+		if (internalValue.value[ind] === item) {
+			internalValue.value.splice(ind, 1)
+			break
+		}
+	}
+
+	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"
-				:subscription="list.subscription"
-				@change="sub => subscription = sub"
+				:model-value="list.subscription"
+				@update:model-value="setSubscriptionInStore"
 				type="dropdown"
 			/>
 			<dropdown-item
@@ -76,29 +76,42 @@
 </template>
 
 <script setup lang="ts">
-import {ref, computed, watchEffect} from 'vue'
-import {useStore} from 'vuex'
+import {ref, computed, watchEffect, type PropType} from 'vue'
 
-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 ListModel from '@/models/list'
-import SubscriptionModel from '@/models/subscription'
+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: {
-		type: ListModel,
+		type: Object as PropType<IList>,
 		required: true,
 	},
 })
 
-const subscription = ref<SubscriptionModel | null>(null)
+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,72 +29,60 @@
 	</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: {
-		modelValue: {
-			required: true,
-		},
-	},
-	emits: ['update:modelValue'],
-	computed: {
-		value: {
-			get() {
-				return this.modelValue
-			},
-			set(value) {
-				this.$emit('update:modelValue', value)
-			},
-		},
-		hasFilters() {
-			// 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 def = {...getDefaultParams()}
-
-			const params = {filter_by, filter_value, filter_comparator, filter_concat, s}
-			const defaultParams = {
-				filter_by: def.filter_by,
-				filter_value: def.filter_value,
-				filter_comparator: def.filter_comparator,
-				filter_concat: def.filter_concat,
-				s: s ? def.s : undefined,
-			}
-
-			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	props = defineProps({
+	modelValue: {
+		required: true,
 	},
 })
+const emit = defineEmits(['update:modelValue'])
+
+const value = computed({
+	get() {
+		return props.modelValue
+	},
+	set(value) {
+		emit('update:modelValue', value)
+	},
+})
+
+watch(
+	() => props.modelValue,
+	(modelValue) => {
+		value.value = modelValue
+	},
+	{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} = value.value
+	const def = {...getDefaultParams()}
+
+	const params = {filter_by, filter_value, filter_comparator, filter_concat, s}
+	const defaultParams = {
+		filter_by: def.filter_by,
+		filter_value: def.filter_value,
+		filter_comparator: def.filter_comparator,
+		filter_concat: def.filter_concat,
+		s: s ? def.s : undefined,
+	}
+
+	return JSON.stringify(params) !== JSON.stringify(defaultParams)
+})
+
+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>
@@ -38,11 +42,11 @@
 				<priority-select
 					:disabled="!filters.usePriority || undefined"
 					v-model.number="filters.priority"
-					@change="setPriority"
+					@update:model-value="setPriority"
 				/>
 				<fancycheckbox
 					v-model="filters.usePriority"
-					@change="setPriority"
+					@update:model-value="setPriority"
 				>
 					{{ $t('filters.attributes.enablePriority') }}
 				</fancycheckbox>
@@ -53,12 +57,12 @@
 			<div class="control single-value-control">
 				<percent-done-select
 					v-model.number="filters.percentDone"
-					@change="setPercentDoneFilter"
+					@update:model-value="setPercentDoneFilter"
 					:disabled="!filters.usePercentDone || undefined"
 				/>
 				<fancycheckbox
 					v-model="filters.usePercentDone"
-					@change="setPercentDoneFilter"
+					@update:model-value="setPercentDoneFilter"
 				>
 					{{ $t('filters.attributes.enablePercentDone') }}
 				</fancycheckbox>
@@ -68,8 +72,9 @@
 			<label class="label">{{ $t('task.attributes.dueDate') }}</label>
 			<div class="control">
 				<datepicker-with-range
-					@dateChanged="values => setDateFilter('due_date', values)"
-					v-model="filters.dueDate">
+					v-model="filters.dueDate"
+					@update:model-value="values => setDateFilter('due_date', values)"
+				>
 					<template #trigger="{toggle, buttonText}">
 						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
 							{{ buttonText }}
@@ -82,8 +87,9 @@
 			<label class="label">{{ $t('task.attributes.startDate') }}</label>
 			<div class="control">
 				<datepicker-with-range
-					@dateChanged="values => setDateFilter('start_date', values)"
-					v-model="filters.startDate">
+					v-model="filters.startDate"
+					@update:model-value="values => setDateFilter('start_date', values)"
+				>
 					<template #trigger="{toggle, buttonText}">
 						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
 							{{ buttonText }}
@@ -96,8 +102,9 @@
 			<label class="label">{{ $t('task.attributes.endDate') }}</label>
 			<div class="control">
 				<datepicker-with-range
-					@dateChanged="values => setDateFilter('end_date', values)"
-					v-model="filters.endDate">
+					v-model="filters.endDate"
+					@update:model-value="values => setDateFilter('end_date', values)"
+				>
 					<template #trigger="{toggle, buttonText}">
 						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
 							{{ buttonText }}
@@ -110,8 +117,9 @@
 			<label class="label">{{ $t('task.attributes.reminders') }}</label>
 			<div class="control">
 				<datepicker-with-range
-					@dateChanged="values => setDateFilter('reminders', values)"
-					v-model="filters.reminders">
+					v-model="filters.reminders"
+					@update:model-value="values => setDateFilter('reminders', values)"
+				>
 					<template #trigger="{toggle, buttonText}">
 						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
 							{{ buttonText }}
@@ -141,7 +149,7 @@
 		<div class="field">
 			<label class="label">{{ $t('task.attributes.labels') }}</label>
 			<div class="control labels-list">
-				<edit-labels v-model="labels" @change="changeLabelFilter"/>
+				<edit-labels v-model="labels" @update:model-value="changeLabelFilter"/>
 			</div>
 		</div>
 
@@ -186,8 +194,10 @@
 <script lang="ts">
 import {defineComponent} from 'vue'
 
-import DatepickerWithRange from '@/components/date/datepickerWithRange'
-import Fancycheckbox from '../../input/fancycheckbox'
+import {useLabelStore} from '@/stores/labels'
+
+import DatepickerWithRange from '@/components/date/datepickerWithRange.vue'
+import Fancycheckbox from '@/components/input/fancycheckbox.vue'
 
 import {includesById} from '@/helpers/utils'
 import PrioritySelect from '@/components/tasks/partials/prioritySelect.vue'
@@ -200,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'
@@ -278,7 +289,7 @@ export default defineComponent({
 			default: false,
 		},
 	},
-	emits: ['update:modelValue', 'change'],
+	emits: ['update:modelValue'],
 	watch: {
 		modelValue: {
 			handler(value) {
@@ -303,8 +314,10 @@ export default defineComponent({
 				this.change()
 			},
 		},
+
 		foundLabels() {
-			return this.$store.getters['labels/filterLabelsByQuery'](this.labels, this.query)
+			const labelStore = useLabelStore()
+			return labelStore.filterLabelsByQuery(this.labels, this.labelQuery)
 		},
 	},
 	methods: {
@@ -312,7 +325,6 @@ export default defineComponent({
 			const params = {...this.params}
 			params.filter_value = params.filter_value.map(v => v instanceof Date ? v.toISOString() : v)
 			this.$emit('update:modelValue', params)
-			this.$emit('change', params)
 		},
 		prepareFilters() {
 			this.prepareDone()
@@ -333,7 +345,8 @@ export default defineComponent({
 				: ''
 			const labelIds = labels.split(',').map(i => parseInt(i))
 
-			this.labels = this.$store.getters['labels/getLabelsByIds'](labelIds)
+			const labelStore = useLabelStore()
+			this.labels = labelStore.getLabelsByIds(labelIds)
 		},
 		removePropertyFromFilter(propertyName) {
 			// Because of the way arrays work, we can only ever remove one element at once.
@@ -379,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
 			}
@@ -499,12 +519,12 @@ export default defineComponent({
 			if (typeof this.filters[filterName] === 'undefined' || this.filters[filterName] === '') {
 				return
 			}
-			
+
 			// Don't load things if we already have something loaded.
 			// 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
 			}
 
@@ -526,6 +546,7 @@ export default defineComponent({
 			} else {
 				this.params.filter_concat = 'or'
 			}
+			this.change()
 		},
 		setPriority() {
 			this.setSingleValueFilter('priority', 'priority', 'usePriority')
@@ -565,7 +586,7 @@ export default defineComponent({
 				return
 			}
 
-			let ids = []
+			const ids = []
 			this[kind].forEach(u => {
 				ids.push(kind === 'users' ? u.username : u.id)
 			})
@@ -600,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,
@@ -24,7 +24,7 @@
 			<BaseButton
 				v-else
 				:class="{'is-favorite': list.isFavorite}"
-				@click.stop="toggleFavoriteList(list)"
+				@click.stop="listStore.toggleListFavorite(list)"
 				class="favorite"
 			>
 				<icon :icon="list.isFavorite ? 'star' : ['far', 'star']"/>
@@ -36,16 +36,16 @@
 </template>
 
 <script lang="ts" setup>
-import {PropType, ref, watch} from 'vue'
-import {useStore} from 'vuex'
+import {type PropType, ref, watch} from 'vue'
 
 import ListService from '@/services/list'
 import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
 
 import {colorIsDark} from '@/helpers/color/colorIsDark'
-import ListModel from '@/models/list'
 
 import BaseButton from '@/components/base/BaseButton.vue'
+import type {IList} from '@/modelTypes/IList'
+import {useListStore} from '@/stores/lists'
 
 const background = ref<string | null>(null)
 const backgroundLoading = ref(false)
@@ -53,7 +53,7 @@ const blurHashUrl = ref('')
 
 const props = defineProps({
 	list: {
-		type: Object as PropType<ListModel>,
+		type: Object as PropType<IList>,
 		required: true,
 	},
 	showArchived: {
@@ -84,16 +84,7 @@ async function loadBackground() {
 	}
 }
 
-const store = useStore()
-
-function toggleFavoriteList(list: ListModel) {
-	// The favorites pseudo list is always favorite
-	// Archived lists cannot be marked favorite
-	if (list.id === -1 || list.isArchived) {
-		return
-	}
-	store.dispatch('lists/toggleListFavorite', list)
-}
+const listStore = useListStore()
 </script>
 
 <style lang="scss" scoped>
@@ -110,7 +101,7 @@ function toggleFavoriteList(list: ListModel) {
 	overflow: hidden;
 
 	&.has-light-text .title {
-		color: var(--grey-100);
+		color: var(--grey-100) !important;
 	}
 
 	&.has-background,

src/components/misc/Done.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts" setup>
-import {PropType} from 'vue'
+import type {PropType} from 'vue'
 type Variants = 'default' | 'small'
 
 defineProps({

src/components/misc/Icon.ts

@@ -11,16 +11,17 @@ import {
 	faCheckDouble,
 	faChessKnight,
 	faChevronDown,
+	faCircleInfo,
 	faCloudDownloadAlt,
 	faCloudUploadAlt,
 	faCocktail,
 	faCoffee,
 	faCog,
-	faEye,
-	faEyeSlash,
 	faEllipsisH,
 	faEllipsisV,
 	faExclamation,
+	faEye,
+	faEyeSlash,
 	faFillDrip,
 	faFilter,
 	faForward,
@@ -82,6 +83,7 @@ library.add(faCheck)
 library.add(faCheckDouble)
 library.add(faChessKnight)
 library.add(faChevronDown)
+library.add(faCircleInfo)
 library.add(faClock)
 library.add(faCloudDownloadAlt)
 library.add(faCloudUploadAlt)
@@ -89,11 +91,11 @@ library.add(faCocktail)
 library.add(faCoffee)
 library.add(faCog)
 library.add(faComments)
-library.add(faEye)
-library.add(faEyeSlash)
 library.add(faEllipsisH)
 library.add(faEllipsisV)
 library.add(faExclamation)
+library.add(faEye)
+library.add(faEyeSlash)
 library.add(faFillDrip)
 library.add(faFilter)
 library.add(faForward)

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

@@ -16,11 +16,21 @@
 				</span>
 			</BaseButton>
 		</header>
-		<div class="card-content loader-container" :class="{'p-0': !padding, 'is-loading': loading}">
+		<div
+			class="card-content loader-container"
+			:class="{
+				'p-0': !padding,
+				'is-loading': loading
+			}"
+		>
 			<div :class="{'content': hasContent}">
-				<slot></slot>
+				<slot />
 			</div>
 		</div>
+
+		<footer v-if="$slots.footer" class="card-footer">
+			<slot name="footer" />
+		</footer>
 	</div>
 </template>
 
@@ -76,9 +86,11 @@ defineEmits(['close'])
   border-radius: $radius $radius 0 0;
 }
 
-// FIXME: should maybe be merged somehow with modal
-:deep(.modal-card-foot) {
+.card-footer {
   background-color: var(--grey-50);
   border-top: 0;
+	padding: var(--modal-card-head-padding);
+	display: flex;
+	justify-content: flex-end;
 }
 </style>

src/components/misc/colorBubble.vue

@@ -0,0 +1,24 @@
+<template>
+	<span
+		:style="{backgroundColor: color }"
+		class="color-bubble"
+	></span>
+</template>
+
+<script lang="ts" setup>
+import type { Color } from 'csstype'
+
+defineProps< {
+	color: Color,
+}>()
+</script>
+
+<style scoped>
+.color-bubble {
+	display: inline-block;
+	border-radius: 100%;
+	height: 10px;
+	width: 10px;
+	flex-shrink: 0;
+}
+</style>

src/components/misc/create-edit.vue

@@ -4,38 +4,41 @@
 			:title="title"
 			:shadow="false"
 			:padding="false"
-			class="has-text-left has-overflow"
+			class="has-text-left"
 			:has-close="true"
 			@close="$router.back()"
 			:loading="loading"
 		>
 			<div class="p-4">
-				<slot></slot>
+				<slot />
 			</div>
-			<footer class="modal-card-foot is-flex is-justify-content-flex-end">
-				<x-button
-					v-if="tertiary !== ''"
-					:shadow="false"
-					variant="tertiary"
-					@click.prevent.stop="$emit('tertiary')"
-				>
-					{{ tertiary }}
-				</x-button>
-				<x-button
-					variant="secondary"
-					@click.prevent.stop="$router.back()"
-				>
-					{{ $t('misc.cancel') }}
-				</x-button>
-				<x-button
-					variant="primary"
-					@click.prevent.stop="primary()"
-					:icon="primaryIcon"
-					:disabled="primaryDisabled"
-				>
-					{{ primaryLabel || $t('misc.create') }}
-				</x-button>
-			</footer>
+
+			<template #footer>
+				<slot name="footer">
+					<x-button
+						v-if="tertiary !== ''"
+						:shadow="false"
+						variant="tertiary"
+						@click.prevent.stop="$emit('tertiary')"
+					>
+						{{ tertiary }}
+					</x-button>
+					<x-button
+						variant="secondary"
+						@click.prevent.stop="$router.back()"
+					>
+						{{ $t('misc.cancel') }}
+					</x-button>
+					<x-button
+						variant="primary"
+						@click.prevent.stop="primary()"
+						:icon="primaryIcon"
+						:disabled="primaryDisabled || loading"
+					>
+						{{ primaryLabel || $t('misc.create') }}
+					</x-button>
+				</slot>
+			</template>
 		</card>
 	</modal>
 </template>

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 'vuex'
+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/keyboard-shortcuts/shortcuts.ts

@@ -136,6 +136,10 @@ export const KEYBOARD_SHORTCUTS : ShortcutGroup[] = [
 				title: 'keyboardShortcuts.task.reminder',
 				keys: ['alt', 'r'],
 			},
+			{
+				title: 'keyboardShortcuts.task.description',
+				keys: ['e'],
+			},
 		],
 	},
 ]

src/components/misc/legal.vue

@@ -8,14 +8,13 @@
 
 <script lang="ts" setup>
 import {computed} from 'vue'
-import {useStore} from 'vuex'
-
 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/message.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts" setup>
-import {computed, PropType} from 'vue'
+import {computed, type PropType} from 'vue'
 
 const TEXT_ALIGN_MAP = Object.freeze({
 	left: '',

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 'vuex'
-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 'vuex'
+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

@@ -5,7 +5,7 @@
 		:icon="iconName"
 		v-tooltip="tooltipText"
 		@click="changeSubscription"
-		:disabled="disabled || undefined"
+		:disabled="disabled"
 	>
 		{{ buttonText }}
 	</x-button>
@@ -23,6 +23,7 @@
 		v-tooltip="tooltipText"
 		@click="changeSubscription"
 		:class="{'is-disabled': disabled}"
+		:disabled="disabled"
 	>
 		<span class="icon">
 			<icon :icon="iconName"/>
@@ -32,7 +33,7 @@
 </template>
 
 <script lang="ts" setup>
-import {computed, shallowRef} from 'vue'
+import {computed, shallowRef, type PropType} from 'vue'
 import {useI18n} from 'vue-i18n'
 
 import BaseButton from '@/components/base/BaseButton.vue'
@@ -40,57 +41,78 @@ import DropdownItem from '@/components/misc/dropdown-item.vue'
 
 import SubscriptionService from '@/services/subscription'
 import SubscriptionModel from '@/models/subscription'
+import type {ISubscription} from '@/modelTypes/ISubscription'
 
 import {success} from '@/message'
 
-interface Props {
-	entity: string
-	entityId: number
-	subscription: SubscriptionModel | null
-	type?: 'button' | 'dropdown' | null
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	subscription: null,
-	type: 'button',
+const props = defineProps({
+	entity: String,
+	entityId: Number,
+	isButton: {
+		type: Boolean,
+		default: true,
+	},
+	modelValue: {
+		type: Object as PropType<ISubscription>,
+		default: null,
+	},
+	type: {
+		type: String as PropType<'button' | 'dropdown' | 'null'>,
+		default: 'button',
+	},
 })
 
-const subscriptionEntity = computed<string | null>(() => props.subscription?.entity ?? null)
+const subscriptionEntity = computed<string | null>(() => props.modelValue?.entity ?? null)
 
-const emit = defineEmits(['change'])
+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 ''
 	}
 
-	return props.subscription !== null ?
-		t('task.subscription.subscribed', {entity: props.entity}) :
-		t('task.subscription.notSubscribed', {entity: props.entity})
-})
-
-const buttonText = computed(() => props.subscription !== null ? t('task.subscription.unsubscribe') : t('task.subscription.subscribe'))
-const iconName = computed(() => props.subscription !== null ? ['far', 'bell-slash'] : 'bell')
-const disabled = computed(() => {
-	if (props.subscription === null) {
-		return false
+	switch (props.entity) {
+		case 'namespace':
+			return props.modelValue !== null ?
+				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 subscriptionEntity.value !== props.entity
+	return ''
 })
 
+const buttonText = computed(() => props.modelValue ? t('task.subscription.unsubscribe') : t('task.subscription.subscribe'))
+const iconName = computed(() => props.modelValue ? ['far', 'bell-slash'] : 'bell')
+const disabled = computed(() => props.modelValue && subscriptionEntity.value !== props.entity)
+
 function changeSubscription() {
 	if (disabled.value) {
 		return
 	}
 
-	if (props.subscription === null) {
+	if (props.modelValue === null) {
 		subscribe()
 	} else {
 		unsubscribe()
@@ -103,8 +125,21 @@ async function subscribe() {
 		entityId: props.entityId,
 	})
 	await subscriptionService.value.create(subscription)
-	emit('change', subscription)
-	success({message: t('task.subscription.subscribeSuccess', {entity: props.entity})})
+	emit('update:modelValue', subscription)
+
+	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() {
@@ -113,7 +148,20 @@ async function unsubscribe() {
 		entityId: props.entityId,
 	})
 	await subscriptionService.value.delete(subscription)
-	emit('change', null)
-	success({message: t('task.subscription.unsubscribeSuccess', {entity: props.entity})})
+	emit('update:modelValue', null)
+
+	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,13 +33,13 @@
 			>
 				{{ $t('menu.archive') }}
 			</dropdown-item>
-			<task-subscription
+			<Subscription
 				class="has-no-shadow"
 				:is-button="false"
 				entity="namespace"
 				:entity-id="namespace.id"
-				:subscription="subscription"
-				@change="sub => subscription = sub"
+				:model-value="subscription"
+				@update:model-value="setSubscriptionInStore"
 				type="dropdown"
 			/>
 			<dropdown-item
@@ -54,21 +54,36 @@
 </template>
 
 <script setup lang="ts">
-import {ref, onMounted} from 'vue'
+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: {
-		type: Object, // NamespaceModel
+		type: Object as PropType<INamespace>,
 		required: true,
 	},
 })
 
-const subscription = ref(null)
+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,13 +24,13 @@
 					<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) }}
 							</BaseButton>
 						</div>
-						<span class="created" v-tooltip="formatDate(n.created)">
+						<span class="created" v-tooltip="formatDateLong(n.created)">
 							{{ formatDateSince(n.created) }}
 						</span>
 					</div>
@@ -48,21 +48,23 @@
 
 <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 names from '@/models/constants/notificationNames.json'
+import { NOTIFICATION_NAMES as names, type INotification} from '@/modelTypes/INotification'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
-import {useStore} from 'vuex'
-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([])
+const allNotifications = ref<INotification[]>([])
 const showNotifications = ref(false)
 const popup = ref(null)
 
@@ -72,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'
@@ -71,6 +70,12 @@ 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'
 const TYPE_CMD = 'cmd'
@@ -108,14 +113,18 @@ 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
 		},
 		results() {
 			let lists = []
+			const listStore = useListStore()
+
 			if (this.searchMode === SEARCH_MODE_ALL || this.searchMode === SEARCH_MODE_LISTS) {
 				const {list} = this.parsedQuery
 
@@ -126,10 +135,8 @@ export default defineComponent({
 					const history = getHistory()
 					// Puts recently visited lists at the top
 					const allLists = [...new Set([
-						...history.map(l => {
-							return this.$store.getters['lists/getListById'](l.id)
-						}),
-						...this.$store.getters['lists/searchList'](list),
+						...history.map(l => listStore.getListById(l.id)),
+						...listStore.searchList(list),
 					])]
 
 					lists = allLists.filter(l => {
@@ -138,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
@@ -177,8 +184,7 @@ 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() {
@@ -205,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})
 				}
 			}
@@ -215,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 = []
@@ -296,8 +303,10 @@ export default defineComponent({
 				filter_comparator: [],
 			}
 
+			const listStore = useListStore()
+
 			if (list !== null) {
-				const l = this.$store.getters['lists/findListByExactname'](list)
+				const l = listStore.findListByExactname(list)
 				if (l !== null) {
 					params.filter_by.push('list_id')
 					params.filter_value.push(l.id)
@@ -306,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())
@@ -318,7 +327,7 @@ export default defineComponent({
 				const r = await this.taskService.getAll({}, params)
 				this.foundTasks = r.map(t => {
 					t.type = TYPE_TASK
-					const list = this.$store.getters['lists/getListById'](t.listId)
+					const list = listStore.getListById(t.listId)
 					if (list !== null) {
 						t.title = `${t.title} (${list.title})`
 					}
@@ -354,7 +363,7 @@ export default defineComponent({
 			}, 150)
 		},
 		closeQuickActions() {
-			this.$store.commit(QUICK_ACTIONS_ACTIVE, false)
+			useBaseStore().setQuickActionsActive(false)
 		},
 		doAction(type, item) {
 			switch (type) {
@@ -407,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,
 			})
@@ -424,7 +434,8 @@ export default defineComponent({
 				title: this.query,
 				namespaceId: this.currentList.namespaceId,
 			})
-			const list = await this.$store.dispatch('lists/createList', newList)
+			const listStore = useListStore()
+			const list = await listStore.createList(newList)
 			this.$message.success({message: this.$t('list.create.createdSuccess')})
 			this.$router.push({name: 'list.index', params: {listId: list.id}})
 			this.closeQuickActions()
@@ -432,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

@@ -79,30 +79,59 @@
 			>
 				<thead>
 				<tr>
-					<th>{{ $t('list.share.attributes.link') }}</th>
-					<th>{{ $t('list.share.attributes.name') }}</th>
-					<th>{{ $t('list.share.attributes.sharedBy') }}</th>
-					<th>{{ $t('list.share.attributes.right') }}</th>
+					<th></th>
+					<th>{{ $t('list.share.links.view') }}</th>
 					<th>{{ $t('list.share.attributes.delete') }}</th>
 				</tr>
 				</thead>
 				<tbody>
 				<tr :key="s.id" v-for="s in linkShares">
 					<td>
+						<p class="mb-2 is-italic" v-if="s.name !== ''">
+							{{ s.name }}
+						</p>
+
+						<p class="mb-2">
+							<i18n-t keypath="list.share.links.sharedBy" scope="global">
+								<strong>{{ getDisplayName(s.sharedBy) }}</strong>
+							</i18n-t>
+						</p>
+
+						<p class="mb-2">
+							<template v-if="s.right === RIGHTS.ADMIN">
+								<span class="icon is-small">
+									<icon icon="lock"/>
+								</span>&nbsp;
+								{{ $t('list.share.right.admin') }}
+							</template>
+							<template v-else-if="s.right === RIGHTS.READ_WRITE">
+								<span class="icon is-small">
+									<icon icon="pen"/>
+								</span>&nbsp;
+								{{ $t('list.share.right.readWrite') }}
+							</template>
+							<template v-else>
+								<span class="icon is-small">
+									<icon icon="users"/>
+								</span>&nbsp;
+								{{ $t('list.share.right.read') }}
+							</template>
+						</p>
+						
 						<div class="field has-addons no-input-mobile">
 							<div class="control">
 								<input
-									:value="getShareLink(s.hash)"
-									class="input"
-									readonly
-									type="text"
+										:value="getShareLink(s.hash, selectedView[s.id])"
+										class="input"
+										readonly
+										type="text"
 								/>
 							</div>
 							<div class="control">
 								<x-button
-									@click="copy(getShareLink(s.hash))"
-									:shadow="false"
-									v-tooltip="$t('misc.copy')"
+										@click="copy(getShareLink(s.hash, selectedView[s.id]))"
+										:shadow="false"
+										v-tooltip="$t('misc.copy')"
 								>
 									<span class="icon">
 										<icon icon="paste"/>
@@ -112,33 +141,16 @@
 						</div>
 					</td>
 					<td>
-						<template v-if="s.name !== ''">
-							{{ s.name }}
-						</template>
-						<i v-else>{{ $t('list.share.links.noName') }}</i>
-					</td>
-					<td>
-						{{ s.sharedBy.getDisplayName() }}
-					</td>
-					<td class="type">
-						<template v-if="s.right === RIGHTS.ADMIN">
-							<span class="icon is-small">
-								<icon icon="lock"/>
-							</span>&nbsp;
-							{{ $t('list.share.right.admin') }}
-						</template>
-						<template v-else-if="s.right === RIGHTS.READ_WRITE">
-							<span class="icon is-small">
-								<icon icon="pen"/>
-							</span>&nbsp;
-							{{ $t('list.share.right.readWrite') }}
-						</template>
-						<template v-else>
-							<span class="icon is-small">
-								<icon icon="users"/>
-							</span>&nbsp;
-							{{ $t('list.share.right.read') }}
-						</template>
+						<div class="select">
+							<select v-model="selectedView[s.id]">
+								<option
+									v-for="(title, key) in availableViews"
+									:value="key"
+									:key="key">
+									{{ title }}
+								</option>
+							</select>
+						</div>
 					</td>
 					<td class="actions">
 						<x-button
@@ -166,7 +178,7 @@
 				<template #header>
 					<span>{{ $t('list.share.links.remove') }}</span>
 				</template>
-				
+
 				<template #text>
 					<p>{{ $t('list.share.links.removeText') }}</p>
 				</template>
@@ -177,16 +189,22 @@
 
 <script setup lang="ts">
 import {ref, watch, computed, shallowReactive} from 'vue'
-import {useStore} from 'vuex'
 import {useI18n} from 'vue-i18n'
 
-import RIGHTS from '@/models/constants/rights.json'
+import {RIGHTS} from '@/constants/rights'
 import LinkShareModel from '@/models/linkShare'
 
+import type {ILinkShare} from '@/modelTypes/ILinkShare'
+import type {IList} from '@/modelTypes/IList'
+
 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: {
@@ -197,7 +215,7 @@ const props = defineProps({
 
 const {t} = useI18n({useScope: 'global'})
 
-const linkShares = ref([])
+const linkShares = ref<ILinkShare[]>([])
 const linkShareService = shallowReactive(new LinkShareService())
 const selectedRight = ref(RIGHTS.READ)
 const name = ref('')
@@ -206,6 +224,17 @@ const showDeleteModal = ref(false)
 const linkIdToDelete = ref(0)
 const showNewForm = ref(false)
 
+type SelectedViewMapper = Record<IList['id'], ListView>
+
+const selectedView = ref<SelectedViewMapper>({})
+
+const availableViews = computed<Record<ListView, string>>(() => ({
+	list: t('list.list.title'),
+	gantt: t('list.gantt.title'),
+	table: t('list.table.title'),
+	kanban: t('list.kanban.title'),
+}))
+
 const copy = useCopyToClipboard()
 watch(
 	() => props.listId,
@@ -213,19 +242,23 @@ 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) {
+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
 	if (listId === 0) {
 		return
 	}
 
-	linkShares.value = await linkShareService.getAll({listId})
+	const links = await linkShareService.getAll({listId})
+	links.forEach((l: ILinkShare) => {
+		selectedView.value[l.id] = 'list'
+	})
+	linkShares.value = links
 }
 
-async function add(listId) {
+async function add(listId: IList['id']) {
 	const newLinkShare = new LinkShareModel({
 		right: selectedRight.value,
 		listId,
@@ -241,7 +274,7 @@ async function add(listId) {
 	await load(listId)
 }
 
-async function remove(listId) {
+async function remove(listId: IList['id']) {
 	try {
 		await linkShareService.delete(new LinkShareModel({
 			id: linkIdToDelete.value,
@@ -254,15 +287,15 @@ async function remove(listId) {
 	}
 }
 
-function getShareLink(hash: string) {
-	return frontendUrl.value + 'share/' + hash + '/auth'
+function getShareLink(hash: string, view: ListView = LIST_VIEWS.LIST) {
+	return frontendUrl.value + 'share/' + hash + '/auth?view=' + view
 }
 </script>
 
 <style lang="scss" scoped>
 // FIXME: I think this is not needed
 .sharables-list:not(.card-content) {
-  overflow-y: auto
+	overflow-y: auto
 }
 
 @include modal-transition();

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>
@@ -133,35 +133,44 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue'
-
-export default defineComponent({name: 'userTeamShare'})
+export default {name: 'userTeamShare'}
 </script>
 
 <script setup lang="ts">
-import {ref, reactive, computed, shallowReactive, ShallowReactive, Ref} from 'vue'
+import {ref, reactive, computed, shallowReactive, type Ref} from 'vue'
 import type {PropType} from 'vue'
-import {useStore} from 'vuex'
 import {useI18n} from 'vue-i18n'
 
 import UserNamespaceService from '@/services/userNamespace'
 import UserNamespaceModel from '@/models/userNamespace'
-import UserListModel from '@/models/userList'
+import type {IUserNamespace} from '@/modelTypes/IUserNamespace'
+
 import UserListService from '@/services/userList'
+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'
 import TeamNamespaceModel from '@/models/teamNamespace'
-import TeamListModel from '@/models/teamList'
+import type { ITeamNamespace } from '@/modelTypes/ITeamNamespace'
+
 import TeamListService from '@/services/teamList'
+import TeamListModel from '@/models/teamList'
+import type { ITeamList } from '@/modelTypes/ITeamList'
+
 import TeamService from '@/services/team'
 import TeamModel from '@/models/team'
+import type {ITeam} from '@/modelTypes/ITeam'
 
-import RIGHTS from '@/models/constants/rights.json'
+
+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: {
@@ -185,10 +194,10 @@ const props = defineProps({
 const {t} = useI18n({useScope: 'global'})
 
 // This user service is either a userNamespaceService or a userListService, depending on the type we are using
-let stuffService: ShallowReactive<UserNamespaceService | UserListService | TeamListService | TeamNamespaceService>
-let stuffModel: UserNamespaceModel | UserListModel | TeamListModel | TeamNamespaceModel
-let searchService: ShallowReactive<UserService | TeamService>
-let sharable: Ref<UserModel | TeamModel>
+let stuffService: UserNamespaceService | UserListService | TeamListService | TeamNamespaceService
+let stuffModel: IUserNamespace | IUserList | ITeamList | ITeamNamespace
+let searchService: UserService | TeamService
+let sharable: Ref<IUser | ITeam>
 
 const searchLabel = ref('')
 const selectedRight = ref({})
@@ -199,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(() => {
@@ -233,6 +242,7 @@ const sharableName = computed(() => {
 
 if (props.shareType === 'user') {
 	searchService = shallowReactive(new UserService())
+	// eslint-disable-next-line vue/no-ref-as-operand
 	sharable = ref(new UserModel())
 	searchLabel.value = 'username'
 
@@ -249,6 +259,7 @@ if (props.shareType === 'user') {
 	}
 } else if (props.shareType === 'team') {
 	searchService = new TeamService()
+	// eslint-disable-next-line vue/no-ref-as-operand
 	sharable = ref(new TeamModel())
 	searchLabel.value = 'name'
 
@@ -354,8 +365,8 @@ async function toggleType(sharable) {
 
 const found = ref([])
 
-const currentUserId = computed(() => store.state.auth.info.id)
-async function find(query) {
+const currentUserId = computed(() => authStore.info.id)
+async function find(query: string) {
 	if (query === '') {
 		found.value = []
 		return

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 'vuex'
-import {tryOnMounted, debouncedWatch, useWindowSize, 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')
@@ -200,7 +236,7 @@ function handleEnter(e: KeyboardEvent) {
 }
 
 function focusTaskInput() {
-	newTaskInput.value.focus()
+	newTaskInput.value?.focus()
 }
 
 defineExpose({
@@ -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/edit-task.vue

@@ -36,8 +36,8 @@
 
 		<strong>{{ $t('task.attributes.reminders') }}</strong>
 		<reminders
-			@change="editTaskSubmit()"
 			v-model="taskEditTask.reminderDates"
+			@update:model-value="editTaskSubmit()"
 		/>
 
 		<div class="field">
@@ -76,7 +76,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref, reactive, computed, shallowReactive, watch, nextTick} from 'vue'
+import {ref, reactive, computed, shallowReactive, watch, nextTick, type PropType} from 'vue'
 import {useRouter} from 'vue-router'
 import {useI18n} from 'vue-i18n'
 
@@ -84,6 +84,7 @@ import Editor from '@/components/input/AsyncEditor'
 
 import TaskService from '@/services/task'
 import TaskModel from '@/models/task'
+import type {ITask} from '@/modelTypes/ITask'
 import EditLabels from './partials/editLabels.vue'
 import Reminders from './partials/reminders.vue'
 import ColorPicker from '../input/colorPicker.vue'
@@ -93,14 +94,16 @@ import {success} from '@/message'
 const {t} = useI18n({useScope: 'global'})
 const router = useRouter()
 
-const props = defineProps<{
-	task?: TaskModel | null,
-}>()
+const props = defineProps({
+	task: {
+		type: Object as PropType<ITask | null>,
+	},
+})
 
 const taskService = shallowReactive(new TaskService())
 
 const editorActive = ref(false)
-let taskEditTask: TaskModel | undefined
+let taskEditTask: ITask | undefined
 
 
 // FIXME: this initialization should not be necessary here 

src/components/tasks/gantt-component.vue

@@ -173,21 +173,24 @@
 
 <script lang="ts">
 import {defineComponent} from 'vue'
+import {mapState} from 'pinia'
 
 import VueDragResize from 'vue-drag-resize'
-import EditTask from './edit-task'
+import EditTask from './edit-task.vue'
 
 import TaskService from '../../services/task'
 import TaskModel from '../../models/task'
-import priorities from '../../models/constants/priorities'
-import PriorityLabel from './partials/priorityLabel'
+import {PRIORITIES as priorities} from '@/constants/priorities'
+import PriorityLabel from './partials/priorityLabel.vue'
 import TaskCollectionService from '../../services/taskCollection'
-import {mapState} from 'vuex'
-import Rights from '../../models/constants/rights.json'
+import {RIGHTS as Rights} from '@/constants/rights'
 import FilterPopup from '@/components/list/partials/filter-popup.vue'
 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',
@@ -255,7 +258,7 @@ export default defineComponent({
 	mounted() {
 		this.buildTheGanttChart()
 	},
-	computed: mapState({
+	computed: mapState(useBaseStore, {
 		canWrite: (state) => state.currentList.maxRight > Rights.READ,
 	}),
 	methods: {
@@ -275,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() + ''] = {}
 				}
@@ -350,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,
 			)
@@ -359,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,
 			)
@@ -427,7 +430,7 @@ export default defineComponent({
 			if (!this.newTaskFieldActive) {
 				return
 			}
-			let task = new TaskModel({
+			const task = new TaskModel({
 				title: this.newTaskTitle,
 				listId: this.listId,
 			})
@@ -439,7 +442,7 @@ export default defineComponent({
 		formatMonthAndYear(year, month) {
 			month = month < 10 ? '0' + month : month
 			const date = new Date(`${year}-${month}-01`)
-			return this.format(date, 'MMMM, yyyy')
+			return formatDate(date, 'MMMM, yyyy')
 		},
 	},
 })

src/components/tasks/partials/attachments.vue

@@ -8,19 +8,19 @@
 		</h3>
 
 		<input
-			:disabled="attachmentService.loading || undefined"
+			v-if="editEnabled"
+			:disabled="loading || undefined"
 			@change="uploadNewAttachment()"
 			id="files"
 			multiple
-			ref="files"
+			ref="filesRef"
 			type="file"
-			v-if="editEnabled"
 		/>
 		<progress
+			v-if="attachmentService.uploadProgress > 0"
 			:value="attachmentService.uploadProgress"
 			class="progress is-primary"
 			max="100"
-			v-if="attachmentService.uploadProgress > 0"
 		>
 			{{ attachmentService.uploadProgress }}%
 		</progress>
@@ -35,21 +35,29 @@
 				: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">
-							<span v-tooltip="formatDate(a.created)">
+						<i18n-t keypath="task.attachment.createdBy" scope="global">
+							<span v-tooltip="formatDateLong(a.created)">
 								{{ formatDateSince(a.created) }}
 							</span>
-							<user
+							<User
 								:avatar-size="24"
 								:user="a.createdBy"
 								:is-inline="true"
 							/>
 						</i18n-t>
 						<span>
-							{{ a.file.getHumanSize() }}
+							{{ getHumanSize(a.file.size) }}
 						</span>
 						<span v-if="a.file.mime">
 							{{ a.file.mime }}
@@ -73,11 +81,22 @@
 						<BaseButton
 							v-if="editEnabled"
 							class="attachment-info-meta-button"
-							@click.prevent.stop="() => {attachmentToDelete = a; showDeleteModal = true}"
+							@click.prevent.stop="setAttachmentToDelete(a)"
 							v-tooltip="$t('task.attachment.deleteTooltip')"
 						>
 							{{ $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,8 +104,8 @@
 
 		<x-button
 			v-if="editEnabled"
-			:disabled="attachmentService.loading"
-			@click="$refs.files.click()"
+			:disabled="loading"
+			@click="filesRef?.click()"
 			class="mb-4"
 			icon="cloud-upload-alt"
 			variant="secondary"
@@ -97,7 +116,7 @@
 
 		<!-- Dropzone -->
 		<div
-			:class="{ hidden: !showDropzone }"
+			:class="{ hidden: !isOverDropZone }"
 			class="dropzone"
 			v-if="editEnabled"
 		>
@@ -110,267 +129,248 @@
 		</div>
 
 		<!-- Delete modal -->
-		<transition name="modal">
-			<modal
-				@close="showDeleteModal = false"
-				v-if="showDeleteModal"
-				@submit="deleteAttachment()"
-			>
-				<template #header><span>{{ $t('task.attachment.delete') }}</span></template>
-				
-				<template #text>
-					<p>
-						{{ $t('task.attachment.deleteText1', {filename: attachmentToDelete.file.name}) }}<br/>
-						<strong class="has-text-white">{{ $t('misc.cannotBeUndone') }}</strong>
-					</p>
-				</template>
-			</modal>
-		</transition>
+		<modal
+			v-if="attachmentToDelete !== null"
+			@close="setAttachmentToDelete(null)"
+			@submit="deleteAttachment()"
+		>
+			<template #header>
+				<span>{{ $t('task.attachment.delete') }}</span>
+			</template>
 
-		<transition name="modal">
-			<modal
-				@close="
-					() => {
-						showImageModal = false
-						attachmentImageBlobUrl = null
-					}
-				"
-				v-if="showImageModal"
-			>
-				<img :src="attachmentImageBlobUrl" alt=""/>
-			</modal>
-		</transition>
+			<template #text>
+				<p>
+					{{ $t('task.attachment.deleteText1', {filename: attachmentToDelete.file.name}) }}<br/>
+					<strong class="has-text-white">{{ $t('misc.cannotBeUndone') }}</strong>
+				</p>
+			</template>
+		</modal>
+
+		<!-- Attachment image modal -->
+		<modal
+			v-if="attachmentImageBlobUrl !== null"
+			@close="attachmentImageBlobUrl = null"
+		>
+			<img :src="attachmentImageBlobUrl" alt=""/>
+		</modal>
 	</div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
+<script setup lang="ts">
+import {ref, shallowReactive, computed} from 'vue'
+import {useDropZone} from '@vueuse/core'
 
-import AttachmentService from '../../../services/attachment'
-import AttachmentModel from '../../../models/attachment'
-import User from '../../misc/user'
-import {mapState} from 'vuex'
+import User from '@/components/misc/user.vue'
+import BaseButton from '@/components/base/BaseButton.vue'
 
-import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
-import { uploadFiles, generateAttachmentUrl } from '@/helpers/attachments'
+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 BaseButton from '@/components/base/BaseButton'
+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'
 
-export default defineComponent({
-	name: 'attachments',
-	components: {
-		BaseButton,
-		User,
-	},
-	data() {
-		return {
-			attachmentService: new AttachmentService(),
-			showDropzone: false,
+const taskStore = useTaskStore()
+const {t} = useI18n({useScope: 'global'})
 
-			showDeleteModal: false,
-			attachmentToDelete: AttachmentModel,
-
-			showImageModal: false,
-			attachmentImageBlobUrl: null,
-		}
-	},
-	props: {
-		taskId: {
-			required: true,
-			type: Number,
-		},
-		initialAttachments: {
-			type: Array,
-		},
-		editEnabled: {
-			default: true,
-		},
-	},
-
-	setup(props) {
-		const copy = useCopyToClipboard()
-
-		function copyUrl(attachment: AttachmentModel) {
-			copy(generateAttachmentUrl(props.taskId, attachment.id))
-		}
-
-		return { copyUrl }
-	},
-
-	computed: mapState({
-		attachments: (state) => state.attachments.attachments,
-	}),
-	mounted() {
-		document.addEventListener('dragenter', (e) => {
-			e.stopPropagation()
-			e.preventDefault()
-			this.showDropzone = true
-		})
-
-		window.addEventListener('dragleave', (e) => {
-			e.stopPropagation()
-			e.preventDefault()
-			this.showDropzone = false
-		})
-
-		document.addEventListener('dragover', (e) => {
-			e.stopPropagation()
-			e.preventDefault()
-			this.showDropzone = true
-		})
-
-		document.addEventListener('drop', (e) => {
-			e.stopPropagation()
-			e.preventDefault()
-
-			let files = e.dataTransfer.files
-			this.uploadFiles(files)
-			this.showDropzone = false
-		})
-	},
-	methods: {
-		downloadAttachment(attachment) {
-			this.attachmentService.download(attachment)
-		},
-		uploadNewAttachment() {
-			if (this.$refs.files.files.length === 0) {
-				return
-			}
-
-			this.uploadFiles(this.$refs.files.files)
-		},
-		uploadFiles(files) {
-			uploadFiles(this.attachmentService, this.taskId, files)
-		},
-		async deleteAttachment() {
-			try {
-				const r = await this.attachmentService.delete(this.attachmentToDelete)
-				this.$store.commit(
-					'attachments/removeById',
-					this.attachmentToDelete.id,
-				)
-				this.$message.success(r)
-			} finally{
-				this.showDeleteModal = false
-			}
-		},
-		async viewOrDownload(attachment) {
-			if (
-				attachment.file.name.endsWith('.jpg') ||
-				attachment.file.name.endsWith('.png') ||
-				attachment.file.name.endsWith('.bmp') ||
-				attachment.file.name.endsWith('.gif')
-			) {
-				this.showImageModal = true
-				this.attachmentImageBlobUrl = await this.attachmentService.getBlobUrl(attachment)
-			} else {
-				this.downloadAttachment(attachment)
-			}
-		},
-	},
+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 attachmentStore = useAttachmentStore()
+const attachments = computed(() => attachmentStore.attachments)
+
+const loading = computed(() => attachmentService.loading || taskStore.isLoading)
+
+function onDrop(files: File[] | null) {
+	if (files && files.length !== 0) {
+		uploadFilesToTask(files)
+	}
+}
+
+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
+
+	if (!files || files.length === 0) {
+		return
+	}
+
+	uploadFilesToTask(files)
+}
+
+function uploadFilesToTask(files: File[] | FileList) {
+	uploadFiles(attachmentService, props.task.id, files)
+}
+
+const attachmentToDelete = ref<AttachmentModel | null>(null)
+
+function setAttachmentToDelete(attachment: AttachmentModel | null) {
+	attachmentToDelete.value = attachment
+}
+
+async function deleteAttachment() {
+	if (attachmentToDelete.value === null) {
+		return
+	}
+
+	try {
+		const r = await attachmentService.delete(attachmentToDelete.value)
+		attachmentStore.removeById(attachmentToDelete.value.id)
+		success(r)
+		setAttachmentToDelete(null)
+	} catch (e) {
+		error(e)
+	}
+}
+
+const attachmentImageBlobUrl = ref<string | null>(null)
+
+async function viewOrDownload(attachment: AttachmentModel) {
+	if (SUPPORTED_IMAGE_SUFFIX.some((suffix) => attachment.file.name.endsWith(suffix))) {
+		attachmentImageBlobUrl.value = await attachmentService.getBlobUrl(attachment)
+	} else {
+		downloadAttachment(attachment)
+	}
+}
+
+const copy = useCopyToClipboard()
+
+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>
 
 <style lang="scss" scoped>
 .attachments {
-  input[type=file] {
-    display: none;
-  }
+	input[type=file] {
+		display: none;
+	}
 
-  .files {
-    margin-bottom: 1rem;
-
-    .attachment {
-      margin-bottom: .5rem;
-      display: block;
-      transition: background-color $transition;
-      border-radius: $radius;
-      padding: .5rem;
-
-      &:hover {
-        background-color: var(--grey-200);
-      }
-
-      .filename {
-        font-weight: bold;
-        margin-bottom: .25rem;
-        color: var(--text);
-      }
-
-      .info {
-        color: var(--grey-500);
-        font-size: .9rem;
-
-        p {
-          margin-bottom: 0;
-          display: flex;
-
-          > span:not(:last-child):after,
-          > button:not(:last-child):after {
-            content: '·';
-            padding: 0 .25rem;
-          }
-        }
-      }
-    }
-  }
-
-  @media screen and (max-width: $tablet) {
-    .button {
-      width: 100%;
-    }
-  }
-
-  .dropzone {
-    position: fixed;
-    background: rgba(250, 250, 250, 0.8);
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    z-index: 100;
-    text-align: center;
-
-    &.hidden {
-      display: none;
-    }
-
-    .drop-hint {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-
-      .icon {
-        width: 100%;
-        font-size: 5rem;
-        height: auto;
-        text-shadow: var(--shadow-md);
-        animation: bounce 2s infinite;
-		
-		@media (prefers-reduced-motion: reduce) {
-          animation: none;
+	@media screen and (max-width: $tablet) {
+		.button {
+			width: 100%;
 		}
-      }
+	}
+}
 
-      .hint {
-        margin: .5rem auto 2rem;
-        border-radius: 2px;
-        box-shadow: var(--shadow-md);
-        background: var(--primary);
-        padding: 1rem;
-        color: var(--white);
-        width: 100%;
-        max-width: 300px;
-      }
-    }
-  }
+.files {
+	margin-bottom: 1rem;
+}
+
+.attachment {
+	margin-bottom: .5rem;
+	display: block;
+	transition: background-color $transition;
+	border-radius: $radius;
+	padding: .5rem;
+
+	&:hover {
+		background-color: var(--grey-200);
+	}
+}
+
+.filename {
+	font-weight: bold;
+	margin-bottom: .25rem;
+	color: var(--text);
+}
+
+.info {
+	color: var(--grey-500);
+	font-size: .9rem;
+
+	p {
+		margin-bottom: 0;
+		display: flex;
+
+		> span:not(:last-child):after,
+		> button:not(:last-child):after {
+			content: '·';
+			padding: 0 .25rem;
+		}
+	}
+}
+
+.dropzone {
+	position: fixed;
+	background: rgba(250, 250, 250, 0.8);
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	z-index: 100;
+	text-align: center;
+
+	&.hidden {
+		display: none;
+	}
+
+	.drop-hint {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+
+		.icon {
+			width: 100%;
+			font-size: 5rem;
+			height: auto;
+			text-shadow: var(--shadow-md);
+			animation: bounce 2s infinite;
+
+			@media (prefers-reduced-motion: reduce) {
+				animation: none;
+			}
+		}
+
+		.hint {
+			margin: .5rem auto 2rem;
+			border-radius: 2px;
+			box-shadow: var(--shadow-md);
+			background: var(--primary);
+			padding: 1rem;
+			color: var(--white);
+			width: 100%;
+			max-width: 300px;
+		}
+	}
 }
 
 .attachment-info-meta {
 	display: flex;
 	align-items: center;
-	
+
 	:deep(.user) {
 		display: flex !important;
 		align-items: center;
@@ -380,7 +380,7 @@ export default defineComponent({
 	@media screen and (max-width: $mobile) {
 		flex-direction: column;
 		align-items: flex-start;
-		
+
 		:deep(.user) {
 			margin: .5rem 0;
 		}
@@ -401,29 +401,37 @@ export default defineComponent({
 }
 
 @keyframes bounce {
-  from,
-  20%,
-  53%,
-  80%,
-  to {
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    transform: translate3d(0, 0, 0);
-  }
+	from,
+	20%,
+	53%,
+	80%,
+	to {
+		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+		transform: translate3d(0, 0, 0);
+	}
 
-  40%,
-  43% {
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    transform: translate3d(0, -30px, 0);
-  }
+	40%,
+	43% {
+		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+		transform: translate3d(0, -30px, 0);
+	}
 
-  70% {
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    transform: translate3d(0, -15px, 0);
-  }
+	70% {
+		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+		transform: translate3d(0, -15px, 0);
+	}
 
-  90% {
-    transform: translate3d(0, -4px, 0);
-  }
+	90% {
+		transform: translate3d(0, -4px, 0);
+	}
+}
+
+.is-task-cover {
+	background: var(--primary);
+	color: var(--white);
+	padding: .25rem .35rem;
+	border-radius: 4px;
+	font-size: .75rem;
 }
 
 @include modal-transition();

src/components/tasks/partials/checklist-summary.vue

@@ -10,15 +10,15 @@
 </template>
 
 <script setup lang="ts">
-import {computed} from 'vue'
+import {computed, type PropType} from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import {getChecklistStatistics} from '@/helpers/checklistFromText'
-import TaskModel from '@/models/task'
+import type {ITask} from '@/modelTypes/ITask'
 
 const props = defineProps({
 	task: {
-		type: TaskModel,
+		type: Object as PropType<ITask>,
 		required: true,
 	},
 })

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,19 +27,19 @@
 				<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;
-						<span v-tooltip="formatDate(c.created)" class="has-text-grey">
+						<strong>{{ getDisplayName(c.author) }}</strong>&nbsp;
+						<span v-tooltip="formatDateLong(c.created)" class="has-text-grey">
 							{{ formatDateSince(c.created) }}
 						</span>
 						<span
 							v-if="+new Date(c.created) !== +new Date(c.updated)"
-							v-tooltip="formatDate(c.updated)"
+							v-tooltip="formatDateLong(c.updated)"
 						>
 							· {{ $t('task.comment.edited', {date: formatDateSince(c.updated)}) }}
 						</span>
@@ -70,13 +70,13 @@
 						:is-edit-enabled="canWrite && c.author.id === currentUserId"
 						:upload-callback="attachmentUpload"
 						:upload-enabled="true"
-						@change="
+						v-model="c.comment"
+						@update:model-value="
 							() => {
 								toggleEdit(c)
 								editComment()
 							}
 						"
-						v-model="c.comment"
 						:bottom-actions="actions[c.id]"
 						:show-save="true"
 					/>
@@ -153,15 +153,22 @@
 
 <script setup lang="ts">
 import {ref, reactive, computed, shallowReactive, watch, nextTick} from 'vue'
-import {useStore} from 'vuex'
 import {useI18n} from 'vue-i18n'
 
 import Editor from '@/components/input/AsyncEditor'
 
 import TaskCommentService from '@/services/taskComment'
 import TaskCommentModel from '@/models/taskComment'
+
+import type {ITaskComment} from '@/modelTypes/ITaskComment'
+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: {
@@ -174,9 +181,10 @@ const props = defineProps({
 })
 
 const {t} = useI18n({useScope: 'global'})
-const store = useStore()
+const configStore = useConfigStore()
+const authStore = useAuthStore()
 
-const comments = ref<TaskCommentModel[]>([])
+const comments = ref<ITaskComment[]>([])
 
 const showDeleteModal = ref(false)
 const commentToDelete = reactive(new TaskCommentModel())
@@ -186,12 +194,12 @@ const commentEdit = reactive(new TaskCommentModel())
 
 const newComment = reactive(new TaskCommentModel())
 
-const saved = ref(null)
-const saving = ref(null)
+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 {}
@@ -207,13 +215,18 @@ const actions = computed(() => {
 	])))
 })
 
-function attachmentUpload(...args) {
-	return uploadFile(props.taskId, ...args)
+function attachmentUpload(
+	file: File,
+	onSuccess: (url: string) => void,
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	onError: (error: string) => void,
+) {
+	return uploadFile(props.taskId, file, onSuccess)
 }
 
 const taskCommentService = shallowReactive(new TaskCommentService())
 
-async function loadComments(taskId) {
+async function loadComments(taskId: ITask['id']) {
 	if (!enabled.value) {
 		return
 	}
@@ -257,12 +270,12 @@ async function addComment() {
 	}
 }
 
-function toggleEdit(comment: TaskCommentModel) {
+function toggleEdit(comment: ITaskComment) {
 	isCommentEdit.value = !isCommentEdit.value
 	Object.assign(commentEdit, comment)
 }
 
-function toggleDelete(commentId) {
+function toggleDelete(commentId: ITaskComment['id']) {
 	showDeleteModal.value = !showDeleteModal.value
 	commentToDelete.id = commentId
 }
@@ -292,7 +305,7 @@ async function editComment() {
 	}
 }
 
-async function deleteComment(commentToDelete: TaskCommentModel) {
+async function deleteComment(commentToDelete: ITaskComment) {
 	try {
 		await taskCommentService.delete(commentToDelete)
 		const index = comments.value.findIndex(({id}) => id === commentToDelete.id)

src/components/tasks/partials/createdUpdated.vue

@@ -1,16 +1,16 @@
 <template>
 	<p class="created">
-		<time :datetime="formatISO(task.created)" v-tooltip="formatDate(task.created)">
-			<i18n-t keypath="task.detail.created">
+		<time :datetime="formatISO(task.created)" v-tooltip="formatDateLong(task.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>
@@ -27,13 +27,14 @@
 </template>
 
 <script lang="ts" setup>
-import {computed, toRefs} from 'vue'
-import TaskModel from '@/models/task'
-import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
+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: {
-		type: TaskModel,
+		type: Object as PropType<ITask>,
 		required: true,
 	},
 })

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

@@ -1,12 +1,14 @@
 <template>
-	<td v-tooltip="+date === 0 ? '' : formatDate(date)">
-		<time :datetime="date ? formatISO(date) : null">
+	<td v-tooltip="+date === 0 ? '' : formatDateLong(date)">
+		<time :datetime="date ? formatISO(date) : undefined">
 			{{ +date === 0 ? '-' : formatDateSince(date) }}
 		</time>
 	</td>
 </template>
 
 <script setup lang="ts">
+import {formatISO, formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
+
 defineProps({
 	date: {
 		type: Date,

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

@@ -38,37 +38,37 @@
 </template>
 
 <script setup lang="ts">
-import {ref, shallowReactive, computed, watch, onMounted, onBeforeUnmount} from 'vue'
-import {useStore} from 'vuex'
+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 TaskModel from '@/models/task'
+import type {ITask} from '@/modelTypes/ITask'
+import {useAuthStore} from '@/stores/auth'
 
 const props = defineProps({
 	modelValue: {
-		type: TaskModel,
+		type: Object as PropType<ITask>,
 		required: true,
 	},
 })
 const emit = defineEmits(['update:modelValue'])
 
 const {t} = useI18n({useScope: 'global'})
-const store = useStore()
+const authStore = useAuthStore()
 
 const taskService = shallowReactive(new TaskService())
-const task = ref<TaskModel>()
+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

@@ -20,47 +20,50 @@
 			:is-edit-enabled="canWrite"
 			:upload-callback="attachmentUpload"
 			:upload-enabled="true"
-			@change="save"
 			:placeholder="$t('task.description.placeholder')"
 			:empty-text="$t('task.description.empty')"
 			:show-save="true"
+			edit-shortcut="e"
 			v-model="task.description"
+			@update:model-value="save"
 		/>
 	</div>
 </template>
 
 <script setup lang="ts">
-import {ref,computed, watch} from 'vue'
-import {useStore} from 'vuex'
+import {ref,computed, watch, type PropType} from 'vue'
 
 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({
 	modelValue: {
-		type: TaskModel,
+		type: Object as PropType<ITask>,
 		required: true,
 	},
 	attachmentUpload: {
 		required: true,
 	},
 	canWrite: {
+		type: Boolean,
 		required: true,
 	},
 })
 
 const emit = defineEmits(['update:modelValue'])
 
-const task = ref<TaskModel>({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,
@@ -75,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

@@ -10,7 +10,7 @@
 			@search="findUser"
 			:search-results="foundUsers"
 			@select="addAssignee"
-			label="username"
+			label="name"
 			:select-placeholder="$t('task.assignee.selectPlaceholder')"
 			v-model="assignees"
 			ref="multiselect"
@@ -28,8 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref, shallowReactive, watch, PropType} from 'vue'
-import {useStore} from 'vuex'
+import {ref, shallowReactive, watch, nextTick, type PropType} from 'vue'
 import {useI18n} from 'vue-i18n'
 
 import User from '@/components/misc/user.vue'
@@ -37,35 +36,38 @@ import Multiselect from '@/components/input/multiselect.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 
 import {includesById} from '@/helpers/utils'
-import UserModel from '@/models/user'
 import ListUserService from '@/services/listUsers'
 import {success} from '@/message'
+import {useTaskStore} from '@/stores/tasks'
+
+import type {IUser} from '@/modelTypes/IUser'
 
 const props = defineProps({
-		taskId: {
-			type: Number,
-			required: true,
-		},
-		listId: {
-			type: Number,
-			required: true,
-		},
-		disabled: {
-			default: false,
-		},
-		modelValue: {
-			type: Array as PropType<UserModel[]>,
-			default: () => [],
-		},
-	})
+	taskId: {
+		type: Number,
+		required: true,
+	},
+	listId: {
+		type: Number,
+		required: true,
+	},
+	disabled: {
+		default: false,
+	},
+	modelValue: {
+		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<UserModel[]>([])
+const assignees = ref<IUser[]>([])
+let isAdding = false
 
 watch(
 	() => props.modelValue,
@@ -78,14 +80,24 @@ watch(
 	},
 )
 
-async function addAssignee(user: UserModel) {
-	await store.dispatch('tasks/addAssignee', {user: user, taskId: props.taskId})
-	emit('update:modelValue', assignees.value)
-	success({message: t('task.assignee.assignSuccess')})
+async function addAssignee(user: IUser) {
+	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: UserModel) {
-	await store.dispatch('tasks/removeAssignee', {user: user, taskId: props.taskId})
+async function removeAssignee(user: IUser) {
+	await taskStore.removeAssignee({user: user, taskId: props.taskId})
 
 	// Remove the assignee from the list
 	for (const a in assignees.value) {
@@ -106,6 +118,11 @@ async function findUser(query: string) {
 
 	// Filter the results to not include users who are already assigned
 	foundUsers.value = response.filter(({id}) => !includesById(assignees.value, id))
+		.map(u => {
+			// Users may not have a display name set, so we fall back on the username in that case
+			u.name = u.name === '' ? u.username : u.name
+			return u
+		})
 }
 
 function clearAllFoundUsers() {
@@ -113,6 +130,7 @@ function clearAllFoundUsers() {
 }
 
 const multiselect = ref()
+
 function focus() {
 	multiselect.value.focus()
 }

src/components/tasks/partials/editLabels.vue

@@ -39,8 +39,7 @@
 </template>
 
 <script setup lang="ts">
-import {PropType, ref, computed, shallowReactive, watch} from 'vue'
-import {useStore} from 'vuex'
+import {type PropType, ref, computed, shallowReactive, watch} from 'vue'
 import {useI18n} from 'vue-i18n'
 
 import LabelModel from '@/models/label'
@@ -49,10 +48,13 @@ 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 {useTaskStore} from '@/stores/tasks'
 
 const props = defineProps({
 	modelValue: {
-		type: Array as PropType<LabelModel[]>,
+		type: Array as PropType<ILabel[]>,
 		default: () => [],
 	},
 	taskId: {
@@ -65,13 +67,12 @@ const props = defineProps({
 	},
 })
 
-const emit = defineEmits(['update:modelValue', 'change'])
+const emit = defineEmits(['update:modelValue'])
 
-const store = useStore()
 const {t} = useI18n({useScope: 'global'})
 
 const labelTaskService = shallowReactive(new LabelTaskService())
-const labels = ref<LabelModel[]>([])
+const labels = ref<ILabel[]>([])
 const query = ref('')
 
 watch(
@@ -85,43 +86,40 @@ watch(
 	},
 )
 
-const foundLabels = computed(() => store.getters['labels/filterLabelsByQuery'](labels.value, query.value))
-const loading = computed(() => labelTaskService.loading || (store.state.loading && store.state.loadingModule === 'labels'))
+const taskStore = useTaskStore()
+const labelStore = useLabelStore()
+
+const foundLabels = computed(() => labelStore.filterLabelsByQuery(labels.value, query.value))
+const loading = computed(() => labelTaskService.loading || labelStore.isLoading)
 
 function findLabel(newQuery: string) {
 	query.value = newQuery
 }
 
-async function addLabel(label: LabelModel, showNotification = true) {
-	const bubble = () => {
-		emit('update:modelValue', labels.value)
-		emit('change', labels.value)
-	}
-	
+async function addLabel(label: ILabel, showNotification = true) {
 	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')})
 	}
 }
 
-async function removeLabel(label: LabelModel) {
+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) {
 		if (labels.value[l].id === label.id) {
-			labels.value.splice(l, 1)
+			labels.value.splice(l, 1) // FIXME: l should be index
 		}
 	}
 	emit('update:modelValue', labels.value)
-	emit('change', labels.value)
 	success({message: t('task.label.removeSuccess')})
 }
 
@@ -130,7 +128,8 @@ async function createAndAddLabel(title: string) {
 		return
 	}
 
-	const newLabel = await store.dispatch('labels/createLabel', new LabelModel({title}))
+	const labelStore = useLabelStore()
+	const newLabel = await labelStore.createLabel(new LabelModel({title}))
 	addLabel(newLabel, false)
 	labels.value.push(newLabel)
 	success({message: t('task.label.addCreateSuccess')})

src/components/tasks/partials/heading.vue

@@ -1,7 +1,12 @@
 <template>
 	<div class="heading">
 		<BaseButton @click="copyUrl"><h1 class="title task-id">{{ textIdentifier }}</h1></BaseButton>
-		<Done class="heading__done" :is-done="task.done" />
+		<Done class="heading__done" :is-done="task.done"/>
+		<ColorBubble
+			v-if="task.hexColor !== ''"
+			:color="task.getHexColor()"
+			class="mt-1 ml-2"
+		/>
 		<h1
 			class="title input"
 			:class="{'disabled': !canWrite}"
@@ -32,18 +37,21 @@
 </template>
 
 <script setup lang="ts">
-import {ref, computed} from 'vue'
-import {useStore} from 'vuex'
+import {ref, computed, type PropType} from 'vue'
+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 TaskModel from '@/models/task'
-import { useRouter } from 'vue-router'
-import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
+
+import {useCopyToClipboard} from '@/composables/useCopyToClipboard'
+import {useTaskStore} from '@/stores/tasks'
+
+import type {ITask} from '@/modelTypes/ITask'
 
 const props = defineProps({
 	task: {
-		type: TaskModel,
+		type: Object as PropType<ITask>,
 		required: true,
 	},
 	canWrite: {
@@ -56,15 +64,16 @@ const emit = defineEmits(['update:task'])
 
 const router = useRouter()
 const copy = useCopyToClipboard()
+
 async function copyUrl() {
-	const route = router.resolve({ name: 'task.detail', query: { taskId: props.task.id}})
+	const route = router.resolve({name: 'task.detail', query: {taskId: props.task.id}})
 	const absoluteURL = new URL(route.href, window.location.href).href
-	
+
 	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() || '')
 
@@ -84,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,
 		})
@@ -93,8 +102,7 @@ async function save(title: string) {
 		setTimeout(() => {
 			showSavedMessage.value = false
 		}, 2000)
-	}
-	finally {
+	} finally {
 		saving.value = false
 	}
 }
@@ -104,4 +112,9 @@ async function save(title: string) {
 .heading__done {
 	margin-left: .5rem;
 }
+
+.color-bubble {
+	height: .75rem;
+	width: .75rem;
+}
 </style>

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

@@ -6,136 +6,147 @@
 			'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)"
 	>
-		<span class="task-id">
-			<Done class="kanban-card__done" :is-done="task.done" variant="small" />
-			<template v-if="task.identifier === ''">
-				#{{ task.index }}
-			</template>
-			<template v-else>
-				{{ task.identifier }}
-			</template>
-		</span>
-		<span
-			:class="{'overdue': task.dueDate <= new Date() && !task.done}"
-			class="due-date"
-			v-if="task.dueDate > 0"
-			v-tooltip="formatDate(task.dueDate)">
-			<span class="icon">
-				<icon :icon="['far', 'calendar-alt']"/>
+		<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"/>
+				<template v-if="task.identifier === ''">
+					#{{ task.index }}
+				</template>
+				<template v-else>
+					{{ task.identifier }}
+				</template>
 			</span>
-			<time :datetime="formatISO(task.dueDate)">
-				{{ formatDateSince(task.dueDate) }}
-			</time>
-		</span>
-		<h3>{{ task.title }}</h3>
-		<progress
-			class="progress is-small"
-			v-if="task.percentDone > 0"
-			:value="task.percentDone * 100" max="100">
-			{{ task.percentDone * 100 }}%
-		</progress>
-		<div class="footer">
-			<labels :labels="task.labels"/>
-			<priority-label :priority="task.priority" :done="task.done"/>
-			<div class="assignees" v-if="task.assignees.length > 0">
-				<user
-					:avatar-size="24"
-					:key="task.id + 'assignee' + u.id"
-					:show-username="false"
-					:user="u"
-					v-for="u in task.assignees"
-				/>
+			<span
+				:class="{'overdue': task.dueDate <= new Date() && !task.done}"
+				class="due-date"
+				v-if="task.dueDate > 0"
+				v-tooltip="formatDateLong(task.dueDate)">
+				<span class="icon">
+					<icon :icon="['far', 'calendar-alt']"/>
+				</span>
+				<time :datetime="formatISO(task.dueDate)">
+					{{ formatDateSince(task.dueDate) }}
+				</time>
+			</span>
+			<h3>{{ task.title }}</h3>
+			<progress
+				class="progress is-small"
+				v-if="task.percentDone > 0"
+				:value="task.percentDone * 100" max="100">
+				{{ task.percentDone * 100 }}%
+			</progress>
+			<div class="footer">
+				<labels :labels="task.labels"/>
+				<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"
+					/>
+				</div>
+				<checklist-summary :task="task"/>
+				<span class="icon" v-if="task.attachments.length > 0">
+					<icon icon="paperclip"/>	
+				</span>
+				<span v-if="task.description" class="icon">
+					<icon icon="align-left"/>
+				</span>
+				<span class="icon" v-if="task.repeatAfter.amount > 0">
+					<icon icon="history"/>
+				</span>
 			</div>
-			<checklist-summary :task="task"/>
-			<span class="icon" v-if="task.attachments.length > 0">
-				<icon icon="paperclip"/>	
-			</span>
-			<span v-if="task.description" class="icon">
-				<icon icon="align-left"/>
-			</span>
-			<span class="icon" v-if="task.repeatAfter.amount > 0">
-				<icon icon="history"/>
-			</span>
 		</div>
 	</div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
+<script lang="ts" setup>
+import {ref, computed, watch} from 'vue'
+import {useRouter} from 'vue-router'
 
-import {playPop} from '../../../helpers/playPop'
-import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
-import User from '../../../components/misc/user'
+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'
-import ChecklistSummary from './checklist-summary'
-import {TASK_DEFAULT_COLOR} from '@/models/task'
+import Labels from '@/components/tasks/partials/labels.vue'
+import ChecklistSummary from './checklist-summary.vue'
 
+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: {
-			required: true,
-		},
-		loading: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-	},
-	computed: {
-		color() {
-			return this.task.getHexColor
-				? this.task.getHexColor() 
-				: TASK_DEFAULT_COLOR
-		},
-	},
-	methods: {
-		colorIsDark,
-		async toggleTaskDone(task) {
-			this.loadingInternal = true
-			try {
-				const done = !task.done
-				await this.$store.dispatch('tasks/update', {
-					...task,
-					done,
-				})
-				if (done) {
-					playPop()
-				}
-			} finally {
-				this.loadingInternal = false
-			}
-		},
-		openTaskDetail() {
-			this.$router.push({
-				name: 'task.detail',
-				params: { id: this.task.id },
-				state: { backdropView: this.$router.currentRoute.value.fullPath },
-			})
-		},
-	},
+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 {
+		await useTaskStore().update({
+			...task,
+			done: !task.done,
+		})
+	} finally {
+		loadingInternal.value = false
+	}
+}
+
+function openTaskDetail() {
+	router.push({
+		name: 'task.detail',
+		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>
@@ -147,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/labels.vue

@@ -11,8 +11,12 @@
 </template>
 
 <script setup lang="ts">
+import type {PropType} from 'vue'
+import type {ILabel} from '@/modelTypes/ILabel'
+
 defineProps({
 	labels: {
+		type: Array as PropType<ILabel[]>,
 		required: true,
 	},
 })

src/components/tasks/partials/listSearch.vue

@@ -1,5 +1,5 @@
 <template>
-	<multiselect
+	<Multiselect
 		class="control is-expanded"
 		:placeholder="$t('list.search')"
 		@search="findLists"
@@ -13,32 +13,30 @@
 			<span class="list-namespace-title search-result">{{ namespace(props.option.namespaceId) }} ></span>
 			{{ props.option.title }}
 		</template>
-	</multiselect>
+	</Multiselect>
 </template>
 
 <script lang="ts" setup>
 import {reactive, ref, watch} from 'vue'
 import type {PropType} from 'vue'
-import {useStore} from 'vuex'
 import {useI18n} from 'vue-i18n'
 import ListModel from '@/models/list'
+import type {IList} from '@/modelTypes/IList'
 import Multiselect from '@/components/input/multiselect.vue'
+import {useListStore} from '@/stores/lists'
+import {useNamespaceStore} from '@/stores/namespaces'
 
 const props = defineProps({
 	modelValue: {
-		type: Object as PropType<ListModel>,
-		validator(value) {
-			return value instanceof ListModel
-		},
+		type: Object as PropType<IList>,
 		required: false,
 	},
 })
 const emit = defineEmits(['update:modelValue'])
 
-const store = useStore()
 const {t} = useI18n({useScope: 'global'})
 
-const list = reactive<ListModel>(new ListModel())
+const list: IList = reactive(new ListModel())
 
 watch(
 	() => props.modelValue,
@@ -49,21 +47,26 @@ watch(
 	},
 )
 
-const foundLists = ref([])
+const listStore = useListStore()
+const namespaceStore = useNamespaceStore()
+const foundLists = ref<IList[]>([])
 function findLists(query: string) {
 	if (query === '') {
 		select(null)
 	}
-	foundLists.value = store.getters['lists/searchList'](query)
+	foundLists.value = listStore.searchList(query)
 }
 
-function select(l: ListModel | null) {
+function select(l: IList | null) {
+	if (l === null) {
+		return
+	}
 	Object.assign(list, l)
 	emit('update:modelValue', list)
 }
 
 function namespace(namespaceId: number) {
-	const namespace = store.getters['namespaces/getNamespaceById'](namespaceId)
+	const namespace = namespaceStore.getNamespaceById(namespaceId)
 	return namespace !== null
 		? namespace.title
 		: t('list.shared')

src/components/tasks/partials/percentDoneSelect.vue

@@ -32,13 +32,12 @@ const props = defineProps({
 	},
 })
 
-const emit = defineEmits(['update:modelValue', 'change'])
+const emit = defineEmits(['update:modelValue'])
 
 const percentDone = computed({
 	get: () => props.modelValue,
 	set(percentDone) {
 		emit('update:modelValue', percentDone)
-		emit('change')
 	},
 })
 </script>

src/components/tasks/partials/priorityLabel.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import priorities from '@/models/constants/priorities'
+import {PRIORITIES as priorities} from '@/constants/priorities'
 	
 defineProps({
 	priority: {

src/components/tasks/partials/prioritySelect.vue

@@ -5,33 +5,33 @@
 			@change="updateData"
 			:disabled="disabled || undefined"
 		>
-			<option :value="priorities.UNSET">{{ $t('task.priority.unset') }}</option>
-			<option :value="priorities.LOW">{{ $t('task.priority.low') }}</option>
-			<option :value="priorities.MEDIUM">{{ $t('task.priority.medium') }}</option>
-			<option :value="priorities.HIGH">{{ $t('task.priority.high') }}</option>
-			<option :value="priorities.URGENT">{{ $t('task.priority.urgent') }}</option>
-			<option :value="priorities.DO_NOW">{{ $t('task.priority.doNow') }}</option>
+			<option :value="PRIORITIES.UNSET">{{ $t('task.priority.unset') }}</option>
+			<option :value="PRIORITIES.LOW">{{ $t('task.priority.low') }}</option>
+			<option :value="PRIORITIES.MEDIUM">{{ $t('task.priority.medium') }}</option>
+			<option :value="PRIORITIES.HIGH">{{ $t('task.priority.high') }}</option>
+			<option :value="PRIORITIES.URGENT">{{ $t('task.priority.urgent') }}</option>
+			<option :value="PRIORITIES.DO_NOW">{{ $t('task.priority.doNow') }}</option>
 		</select>
 	</div>
 </template>
 
 <script setup lang="ts">
 import {ref, watch} from 'vue'
-import priorities from '@/models/constants/priorities.json'
-
-const priority = ref(0)
+import {PRIORITIES} from '@/constants/priorities'
 
 const props = defineProps({
 	modelValue: {
-		default: 0,
 		type: Number,
+		default: 0,
 	},
 	disabled: {
 		default: false,
 	},
 })
 
-const emit = defineEmits(['update:modelValue', 'change'])
+const emit = defineEmits(['update:modelValue'])
+
+const priority = ref(0)
 
 // FIXME: store value outside
 // Set the priority to the :value every time it changes from the outside
@@ -45,6 +45,5 @@ watch(
 
 function updateData() {
 	emit('update:modelValue', priority.value)
-	emit('change')
 }
 </script>

src/components/tasks/partials/relatedTasks.vue

@@ -25,49 +25,52 @@
 					</transition>
 				</label>
 				<div class="field" key="field-search">
-					<multiselect
+					<Multiselect
 						:placeholder="$t('task.relation.searchPlaceholder')"
 						@search="findTasks"
 						:loading="taskService.loading"
 						:search-results="mappedFoundTasks"
 						label="title"
-						v-model="newTaskRelationTask"
+						v-model="newTaskRelation.task"
 						:creatable="true"
 						:create-placeholder="$t('task.relation.createPlaceholder')"
 						@create="createAndRelateTask"
-						@select="addTaskRelation"
 					>
-						<template #searchResult="props">
-							<span v-if="typeof props.option !== 'string'" class="search-result">
+						<template #searchResult="{option: task}">
+							<span 
+								v-if="typeof task !== 'string'"
+								class="search-result"
+								:class="{'is-strikethrough': task.done}"
+							>
 								<span
 									class="different-list"
-									v-if="props.option.listId !== listId"
+									v-if="task.listId !== listId"
 								>
 									<span
-										v-if="props.option.differentNamespace !== null"
+										v-if="task.differentNamespace !== null"
 										v-tooltip="$t('task.relation.differentNamespace')">
-										{{ props.option.differentNamespace }} >
+										{{ task.differentNamespace }} >
 									</span>
 									<span
-										v-if="props.option.differentList !== null"
+										v-if="task.differentList !== null"
 										v-tooltip="$t('task.relation.differentList')">
-										{{ props.option.differentList }} >
+										{{ task.differentList }} >
 									</span>
 								</span>
-								{{ props.option.title }}
+								{{ task.title }}
 							</span>
 							<span class="search-result" v-else>
-								{{ props.option }}
+								{{ task }}
 							</span>
 						</template>
-					</multiselect>
+					</Multiselect>
 				</div>
 				<div class="field has-addons mb-4" key="field-kind">
 					<div class="control is-expanded">
 						<div class="select is-fullwidth has-defaults">
-							<select v-model="newTaskRelationKind">
+							<select v-model="newTaskRelation.kind">
 								<option value="unset">{{ $t('task.relation.select') }}</option>
-								<option :key="rk" :value="rk" v-for="rk in relationKinds">
+								<option :key="`option_${rk}`" :value="rk" v-for="rk in RELATION_KINDS">
 									{{ $tc(`task.relation.kinds.${rk}`, 1) }}
 								</option>
 							</select>
@@ -84,29 +87,40 @@
 			<span class="title">{{ rts.title }}</span>
 			<div class="tasks">
 				<div :key="t.id" class="task" v-for="t in rts.tasks">
-					<router-link
-						:to="{ name: $route.name, params: { id: t.id } }"
-						:class="{ 'is-strikethrough': t.done}">
-						<span
-							class="different-list"
-							v-if="t.listId !== listId"
+					<div class="is-flex is-align-items-center">
+						<Fancycheckbox
+							class="task-done-checkbox"
+							v-model="t.done"
+							@update:model-value="toggleTaskDone(t)"
+						/>
+						<router-link
+							:to="{ name: route.name as string, params: { id: t.id } }"
+							:class="{ 'is-strikethrough': t.done}"
 						>
 							<span
-								v-if="t.differentNamespace !== null"
-								v-tooltip="$t('task.relation.differentNamespace')">
-								{{ t.differentNamespace }} >
+								class="different-list"
+								v-if="t.listId !== listId"
+							>
+								<span
+									v-if="t.differentNamespace !== null"
+									v-tooltip="$t('task.relation.differentNamespace')">
+									{{ t.differentNamespace }} >
+								</span>
+								<span
+									v-if="t.differentList !== null"
+									v-tooltip="$t('task.relation.differentList')">
+									{{ t.differentList }} >
+								</span>
 							</span>
-							<span
-								v-if="t.differentList !== null"
-								v-tooltip="$t('task.relation.differentList')">
-								{{ t.differentList }} >
-							</span>
-						</span>
-						{{ t.title }}
-					</router-link>
+							{{ t.title }}
+						</router-link>
+					</div>
 					<BaseButton
 						v-if="editEnabled"
-						@click="() => {showDeleteModal = true; relationToDelete = {relationKind: rts.kind, otherTaskId: t.id}}"
+						@click="setRelationToDelete({
+							relationKind: rts.kind,
+							otherTaskId: t.id
+						})"
 						class="remove"
 					>
 						<icon icon="trash-alt"/>
@@ -118,204 +132,237 @@
 			{{ $t('task.relation.noneYet') }}
 		</p>
 
-		<!-- Delete modal -->
-		<transition name="modal">
-			<modal
-				@close="showDeleteModal = false"
-				@submit="removeTaskRelation()"
-				v-if="showDeleteModal"
-			>
-				<template #header><span>{{ $t('task.relation.delete') }}</span></template>
+		<modal
+			v-if="relationToDelete !== undefined"
+			@close="relationToDelete = undefined"
+			@submit="removeTaskRelation()"
+		>
+			<template #header><span>{{ $t('task.relation.delete') }}</span></template>
 
-				<template #text>
-					<p>
-						{{ $t('task.relation.deleteText1') }}<br/>
-						<strong class="has-text-white">{{ $t('misc.cannotBeUndone') }}</strong>
-					</p>
-				</template>
-			</modal>
-		</transition>
+			<template #text>
+				<p>
+					{{ $t('task.relation.deleteText1') }}<br/>
+					<strong class="has-text-white">{{ $t('misc.cannotBeUndone') }}</strong>
+				</p>
+			</template>
+		</modal>
 	</div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
+<script setup lang="ts">
+import {ref, reactive, shallowReactive, watch, computed, type PropType} from 'vue'
+import {useI18n} from 'vue-i18n'
+import {useRoute} from 'vue-router'
 
-import TaskService from '../../../services/task'
-import TaskModel from '../../../models/task'
-import TaskRelationService from '../../../services/taskRelation'
-import relationKinds from '../../../models/constants/relationKinds'
-import TaskRelationModel from '../../../models/taskRelation'
+import TaskService from '@/services/task'
+import TaskModel from '@/models/task'
+import type {ITask} from '@/modelTypes/ITask'
+import type {ITaskRelation} from '@/modelTypes/ITaskRelation'
+import {RELATION_KINDS, RELATION_KIND, type IRelationKind} from '@/types/IRelationKind'
+
+import TaskRelationService from '@/services/taskRelation'
+import TaskRelationModel from '@/models/taskRelation'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import Multiselect from '@/components/input/multiselect.vue'
+import Fancycheckbox from '@/components/input/fancycheckbox.vue'
 
-export default defineComponent({
-	name: 'relatedTasks',
-	data() {
-		return {
-			relatedTasks: {},
-			taskService: new TaskService(),
-			foundTasks: [],
-			relationKinds: relationKinds,
-			newTaskRelationTask: new TaskModel(),
-			newTaskRelationKind: 'related',
-			taskRelationService: new TaskRelationService(),
-			showDeleteModal: false,
-			relationToDelete: {},
-			saved: false,
-			showNewRelationForm: false,
-			query: '',
-		}
+import {useNamespaceStore} from '@/stores/namespaces'
+
+import {error, success} from '@/message'
+import {useTaskStore} from '@/stores/tasks'
+
+const props = defineProps({
+	taskId: {
+		type: Number,
+		required: true,
 	},
-	components: {
-		BaseButton,
-		Multiselect,
+	initialRelatedTasks: {
+		type: Object as PropType<ITask['relatedTasks']>,
+		default: () => ({}),
 	},
-	props: {
-		taskId: {
-			type: Number,
-			required: true,
-		},
-		initialRelatedTasks: {
-			type: Object,
-			default: () => {
-			},
-		},
-		showNoRelationsNotice: {
-			type: Boolean,
-			default: false,
-		},
-		listId: {
-			type: Number,
-			default: 0,
-		},
-		editEnabled: {
-			default: true,
-		},
+	showNoRelationsNotice: {
+		type: Boolean,
+		default: false,
 	},
-	watch: {
-		initialRelatedTasks: {
-			handler(value) {
-				this.relatedTasks = value
-			},
-			immediate: true,
-		},
+	listId: {
+		type: Number,
+		default: 0,
 	},
-	computed: {
-		showCreate() {
-			return Object.keys(this.relatedTasks).length === 0 || this.showNewRelationForm
-		},
-		namespace() {
-			return this.$store.getters['namespaces/getListAndNamespaceById'](this.listId, true)?.namespace
-		},
-		mappedRelatedTasks() {
-			return Object.entries(this.relatedTasks).map(([kind, tasks]) => ({
-				title: this.$tc(`task.relation.kinds.${kind}`, tasks.length),
-				tasks: this.mapRelatedTasks(tasks),
-				kind,
-			}))
-		},
-		mappedFoundTasks() {
-			return this.mapRelatedTasks(this.foundTasks.filter(t => t.id !== this.taskId))
-		},
-	},
-	methods: {
-		async findTasks(query) {
-			this.query = query
-			this.foundTasks = await this.taskService.getAll({}, {s: query})
-		},
-
-		async addTaskRelation() {
-			if (this.newTaskRelationTask.id === 0 && this.query !== '') {
-				return this.createAndRelateTask(this.query)
-			}
-
-			if (this.newTaskRelationTask.id === 0) {
-				this.$message.error({message: this.$t('task.relation.taskRequired')})
-				return
-			}
-
-			const rel = new TaskRelationModel({
-				taskId: this.taskId,
-				otherTaskId: this.newTaskRelationTask.id,
-				relationKind: this.newTaskRelationKind,
-			})
-			await this.taskRelationService.create(rel)
-			if (!this.relatedTasks[this.newTaskRelationKind]) {
-				this.relatedTasks[this.newTaskRelationKind] = []
-			}
-			this.relatedTasks[this.newTaskRelationKind].push(this.newTaskRelationTask)
-			this.newTaskRelationTask = null
-			this.saved = true
-			this.showNewRelationForm = false
-			setTimeout(() => {
-				this.saved = false
-			}, 2000)
-		},
-
-		async removeTaskRelation() {
-			const rel = new TaskRelationModel({
-				relationKind: this.relationToDelete.relationKind,
-				taskId: this.taskId,
-				otherTaskId: this.relationToDelete.otherTaskId,
-			})
-			try {
-				await this.taskRelationService.delete(rel)
-
-				const kind = this.relationToDelete.relationKind
-				for (const t in this.relatedTasks[kind]) {
-					if (this.relatedTasks[kind][t].id === this.relationToDelete.otherTaskId) {
-						this.relatedTasks[kind].splice(t, 1)
-
-						break
-					}
-				}
-
-				this.saved = true
-				setTimeout(() => {
-					this.saved = false
-				}, 2000)
-			} finally {
-				this.showDeleteModal = false
-			}
-		},
-
-		async createAndRelateTask(title) {
-			const newTask = new TaskModel({title: title, listId: this.listId})
-			this.newTaskRelationTask = await this.taskService.create(newTask)
-			await this.addTaskRelation()
-		},
-
-		relationKindTitle(kind, length) {
-			return this.$tc(`task.relation.kinds.${kind}`, length)
-		},
-
-		mapRelatedTasks(tasks) {
-			return tasks
-				.map(task => {
-					// by doing this here once we can save a lot of duplicate calls in the template
-					const listAndNamespace = this.$store.getters['namespaces/getListAndNamespaceById'](task.listId, true)
-					const {
-						list,
-						namespace,
-					} = listAndNamespace === null ? {list: null, namespace: null} : listAndNamespace
-
-					return {
-						...task,
-						differentNamespace:
-							(namespace !== null &&
-								namespace.id !== this.namespace.id &&
-								namespace?.title) || null,
-						differentList:
-							(list !== null &&
-								task.listId !== this.listId &&
-								list?.title) || null,
-					}
-				})
-		},
+	editEnabled: {
+		default: true,
 	},
 })
+
+const taskStore = useTaskStore()
+const namespaceStore = useNamespaceStore()
+const route = useRoute()
+const {t} = useI18n({useScope: 'global'})
+
+type TaskRelation = {kind: IRelationKind, task: ITask}
+
+const taskService = shallowReactive(new TaskService())
+
+const relatedTasks = ref<ITask['relatedTasks']>({})
+
+const newTaskRelation: TaskRelation = reactive({
+	kind: RELATION_KIND.RELATED,
+	task: new TaskModel(),
+})
+
+watch(
+	() => props.initialRelatedTasks,
+	(value) => {
+		relatedTasks.value = value
+	},
+		{immediate: true},
+)
+
+const showNewRelationForm = ref(false)
+const showCreate = computed(() => Object.keys(relatedTasks.value).length === 0 || showNewRelationForm.value)
+
+const query = ref('')
+const foundTasks = ref<ITask[]>([])
+
+async function findTasks(newQuery: string) {
+	query.value = newQuery
+	foundTasks.value = await taskService.getAll({}, {s: newQuery})
+}
+
+const getListAndNamespaceById = (listId: number) => namespaceStore.getListAndNamespaceById(listId, true)
+
+const namespace = computed(() => getListAndNamespaceById(props.listId)?.namespace)
+
+function mapRelatedTasks(tasks: ITask[]) {
+	return tasks.map(task => {
+		// by doing this here once we can save a lot of duplicate calls in the template
+		const {
+			list,
+			namespace: taskNamespace,
+		} = getListAndNamespaceById(task.listId) || {list: null, namespace: null}
+
+		return {
+			...task,
+			differentNamespace:
+				(taskNamespace !== null &&
+					taskNamespace.id !== namespace.value.id &&
+					taskNamespace?.title) || null,
+			differentList:
+				(list !== null &&
+					task.listId !== props.listId &&
+					list?.title) || null,
+		}
+	})
+}
+
+const mapRelationKindsTitleGetter = computed(() => ({
+	'subtask': (count: number) => t('task.relation.kinds.subtask', count),
+	'parenttask': (count: number) => t('task.relation.kinds.parenttask', count),
+	'related': (count: number) => t('task.relation.kinds.related', count),
+	'duplicateof': (count: number) => t('task.relation.kinds.duplicateof', count),
+	'duplicates': (count: number) => t('task.relation.kinds.duplicates', count),
+	'blocking': (count: number) => t('task.relation.kinds.blocking', count),
+	'blocked': (count: number) => t('task.relation.kinds.blocked', count),
+	'precedes': (count: number) => t('task.relation.kinds.precedes', count),
+	'follows': (count: number) => t('task.relation.kinds.follows', count),
+	'copiedfrom': (count: number) => t('task.relation.kinds.copiedfrom', count),
+	'copiedto': (count: number) => t('task.relation.kinds.copiedto', count),
+}))
+
+const mappedRelatedTasks = computed(() => Object.entries(relatedTasks.value).map(
+	([kind, tasks]) => ({
+		title: mapRelationKindsTitleGetter.value[kind as IRelationKind](tasks.length),
+		tasks: mapRelatedTasks(tasks),
+		kind: kind as IRelationKind,
+	}),
+))
+const mappedFoundTasks = computed(() => mapRelatedTasks(foundTasks.value.filter(t => t.id !== props.taskId)))
+
+const taskRelationService = shallowReactive(new TaskRelationService())
+const saved = ref(false)
+
+async function addTaskRelation() {
+	if (newTaskRelation.task.id === 0 && query.value !== '') {
+		return createAndRelateTask(query.value)
+	}
+
+	if (newTaskRelation.task.id === 0) {
+		error({message: t('task.relation.taskRequired')})
+		return
+	}
+
+	await taskRelationService.create(new TaskRelationModel({
+		taskId: props.taskId,
+		otherTaskId: newTaskRelation.task.id,
+		relationKind: newTaskRelation.kind,
+	}))
+	relatedTasks.value[newTaskRelation.kind] = [
+		...(relatedTasks.value[newTaskRelation.kind] || []),
+		newTaskRelation.task,
+	]
+	newTaskRelation.task = new TaskModel()
+	saved.value = true
+	showNewRelationForm.value = false
+	setTimeout(() => {
+		saved.value = false
+	}, 2000)
+}
+
+const relationToDelete = ref<Partial<ITaskRelation>>()
+
+function setRelationToDelete(relation: Partial<ITaskRelation>) {
+	relationToDelete.value = relation
+}
+
+async function removeTaskRelation() {
+	const relation = relationToDelete.value
+	if (!relation || !relation.relationKind || !relation.otherTaskId) {
+		relationToDelete.value = undefined
+		return
+	}
+	try {
+		const relationKind = relation.relationKind
+		await taskRelationService.delete(new TaskRelationModel({
+			relationKind,
+			taskId: props.taskId,
+			otherTaskId: relation.otherTaskId,
+		}))
+
+		relatedTasks.value[relationKind] = relatedTasks.value[relationKind]?.filter(
+			({id}) => id !== relation.otherTaskId,
+		)
+
+		saved.value = true
+		setTimeout(() => {
+			saved.value = false
+		}, 2000)
+	} finally {
+		relationToDelete.value = undefined
+	}
+}
+
+async function createAndRelateTask(title: string) {
+	const newTask = await taskService.create(new TaskModel({title, listId: props.listId}))
+	newTaskRelation.task = newTask
+	await addTaskRelation()
+}
+
+async function toggleTaskDone(task: ITask) {
+	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 as ITask[]).some((t, key) => {
+			const found = t.id === task.id
+			if (found) {
+				relatedTasks.value[kind as IRelationKind]![key] = task
+			}
+			return found
+		})
+	})
+
+	success({message: t('task.detail.updateSuccess')})
+}
 </script>
 
 <style lang="scss" scoped>
@@ -366,15 +413,16 @@ export default defineComponent({
 		}
 	}
 
-	.remove {
-		text-align: center;
-		color: var(--danger);
-		opacity: 0;
-		transition: opacity $transition;
-	}
 }
 
-.related-tasks:hover .tasks .task .remove {
+.remove {
+	text-align: center;
+	color: var(--danger);
+	opacity: 0;
+	transition: opacity $transition;
+}
+
+.task:hover .remove {
 	opacity: 1;
 }
 
@@ -387,5 +435,13 @@ export default defineComponent({
 	padding: 0.5rem;
 }
 
+// FIXME: The height of the actual checkbox in the <Fancycheckbox/> component is too much resulting in a 
+//  weired positioning of the checkbox. Setting the height here is a workaround until we fix the styling 
+//  of the component.
+.task-done-checkbox {
+	padding: 0;
+	height: 18px; // The exact height of the checkbox in the container
+}
+
 @include modal-transition();
 </style>

src/components/tasks/partials/reminders.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script setup lang="ts">
-import {PropType, ref, onMounted, watch} from 'vue'
+import {type PropType, ref, onMounted, watch} from 'vue'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import Datepicker from '@/components/input/datepicker.vue'
@@ -45,8 +45,8 @@ const props = defineProps({
 				return false
 			}
 
-			const isDate = (e: any) => e instanceof Date
-			const isString = (e: any) => typeof e === 'string'
+			const isDate = (e: unknown) => e instanceof Date
+			const isString = (e: unknown) => typeof e === 'string'
 
 			for (const e of prop) {
 				if (!isDate(e) && !isString(e)) {
@@ -63,7 +63,7 @@ const props = defineProps({
 	},
 })
 
-const emit = defineEmits(['update:modelValue', 'change'])
+const emit = defineEmits(['update:modelValue'])
 
 const reminders = ref<Reminder[]>([])
 
@@ -86,7 +86,6 @@ watch(
 
 function updateData() {
 	emit('update:modelValue', reminders.value)
-	emit('change')
 }
 
 const newReminder = ref(null)

src/components/tasks/partials/repeatAfter.vue

@@ -18,17 +18,14 @@
 			<div class="control">
 				<div class="select">
 					<select @change="updateData" v-model="task.repeatMode" id="repeatMode">
-						<option :value="repeatModes.REPEAT_MODE_DEFAULT">{{ $t('misc.default') }}</option>
-						<option :value="repeatModes.REPEAT_MODE_MONTH">{{ $t('task.repeat.monthly') }}</option>
-						<option :value="repeatModes.REPEAT_MODE_FROM_CURRENT_DATE">{{
-								$t('task.repeat.fromCurrentDate')
-							}}
-						</option>
+						<option :value="TASK_REPEAT_MODES.REPEAT_MODE_DEFAULT">{{ $t('misc.default') }}</option>
+						<option :value="TASK_REPEAT_MODES.REPEAT_MODE_MONTH">{{ $t('task.repeat.monthly') }}</option>
+						<option :value="TASK_REPEAT_MODES.REPEAT_MODE_FROM_CURRENT_DATE">{{ $t('task.repeat.fromCurrentDate') }}</option>
 					</select>
 				</div>
 			</div>
 		</div>
-		<div class="is-flex" v-if="task.repeatMode !== repeatModes.REPEAT_MODE_MONTH">
+		<div class="is-flex" v-if="task.repeatMode !== TASK_REPEAT_MODES.REPEAT_MODE_MONTH">
 			<p class="pr-4">
 				{{ $t('task.repeat.each') }}
 			</p>
@@ -65,14 +62,18 @@
 </template>
 
 <script setup lang="ts">
-import {ref, reactive, watch} from 'vue'
-import repeatModes from '@/models/constants/taskRepeatModes.json'
-import TaskModel from '@/models/task'
-import {error} from '@/message'
+import {ref, reactive, watch, type PropType} from 'vue'
 import {useI18n} from 'vue-i18n'
 
+import {error} from '@/message'
+
+import {TASK_REPEAT_MODES} from '@/types/IRepeatMode'
+import type {IRepeatAfter} from '@/types/IRepeatAfter'
+import type {ITask} from '@/modelTypes/ITask'
+
 const props = defineProps({
 	modelValue: {
+		type: Object as PropType<ITask>,
 		default: () => ({}),
 		required: true,
 	},
@@ -84,9 +85,9 @@ const props = defineProps({
 
 const {t} = useI18n({useScope: 'global'})
 
-const emit = defineEmits(['update:modelValue', 'change'])
+const emit = defineEmits(['update:modelValue'])
 
-const task = ref<TaskModel>()
+const task = ref<ITask>()
 const repeatAfter = reactive({
 	amount: 0,
 	type: '',
@@ -104,7 +105,7 @@ watch(
 )
 
 function updateData() {
-	if (task.value.repeatMode !== repeatModes.REPEAT_MODE_DEFAULT && repeatAfter.amount === 0) {
+	if (!task.value || task.value.repeatMode !== TASK_REPEAT_MODES.REPEAT_MODE_DEFAULT && repeatAfter.amount === 0) {
 		return
 	}
 
@@ -115,11 +116,10 @@ function updateData() {
 
 	Object.assign(task.value.repeatAfter, repeatAfter)
 	emit('update:modelValue', task.value)
-	emit('change')
 }
 
-function setRepeatAfter(amount: number, type) {
-	Object.assign(repeatAfter, {amount, type})
+function setRepeatAfter(amount: number, type: IRepeatAfter['type']) {
+	Object.assign(repeatAfter, { amount, type})
 	updateData()
 }
 </script>

src/components/tasks/partials/singleTaskInList.vue

@@ -1,12 +1,11 @@
 <template>
 	<div :class="{'is-loading': taskService.loading}" class="task loader-container">
 		<fancycheckbox :disabled="(isArchived || disabled) && !canMarkAsDone" @change="markAsDone" v-model="task.done"/>
-		<span
+		<ColorBubble
 			v-if="showListColor && listColor !== ''"
-			:style="{backgroundColor: listColor }"
-			class="color-bubble"
-		>
-		</span>
+			:color="listColor"
+			class="mr-1"
+		/>
 		<router-link
 			:to="taskDetailRoute"
 			:class="{ 'done': task.done}"
@@ -15,11 +14,17 @@
 				<router-link
 					:to="{ name: 'list.list', params: { listId: task.listId } }"
 					class="task-list"
-					v-if="showList && $store.getters['lists/getListById'](task.listId) !== null"
-					v-tooltip="$t('task.detail.belongsToList', {list: $store.getters['lists/getListById'](task.listId).title})">
-					{{ $store.getters['lists/getListById'](task.listId).title }}
+					:class="{'mr-2': task.hexColor !== ''}"
+					v-if="showList && getListById(task.listId) !== null"
+					v-tooltip="$t('task.detail.belongsToList', {list: getListById(task.listId).title})">
+					{{ getListById(task.listId).title }}
 				</router-link>
 
+				<ColorBubble
+					v-if="task.hexColor !== ''"
+					:color="task.getHexColor()"
+					class="mr-1"
+				/>
 				<!-- Show any parent tasks to make it clear this task is a sub task of something -->
 				<span class="parent-tasks" v-if="typeof task.relatedTasks.parenttask !== 'undefined'">
 					<template v-for="(pt, i) in task.relatedTasks.parenttask">
@@ -30,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"
@@ -43,7 +48,7 @@
 				v-if="+new Date(task.dueDate) > 0"
 				class="dueDate"
 				@click.prevent.stop="showDefer = !showDefer"
-				v-tooltip="formatDate(task.dueDate)"
+				v-tooltip="formatDateLong(task.dueDate)"
 			>
 				<time
 					:datetime="formatISO(task.dueDate)"
@@ -80,9 +85,9 @@
 		<router-link
 			:to="{ name: 'list.list', params: { listId: task.listId } }"
 			class="task-list"
-			v-if="!showList && currentList.id !== task.listId && $store.getters['lists/getListById'](task.listId) !== null"
-			v-tooltip="$t('task.detail.belongsToList', {list: $store.getters['lists/getListById'](task.listId).title})">
-			{{ $store.getters['lists/getListById'](task.listId).title }}
+			v-if="!showList && currentList.id !== task.listId && getListById(task.listId) !== null"
+			v-tooltip="$t('task.detail.belongsToList', {list: getListById(task.listId).title})">
+			{{ getListById(task.listId).title }}
 		</router-link>
 		<BaseButton
 			:class="{'is-favorite': task.isFavorite}"
@@ -96,19 +101,26 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue'
+import {defineComponent, type PropType} from 'vue'
+import {mapState} from 'pinia'
 
-import TaskModel from '../../../models/task'
-import PriorityLabel from './priorityLabel'
+import TaskModel from '@/models/task'
+import type {ITask} from '@/modelTypes/ITask'
+import PriorityLabel from './priorityLabel.vue'
 import TaskService from '../../../services/task'
-import Labels from './labels'
-import User from '../../misc/user'
+import Labels from '@/components/tasks/partials/labels.vue'
+import User from '@/components/misc/user.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
-import Fancycheckbox from '../../input/fancycheckbox'
-import DeferTask from './defer-task'
+import Fancycheckbox from '../../input/fancycheckbox.vue'
+import DeferTask from './defer-task.vue'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
-import {playPop} from '@/helpers/playPop'
-import ChecklistSummary from './checklist-summary'
+import ChecklistSummary from './checklist-summary.vue'
+import {formatDateSince, formatISO, formatDateLong} from '@/helpers/time/formatDate'
+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',
@@ -120,6 +132,7 @@ export default defineComponent({
 		}
 	},
 	components: {
+		ColorBubble,
 		BaseButton,
 		ChecklistSummary,
 		DeferTask,
@@ -130,7 +143,7 @@ export default defineComponent({
 	},
 	props: {
 		theTask: {
-			type: TaskModel,
+			type: Object as PropType<ITask>,
 			required: true,
 		},
 		isArchived: {
@@ -168,15 +181,19 @@ export default defineComponent({
 		document.removeEventListener('click', this.hideDeferDueDatePopup)
 	},
 	computed: {
+		...mapState(useListStore, {
+			getListById: 'getListById',
+		}),
 		listColor() {
-			const list = this.$store.getters['lists/getListById'](this.task.listId)
+			const list = this.getListById(this.task.listId)
 			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 {
@@ -188,12 +205,13 @@ export default defineComponent({
 		},
 	},
 	methods: {
-		async markAsDone(checked) {
+		formatDateSince,
+		formatISO,
+		formatDateLong,
+
+		async markAsDone(checked: boolean) {
 			const updateFunc = async () => {
-				const task = await this.taskService.update(this.task)
-				if (this.task.done) {
-					playPop()
-				}
+				const task = await useTaskStore().update(this.task)
 				this.task = task
 				this.$emit('task-updated', task)
 				this.$message.success({
@@ -213,7 +231,7 @@ export default defineComponent({
 			}
 		},
 
-		undoDone(checked) {
+		undoDone(checked: boolean) {
 			this.task.done = !this.task.done
 			this.markAsDone(!checked)
 		},
@@ -222,7 +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)
-			this.$store.dispatch('namespaces/loadNamespacesIfFavoritesDontExist')
+			useNamespaceStore().loadNamespacesIfFavoritesDontExist()
 		},
 		hideDeferDueDatePopup(e) {
 			if (!this.showDefer) {
@@ -276,11 +294,6 @@ export default defineComponent({
 		white-space: nowrap;
 	}
 
-	.color-bubble {
-		height: 10px;
-		flex: 0 0 10px;
-	}
-
 	.avatar {
 		border-radius: 50%;
 		vertical-align: bottom;

src/components/tasks/partials/sort.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import {PropType} from 'vue'
+import type {PropType} from 'vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 
 type Order = 'asc' | 'desc' | 'none'

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/useCopyToClipboard.ts

@@ -3,11 +3,42 @@ import {useI18n} from 'vue-i18n'
 
 export function useCopyToClipboard() {
 	const {t} = useI18n({useScope: 'global'})
-
+	
+	function fallbackCopyTextToClipboard(text: string) {
+		const textArea = document.createElement('textarea')
+		textArea.value = text
+		
+		// Avoid scrolling to bottom
+		textArea.style.top = '0'
+		textArea.style.left = '0'
+		textArea.style.position = 'fixed'
+	
+		document.body.appendChild(textArea)
+		textArea.focus()
+		textArea.select()
+	
+		try {
+			// NOTE: the execCommand is deprecated but as of 2022_09
+			// widely supported and works without https
+			const successful = document.execCommand('copy')
+			if (!successful) {
+				throw new Error()
+			}
+		} catch (err) {
+			error(t('misc.copyError'))
+		}
+	
+		document.body.removeChild(textArea)
+	}
+	
 	return async (text: string) => {
+		if (!navigator.clipboard) {
+			fallbackCopyTextToClipboard(text)
+			return
+		}
 		try {
 			await navigator.clipboard.writeText(text)
-		} catch {
+		} catch(e) {
 			error(t('misc.copyError'))
 		}
 	}

src/composables/useNamespaceSearch.ts

@@ -1,11 +1,11 @@
 import {ref, computed} from 'vue'
-import {useStore} from 'vuex'
+import {useNamespaceStore} from '@/stores/namespaces'
 
-export function useNameSpaceSearch() {
+export function useNamespaceSearch() {
 	const query = ref('')
 	
-	const store = useStore()
-	const namespaces = computed(() => store.getters['namespaces/searchNamespace'](query.value))
+	const namespaceStore = useNamespaceStore()
+	const namespaces = computed(() => namespaceStore.searchNamespace(query.value))
 	
 	function findNamespaces(newQuery: string) {
 		query.value = newQuery

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/composables/useTitle.ts

@@ -1,12 +1,21 @@
-import { computed, watchEffect } from 'vue'
-import type { ComputedGetter } from 'vue'
+import { computed } from 'vue'
+import type { Ref } from 'vue'
 
-import { setTitle } from '@/helpers/setTitle'
+import {useTitle as useTitleVueUse, resolveRef} from '@vueuse/core'
 
-export function useTitle(titleGetter: ComputedGetter<string>) {
-	const titleRef = computed(titleGetter)
+type UseTitleParameters = Parameters<typeof useTitleVueUse>
 
-	watchEffect(() => setTitle(titleRef.value))
+export function useTitle(...args: UseTitleParameters) {
 
-	return titleRef
+	const [newTitle, ...restArgs] = args
+
+  const pageTitle = resolveRef(newTitle) as Ref<string>
+
+	const completeTitle = computed(() => 
+		(typeof pageTitle.value === 'undefined' || pageTitle.value === '')
+		? 'Vikunja'
+		: `${pageTitle.value} | Vikunja`,
+	)
+
+	return useTitleVueUse(completeTitle, ...restArgs)
 }

src/constants/priorities.ts

@@ -0,0 +1,10 @@
+export const PRIORITIES = {
+	'UNSET': 0,
+	'LOW': 1,
+	'MEDIUM': 2,
+	'HIGH': 3,
+	'URGENT': 4,
+	'DO_NOW': 5,
+} as const
+
+export type Priority = typeof PRIORITIES[keyof typeof PRIORITIES]

src/constants/rights.ts

@@ -0,0 +1,7 @@
+export const RIGHTS = {
+  'READ': 0,
+  'READ_WRITE': 1,
+  'ADMIN': 2,
+} as const
+
+export type Right = typeof RIGHTS[keyof typeof RIGHTS]

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/directives/shortcut.ts

@@ -4,6 +4,9 @@ import {isAppleDevice} from '@/helpers/isAppleDevice'
 
 const directive: Directive = {
 	mounted(el, {value}) {
+		if(value === '') {
+			return
+		}
 		if (isAppleDevice() && value.includes('Control')) {
 			value = value.replace('Control', 'Meta')
 		}