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

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

.envrc

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

.eslintrc.cjs

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

.github/ISSUE_TEMPLATE/bug-report.yml

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

.github/ISSUE_TEMPLATE/config.yml

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

.gitignore

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

Dockerfile

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

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

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

cypress/e2e/task/task.spec.ts

@@ -12,15 +12,51 @@ import {LabelTaskFactory} from '../../factories/label_task'
 import {BucketFactory} from '../../factories/bucket'
 
 import '../../support/authenticateUser'
+import {TaskAttachmentFactory} from '../../factories/task_attachments'
+
+function addLabelToTaskAndVerify(labelTitle: string) {
+	cy.get('.task-view .action-buttons .button')
+		.contains('Add Labels')
+		.click()
+	cy.get('.task-view .details.labels-list .multiselect input')
+		.type(labelTitle)
+	cy.get('.task-view .details.labels-list .multiselect .search-results')
+		.children()
+		.first()
+		.click()
+
+	cy.get('.global-notification', { timeout: 4000 })
+		.should('contain', 'Success')
+	cy.get('.task-view .details.labels-list .multiselect .input-wrapper span.tag')
+		.should('exist')
+		.should('contain', labelTitle)
+}
+
+function uploadAttachmentAndVerify(taskId: number) {
+	cy.intercept(`${Cypress.env('API_URL')}/tasks/${taskId}/attachments`).as('uploadAttachment')
+	cy.get('.task-view .action-buttons .button')
+		.contains('Add Attachments')
+		.click()
+	cy.get('input[type=file]', {timeout: 1000})
+		.selectFile('cypress/fixtures/image.jpg', {force: true}) // The input is not visible, but on purpose
+	cy.wait('@uploadAttachment')
+
+	cy.get('.attachments .attachments .files a.attachment')
+		.should('exist')
+}
 
 describe('Task', () => {
 	let namespaces
 	let lists
+	let buckets
 
 	beforeEach(() => {
 		UserFactory.create(1)
 		namespaces = NamespaceFactory.create(1)
 		lists = ListFactory.create(1)
+		buckets = BucketFactory.create(1, {
+			list_id: lists[0].id,
+		})
 		TaskFactory.truncate()
 		UserListFactory.truncate()
 	})
@@ -80,6 +116,7 @@ describe('Task', () => {
 	describe('Task Detail View', () => {
 		beforeEach(() => {
 			TaskCommentFactory.truncate()
+			LabelTaskFactory.truncate()
 		})
 
 		it('Shows all task details', () => {
@@ -344,21 +381,31 @@ describe('Task', () => {
 
 			cy.visit(`/tasks/${tasks[0].id}`)
 
-			cy.get('.task-view .action-buttons .button')
+			addLabelToTaskAndVerify(labels[0].title)
-				.contains('Add Labels')
+		})
-				.click()
+		
-			cy.get('.task-view .details.labels-list .multiselect input')
+		it('Can add a label to a task and it shows up on the kanban board afterwards', () => {
-				.type(labels[0].title)
+			const tasks = TaskFactory.create(1, {
-			cy.get('.task-view .details.labels-list .multiselect .search-results')
+				id: 1,
-				.children()
+				list_id: lists[0].id,
-				.first()
+				bucket_id: buckets[0].id,
+			})
+			const labels = LabelFactory.create(1)
+			LabelTaskFactory.truncate()
+			
+			cy.visit(`/lists/${lists[0].id}/kanban`)
+			
+			cy.get('.bucket .task')
+				.contains(tasks[0].title)
 				.click()
 			
-			cy.get('.global-notification', { timeout: 4000 })
+			addLabelToTaskAndVerify(labels[0].title)
-				.should('contain', 'Success')
+			
-			cy.get('.task-view .details.labels-list .multiselect .input-wrapper span.tag')
+			cy.get('.modal-content .close')
-				.should('exist')
+				.click()
-				.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

@@ -2,7 +2,6 @@
 <html lang="en">
 <head>
 	<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.">

package.json

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

renovate.json

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

src/App.vue

@@ -18,7 +18,6 @@
 import {computed, watch, type Ref} from 'vue'
 import {useRouter} from 'vue-router'
 import {useRouteQuery} from '@vueuse/router'
-import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 import isTouchDevice from 'is-touch-device'
 import {success} from '@/message'
@@ -34,16 +33,17 @@ 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(() => authStore.authUser)
 const authLinkShare = computed(() => authStore.authLinkShare)

src/components/date/datemathHelp.vue

@@ -36,35 +36,35 @@
 			<tbody>
 			<tr>
 				<td><code>s</code></td>
-				<td>{{ $tc('time.seconds', 2) }}</td>
+				<td>{{ $t('input.datemathHelp.units.seconds') }}</td>
 			</tr>
 			<tr>
 				<td><code>m</code></td>
-				<td>{{ $tc('time.minutes', 2) }}</td>
+				<td>{{ $t('input.datemathHelp.units.minutes') }}</td>
 			</tr>
 			<tr>
 				<td><code>h</code></td>
-				<td>{{ $tc('time.hours', 2) }}</td>
+				<td>{{ $t('input.datemathHelp.units.hours') }}</td>
 			</tr>
 			<tr>
 				<td><code>H</code></td>
-				<td>{{ $tc('time.hours', 2) }}</td>
+				<td>{{ $t('input.datemathHelp.units.hours') }}</td>
 			</tr>
 			<tr>
 				<td><code>d</code></td>
-				<td>{{ $tc('time.days', 2) }}</td>
+				<td>{{ $t('input.datemathHelp.units.days') }}</td>
 			</tr>
 			<tr>
 				<td><code>w</code></td>
-				<td>{{ $tc('time.weeks', 2) }}</td>
+				<td>{{ $t('input.datemathHelp.units.weeks') }}</td>
 			</tr>
 			<tr>
 				<td><code>M</code></td>
-				<td>{{ $tc('time.months', 2) }}</td>
+				<td>{{ $t('input.datemathHelp.units.months') }}</td>
 			</tr>
 			<tr>
 				<td><code>y</code></td>
-				<td>{{ $tc('time.years', 2) }}</td>
+				<td>{{ $t('input.datemathHelp.units.years') }}</td>
 			</tr>
 			</tbody>
 		</table>

src/components/home/MenuButton.vue

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

src/components/home/TheNavigation.vue

@@ -70,7 +70,7 @@
 						{{ $t('navigation.privacy') }}
 					</dropdown-item>
 					<dropdown-item
-						@click="$store.commit('keyboardShortcutsActive', true)"
+						@click="baseStore.setKeyboardShortcutsActive(true)"
 					>
 						{{ $t('keyboardShortcuts.title') }}
 					</dropdown-item>
@@ -92,9 +92,7 @@
 
 <script setup lang="ts">
 import {ref, computed, onMounted, nextTick} from 'vue'
-import {useStore} from '@/store'
 
-import {QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
 import {RIGHTS as Rights} from '@/constants/rights'
 
 import Update from '@/components/home/update.vue'
@@ -107,21 +105,24 @@ import BaseButton from '@/components/base/BaseButton.vue'
 import MenuButton from '@/components/home/MenuButton.vue'
 
 import {getListTitle} from '@/helpers/getListTitle'
+
+import {useBaseStore} from '@/stores/base'
 import {useConfigStore} from '@/stores/config'
 import {useAuthStore} from '@/stores/auth'
 
-const store = useStore()
+const baseStore = useBaseStore()
-const authStore = useAuthStore()
+const currentList = computed(() => baseStore.currentList)
-const configStore = useConfigStore()
+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 currentList = computed(() => store.state.currentList)
+
-const background = computed(() => store.state.background)
+const configStore = useConfigStore()
 const imprintUrl = computed(() => configStore.legal.imprintUrl)
 const privacyPolicyUrl = computed(() => configStore.legal.privacyPolicyUrl)
-const canWriteCurrentList = computed(() => store.state.currentList.maxRight > Rights.READ)
-const menuActive = computed(() => store.state.menuActive)
 
 const usernameDropdown = ref()
 const listTitle = ref()
@@ -140,7 +141,7 @@ function logout() {
 }
 
 function openQuickActions() {
-	store.commit(QUICK_ACTIONS_ACTIVE, true)
+	baseStore.setQuickActionsActive(true)
 }
 </script>
 

src/components/home/contentAuth.vue

@@ -2,7 +2,7 @@
 	<div class="content-auth">
 		<BaseButton
 			v-if="menuActive"
-			@click="$store.commit('menuActive', false)"
+			@click="baseStore.setMenuActive(false)"
 			class="menu-hide-button d-print-none"
 		>
 			<icon icon="times"/>
@@ -26,7 +26,7 @@
 			>
 				<BaseButton
 					v-if="menuActive"
-					@click="$store.commit('menuActive', false)"
+					@click="baseStore.setMenuActive(false)"
 					class="mobile-overlay d-print-none"
 				/>
 
@@ -60,83 +60,34 @@
 </template>
 
 <script lang="ts" setup>
-import {watch, computed, shallowRef, watchEffect, type VNode, h} from 'vue'
+import {watch, computed} from 'vue'
-import {useStore} from '@/store'
+import {useRoute} from 'vue-router'
-import {useRoute, useRouter} from 'vue-router'
-import {useEventListener} from '@vueuse/core'
 
-import {CURRENT_LIST, KEYBOARD_SHORTCUTS_ACTIVE, MENU_ACTIVE} from '@/store/mutation-types'
-import {useLabelStore} from '@/stores/labels'
 import Navigation from '@/components/home/navigation.vue'
 import QuickActions from '@/components/quick-actions/quick-actions.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
-import {useAuthStore} from '@/stores/auth'
 
-function useRouteWithModal() {
+import {useBaseStore} from '@/stores/base'
-	const router = useRouter()
+import {useLabelStore} from '@/stores/labels'
-	const route = useRoute()
-	const backdropView = computed(() => route.fullPath && window.history.state.backdropView)
 
-	const routeWithModal = computed(() => {
+import {useRouteWithModal} from '@/composables/useRouteWithModal'
-		return backdropView.value
+import {useRenewTokenOnFocus} from '@/composables/useRenewTokenOnFocus'
-			? router.resolve(backdropView.value)
-			: route
-	})
-
-	const currentModal = shallowRef<VNode>()
-	watchEffect(() => {
-		if (!backdropView.value) {
-			currentModal.value = undefined
-			return
-		}
-
-		// logic from vue-router
-		// https://github.com/vuejs/vue-router-next/blob/798cab0d1e21f9b4d45a2bd12b840d2c7415f38a/src/RouterView.ts#L125
-		const routePropsOption = route.matched[0]?.props.default
-		const routeProps = routePropsOption
-			? routePropsOption === true
-				? route.params
-				: typeof routePropsOption === 'function'
-					? routePropsOption(route)
-					: routePropsOption
-			: null
-
-		currentModal.value = h(
-			route.matched[0]?.components.default,
-			routeProps,
-		)
-	})
-
-	function closeModal() {
-		const historyState = computed(() => route.fullPath && window.history.state)
-
-		if (historyState.value) {
-			router.back()
-		} else {
-			const backdropRoute = historyState.value?.backdropView && router.resolve(historyState.value.backdropView)
-			router.push(backdropRoute)
-		}
-	}
-
-	return {routeWithModal, currentModal, closeModal}
-}
 
 const {routeWithModal, currentModal, closeModal} = useRouteWithModal()
 
-const store = useStore()
+const baseStore = useBaseStore()
-
+const background = computed(() => baseStore.background)
-const background = computed(() => store.state.background)
+const blurHash = computed(() => baseStore.blurHash)
-const blurHash = computed(() => store.state.blurHash)
+const menuActive = computed(() => baseStore.menuActive)
-const menuActive = computed(() => store.state.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.
@@ -158,49 +109,14 @@ watch(() => route.name as string, (routeName) => {
 			routeName.startsWith('user.settings')
 		)
 	) {
-		store.dispatch(CURRENT_LIST, {list: null})
+		baseStore.handleSetCurrentList({list: null})
 	}
 })
 
 // TODO: Reset the title if the page component does not set one itself
 
-function useRenewTokenOnFocus() {
-	const router = useRouter()
-	const 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')
-		}
-	})
-}
-
 useRenewTokenOnFocus()
+
 const labelStore = useLabelStore()
 labelStore.loadAllLabels()
 </script>

src/components/home/contentLinkShare.vue

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

src/components/home/navigation.vue

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

src/components/input/colorPicker.vue

@@ -34,9 +34,8 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import {defineComponent} from 'vue'
+import {computed, ref, toRef, watch} from 'vue'
-
 import {createRandomID} from '@/helpers/randomId'
 
 const DEFAULT_COLORS = [
@@ -48,66 +47,57 @@ const DEFAULT_COLORS = [
 	'#00db60',
 ]
 
-export default defineComponent({
+const color = ref('')
-	name: 'colorPicker',
+const lastChangeTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
-	data() {
+const defaultColors = ref(DEFAULT_COLORS)
-		return {
+const colorListID = ref(createRandomID())
-			color: '',
-			lastChangeTimeout: null,
-			defaultColors: DEFAULT_COLORS,
-			colorListID: createRandomID(),
-		}
-	},
-	props: {
-		modelValue: {
-			type: String,
-			required: true,
-		},
-		menuPosition: {
-			type: String,
-			default: 'top',
-		},
-	},
-	emits: ['update:modelValue'],
-	watch: {
-		modelValue: {
-			handler(modelValue) {
-				this.color = modelValue
-			},
-			immediate: true,
-		},
-		color() {
-			this.update()
-		},
-	},
-	computed: {
-		isEmpty() {
-			return this.color === '#000000' || this.color === ''
-		},
-	},
-	methods: {
-		update(force = false) {
 
-			if(this.isEmpty && !force) {
+const props = defineProps({
-				return
+	modelValue: {
-			}
+		type: String,
-
+		required: true,
-			if (this.lastChangeTimeout !== null) {
+	},
-				clearTimeout(this.lastChangeTimeout)
+	menuPosition: {
-			}
+		type: String,
-
+		default: 'top',
-			this.lastChangeTimeout = setTimeout(() => {
-				this.$emit('update:modelValue', this.color)
-			}, 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 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,12 +88,10 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import {defineComponent} from 'vue'
+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'
 
@@ -102,146 +100,140 @@ import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
 import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import {createDateFromString} from '@/helpers/time/createDateFromString'
-import {mapState} from 'pinia'
 import {useAuthStore} from '@/stores/auth'
+import {useI18n} from 'vue-i18n'
 
-export default defineComponent({
+const props = defineProps({
-	name: 'datepicker',
+	modelValue: {
-	data() {
+		type: [Date, null, String] as PropType<Date | null | string>,
-		return {
+		validator: prop => prop instanceof Date || prop === null || typeof prop === 'string',
-			date: null,
+		default: null,
-			show: false,
-			changed: false,
-		}
 	},
-	components: {
+	chooseDateLabel: {
-		flatPickr,
+		type: String,
-		BaseButton,
+		default() {
-	},
+			const {t} = useI18n({useScope: 'global'})
-	props: {
+			return t('input.datepicker.chooseDate')
-		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,
 		},
 	},
-	emits: ['update:modelValue', 'close', 'close-on-change'],
+	disabled: {
-	mounted() {
+		type: Boolean,
-		document.addEventListener('click', this.hideDatePopup)
+		default: false,
-	},
-	beforeUnmount() {
-		document.removeEventListener('click', this.hideDatePopup)
-	},
-	watch: {
-		modelValue: {
-			handler: 'setDateValue',
-			immediate: true,
-		},
-	},
-	computed: {
-		...mapState(useAuthStore, {
-			weekStart: (state) => state.settings.weekStart,
-		}),
-		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.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 formatDate(this.date, 'yyy-LL-dd H:mm')
-			},
-		},
-	},
-	methods: {
-		formatDateShort,
-		setDateValue(newVal) {
-			if (newVal === null) {
-				this.date = null
-				return
-			}
-			this.date = createDateFromString(newVal)
-		},
-		updateData() {
-			this.changed = true
-			this.$emit('update:modelValue', 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 formatDate(newDate, 'E')
-		},
 	},
 })
+
+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"
@@ -66,245 +66,245 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import {defineComponent} from 'vue'
+import {computed, nextTick, onMounted, ref, toRefs, watch} from 'vue'
 
 import VueEasymde from './vue-easymde.vue'
 import {marked} from 'marked'
 import DOMPurify from 'dompurify'
-import {setupMarkdownRenderer} from '@/helpers/markdownRenderer'
 
 import {createEasyMDEConfig} from './editorConfig'
 
-import AttachmentModel from '../../models/attachment'
+import AttachmentModel from '@/models/attachment'
-import AttachmentService from '../../services/attachment'
+import AttachmentService from '@/services/attachment'
-import {findCheckboxesInText} from '../../helpers/checklistFromText'
+
+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({
+const props = defineProps({
-	name: 'editor',
+	modelValue: {
-	components: {
+		type: String,
-		VueEasymde,
+		default: '',
-		BaseButton,
-		ButtonLink,
 	},
-	props: {
+	placeholder: {
-		modelValue: {
+		type: String,
-			type: String,
+		default: '',
-			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,
-		},
-		// 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: '',
-		},
 	},
-	emits: ['update:modelValue'],
+	uploadEnabled: {
-	computed: {
+		type: Boolean,
-		showPreviewText() {
+		default: false,
-			return this.isPreviewActive && this.text === '' && this.emptyText !== ''
-		},
-		showEditButton() {
-			return !this.isEditActive && this.text !== ''
-		},
 	},
-	data() {
+	uploadCallback: {
-		return {
+		type: Function,
-			text: '',
-			changeTimeout: null,
-			isEditActive: false,
-			isPreviewActive: true,
-
-			preview: '',
-			attachmentService: null,
-			loadedAttachments: {},
-			config: createEasyMDEConfig({
-				placeholder: this.placeholder,
-				uploadImage: this.uploadEnabled,
-				imageUploadFunction: this.uploadCallback,
-			}),
-			checkboxId: createRandomID(),
-		}
 	},
-	watch: {
+	hasPreview: {
-		modelValue(modelValue) {
+		type: Boolean,
-			this.text = modelValue
+		default: true,
-			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()
-		},
 	},
-	mounted() {
+	previewIsDefault: {
-		if (this.modelValue !== '') {
+		type: Boolean,
-			this.text = this.modelValue
+		default: true,
-		}
-
-		if (this.previewIsDefault && this.hasPreview) {
-			this.$nextTick(this.renderPreview)
-			return
-		}
-
-		this.isPreviewActive = false
-		this.isEditActive = true
 	},
-	methods: {
+	isEditEnabled: {
-		// This gets triggered when only pasting content into the editor.
+		default: true,
-		// A change event would not get generated by that, an input event does.
+	},
-		// Therefore, we're using this handler to catch paste events.
+	bottomActions: {
-		// But because this also gets triggered when typing into the editor, we give
+		default: () => [],
-		// 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.
+	emptyText: {
-		handleInput(val) {
+		type: String,
-			// Don't bubble if the text is up to date
+		default: '',
-			if (val === this.text) {
+	},
-				return
+	showSave: {
-			}
+		type: Boolean,
-
+		default: false,
-			this.text = val
+	},
-			this.bubble(1000)
+	// If a key is passed the editor will go in "edit" mode when the key is pressed.
-		},
+	// Disabled if an empty string is passed.
-		bubble(timeout = 500) {
+	editShortcut: {
-			if (this.changeTimeout !== null) {
+		type: String,
-				clearTimeout(this.changeTimeout)
+		default: '',
-			}
-
-			this.changeTimeout = setTimeout(() => {
-				this.$emit('update:modelValue', 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() {
-			setupMarkdownRenderer(this.checkboxId)
-
-			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
-			}
-		},
 	},
 })
+
+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)"
+			@change="(event: Event) => updateData((event.target as HTMLInputElement).checked)"
-			type="checkbox"/>
+			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">
+<script setup lang="ts">
-import {defineComponent} from 'vue'
+import {ref, toRef, watch} from 'vue'
 
 import {createRandomID} from '@/helpers/randomId'
 
-export default defineComponent({
+const checked = ref(false)
-	name: 'fancycheckbox',
+const checkBoxId = `fancycheckbox_${createRandomID()}`
-	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 props = defineProps({
-			immediate: true,
+	modelValue: {
-		},
+		type: Boolean,
+		required: false,
 	},
-	methods: {
+	disabled: {
-		updateData(checked: boolean) {
+		type: Boolean,
-			this.checked = checked
+		required: false,
-			this.$emit('update:modelValue', checked)
+		default: false,
-			this.$emit('change', checked)
-		},
 	},
 })
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const modelValue = toRef(props, 'modelValue')
+
+watch(
+	modelValue,
+	newValue => {
+		checked.value = newValue
+	},
+	{immediate: true},
+)
+
+function updateData(newChecked: boolean) {
+	checked.value = newChecked
+	emit('update:modelValue', newChecked)
+	emit('change', newChecked)
+}
 </script>
 
 

src/components/input/multiselect.vue

@@ -39,11 +39,11 @@
 			<div class="search-results" :class="{'search-results-inline': inline}" v-if="searchResultsVisible">
 				<BaseButton
 					class="is-fullwidth"
-					v-for="(data, key) in filteredSearchResults"
+					v-for="(data, index) in filteredSearchResults"
-					:key="key"
+					:key="index"
-					:ref="`result-${key}`"
+					:ref="(el) => setResult(el, index)"
-					@keydown.up.prevent="() => preSelect(key - 1)"
+					@keydown.up.prevent="() => preSelect(index - 1)"
-					@keydown.down.prevent="() => preSelect(key + 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">
+<script setup lang="ts">
-import {defineComponent} from 'vue'
+import {computed, onBeforeUnmount, onMounted, ref, toRefs, watch, type ComponentPublicInstance, type PropType} from 'vue'
-import {i18n} from '@/i18n'
+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({
+const props = defineProps({
-	name: 'multiselect',
+	// When true, shows a loading spinner
-	components: {
+	loading: {
-		BaseButton,
+		type: Boolean,
+		default: false,
 	},
-	data() {
+	// The placeholder of the search input
-		return {
+	placeholder: {
-			query: '',
+		type: String,
-			searchTimeout: null,
+		default: '',
-			localLoading: false,
-			showSearchResults: false,
-			internalValue: null,
-		}
 	},
-	props: {
+	// The search results where the @search listener needs to put the results into
-		// When true, shows a loading spinner
+	searchResults: {
-		loading: {
+		type: Array as PropType<{[id: string]: any}>,
-			type: Boolean,
+		default: () => [],
-			default() {
+	},
-				return false
+	// 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: {
-		// The placeholder of the search input
+		type: String,
-		placeholder: {
+		default: '',
-			type: String,
+	},
-			default() {
+	// The object with the value, updated every time an entry is selected.
-				return ''
+	modelValue: {
-			},
+		default: null,
-		},
+	},
-		// The search results where the @search listener needs to put the results into
+	// If true, will provide an "add this as a new value" entry which fires an @create event when clicking on it.
-		searchResults: {
+	creatable: {
-			type: Array,
+		type: Boolean,
-			default() {
+		default: false,
-				return []
+	},
-			},
+	// The text shown next to the new value option.
-		},
+	createPlaceholder: {
-		// The name of the property of the searched object to show the user.
+		type: String,
-		// If empty the component will show all raw data of an entry.
+		default() {
-		label: {
+			const {t} = useI18n({useScope: 'global'}) 
-			type: String,
+			return t('input.multiselect.createPlaceholder')
-			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 text shown next to an option.
-	/**
+	selectPlaceholder: {
-	 * Available events:
+		type: String,
-	 *   @search: Triggered every time the search query input changes
+		default() {
-	 *   @select: Triggered every time an option from the search results is selected. Also triggers a change in v-model.
+			const {t} = useI18n({useScope: 'global'}) 
-	 *   @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.
+			return t('input.multiselect.selectPlaceholder')
-	 *   @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,
 		},
 	},
-	computed: {
+	// If true, allows for selecting multiple items. v-model will be an array with all selected values in that case.
-		searchResultsVisible() {
+	multiple: {
-			if (this.query === '' && !this.showEmpty) {
+		type: Boolean,
-				return false
+		default: 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
-		},
 	},
-	methods: {
+	// If true, displays the search results inline instead of using a dropdown.
-		// Searching will be triggered with a 200ms delay to avoid searching on every keyup event.
+	inline: {
-		search() {
+		type: Boolean,
-
+		default: false,
-			// Updating the query with a binding does not work on mobile for some reason,
+	},
-			// getting the value manual does.
+	// If true, shows search results when no query is specified.
-			this.query = this.$refs.searchInput.value
+	showEmpty: {
-
+		type: Boolean,
-			if (this.searchTimeout !== null) {
+		default: true,
-				clearTimeout(this.searchTimeout)
+	},
-				this.searchTimeout = null
+	// The delay in ms after which the search event will be fired. Used to avoid hitting the network on every keystroke.
-			}
+	searchDelay: {
-
+		type: Number,
-			this.localLoading = true
+		default: 200,
-
+	},
-			this.searchTimeout = setTimeout(() => {
+	closeAfterSelect: {
-				this.$emit('search', this.query)
+		type: Boolean,
-				setTimeout(() => {
+		default: true,
-					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()
-		},
 	},
 })
+
+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

@@ -55,13 +55,13 @@
 			>
 				{{ $t('menu.archive') }}
 			</dropdown-item>
-			<task-subscription
+			<Subscription
 				class="has-no-shadow"
 				:is-button="false"
 				entity="list"
 				:entity-id="list.id"
 				:model-value="list.subscription"
-				@update:model-value="sub => subscription = sub"
+				@update:model-value="setSubscriptionInStore"
 				type="dropdown"
 			/>
 			<dropdown-item
@@ -81,10 +81,12 @@ import {ref, computed, watchEffect, type PropType} from 'vue'
 import {isSavedFilter} from '@/helpers/savedFilter'
 import Dropdown from '@/components/misc/dropdown.vue'
 import DropdownItem from '@/components/misc/dropdown-item.vue'
-import TaskSubscription from '@/components/misc/subscription.vue'
+import Subscription from '@/components/misc/subscription.vue'
 import type {IList} from '@/modelTypes/IList'
 import type {ISubscription} from '@/modelTypes/ISubscription'
 import {useConfigStore} from '@/stores/config'
+import {useListStore} from '@/stores/lists'
+import {useNamespaceStore} from '@/stores/namespaces'
 
 const props = defineProps({
 	list: {
@@ -93,6 +95,8 @@ const props = defineProps({
 	},
 })
 
+const listStore = useListStore()
+const namespaceStore = useNamespaceStore()
 const subscription = ref<ISubscription | null>(null)
 watchEffect(() => {
 	subscription.value = props.list.subscription ?? null
@@ -100,4 +104,14 @@ watchEffect(() => {
 
 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/filters.vue

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

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

@@ -33,18 +33,15 @@
 </template>
 
 <script lang="ts" setup>
-import {useStore} from '@/store'
+import {useBaseStore} from '@/stores/base'
 
 import Shortcut from '@/components/misc/shortcut.vue'
 import Message from '@/components/misc/message.vue'
 
-import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
 import {KEYBOARD_SHORTCUTS as shortcuts} from './shortcuts'
 
-const store = useStore()
-
 function close() {
-	store.commit(KEYBOARD_SHORTCUTS_ACTIVE, false)
+	useBaseStore().setKeyboardShortcutsActive(false)
 }
 </script>
 

src/components/misc/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(
+watchEffect(() => {
-	() => props.enabled,
+	scrollLock.value = props.enabled
-	enabled => {
+})
-		scrollLock.value = enabled
-	},
-)
-
-onUnmounted(() => scrollLock.value = false)
 </script>
 
 <style lang="scss" scoped>

src/components/misc/ready.vue

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

src/components/misc/subscription.vue

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

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

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

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

@@ -61,7 +61,6 @@ import TeamService from '@/services/team'
 import NamespaceModel from '@/models/namespace'
 import TeamModel from '@/models/team'
 
-import {CURRENT_LIST, LOADING, LOADING_MODULE, QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
 import ListModel from '@/models/list'
 
 import BaseButton from '@/components/base/BaseButton.vue'
@@ -70,9 +69,12 @@ import {getHistory} from '@/modules/listHistory'
 import {parseTaskText, PrefixMode} from '@/modules/parseTaskText'
 import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
 import {PREFIXES} from '@/modules/parseTaskText'
+
+import {useBaseStore} from '@/stores/base'
 import {useListStore} from '@/stores/lists'
 import {useNamespaceStore} from '@/stores/namespaces'
 import {useLabelStore} from '@/stores/labels'
+import {useTaskStore} from '@/stores/tasks'
 
 const TYPE_LIST = 'list'
 const TYPE_TASK = 'task'
@@ -111,8 +113,10 @@ export default defineComponent({
 	},
 	computed: {
 		active() {
-			const active = this.$store.state[QUICK_ACTIONS_ACTIVE]
+			const active = useBaseStore().quickActionsActive
 			if (!active) {
+				// FIXME: computeds shouldn't have side effects.
+				// create a watcher instead
 				this.reset()
 			}
 			return active
@@ -180,8 +184,7 @@ export default defineComponent({
 		},
 		loading() {
 			return this.taskService.loading ||
-				(this.$store.state[LOADING] && this.$store.state[LOADING_MODULE] === 'namespaces') ||
+				useNamespaceStore().isLoading || useListStore().isLoading ||
-				(this.$store.state[LOADING] && this.$store.state[LOADING_MODULE] === 'lists') ||
 				this.teamService.loading
 		},
 		placeholder() {
@@ -218,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 = []
@@ -359,7 +363,7 @@ export default defineComponent({
 			}, 150)
 		},
 		closeQuickActions() {
-			this.$store.commit(QUICK_ACTIONS_ACTIVE, false)
+			useBaseStore().setQuickActionsActive(false)
 		},
 		doAction(type, item) {
 			switch (type) {
@@ -412,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,
 			})

src/components/tasks/add-task.vue

@@ -41,18 +41,18 @@
 </template>
 
 <script setup lang="ts">
-import {ref, watch, unref, computed} from 'vue'
+import {computed, ref, unref, watch} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {useStore} from '@/store'
+import {debouncedWatch, type MaybeRef, tryOnMounted, useWindowSize} from '@vueuse/core'
-import {tryOnMounted, debouncedWatch, useWindowSize, type MaybeRef} from '@vueuse/core'
 
 import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'
-import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
+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 cleanupTitle(title: string) {
-	return title.replace(/^((\* |\+ |- )(\[ \] )?)/g, '')
-}
 
 function useAutoHeightTextarea(value: MaybeRef<string>) {
 	const textarea = ref<HTMLInputElement>()
@@ -135,8 +135,8 @@ const newTaskTitle = ref('')
 const newTaskInput = useAutoHeightTextarea(newTaskTitle)
 
 const {t} = useI18n({useScope: 'global'})
-const store = useStore()
 const authStore = useAuthStore()
+const taskStore = useTaskStore()
 
 const errorMessage = ref('')
 
@@ -149,7 +149,7 @@ function resetEmptyTitleError(e) {
 	}
 }
 
-const loading = computed(() => store.state[LOADING] && store.state[LOADING_MODULE] === 'tasks')
+const loading = computed(() => taskStore.isLoading)
 async function addTask() {
 	if (newTaskTitle.value === '') {
 		errorMessage.value = t('list.create.addTitleRequired')
@@ -162,25 +162,59 @@ async function addTask() {
 	}
 
 	const taskTitleBackup = newTaskTitle.value
-	const newTasks = newTaskTitle.value.split(/[\r\n]+/).map(async uncleanedTitle => {
+	// This allows us to find the tasks with the title they had before being parsed
-		const title = cleanupTitle(uncleanedTitle)
+	// 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: 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')

src/components/tasks/gantt-component.vue

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

src/components/tasks/partials/attachments.vue

@@ -9,7 +9,7 @@
 
 		<input
 			v-if="editEnabled"
-			:disabled="attachmentService.loading || undefined"
+			:disabled="loading || undefined"
 			@change="uploadNewAttachment()"
 			id="files"
 			multiple
@@ -35,7 +35,15 @@
 				: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" scope="global">
@@ -78,6 +86,17 @@
 						>
 							{{ $t('misc.delete') }}
 						</BaseButton>
+						<BaseButton
+							v-if="editEnabled"
+							class="attachment-info-meta-button"
+							@click.prevent.stop="setCoverImage(task.coverImageAttachmentId === a.id ? null : a)"
+						>
+							{{
+								task.coverImageAttachmentId === a.id
+									? $t('task.attachment.unsetAsCover')
+									: $t('task.attachment.setAsCover')
+							}}
+						</BaseButton>
 					</p>
 				</div>
 			</a>
@@ -85,7 +104,7 @@
 
 		<x-button
 			v-if="editEnabled"
-			:disabled="attachmentService.loading"
+			:disabled="loading"
 			@click="filesRef?.click()"
 			class="mb-4"
 			icon="cloud-upload-alt"
@@ -138,13 +157,14 @@
 </template>
 
 <script setup lang="ts">
-import {ref, shallowReactive, computed, type PropType} from 'vue'
+import {ref, shallowReactive, computed} from 'vue'
 import {useDropZone} from '@vueuse/core'
 
 import User from '@/components/misc/user.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 
 import AttachmentService from '@/services/attachment'
+import {SUPPORTED_IMAGE_SUFFIX} from '@/models/attachment'
 import type AttachmentModel from '@/models/attachment'
 import type {IAttachment} from '@/modelTypes/IAttachment'
 import type {ITask} from '@/modelTypes/ITask'
@@ -155,38 +175,44 @@ import {uploadFiles, generateAttachmentUrl} from '@/helpers/attachments'
 import {getHumanSize} from '@/helpers/getHumanSize'
 import {useCopyToClipboard} from '@/composables/useCopyToClipboard'
 import {error, success} from '@/message'
+import {useTaskStore} from '@/stores/tasks'
+import {useI18n} from 'vue-i18n'
 
-const props = defineProps({
+const taskStore = useTaskStore()
-	taskId: {
+const {t} = useI18n({useScope: 'global'})
-		type: Number as PropType<ITask['id']>,
+
-		required: true,
+const props = withDefaults(defineProps<{
-	},
+	task: ITask,
-	initialAttachments: {
+	initialAttachments?: IAttachment[],
-		type: Array,
+	editEnabled: boolean,
-	},
+}>(), {
-	editEnabled: {
+	editEnabled: true,
-		default: 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)
+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
 
@@ -198,7 +224,7 @@ function uploadNewAttachment() {
 }
 
 function uploadFilesToTask(files: File[] | FileList) {
-	uploadFiles(attachmentService, props.taskId, files)
+	uploadFiles(attachmentService, props.task.id, files)
 }
 
 const attachmentToDelete = ref<AttachmentModel | null>(null)
@@ -214,19 +240,18 @@ async function deleteAttachment() {
 
 	try {
 		const r = await attachmentService.delete(attachmentToDelete.value)
-		attachmentStore.removeById(this.attachmentToDelete.id)
+		attachmentStore.removeById(attachmentToDelete.value.id)
 		success(r)
 		setAttachmentToDelete(null)
-	} catch(e) {
+	} catch (e) {
 		error(e)
 	}
 }
 
 const attachmentImageBlobUrl = ref<string | null>(null)
-const SUPPORTED_SUFFIX = ['.jpg', '.png', '.bmp', '.gif']
 
 async function viewOrDownload(attachment: AttachmentModel) {
-	if (SUPPORTED_SUFFIX.some((suffix) => attachment.file.name.endsWith(suffix))	) {
+	if (SUPPORTED_IMAGE_SUFFIX.some((suffix) => attachment.file.name.endsWith(suffix))) {
 		attachmentImageBlobUrl.value = await attachmentService.getBlobUrl(attachment)
 	} else {
 		downloadAttachment(attachment)
@@ -234,8 +259,15 @@ async function viewOrDownload(attachment: AttachmentModel) {
 }
 
 const copy = useCopyToClipboard()
+
 function copyUrl(attachment: IAttachment) {
-	copy(generateAttachmentUrl(props.taskId, attachment.id))
+	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>
 
@@ -394,5 +426,13 @@ function copyUrl(attachment: IAttachment) {
 	}
 }
 
+.is-task-cover {
+	background: var(--primary);
+	color: var(--white);
+	padding: .25rem .35rem;
+	border-radius: 4px;
+	font-size: .75rem;
+}
+
 @include modal-transition();
 </style>

src/components/tasks/partials/description.vue

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

src/components/tasks/partials/editAssignees.vue

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

src/components/tasks/partials/editLabels.vue

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

src/components/tasks/partials/heading.vue

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

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

@@ -6,138 +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">
+		<img
-			<Done class="kanban-card__done" :is-done="task.done" variant="small" />
+			v-if="coverImageBlobUrl"
-			<template v-if="task.identifier === ''">
+			:src="coverImageBlobUrl"
-				#{{ task.index }}
+			alt=""
-			</template>
+			class="cover-image"
-			<template v-else>
+		/>
-				{{ task.identifier }}
+		<div class="p-2">
-			</template>
+			<span class="task-id">
-		</span>
+				<Done class="kanban-card__done" :is-done="task.done" variant="small"/>
-		<span
+				<template v-if="task.identifier === ''">
-			:class="{'overdue': task.dueDate <= new Date() && !task.done}"
+					#{{ task.index }}
-			class="due-date"
+				</template>
-			v-if="task.dueDate > 0"
+				<template v-else>
-			v-tooltip="formatDateLong(task.dueDate)">
+					{{ task.identifier }}
-			<span class="icon">
+				</template>
-				<icon :icon="['far', 'calendar-alt']"/>
 			</span>
-			<time :datetime="formatISO(task.dueDate)">
+			<span
-				{{ formatDateSince(task.dueDate) }}
+				:class="{'overdue': task.dueDate <= new Date() && !task.done}"
-			</time>
+				class="due-date"
-		</span>
+				v-if="task.dueDate > 0"
-		<h3>{{ task.title }}</h3>
+				v-tooltip="formatDateLong(task.dueDate)">
-		<progress
+				<span class="icon">
-			class="progress is-small"
+					<icon :icon="['far', 'calendar-alt']"/>
-			v-if="task.percentDone > 0"
+				</span>
-			:value="task.percentDone * 100" max="100">
+				<time :datetime="formatISO(task.dueDate)">
-			{{ task.percentDone * 100 }}%
+					{{ formatDateSince(task.dueDate) }}
-		</progress>
+				</time>
-		<div class="footer">
+			</span>
-			<labels :labels="task.labels"/>
+			<h3>{{ task.title }}</h3>
-			<priority-label :priority="task.priority" :done="task.done"/>
+			<progress
-			<div class="assignees" v-if="task.assignees.length > 0">
+				class="progress is-small"
-				<user
+				v-if="task.percentDone > 0"
-					:avatar-size="24"
+				:value="task.percentDone * 100" max="100">
-					:key="task.id + 'assignee' + u.id"
+				{{ task.percentDone * 100 }}%
-					:show-username="false"
+			</progress>
-					:user="u"
+			<div class="footer">
-					v-for="u in task.assignees"
+				<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">
+<script lang="ts" setup>
-import {defineComponent, type PropType} from 'vue'
+import {ref, computed, watch} from 'vue'
+import {useRouter} from 'vue-router'
 
-import PriorityLabel from '../../../components/tasks/partials/priorityLabel.vue'
+import PriorityLabel from '@/components/tasks/partials/priorityLabel.vue'
-import User from '../../../components/misc/user.vue'
+import User from '@/components/misc/user.vue'
 import Done from '@/components/misc/Done.vue'
-import Labels from '../../../components/tasks/partials/labels.vue'
+import Labels from '@/components/tasks/partials/labels.vue'
 import ChecklistSummary from './checklist-summary.vue'
-import {TASK_DEFAULT_COLOR} from '@/models/task'
+
+import {TASK_DEFAULT_COLOR, getHexColor} from '@/models/task'
 import type {ITask} from '@/modelTypes/ITask'
+import {SUPPORTED_IMAGE_SUFFIX} from '@/models/attachment'
+import AttachmentService from '@/services/attachment'
 
 import {formatDateLong, formatISO, formatDateSince} from '@/helpers/time/formatDate'
 import {colorIsDark} from '@/helpers/color/colorIsDark'
+import {useTaskStore} from '@/stores/tasks'
 
-export default defineComponent({
+const router = useRouter()
-	name: 'kanban-card',
+
-	components: {
+const loadingInternal = ref(false)
-		ChecklistSummary,
+
-		Done,
+const props = withDefaults(defineProps<{
-		PriorityLabel,
+	task: ITask,
-		User,
+	loading: boolean,
-		Labels,
+}>(), {
-	},
+	loading: false,
-	data() {
-		return {
-			loadingInternal: false,
-			TASK_DEFAULT_COLOR,
-		}
-	},
-	props: {
-		task: {
-			type: Object as PropType<ITask>,
-			required: true,
-		},
-		loading: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-	},
-	computed: {
-		color() {
-			return this.task.getHexColor
-				? this.task.getHexColor() 
-				: TASK_DEFAULT_COLOR
-		},
-	},
-	methods: {
-		formatDateLong,
-		formatISO,
-		formatDateSince,
-		colorIsDark,
-		async toggleTaskDone(task: ITask) {
-			this.loadingInternal = true
-			try {
-				const done = !task.done
-				await this.$store.dispatch('tasks/update', {
-					...task,
-					done,
-				})
-			} finally {
-				this.loadingInternal = false
-			}
-		},
-		openTaskDetail() {
-			this.$router.push({
-				name: 'task.detail',
-				params: { id: this.task.id },
-				state: { backdropView: this.$router.currentRoute.value.fullPath },
-			})
-		},
-	},
 })
+
+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>
@@ -149,12 +158,11 @@ $task-background: var(--white);
 	cursor: pointer;
 	box-shadow: var(--shadow-xs);
 	display: block;
-	border: 3px solid transparent;
 
 	font-size: .9rem;
-	padding: .4rem;
 	border-radius: $radius;
 	background: $task-background;
+	overflow: hidden;
 
 	&.loader-container.is-loading::after {
 		width: 1.5rem;

src/components/tasks/partials/relatedTasks.vue

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

src/components/tasks/partials/repeatAfter.vue

@@ -48,11 +48,11 @@
 							@change="updateData"
 							:disabled="disabled || undefined"
 						>
-							<option value="hours">{{ $tc('time.hours', 2) }}</option>
+							<option value="hours">{{ $t('task.repeat.hours') }}</option>
-							<option value="days">{{ $tc('time.days', 2) }}</option>
+							<option value="days">{{ $t('task.repeat.days') }}</option>
-							<option value="weeks">{{ $tc('time.weeks', 2) }}</option>
+							<option value="weeks">{{ $t('task.repeat.weeks') }}</option>
-							<option value="months">{{ $tc('time.months', 2) }}</option>
+							<option value="months">{{ $t('task.repeat.months') }}</option>
-							<option value="years">{{ $tc('time.years', 2) }}</option>
+							<option value="years">{{ $t('task.repeat.years') }}</option>
 						</select>
 					</div>
 				</div>

src/components/tasks/partials/singleTaskInList.vue

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

src/composables/useRenewTokenOnFocus.ts

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

src/composables/useRouteWithModal.ts

@@ -0,0 +1,54 @@
+import { computed, shallowRef, watchEffect, h, type VNode } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+export function useRouteWithModal() {
+	const router = useRouter()
+	const route = useRoute()
+	const backdropView = computed(() => route.fullPath && window.history.state.backdropView)
+
+	const routeWithModal = computed(() => {
+		return backdropView.value
+			? router.resolve(backdropView.value)
+			: route
+	})
+
+	const currentModal = shallowRef<VNode>()
+	watchEffect(() => {
+		if (!backdropView.value) {
+			currentModal.value = undefined
+			return
+		}
+
+		// logic from vue-router
+		// https://github.com/vuejs/vue-router-next/blob/798cab0d1e21f9b4d45a2bd12b840d2c7415f38a/src/RouterView.ts#L125
+		const routePropsOption = route.matched[0]?.props.default
+		const routeProps = routePropsOption
+			? routePropsOption === true
+				? route.params
+				: typeof routePropsOption === 'function'
+					? routePropsOption(route)
+					: routePropsOption
+			: null
+
+		const component = route.matched[0]?.components?.default
+
+		if (!component) {
+			currentModal.value = undefined
+			return
+		}
+		currentModal.value = h(component, routeProps)
+	})
+
+	function closeModal() {
+		const historyState = computed(() => route.fullPath && window.history.state)
+
+		if (historyState.value) {
+			router.back()
+		} else {
+			const backdropRoute = historyState.value?.backdropView && router.resolve(historyState.value.backdropView)
+			router.push(backdropRoute)
+		}
+	}
+
+	return {routeWithModal, currentModal, closeModal}
+}

src/directives/focus.ts

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

src/helpers/attachments.ts

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

src/helpers/auth.ts

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

src/helpers/calculateItemPosition.ts

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

src/helpers/defaultReminder.test.ts

@@ -1,63 +0,0 @@
-import {describe, it, expect, vi, afterEach, beforeEach} from 'vitest'
-import {
-	AMOUNTS_IN_SECONDS,
-	getDefaultReminderSettings,
-	getSavedReminderSettings,
-	parseSavedReminderAmount,
-	saveDefaultReminder,
-} from '@/helpers/defaultReminder'
-import * as exports from '@/helpers/defaultReminder'
-
-describe('Default Reminder Save', () => {
-	it('Should save a default reminder with minutes', () => {
-		const spy = vi.spyOn(window.localStorage, 'setItem')
-		saveDefaultReminder(true, 'minutes', 5)
-
-		expect(spy).toHaveBeenCalledWith('defaultReminder', '{"enabled":true,"amount":300}')
-	})
-	it('Should save a default reminder with hours', () => {
-		const spy = vi.spyOn(window.localStorage, 'setItem')
-		saveDefaultReminder(true, 'hours', 5)
-		
-		expect(spy).toHaveBeenCalledWith('defaultReminder', '{"enabled":true,"amount":18000}')
-	})
-	it('Should save a default reminder with days', () => {
-		const spy = vi.spyOn(window.localStorage, 'setItem')
-		saveDefaultReminder(true, 'days', 5)
-
-		expect(spy).toHaveBeenCalledWith('defaultReminder', '{"enabled":true,"amount":432000}')
-	})
-	it('Should save a default reminder with months', () => {
-		const spy = vi.spyOn(window.localStorage, 'setItem')
-		saveDefaultReminder(true, 'months', 5)
-
-		expect(spy).toHaveBeenCalledWith('defaultReminder', '{"enabled":true,"amount":12960000}')
-	})
-})
-
-describe('Default Reminder Load', () => {
-	it('Should parse minutes', () => {
-		const settings = parseSavedReminderAmount(5 * AMOUNTS_IN_SECONDS.minutes)
-		
-		expect(settings.amount).toBe(5)
-		expect(settings.type).toBe('minutes')
-	})
-	it('Should parse hours', () => {
-		const settings = parseSavedReminderAmount(5 * AMOUNTS_IN_SECONDS.hours)
-
-		expect(settings.amount).toBe(5)
-		expect(settings.type).toBe('hours')
-	})
-	it('Should parse days', () => {
-		const settings = parseSavedReminderAmount(5 * AMOUNTS_IN_SECONDS.days)
-
-		expect(settings.amount).toBe(5)
-		expect(settings.type).toBe('days')
-	})
-	it('Should parse months', () => {
-		const settings = parseSavedReminderAmount(5 * AMOUNTS_IN_SECONDS.months)
-
-		expect(settings.amount).toBe(5)
-		expect(settings.type).toBe('months')
-	})
-})

src/helpers/defaultReminder.ts

@@ -1,89 +0,0 @@
-const DEFAULT_REMINDER_KEY = 'defaultReminder'
-
-export const AMOUNTS_IN_SECONDS: {
-	[type in SavedReminderSettings['type']]: number
-} = {
-	minutes: 60,
-	hours: 60 * 60,
-	days: 60 * 60 * 24,
-	months: 60 * 60 * 24 * 30,
-} as const
-
-interface DefaultReminderSettings {
-	enabled: boolean,
-	amount: number,
-}
-
-interface SavedReminderSettings {
-	enabled: boolean,
-	amount: number,
-	type: 'minutes' | 'hours' | 'days' | 'months',
-}
-
-function calculateDefaultReminderSeconds(type: SavedReminderSettings['type'], amount: number): number {
-	return amount * (AMOUNTS_IN_SECONDS[type] || 0)
-}
-
-export function saveDefaultReminder(enabled: boolean, type: SavedReminderSettings['type'], amount: number) {
-	const defaultReminderSeconds = calculateDefaultReminderSeconds(type, amount)
-	localStorage.setItem(DEFAULT_REMINDER_KEY, JSON.stringify(<DefaultReminderSettings>{
-		enabled,
-		amount: defaultReminderSeconds,
-	}))
-}
-
-export function getDefaultReminderAmount(): number | null {
-	const settings = getDefaultReminderSettings()
-
-	return settings?.enabled
-		? settings.amount
-		: null
-}
-
-export function getDefaultReminderSettings(): DefaultReminderSettings | null {
-	const s: string | null = window.localStorage.getItem(DEFAULT_REMINDER_KEY)
-	if (s === null) {
-		return null
-	}
-
-	return JSON.parse(s)
-}
-
-export function parseSavedReminderAmount(amountSeconds: number): SavedReminderSettings {
-	const amountMinutes = amountSeconds / 60
-	const settings: SavedReminderSettings = {
-		enabled: true, // We're assuming the caller to have checked this properly
-		amount: amountMinutes,
-		type: 'minutes',
-	}
-
-	if ((amountMinutes / 60 / 24) % 30 === 0) {
-		settings.amount = amountMinutes / 60 / 24 / 30
-		settings.type = 'months'
-	} else if ((amountMinutes / 60) % 24 === 0) {
-		settings.amount = amountMinutes / 60 / 24
-		settings.type = 'days'
-	} else if (amountMinutes % 60 === 0) {
-		settings.amount = amountMinutes / 60
-		settings.type = 'hours'
-	}
-
-	return settings
-}
-
-export function getSavedReminderSettings(): SavedReminderSettings | null {
-	const s = getDefaultReminderSettings()
-	if (s === null) {
-		return null
-	}
-
-	if (!s.enabled) {
-		return {
-			enabled: false,
-			type: 'minutes',
-			amount: 0,
-		}
-	}
-
-	return parseSavedReminderAmount(s.amount)
-}

src/helpers/markdownRenderer.ts

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

src/helpers/objectIsEmpty.ts

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

src/helpers/parseSubtasksViaIndention.test.ts

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

src/helpers/parseSubtasksViaIndention.ts

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

src/helpers/randomId.ts

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

src/helpers/redirectToProvider.ts

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

src/helpers/saveListView.ts

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

src/helpers/scrollIntoView.ts

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

src/helpers/time/calculateDayInterval.ts

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

src/helpers/time/formatDate.ts

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

src/helpers/time/parseDate.ts

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

src/helpers/time/parseDateOrString.ts

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

src/helpers/utils.ts

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

src/i18n/lang/ca-ES.json

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

src/i18n/lang/cs-CZ.json

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

src/i18n/lang/de-DE.json

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

src/i18n/lang/de-swiss.json

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

src/i18n/lang/en.json

@@ -87,11 +87,7 @@
         "language": "Language",
         "defaultList": "Default List",
         "timezone": "Time Zone",
-        "overdueTasksRemindersTime": "Overdue tasks reminder email time",
+        "overdueTasksRemindersTime": "Overdue tasks reminder email time"
-        "defaultReminder": "Set a default task reminder",
-        "defaultReminderHint": "If enabled, Vikunja will automatically create a reminder for a task if you set a due date and the task does not have any reminders yet.",
-        "defaultReminderAmount": "Default task reminder amount",
-        "defaultReminderAmountBefore": "before the due date of a task"
       },
       "totp": {
         "title": "Two Factor Authentication",
@@ -173,6 +169,7 @@
     "title": "List Title",
     "color": "Color",
     "lists": "Lists",
+    "list": "List",
     "search": "Type to search for a list…",
     "searchSelect": "Click or press enter to select this list",
     "shared": "Shared Lists",
@@ -551,16 +548,19 @@
       "fromto": "{from} to {to}",
       "ranges": {
         "today": "Today",
+        
         "thisWeek": "This Week",
         "restOfThisWeek": "The Rest of This Week",
         "nextWeek": "Next Week",
         "next7Days": "Next 7 Days",
         "lastWeek": "Last Week",
+        
         "thisMonth": "This Month",
         "restOfThisMonth": "The Rest of This Month",
         "nextMonth": "Next Month",
         "next30Days": "Next 30 Days",
         "lastMonth": "Last Month",
+        
         "thisYear": "This Year",
         "restOfThisYear": "The Rest of This Year"
       }
@@ -577,6 +577,15 @@
       "roundDay": "Round down to the nearest day",
       "supportedUnits": "Supported time units are:",
       "someExamples": "Some examples of time expressions:",
+      "units": {
+        "seconds": "Seconds",
+        "minutes": "Minutes",
+        "hours": "Hours",
+        "days": "Days",
+        "weeks": "Weeks",
+        "months": "Months",
+        "years": "Years"
+      },
       "examples": {
         "now": "Right now",
         "in24h": "In 24h",
@@ -588,15 +597,6 @@
       }
     }
   },
-  "time": {
-    "seconds": "Second | Seconds",
-    "minutes": "Minute | Minutes",
-    "hours": "Hour | Hours",
-    "days": "Day | Days",
-    "weeks": "Week | Weeks",
-    "months": "Month | Months",
-    "years": "Year | Years"
-  },
   "task": {
     "task": "Task",
     "new": "Create a new task",
@@ -676,13 +676,23 @@
       "updated": "Updated"
     },
     "subscription": {
-      "subscribedThroughParent": "You can't unsubscribe here because you are subscribed to this {entity} through its {parent}.",
+      "subscribedListThroughParentNamespace": "You can't unsubscribe here because you are subscribed to this list through its namespace.",
-      "subscribed": "You are currently subscribed to this {entity} and will receive notifications for changes.",
+      "subscribedTaskThroughParentNamespace": "You can't unsubscribe here because you are subscribed to this task through its namespace.",
-      "notSubscribed": "You are not subscribed to this {entity} and won't receive notifications for changes.",
+      "subscribedTaskThroughParentList": "You can't unsubscribe here because you are subscribed to this task through its list.",
+      "subscribedNamespace": "You are currently subscribed to this namespace and will receive notifications for changes.",
+      "notSubscribedNamespace": "You are not subscribed to this namespace and won't receive notifications for changes.",
+      "subscribedList": "You are currently subscribed to this list and will receive notifications for changes.",
+      "notSubscribedList": "You are not subscribed to this list and won't receive notifications for changes.",
+      "subscribedTask": "You are currently subscribed to this task and will receive notifications for changes.",
+      "notSubscribedTask": "You are not subscribed to this task and won't receive notifications for changes.",
       "subscribe": "Subscribe",
       "unsubscribe": "Unsubscribe",
-      "subscribeSuccess": "You are now subscribed to this {entity}",
+      "subscribeSuccessNamespace": "You are now subscribed to this namespace",
-      "unsubscribeSuccess": "You are now unsubscribed to this {entity}"
+      "unsubscribeSuccessNamespace": "You are now unsubscribed to this namespace",
+      "subscribeSuccessList": "You are now subscribed to this list",
+      "unsubscribeSuccessList": "You are now unsubscribed to this list",
+      "subscribeSuccessTask": "You are now subscribed to this task",
+      "unsubscribeSuccessTask": "You are now unsubscribed to this task"
     },
     "attachment": {
       "title": "Attachments",
@@ -694,7 +704,11 @@
       "deleteTooltip": "Delete this attachment",
       "deleteText1": "Are you sure you want to delete the attachment {filename}?",
       "copyUrl": "Copy URL",
-      "copyUrlTooltip": "Copy the url of this attachment for usage in text"
+      "copyUrlTooltip": "Copy the url of this attachment for usage in text",
+      "setAsCover": "Make cover",
+      "unsetAsCover": "Remove cover",
+      "successfullyChangedCoverImage": "The cover image was successfully changed.",
+      "usedAsCover": "Cover image"
     },
     "comment": {
       "title": "Comments",
@@ -843,6 +857,12 @@
         "text1": "Are you sure you want to remove this user from the team?",
         "text2": "They will lose access to all lists and namespaces this team has access to. This CANNOT BE UNDONE!",
         "success": "The user was successfully deleted from the team."
+      },
+      "leave": {
+        "title": "Leave team",
+        "text1": "Are you sure you want to leave this team?",
+        "text2": "You will loose access to all lists and namespaces this team has access to. If you change your mind you'll need a team admin to add you again.",
+        "success": "You have successfully left the team."
       }
     },
     "attributes": {

src/i18n/lang/es-ES.json

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

src/i18n/lang/fr-FR.json

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

src/i18n/lang/it-IT.json

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

src/i18n/lang/nl-NL.json

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

src/i18n/lang/pl-PL.json

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

src/i18n/lang/pt-BR.json

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

src/i18n/lang/pt-PT.json

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

src/i18n/lang/ro-RO.json

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

src/i18n/lang/ru-RU.json

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

src/i18n/lang/sk-SK.json

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

src/i18n/lang/sv-SE.json

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

src/i18n/lang/tr-TR.json

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

src/i18n/lang/vi-VN.json

@@ -169,6 +169,14 @@
     "title": "Tên Danh sách",
     "color": "Màu sắc",
     "lists": "Danh sách",
+    "list": {
+      "title": "Danh sách",
+      "add": "Thêm",
+      "addPlaceholder": "Thêm việc cần làm…",
+      "empty": "Danh sách này đang trống trơn.",
+      "newTaskCta": "Thêm một công việc mới.",
+      "editTask": "Chỉnh sửa Công việc"
+    },
     "search": "Gõ để tìm kiếm danh sách…",
     "searchSelect": "Nhấp hoặc nhấn enter để chọn danh sách này",
     "shared": "Đang tham gia",
@@ -270,14 +278,6 @@
         "delete": "Xóa"
       }
     },
-    "list": {
-      "title": "Danh sách",
-      "add": "Thêm",
-      "addPlaceholder": "Thêm việc cần làm…",
-      "empty": "Danh sách này đang trống trơn.",
-      "newTaskCta": "Thêm một công việc mới.",
-      "editTask": "Chỉnh sửa Công việc"
-    },
     "gantt": {
       "title": "Biểu đồ Gantt",
       "showTasksWithoutDates": "Hiển thị các nhiệm vụ không cài đặt ngày",
@@ -672,13 +672,23 @@
       "updated": "Đã cập nhật"
     },
     "subscription": {
-      "subscribedThroughParent": "Bạn không thể hủy theo dõi ở đây vì bạn đã theo dõi {entity} này thông qua {parent} của nó.",
+      "subscribedListThroughParentNamespace": "You can't unsubscribe here because you are subscribed to this list through its namespace.",
-      "subscribed": "Bạn đang theo dõi {entity} này và sẽ nhận được thông báo về các thay đổi.",
+      "subscribedTaskThroughParentNamespace": "You can't unsubscribe here because you are subscribed to this task through its namespace.",
-      "notSubscribed": "Bạn chưa theo dõi {entity} này và sẽ không nhận được thông báo về các thay đổi.",
+      "subscribedTaskThroughParentList": "You can't unsubscribe here because you are subscribed to this task through its list.",
+      "subscribedNamespace": "You are currently subscribed to this namespace and will receive notifications for changes.",
+      "notSubscribedNamespace": "You are not subscribed to this namespace and won't receive notifications for changes.",
+      "subscribedList": "You are currently subscribed to this list and will receive notifications for changes.",
+      "notSubscribedList": "You are not subscribed to this list and won't receive notifications for changes.",
+      "subscribedTask": "You are currently subscribed to this task and will receive notifications for changes.",
+      "notSubscribedTask": "You are not subscribed to this task and won't receive notifications for changes.",
       "subscribe": "Theo dõi",
       "unsubscribe": "Bỏ theo dõi",
-      "subscribeSuccess": "Bạn hiện đã theo dõi {entity} này",
+      "subscribeSuccessNamespace": "You are now subscribed to this namespace",
-      "unsubscribeSuccess": "Bạn đã bỏ theo dõi {entity} này"
+      "unsubscribeSuccessNamespace": "You are now unsubscribed to this namespace",
+      "subscribeSuccessList": "You are now subscribed to this list",
+      "unsubscribeSuccessList": "You are now unsubscribed to this list",
+      "subscribeSuccessTask": "You are now subscribed to this task",
+      "unsubscribeSuccessTask": "You are now unsubscribed to this task"
     },
     "attachment": {
       "title": "Tệp đính kèm",
@@ -690,7 +700,11 @@
       "deleteTooltip": "Xóa tệp đính kèm này",
       "deleteText1": "Bạn có chắc chắn muốn xóa tệp đính kèm {filename} không?",
       "copyUrl": "Sao chép URL",
-      "copyUrlTooltip": "Sao chép url của tệp đính kèm này để sử dụng trong văn bản"
+      "copyUrlTooltip": "Sao chép url của tệp đính kèm này để sử dụng trong văn bản",
+      "setAsCover": "Make cover",
+      "unsetAsCover": "Remove cover",
+      "successfullyChangedCoverImage": "The cover image was successfully changed.",
+      "usedAsCover": "Cover image"
     },
     "comment": {
       "title": "Bình luận",
@@ -839,6 +853,12 @@
         "text1": "Bạn có chắc muốn đưa thành viên này ra khỏi Team không?",
         "text2": "Họ sẽ mất quyền truy cập vào tất cả danh sách và góc làm việc mà Team này có quyền truy cập. Điều đó KHÔNG THỂ HOÀN TÁC!",
         "success": "Thành viên đã rời khỏi Team."
+      },
+      "leave": {
+        "title": "Leave team",
+        "text1": "Are you sure you want to leave this team?",
+        "text2": "You will loose access to all lists and namespaces this team has access to. If you change your mind you'll need a team admin to add you again.",
+        "success": "You have successfully left the team."
       }
     },
     "attributes": {

src/i18n/lang/zh-CN.json

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

src/indexes/index.ts

@@ -31,15 +31,14 @@ export const createNewIndexer = (name: string, fieldsToIndex: string[]) => {
 		return index.update(item.id, item)
 	}
 
-	function search(query: string | null): number[] | null {
+	function search(query: string | null) {
 		if (query === '' || query === null) {
 			return null
 		}
 
-		// @ts-ignore
 		return index.search(query)
 				?.flatMap(r => r.result)
-				.filter((value, index, self) => self.indexOf(value) === index)
+				.filter((value, index, self) => self.indexOf(value) === index) as number[]
 			|| null
 	}
 

src/main.ts

@@ -1,8 +1,8 @@
 import {createApp} from 'vue'
 
-import App from './App.vue'
+import pinia from './pinia'
 import router from './router'
-import { createPinia } from 'pinia'
+import App from './App.vue'
 
 import {error, success} from './message'
 
@@ -14,8 +14,6 @@ import Notifications from '@kyvg/vue3-notification'
 // PWA
 import './registerServiceWorker'
 
-// Vuex
-import { store, key } from './store'
 // i18n
 import {i18n} from './i18n'
 
@@ -36,8 +34,8 @@ if (apiUrlFromStorage !== null) {
 }
 
 // Make sure the api url does not contain a / at the end
-if (window.API_URL.substr(window.API_URL.length - 1, window.API_URL.length) === '/') {
+if (window.API_URL.slice(window.API_URL.length - 1, window.API_URL.length) === '/') {
-	window.API_URL = window.API_URL.substr(0, window.API_URL.length - 1)
+	window.API_URL = window.API_URL.slice(0, window.API_URL.length - 1)
 }
 
 const app = createApp(App)
@@ -46,9 +44,8 @@ app.use(Notifications)
 
 // directives
 import focus from '@/directives/focus'
-// @ts-ignore The export does exist, ts just doesn't find it.
+import { VTooltip } from 'floating-vue'
-import { VTooltip } from 'v-tooltip'
+import 'floating-vue/dist/style.css'
-import 'v-tooltip/dist/v-tooltip.css'
 import shortcut from '@/directives/shortcut'
 import cypress from '@/directives/cypress'
 
@@ -105,10 +102,7 @@ if (window.SENTRY_ENABLED) {
 	import('./sentry').then(sentry => sentry.default(app, router))
 }
 
-const pinia = createPinia()
 app.use(pinia)
-
-app.use(store, key) // pass the injection key
 app.use(router)
 app.use(i18n)
 

src/modelTypes/IList.ts

@@ -15,7 +15,7 @@ export interface IList extends IAbstract {
 	isArchived: boolean
 	hexColor: string
 	identifier: string
-	backgroundInformation: any // FIXME: improve type
+	backgroundInformation: unknown | null // FIXME: improve type
 	isFavorite: boolean
 	subscription: ISubscription
 	position: number

src/modelTypes/ITask.ts

@@ -1,4 +1,4 @@
-import type { Priority } from '@/constants/priorities'
+import type {Priority} from '@/constants/priorities'
 
 import type {IAbstract} from './IAbstract'
 import type {IUser} from './IUser'
@@ -11,6 +11,7 @@ import type {IBucket} from './IBucket'
 import type {IRelationKind} from '@/types/IRelationKind'
 import type {IRepeatAfter} from '@/types/IRepeatAfter'
 import type {IRepeatMode} from '@/types/IRepeatMode'
+
 export interface ITask extends IAbstract {
 	id: number
 	title: string
@@ -31,8 +32,9 @@ export interface ITask extends IAbstract {
 	parentTaskId: ITask['id']
 	hexColor: string
 	percentDone: number
-	relatedTasks: Partial<Record<IRelationKind, ITask[]>>,
+	relatedTasks: Partial<Record<IRelationKind, ITask[]>>
 	attachments: IAttachment[]
+	coverImageAttachmentId: IAttachment['id']
 	identifier: string
 	index: number
 	isFavorite: boolean

src/modelTypes/IUserSettings.ts

@@ -12,6 +12,4 @@ export interface IUserSettings extends IAbstract {
 	weekStart: 0 | 1 | 2 | 3 | 4 | 5 | 6
 	timezone: string
 	language: string
-	defaultReminder: boolean
-	defaultReminderAmount: number // The amount of seconds a reminder should be set before a given due date
 }

src/models/attachment.ts

@@ -5,6 +5,8 @@ import type { IUser } from '@/modelTypes/IUser'
 import type { IFile } from '@/modelTypes/IFile'
 import type { IAttachment } from '@/modelTypes/IAttachment'
 
+export const SUPPORTED_IMAGE_SUFFIX = ['.jpg', '.png', '.bmp', '.gif']
+
 export default class AttachmentModel extends AbstractModel<IAttachment> implements IAttachment {
 	id = 0
 	taskId = 0

src/models/list.ts

@@ -19,7 +19,7 @@ export default class ListModel extends AbstractModel<IList> implements IList {
 	isArchived = false
 	hexColor = ''
 	identifier = ''
-	backgroundInformation: any = null
+	backgroundInformation: unknown | null = null
 	isFavorite = false
 	subscription: ISubscription = null
 	position = 0

src/models/task.ts

@@ -28,7 +28,7 @@ if (!SUPPORTS_TRIGGERED_NOTIFICATION) {
 	console.debug('This browser does not support triggered notifications')
 }
 
-export function	getHexColor(hexColor: string) {
+export function	getHexColor(hexColor: string): string {
 	if (hexColor === '' || hexColor === '#') {
 		return TASK_DEFAULT_COLOR
 	}

src/models/user.ts

@@ -1,7 +1,7 @@
 import AbstractModel from './abstractModel'
 import UserSettingsModel from '@/models/userSettings'
 
-import { AUTH_TYPES, type IUser } from '@/modelTypes/IUser'
+import { AUTH_TYPES, type IUser, type AuthType } from '@/modelTypes/IUser'
 import type { IUserSettings } from '@/modelTypes/IUserSettings'
 
 export function getAvatarUrl(user: IUser, size = 50) {
@@ -22,7 +22,7 @@ export default class UserModel extends AbstractModel<IUser> implements IUser {
 	username = ''
 	name = ''
 	exp = 0
-	type = AUTH_TYPES.UNKNOWN
+	type: AuthType = AUTH_TYPES.UNKNOWN
 
 	created: Date
 	updated: Date

src/models/userSettings.ts

@@ -2,7 +2,6 @@ import AbstractModel from './abstractModel'
 
 import type {IUserSettings} from '@/modelTypes/IUserSettings'
 import {getCurrentLanguage} from '@/i18n'
-import {getDefaultReminderAmount} from '@/helpers/defaultReminder'
 
 export default class UserSettingsModel extends AbstractModel<IUserSettings> implements IUserSettings {
 	name = ''
@@ -14,8 +13,6 @@ export default class UserSettingsModel extends AbstractModel<IUserSettings> impl
 	weekStart = 0 as IUserSettings['weekStart']
 	timezone = ''
 	language = getCurrentLanguage()
-	defaultReminder = false
-	defaultReminderAmount = getDefaultReminderAmount() || 0
 
 	constructor(data: Partial<IUserSettings> = {}) {
 		super()

src/pinia.ts

@@ -0,0 +1,5 @@
+import {createPinia} from 'pinia'
+
+const pinia = createPinia()
+
+export default pinia

src/router/index.ts

@@ -22,7 +22,8 @@ import DataExportDownload from '../views/user/DataExportDownload.vue'
 import UpcomingTasksComponent from '../views/tasks/ShowTasks.vue'
 import LinkShareAuthComponent from '../views/sharing/LinkSharingAuth.vue'
 import ListNamespaces from '../views/namespaces/ListNamespaces.vue'
-import TaskDetailView from '../views/tasks/TaskDetailView.vue'
+const TaskDetailView = () => import('../views/tasks/TaskDetailView.vue')
+
 // Team Handling
 import ListTeamsComponent from '../views/teams/ListTeams.vue'
 // Label Handling
@@ -487,4 +488,8 @@ export function getAuthForRoute(route: RouteLocation) {
 	}
 }
 
+router.beforeEach((to) => {
+	return getAuthForRoute(to)
+})
+
 export default router

src/services/abstractService.ts

@@ -149,7 +149,7 @@ export default abstract class AbstractService<Model extends IAbstract = IAbstrac
 	/**
 	 * Returns a fully-ready-ready-to-make-a-request-to route with replaced parameters.
 	 */
-	getReplacedRoute(path : string, pathparams : {}) : string {
+	getReplacedRoute(path : string, pathparams : Record<string, unknown>) : string {
 		const replacements = this.getRouteReplacements(path, pathparams)
 		return Object.entries(replacements).reduce(
 			(result, [parameter, value]) => result.replace(parameter, value as string),

src/services/migrator/abstractMigrationFile.ts

@@ -22,7 +22,6 @@ export default class AbstractMigrationFileService extends AbstractService {
 	}
 
 	migrate(file: IFile) {
-		console.log(file)
 		return this.uploadFile(
 			this.paths.create,
 			file,