Merge branch 'main' into feature/ganttastic

# Conflicts: # src/main.ts # yarn.lock
2022-09-27 16:14:12 +02:00 · 2022-09-27 16:14:12 +02:00 · 879dfb74b6
commit 879dfb74b6
parent bd06f725be ecd0df21c1
204 changed files with 16045 additions and 15522 deletions
--- a/.drone.yml
+++ b/.drone.yml
@ -29,26 +29,91 @@ steps:
 #      AWS_SECRET_ACCESS_KEY:
 #        from_secret: cache_aws_secret_access_key
 #    settings:
+#      debug: true
 #      restore: true
 #      bucket: kolaente.dev-drone-dependency-cache
 #      endpoint: https://s3.fr-par.scw.cloud
 #      region: fr-par
 #      path_style: true
-#      cache_key: '{{ .Repo.Name }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
+#      cache_key: '{{ .Repo.Name }}_{{ checksum "pnpm-lock.yaml" }}_{{ arch }}_{{ os }}'
 #      mount:
-#        - '.cache'
+#        - .cache

  - name: dependencies
-    image: node:18
+    image: node:18-alpine
    pull: true
    environment:
-      YARN_CACHE_FOLDER: .cache/yarn/
-      CYPRESS_CACHE_FOLDER: .cache/cypress/
+      PNPM_CACHE_FOLDER: .cache/pnpm
+      CYPRESS_CACHE_FOLDER: .cache/cypress
    commands:
-      - yarn --frozen-lockfile --network-timeout 100000
+      - corepack enable && corepack prepare pnpm@7.9.3 --activate && pnpm config set store-dir .cache/pnpm
+      - pnpm install --fetch-timeout 100000
 #    depends_on:
 #      - restore-cache

+  - name: lint
+    image: node:18-alpine
+    pull: true
+    environment:
+      PNPM_CACHE_FOLDER: .cache/pnpm
+    commands:
+      - corepack enable && corepack prepare pnpm@7.9.3 --activate && pnpm config set store-dir .cache/pnpm
+      - pnpm run lint
+    depends_on:
+      - dependencies
+
+  - name: build-prod
+    image: node:18-alpine
+    pull: true
+    environment:
+      PNPM_CACHE_FOLDER: .cache/pnpm
+    commands:
+      - corepack enable && corepack prepare pnpm@7.9.3 --activate && pnpm config set store-dir .cache/pnpm
+      - pnpm run build
+    depends_on:
+      - dependencies
+
+  - name: test-unit
+    image: node:18-alpine
+    pull: true
+    commands:
+      - corepack enable && corepack prepare pnpm@7.9.3 --activate && pnpm config set store-dir .cache/pnpm
+      - pnpm run test:unit
+    depends_on:
+      - dependencies
+
+  - name: typecheck
+    failure: ignore
+    image: node:18-alpine
+    pull: true
+    environment:
+      PNPM_CACHE_FOLDER: .cache/pnpm
+    commands:
+      - corepack enable && corepack prepare pnpm@7.9.3 --activate && pnpm config set store-dir .cache/pnpm
+      - pnpm run typecheck
+    depends_on:
+      - dependencies
+
+  - name: test-frontend
+    image: cypress/browsers:node16.14.0-chrome99-ff97
+    pull: true
+    environment:
+      CYPRESS_API_URL: http://api:3456/api/v1
+      CYPRESS_TEST_SECRET: averyLongSecretToSe33dtheDB
+      PNPM_CACHE_FOLDER: .cache/pnpm
+      CYPRESS_CACHE_FOLDER: .cache/cypress
+      CYPRESS_DEFAULT_COMMAND_TIMEOUT: 60000
+      CYPRESS_RECORD_KEY:
+        from_secret: cypress_project_key
+    commands:
+      - sed -i 's/localhost/api/g' dist/index.html
+      - corepack enable && corepack prepare pnpm@7.9.3 --activate && pnpm config set store-dir .cache/pnpm
+      - pnpm cypress install
+      - pnpm run serve:dist & npx wait-on http://localhost:4173
+      - pnpm run test:frontend --browser chrome --record
+    depends_on:
+      - build-prod
+
 #  - name: rebuild-cache
 #    image: meltwater/drone-cache:dev
 #    pull: true
@ -63,70 +128,14 @@ steps:
 #      endpoint: https://s3.fr-par.scw.cloud
 #      region: fr-par
 #      path_style: true
-#      cache_key: '{{ .Repo.Name }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
+#      cache_key: '{{ .Repo.Name }}_{{ checksum "pnpm-lock.yaml" }}_{{ arch }}_{{ os }}'
 #      mount:
-#        - '.cache'
+#        - .cache
 #    depends_on:
 #      - dependencies

-  - name: lint
-    image: node:18
-    pull: true
-    environment:
-      YARN_CACHE_FOLDER: .cache/yarn/
-      CYPRESS_CACHE_FOLDER: .cache/cypress/
-    commands:
-      - yarn run lint
-    depends_on:
-      - dependencies
-
-  - name: build-prod
-    image: node:18
-    pull: true
-    environment:
-      YARN_CACHE_FOLDER: .cache/yarn/
-    commands:
-      - yarn build
-    depends_on:
-      - dependencies
-
-  - name: test-unit
-    image: node:18
-    pull: true
-    commands:
-      - yarn test:unit
-    depends_on:
-      - dependencies
-
-  - name: typecheck
-    failure: ignore
-    image: node:18
-    pull: true
-    commands:
-      - yarn typecheck
-    depends_on:
-      - dependencies
-
-  - name: test-frontend
-    image: cypress/browsers:node16.14.0-chrome99-ff97
-    pull: true
-    environment:
-      CYPRESS_API_URL: http://api:3456/api/v1
-      CYPRESS_TEST_SECRET: averyLongSecretToSe33dtheDB
-      YARN_CACHE_FOLDER: .cache/yarn/
-      CYPRESS_CACHE_FOLDER: .cache/cypress/
-      CYPRESS_DEFAULT_COMMAND_TIMEOUT: 60000
-      CYPRESS_RECORD_KEY:
-        from_secret: cypress_project_key
-    commands:
-      - sed -i 's/localhost/api/g' dist/index.html
-      - yarn serve:dist & npx wait-on http://localhost:4173
-      - yarn test:frontend --browser chrome --record
-    depends_on:
-      - build-prod
-
  - name: deploy-preview
-    image: node:18
+    image: node:18-alpine
    pull: true
    environment:
      NETLIFY_AUTH_TOKEN:
@ -138,7 +147,8 @@ steps:
    commands:
      - cp -r dist dist-preview
      # Override the default api url used for preview
-      - sed -i 's|localhost:3456|try.vikunja.io|g' dist-preview/index.html
+      - sed -i 's|http://localhost:3456|https://try.vikunja.io|g' dist-preview/index.html
+      - apk add --no-cache perl-utils
      - shasum -a 384 -c ./scripts/deploy-preview-netlify.js.sha384
      - node ./scripts/deploy-preview-netlify.js
    depends_on:
@ -181,21 +191,22 @@ steps:
 #      endpoint: https://s3.fr-par.scw.cloud
 #      region: fr-par
 #      path_style: true
-#      cache_key: '{{ .Repo.Name }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
+#      cache_key: '{{ .Repo.Name }}_{{ checksum "pnpm-lock.yaml" }}_{{ arch }}_{{ os }}'
 #      mount:
-#        - '.cache'
+#        - .cache

  - name: build
-    image: node:18
+    image: node:18-alpine
    pull: true
    group: build-static
    environment:
-      YARN_CACHE_FOLDER: .cache/yarn/
+      PNPM_CACHE_FOLDER: .cache/pnpm
    commands:
-      - yarn --frozen-lockfile --network-timeout 100000
-      - yarn run lint
+      - corepack enable && corepack prepare pnpm@7.9.3 --activate && pnpm config set store-dir .cache/.pnp
+      - pnpm install --fetch-timeout 100000
+      - pnpm run lint
      - "echo '{\"VERSION\": \"'$(git describe --tags --always --abbrev=10 | sed 's/-/+/' | sed 's/^v//' | sed 's/-g/-/')'\"}' > src/version.json"
-      - yarn run build
+      - pnpm run build
      - sed -i 's/http\:\\/\\/localhost\\:3456\\/api\\/v1/\\/api\\/v1/g' dist/index.html # Override the default api url used for developing
 #    depends_on:
 #      - restore-cache
@ -256,21 +267,22 @@ steps:
 #      endpoint: https://s3.fr-par.scw.cloud
 #      region: fr-par
 #      path_style: true
-#      cache_key: '{{ .Repo.Name }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
+#      cache_key: '{{ .Repo.Name }}_{{ checksum "pnpm-lock.yaml" }}_{{ arch }}_{{ os }}'
 #      mount:
-#        - '.cache'
+#        - .cache

  - name: build
-    image: node:18
+    image: node:18-alpine
    pull: true
    group: build-static
    environment:
-      YARN_CACHE_FOLDER: .cache/yarn/
+      PNPM_CACHE_FOLDER: .cache/pnpm
    commands:
-      - yarn --frozen-lockfile --network-timeout 100000
-      - yarn run lint
+      - corepack enable && corepack prepare pnpm@7.9.3 --activate && pnpm config set store-dir .cache/pnpm
+      - pnpm install --fetch-timeout 100000
+      - pnpm run lint
      - "echo '{\"VERSION\": \"'$(git describe --tags --always --abbrev=10 | sed 's/-/+/' | sed 's/^v//' | sed 's/-g/-/')'\"}' > src/version.json"
-      - yarn run build
+      - pnpm run build
      - sed -i 's/http\:\\/\\/localhost\\:3456\\/api\\/v1/\\/api\\/v1/g' dist/index.html # Override the default api url used for developing
 #    depends_on:
 #      - restore-cache
@ -647,6 +659,6 @@ steps:
        from_secret: crowdin_key
 ---
 kind: signature
-hmac: 997e1badebe484ac29557c4af356e63db4d3d57f3d32e92d482f117f8cec64da
+hmac: 9eccb4a9999236be0f772c4cbe7ccce2875faa57f32de179bd75cf0df4124d00

 ...
--- a/.gitignore
+++ b/.gitignore
@ -8,10 +8,14 @@ node_modules
 .env.*.local

 # Log files
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 stats.html
+pnpm-debug.log*
+lerna-debug.log*

 # Editor directories and files
 .idea
--- a/.npmrc
+++ b/.npmrc
@ -0,0 +1,2 @@
+auto-install-peers=true
+fetch-timeout=100000
--- a/.vscode.example/settings.json
+++ b/.vscode.example/settings.json
@ -1,5 +1,5 @@
 {
-  "eslint.packageManager": "yarn",
+  "eslint.packageManager": "pnpm",
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
--- a/39
+++ b/39
@ -1,28 +1,41 @@
 # Stage 1: Build application
-FROM node:18 AS compile-image
+FROM node:18-alpine AS compile-image

 WORKDIR /build

 ARG USE_RELEASE=false
 ARG RELEASE_VERSION=main

-ENV YARN_CACHE_FOLDER .cache/yarn/
-COPY .  ./
-
 RUN \
  if [ $USE_RELEASE = true ]; then \
-    rm -rf dist/ && \
    wget https://dl.vikunja.io/frontend/vikunja-frontend-$RELEASE_VERSION.zip -O frontend-release.zip && \
    unzip frontend-release.zip -d dist/ && \
    exit 0; \
-  fi && \
+  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 && \
+  corepack prepare pnpm@7.9.3 --activate && \
  # Build the frontend
-  yarn install --frozen-lockfile --network-timeout 100000 && \
-  echo '{"VERSION": "'$(git describe --tags --always --abbrev=10 | sed 's/-/+/' | sed 's/^v//' | sed 's/-g/-/')'"}' > src/version.json && \
-  yarn run build
+	pnpm fetch
+
+ADD .  ./
+
+RUN apk add --no-cache git
+
+RUN \
+	pnpm install --offline && \
+	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
+FROM nginx:alpine

 COPY nginx.conf /etc/nginx/nginx.conf
 COPY run.sh /run.sh
@ -36,4 +49,10 @@ ENV PGID 1000

 LABEL maintainer="maintainers@vikunja.io"

+RUN apk add --no-cache \
+  # for sh file
+	bash \
+	# installs usermod and groupmod
+	shadow
+
 CMD "/run.sh"
--- a/README.md
+++ b/README.md
@ -22,25 +22,25 @@ There is a [docker image available](https://hub.docker.com/r/vikunja/api) with s
 ## Project setup

 ```shell
-yarn install
+pnpm install
 ```

 ### Compiles and hot-reloads for development

 ```shell
-yarn run serve
+pnpm run serve
 ```

 ### Compiles and minifies for production

 ```shell
-yarn run build
+pnpm run build
 ```

 ### Lints and fixes files

 ```shell
-yarn run lint
+pnpm run lint
 ```

 ## Sponsors
--- a/cypress/README.md
+++ b/cypress/README.md
@ -36,7 +36,7 @@ to get a shell inside the cypress container.
 In that shell you can then execute the tests with

 ```shell
-yarn test:frontend
+pnpm run test:frontend
 ```

 ### Using The Cypress Dashboard
@ -44,5 +44,5 @@ yarn test:frontend
 To open the Cypress Dashboard and run tests from there, run

 ```shell
-yarn cypress:open
+pnpm run cypress:open
 ```
--- a/netlify.toml
+++ b/netlify.toml
@ -1,5 +1,5 @@
 [build]
-  command = "yarn build"
+  command = "pnpm run build"
  publish = "dist-preview"

 [[redirects]]
--- a/package.json
+++ b/package.json
@ -11,7 +11,7 @@
    "build:dev": "vite build -m development --outDir dist-dev/",
    "lint": "eslint --ignore-pattern '*.test.*' ./src --ext .vue,.js,.ts",
    "cypress:open": "cypress open",
-    "test:unit": "vitest",
+    "test:unit": "vitest --run",
    "test:unit-watch": "vitest watch",
    "test:frontend": "cypress run",
    "typecheck": "vue-tsc --noEmit && vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
@ -25,20 +25,21 @@
    "@github/hotkey": "2.0.1",
    "@infectoone/vue-ganttastic": "^2.0.4",
    "@kyvg/vue3-notification": "2.4.1",
-    "@sentry/tracing": "7.12.1",
-    "@sentry/vue": "7.12.1",
+    "@sentry/tracing": "7.13.0",
+    "@sentry/vue": "7.13.0",
    "@types/is-touch-device": "1.0.0",
    "@types/lodash.clonedeep": "4.5.7",
-    "@types/sortablejs": "1.13.0",
-    "@vueuse/core": "9.2.0",
-    "@vueuse/router": "9.2.0",
+    "@types/sortablejs": "1.15.0",
+    "@vueuse/core": "9.3.0",
+    "@vueuse/router": "9.3.0",
    "axios": "0.27.2",
-    "blurhash": "1.1.5",
+    "blurhash": "2.0.1",
    "bulma-css-variables": "0.9.33",
    "camel-case": "4.1.2",
-    "date-fns": "2.29.2",
+    "codemirror": "5.65.9",
+    "date-fns": "2.29.3",
    "dompurify": "2.4.0",
-    "easymde": "2.17.0",
+    "easymde": "2.18.0",
    "flatpickr": "4.6.13",
    "flexsearch": "0.7.21",
    "highlight.js": "11.6.0",
@ -47,8 +48,10 @@
    "lodash.debounce": "4.0.8",
    "marked": "4.1.0",
    "minimist": "1.2.6",
+    "pinia": "2.0.22",
    "register-service-worker": "1.7.2",
    "snake-case": "3.0.4",
+    "sortablejs": "1.15.0",
    "ufo": "0.8.5",
    "v-tooltip": "4.0.0-beta.17",
    "vue": "3.2.39",
@ -65,34 +68,35 @@
    "@cypress/vite-dev-server": "3.1.1",
    "@cypress/vue": "4.2.0",
    "@faker-js/faker": "7.5.0",
+    "@types/dompurify": "2.3.4",
    "@types/flexsearch": "0.7.3",
-    "@typescript-eslint/eslint-plugin": "5.36.2",
-    "@typescript-eslint/parser": "5.36.2",
-    "@vitejs/plugin-legacy": "2.1.0",
+    "@typescript-eslint/eslint-plugin": "5.38.1",
+    "@typescript-eslint/parser": "5.38.1",
+    "@vitejs/plugin-legacy": "2.2.0",
    "@vitejs/plugin-vue": "3.1.0",
-    "@vue/eslint-config-typescript": "11.0.1",
+    "@vue/eslint-config-typescript": "11.0.2",
    "@vue/test-utils": "2.0.2",
    "@vue/tsconfig": "0.1.3",
-    "autoprefixer": "10.4.8",
-    "browserslist": "4.21.3",
-    "caniuse-lite": "1.0.30001390",
-    "cypress": "10.7.0",
-    "esbuild": "0.15.7",
-    "eslint": "8.23.0",
-    "eslint-plugin-vue": "9.4.0",
+    "autoprefixer": "10.4.12",
+    "browserslist": "4.21.4",
+    "caniuse-lite": "1.0.30001412",
+    "cypress": "10.8.0",
+    "esbuild": "0.15.9",
+    "eslint": "8.24.0",
+    "eslint-plugin-vue": "9.5.1",
    "express": "4.18.1",
    "happy-dom": "6.0.4",
-    "netlify-cli": "11.5.1",
+    "netlify-cli": "11.8.3",
    "postcss": "8.4.16",
-    "postcss-preset-env": "7.8.1",
-    "rollup": "2.79.0",
-    "rollup-plugin-visualizer": "5.8.1",
-    "sass": "1.54.9",
-    "typescript": "4.8.2",
-    "vite": "3.1.0",
-    "vite-plugin-pwa": "0.12.7",
+    "postcss-preset-env": "7.8.2",
+    "rollup": "2.79.1",
+    "rollup-plugin-visualizer": "5.8.2",
+    "sass": "1.55.0",
+    "typescript": "4.8.3",
+    "vite": "3.1.3",
+    "vite-plugin-pwa": "0.13.1",
    "vite-svg-loader": "3.6.0",
-    "vitest": "0.23.1",
+    "vitest": "0.23.4",
    "vue-tsc": "0.40.13",
    "wait-on": "6.0.1",
    "workbox-cli": "6.5.4"
@ -103,5 +107,5 @@
    }
  },
  "license": "AGPL-3.0-or-later",
-  "packageManager": "yarn@1.22.19"
+  "packageManager": "pnpm@7.12.2"
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/components/date/datepickerWithRange.vue
+++ b/src/components/date/datepickerWithRange.vue
@ -85,7 +85,7 @@ import DatemathHelp from '@/components/date/datemathHelp.vue'
 const store = useStore()
 const {t} = useI18n({useScope: 'global'})

-const emit = defineEmits(['dateChanged', 'update:modelValue'])
+const emit = defineEmits(['update:modelValue'])
 const props = defineProps({
 	modelValue: {
 		required: false,
@ -118,7 +118,13 @@ watch(
 	newValue => {
 		from.value = newValue.dateFrom
 		to.value = newValue.dateTo
-		flatpickrRange.value = `${from.value} to ${to.value}`
+		// Only set the date back to flatpickr when it's an actual date.
+		// Otherwise flatpickr runs in an endless loop and slows down the browser.
+		const dateFrom = new Date(from.value)
+		const dateTo = new Date(to.value)
+		if (dateTo.getTime() === dateTo.getTime() && dateFrom.getTime() === dateFrom.getTime()) {
+			flatpickrRange.value = `${from.value} to ${to.value}`
+		}
 	},
 )

@ -127,7 +133,6 @@ function emitChanged() {
 		dateFrom: from.value === '' ? null : from.value,
 		dateTo: to.value === '' ? null : to.value,
 	}
-	emit('dateChanged', args)
 	emit('update:modelValue', args)
 }

--- a/src/components/home/TheNavigation.vue
+++ b/src/components/home/TheNavigation.vue
@ -16,6 +16,10 @@
 					{{ currentList.title === '' ? $t('misc.loading') : getListTitle(currentList) }}
 				</h1>

+				<BaseButton :to="{name: 'list.info', params: {listId: currentList.id}}" class="info-button">
+					<icon icon="circle-info"/>
+				</BaseButton>
+
 				<list-settings-dropdown v-if="canWriteCurrentList && currentList.id !== -1" :list="currentList"/>
 			</template>
 		</div>
@ -104,15 +108,17 @@ import BaseButton from '@/components/base/BaseButton.vue'
 import MenuButton from '@/components/home/MenuButton.vue'

 import {getListTitle} from '@/helpers/getListTitle'
+import {useConfigStore} from '@/stores/config'

 const store = useStore()
+const configStore = useConfigStore()

 const userInfo = computed(() => store.state.auth.info)
 const userAvatar = computed(() => store.state.auth.avatarUrl)
 const currentList = computed(() => store.state.currentList)
 const background = computed(() => store.state.background)
-const imprintUrl = computed(() => store.state.config.legal.imprintUrl)
-const privacyPolicyUrl = computed(() => store.state.config.legal.privacyPolicyUrl)
+const 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)

@ -284,10 +290,21 @@ $hamburger-menu-icon-width: 28px;

 	:deep(.dropdown-trigger) {
 		color: var(--grey-400);
-		margin-left: 1rem;
+		margin-left: .5rem;
 		height: 1rem;
 		width: 1rem;
 		cursor: pointer;
 	}
 }
+
+.info-button {
+	text-align: center;
+	height: 1.25rem;
+	line-height: 1.25rem;
+	width: 2rem;
+	margin-top: .25rem;
+	padding: 0 .5rem;
+	color: var(--grey-400);
+	margin-left: .5rem;
+}
 </style>
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@ -66,6 +66,7 @@ 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'
@ -197,7 +198,8 @@ function useRenewTokenOnFocus() {
 }

 useRenewTokenOnFocus()
-store.dispatch('labels/loadAllLabels')
+const labelStore = useLabelStore()
+labelStore.loadAllLabels()
 </script>

 <style lang="scss" scoped>
--- a/src/components/home/navigation.vue
+++ b/src/components/home/navigation.vue
@ -56,10 +56,10 @@
 						class="menu-label"
 						v-tooltip="namespaceTitles[nk]"
 					>
-						<span
+						<ColorBubble
 							v-if="n.hexColor !== ''"
-							:style="{ backgroundColor: n.hexColor }"
-							class="color-bubble"
+							:color="n.hexColor"
+							class="mr-1"
 						/>
 						<span class="name">{{ namespaceTitles[nk] }}</span>
 						<div
@ -114,17 +114,17 @@
 									<span class="icon handle">
 										<icon icon="grip-lines"/>
 									</span>
-									<span
-										:style="{ backgroundColor: l.hexColor }"
-										class="color-bubble"
-										v-if="l.hexColor !== ''">
-									</span>
+									<ColorBubble
+											v-if="l.hexColor !== ''"
+										:color="l.hexColor"
+										class="mr-1"
+									/>
 									<span class="list-menu-title">{{ getListTitle(l) }}</span>
 								</BaseButton>
 								<BaseButton
 									class="favorite"
 									:class="{'is-favorite': l.isFavorite}"
-									@click="toggleFavoriteList(l)"
+									@click="listStore.toggleListFavorite(l)"
 								>
 									<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
 								</BaseButton>
@ -156,8 +156,11 @@ import {calculateItemPosition} from '@/helpers/calculateItemPosition'
 import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
 import {getListTitle} from '@/helpers/getListTitle'
 import {useEventListener} from '@vueuse/core'
-import type { IList } from '@/models/list'
-import type { INamespace } from '@/models/namespace'
+import type {IList} from '@/modelTypes/IList'
+import type {INamespace} from '@/modelTypes/INamespace'
+import ColorBubble from '@/components/misc/colorBubble.vue'
+import {useListStore} from '@/stores/lists'
+import {useNamespaceStore} from '@/stores/namespaces'

 const drag = ref(false)
 const dragOptions = {
@ -166,13 +169,14 @@ const dragOptions = {
 }

 const store = useStore()
+const namespaceStore = useNamespaceStore()
 const currentList = computed(() => store.state.currentList)
 const menuActive = computed(() => store.state.menuActive)
-const loading = computed(() => store.state.loading && store.state.loadingModule === 'namespaces')
+const loading = computed(() => namespaceStore.isLoading)


 const namespaces = computed(() => {
-	return (store.state.namespaces.namespaces as INamespace[]).filter(n => !n.isArchived)
+	return namespaceStore.namespaces.filter(n => !n.isArchived)
 })
 const activeLists = computed(() => {
 	return namespaces.value.map(({lists}) => {
@ -194,15 +198,7 @@ const namespaceListsCount = computed(() => {
 useEventListener('resize', resize)
 onMounted(() => resize())

-
-function toggleFavoriteList(list: IList) {
-	// The favorites pseudo list is always favorite
-	// Archived lists cannot be marked favorite
-	if (list.id === -1 || list.isArchived) {
-		return
-	}
-	store.dispatch('lists/toggleListFavorite', list)
-}
+const listStore = useListStore()

 function resize() {
 	// Hide the menu by default on mobile
@ -216,7 +212,7 @@ function toggleLists(namespaceId: INamespace['id']) {
 const listsVisible = ref<{ [id: INamespace['id']]: boolean }>({})
 // FIXME: async action will be unfinished when component mounts
 onBeforeMount(async () => {
-	const namespaces = await store.dispatch('namespaces/loadNamespaces') as INamespace[]
+	const namespaces = await namespaceStore.loadNamespaces()
 	namespaces.forEach(n => {
 		if (typeof listsVisible.value[n.id] === 'undefined') {
 			listsVisible.value[n.id] = true
@ -235,7 +231,7 @@ function updateActiveLists(namespace: INamespace, activeLists: IList[]) {
 		...namespace.lists.filter(l => l.isArchived),
 	]

-	store.commit('namespaces/setNamespaceById', {
+	namespaceStore.setNamespaceById({
 		...namespace,
 		lists,
 	})
@ -267,7 +263,7 @@ async function saveListPosition(e: SortableEvent) {

 	try {
 		// create a copy of the list in order to not violate vuex mutations
-		await store.dispatch('lists/updateList', {
+		await listStore.updateList({
 			...list,
 			position,
 			namespaceId,
--- a/src/components/home/update.vue
+++ b/src/components/home/update.vue
@ -1,7 +1,7 @@
 <template>
 	<div class="update-notification" v-if="updateAvailable">
 		<p>{{ $t('update.available') }}</p>
-		<x-button @click="refreshApp()" :shadow="false">
+		<x-button @click="refreshApp()" :shadow="false" class="has-no-text-wrap">
 			{{ $t('update.do') }}
 		</x-button>
 	</div>
@ -43,24 +43,19 @@ function refreshApp() {

 <style lang="scss" scoped>
 .update-notification {
-	margin: .5rem;
 	display: flex;
 	align-items: center;
 	background: $warning;
-	padding: 0 .25rem;
+	padding: .5rem;
 	border-radius: $radius;
 	font-size: .9rem;
 	color: var(--grey-900);
 	justify-content: space-between;

-	@media screen and (max-width: $desktop) {
-		position: fixed;
-		bottom: 1rem;
-		margin: 0;
-		width: 450px;
-		left: calc(50vw - 225px);
-		padding: .5rem;
-	}
+	position: fixed;
+	bottom: 1rem;
+	width: 450px;
+	left: calc(50vw - 225px);

 	@media screen and (max-width: $tablet) {
 		position: fixed;
--- a/src/components/input/button.vue
+++ b/src/components/input/button.vue
@ -9,9 +9,16 @@
 			}
 		]"
 	>
-		<icon :icon="icon" v-if="showIconOnly"/>
+		<icon 
+			v-if="showIconOnly"
+			:icon="icon"
+			:style="{'color': iconColor !== '' ? iconColor : false}"
+		/>
 		<span class="icon is-small" v-else-if="icon !== ''">
-			<icon :icon="icon"/>
+			<icon 
+				:icon="icon"
+				:style="{'color': iconColor !== '' ? iconColor : false}"
+			/>
 		</span>
 		<slot />
 	</BaseButton>
@ -42,6 +49,10 @@ const props = defineProps({
 		type: [String, Array],
 		default: '',
 	},
+	iconColor: {
+		type: String,
+		default: '',
+	},
 	loading: {
 		type: Boolean,
 		default: false,
--- a/src/components/input/colorPicker.vue
+++ b/src/components/input/colorPicker.vue
@ -68,7 +68,7 @@ export default defineComponent({
 			default: 'top',
 		},
 	},
-	emits: ['update:modelValue', 'change'],
+	emits: ['update:modelValue'],
 	watch: {
 		modelValue: {
 			handler(modelValue) {
@ -98,7 +98,6 @@ export default defineComponent({

 			this.lastChangeTimeout = setTimeout(() => {
 				this.$emit('update:modelValue', this.color)
-				this.$emit('change')
 			}, 500)
 		},
 		reset() {
--- a/src/components/input/datepicker.vue
+++ b/src/components/input/datepicker.vue
@ -131,7 +131,7 @@ export default defineComponent({
 			default: false,
 		},
 	},
-	emits: ['update:modelValue', 'change', 'close', 'close-on-change'],
+	emits: ['update:modelValue', 'close', 'close-on-change'],
 	mounted() {
 		document.addEventListener('click', this.hideDatePopup)
 	},
@ -186,7 +186,6 @@ export default defineComponent({
 		updateData() {
 			this.changed = true
 			this.$emit('update:modelValue', this.date)
-			this.$emit('change', this.date)
 		},
 		toggleDatePopup() {
 			if (this.disabled) {
--- a/src/components/input/editor.vue
+++ b/src/components/input/editor.vue
@ -72,7 +72,7 @@ import {defineComponent} from 'vue'
 import VueEasymde from './vue-easymde.vue'
 import {marked} from 'marked'
 import DOMPurify from 'dompurify'
-import hljs from 'highlight.js/lib/common'
+import {setupMarkdownRenderer} from '@/helpers/markdownRenderer'

 import {createEasyMDEConfig} from './editorConfig'

@ -136,7 +136,7 @@ export default defineComponent({
 			default: '',
 		},
 	},
-	emits: ['update:modelValue', 'change'],
+	emits: ['update:modelValue'],
 	computed: {
 		showPreviewText() {
 			return this.isPreviewActive && this.text === '' && this.emptyText !== ''
@ -212,7 +212,6 @@ export default defineComponent({

 			this.changeTimeout = setTimeout(() => {
 				this.$emit('update:modelValue', this.text)
-				this.$emit('change', this.text)
 			}, timeout)
 		},
 		replaceAt(str, index, replacement) {
@ -223,43 +222,7 @@ export default defineComponent({
 			return checkboxes[n]
 		},
 		renderPreview() {
-			const renderer = new marked.Renderer()
-			const linkRenderer = renderer.link
-
-			let checkboxNum = -1
-			marked.use({
-				renderer: {
-					image: (src, title, text) => {
-
-						title = title ? ` title="${title}` : ''
-
-						// If the url starts with the api url, the image is likely an attachment and
-						// we'll need to download and parse it properly.
-						if (src.substr(0, window.API_URL.length + 7) === `${window.API_URL}/tasks/`) {
-							return `<img data-src="${src}" alt="${text}" ${title} class="attachment-image"/>`
-						}
-
-						return `<img src="${src}" alt="${text}" ${title}/>`
-					},
-					checkbox: (checked) => {
-						if (checked) {
-							checked = ' checked="checked"'
-						}
-
-						checkboxNum++
-						return `<input type="checkbox" data-checkbox-num="${checkboxNum}" ${checked} class="text-checkbox-${this.checkboxId}"/>`
-					},
-					link: (href, title, text) => {
-						const isLocal = href.startsWith(`${location.protocol}//${location.hostname}`)
-						const html = linkRenderer.call(renderer, href, title, text)
-						return isLocal ? html : html.replace(/^<a /, '<a target="_blank" rel="noreferrer noopener nofollow" ')
-					},
-				},
-				highlight: function (code, language) {
-					const validLanguage = hljs.getLanguage(language) ? language : 'plaintext'
-					return hljs.highlight(code, {language: validLanguage}).value
-				},
-			})
+			setupMarkdownRenderer(this.checkboxId)

 			this.preview = DOMPurify.sanitize(marked(this.text), {ADD_ATTR: ['target']})

--- a/src/components/list/list-settings-dropdown.vue
+++ b/src/components/list/list-settings-dropdown.vue
@ -60,8 +60,8 @@
 				:is-button="false"
 				entity="list"
 				:entity-id="list.id"
-				:subscription="list.subscription"
-				@change="sub => subscription = sub"
+				:model-value="list.subscription"
+				@update:model-value="sub => subscription = sub"
 				type="dropdown"
 			/>
 			<dropdown-item
@ -77,14 +77,14 @@

 <script setup lang="ts">
 import {ref, computed, watchEffect, type PropType} from 'vue'
-import {useStore} from '@/store'

 import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
 import Dropdown from '@/components/misc/dropdown.vue'
 import DropdownItem from '@/components/misc/dropdown-item.vue'
 import TaskSubscription from '@/components/misc/subscription.vue'
-import type {IList} from '@/models/list'
-import type { ISubscription } from '@/models/subscription'
+import type {IList} from '@/modelTypes/IList'
+import type {ISubscription} from '@/modelTypes/ISubscription'
+import {useConfigStore} from '@/stores/config'

 const props = defineProps({
 	list: {
@ -98,7 +98,7 @@ watchEffect(() => {
 	subscription.value = props.list.subscription ?? null
 })

-const store = useStore()
-const backgroundsEnabled = computed(() => store.state.config.enabledBackgroundProviders?.length > 0)
+const configStore = useConfigStore()
+const backgroundsEnabled = computed(() => configStore.enabledBackgroundProviders?.length > 0)
 const isSavedFilter = computed(() => getSavedFilterIdFromListId(props.list.id) > 0)
 </script>
--- a/src/components/list/partials/filter-popup.vue
+++ b/src/components/list/partials/filter-popup.vue
@ -29,72 +29,60 @@
 	</modal>
 </template>

-<script lang="ts">
-import {defineComponent, ref} from 'vue'
+<script setup lang="ts">
+import {computed, ref, watch} from 'vue'

 import Filters from '@/components/list/partials/filters.vue'

 import {getDefaultParams} from '@/composables/taskList'

-export default defineComponent({
-	name: 'filter-popup',
-	components: {
-		Filters,
-	},
-	props: {
-		modelValue: {
-			required: true,
-		},
-	},
-	emits: ['update:modelValue'],
-	computed: {
-		value: {
-			get() {
-				return this.modelValue
-			},
-			set(value) {
-				this.$emit('update:modelValue', value)
-			},
-		},
-		hasFilters() {
-			// this.value also contains the page parameter which we don't want to include in filters
-			// eslint-disable-next-line no-unused-vars
-			const {filter_by, filter_value, filter_comparator, filter_concat, s} = this.value
-			const def = {...getDefaultParams()}
-
-			const params = {filter_by, filter_value, filter_comparator, filter_concat, s}
-			const defaultParams = {
-				filter_by: def.filter_by,
-				filter_value: def.filter_value,
-				filter_comparator: def.filter_comparator,
-				filter_concat: def.filter_concat,
-				s: s ? def.s : undefined,
-			}
-
-			return JSON.stringify(params) !== JSON.stringify(defaultParams)
-		},
-	},
-	watch: {
-		modelValue: {
-			handler(value) {
-				this.value = value
-			},
-			immediate: true,
-		},
-	},
-	setup() {
-		const modalOpen = ref(false)
-
-		return {
-			modalOpen,
-		}
-	},
-	methods: {
-		clearFilters() {
-			this.value = {...getDefaultParams()}
-		},
+const	props = defineProps({
+	modelValue: {
+		required: true,
 	},
 })
+const emit = defineEmits(['update:modelValue'])
+
+const value = computed({
+	get() {
+		return props.modelValue
+	},
+	set(value) {
+		emit('update:modelValue', value)
+	},
+})
+
+watch(
+	() => props.modelValue,
+	(modelValue) => {
+		value.value = modelValue
+	},
+	{immediate: true},
+)
+		
+const hasFilters = computed(() => {
+	// this.value also contains the page parameter which we don't want to include in filters
+	// eslint-disable-next-line no-unused-vars
+	const {filter_by, filter_value, filter_comparator, filter_concat, s} = value.value
+	const def = {...getDefaultParams()}
+
+	const params = {filter_by, filter_value, filter_comparator, filter_concat, s}
+	const defaultParams = {
+		filter_by: def.filter_by,
+		filter_value: def.filter_value,
+		filter_comparator: def.filter_comparator,
+		filter_concat: def.filter_concat,
+		s: s ? def.s : undefined,
+	}
+
+	return JSON.stringify(params) !== JSON.stringify(defaultParams)
+})
+
+const modalOpen = ref(false)
+
+function clearFilters() {
+	value.value = {...getDefaultParams()}
+}
 </script>

 <style scoped lang="scss">
--- a/src/components/list/partials/filters.vue
+++ b/src/components/list/partials/filters.vue
@ -38,7 +38,7 @@
 				<priority-select
 					:disabled="!filters.usePriority || undefined"
 					v-model.number="filters.priority"
-					@change="setPriority"
+					@update:model-value="setPriority"
 				/>
 				<fancycheckbox
 					v-model="filters.usePriority"
@ -53,7 +53,7 @@
 			<div class="control single-value-control">
 				<percent-done-select
 					v-model.number="filters.percentDone"
-					@change="setPercentDoneFilter"
+					@update:model-value="setPercentDoneFilter"
 					:disabled="!filters.usePercentDone || undefined"
 				/>
 				<fancycheckbox
@ -68,8 +68,9 @@
 			<label class="label">{{ $t('task.attributes.dueDate') }}</label>
 			<div class="control">
 				<datepicker-with-range
-					@dateChanged="values => setDateFilter('due_date', values)"
-					v-model="filters.dueDate">
+					v-model="filters.dueDate"
+					@update:model-value="values => setDateFilter('due_date', values)"
+				>
 					<template #trigger="{toggle, buttonText}">
 						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
 							{{ buttonText }}
@ -82,8 +83,9 @@
 			<label class="label">{{ $t('task.attributes.startDate') }}</label>
 			<div class="control">
 				<datepicker-with-range
-					@dateChanged="values => setDateFilter('start_date', values)"
-					v-model="filters.startDate">
+					v-model="filters.startDate"
+					@update:model-value="values => setDateFilter('start_date', values)"
+				>
 					<template #trigger="{toggle, buttonText}">
 						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
 							{{ buttonText }}
@ -96,8 +98,9 @@
 			<label class="label">{{ $t('task.attributes.endDate') }}</label>
 			<div class="control">
 				<datepicker-with-range
-					@dateChanged="values => setDateFilter('end_date', values)"
-					v-model="filters.endDate">
+					v-model="filters.endDate"
+					@update:model-value="values => setDateFilter('end_date', values)"
+				>
 					<template #trigger="{toggle, buttonText}">
 						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
 							{{ buttonText }}
@ -110,8 +113,9 @@
 			<label class="label">{{ $t('task.attributes.reminders') }}</label>
 			<div class="control">
 				<datepicker-with-range
-					@dateChanged="values => setDateFilter('reminders', values)"
-					v-model="filters.reminders">
+					v-model="filters.reminders"
+					@update:model-value="values => setDateFilter('reminders', values)"
+				>
 					<template #trigger="{toggle, buttonText}">
 						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
 							{{ buttonText }}
@ -141,7 +145,7 @@
 		<div class="field">
 			<label class="label">{{ $t('task.attributes.labels') }}</label>
 			<div class="control labels-list">
-				<edit-labels v-model="labels" @change="changeLabelFilter"/>
+				<edit-labels v-model="labels" @update:model-value="changeLabelFilter"/>
 			</div>
 		</div>

@ -186,6 +190,8 @@
 <script lang="ts">
 import {defineComponent} from 'vue'

+import {useLabelStore} from '@/stores/labels'
+
 import DatepickerWithRange from '@/components/date/datepickerWithRange.vue'
 import Fancycheckbox from '@/components/input/fancycheckbox.vue'

@ -278,7 +284,7 @@ export default defineComponent({
 			default: false,
 		},
 	},
-	emits: ['update:modelValue', 'change'],
+	emits: ['update:modelValue'],
 	watch: {
 		modelValue: {
 			handler(value) {
@ -303,8 +309,10 @@ export default defineComponent({
 				this.change()
 			},
 		},
+
 		foundLabels() {
-			return this.$store.getters['labels/filterLabelsByQuery'](this.labels, this.query)
+			const labelStore = useLabelStore()
+			return labelStore.filterLabelsByQuery(this.labels, this.labelQuery)
 		},
 	},
 	methods: {
@ -312,7 +320,6 @@ export default defineComponent({
 			const params = {...this.params}
 			params.filter_value = params.filter_value.map(v => v instanceof Date ? v.toISOString() : v)
 			this.$emit('update:modelValue', params)
-			this.$emit('change', params)
 		},
 		prepareFilters() {
 			this.prepareDone()
@ -333,7 +340,8 @@ export default defineComponent({
 				: ''
 			const labelIds = labels.split(',').map(i => parseInt(i))

-			this.labels = this.$store.getters['labels/getLabelsByIds'](labelIds)
+			const labelStore = useLabelStore()
+			this.labels = labelStore.getLabelsByIds(labelIds)
 		},
 		removePropertyFromFilter(propertyName) {
 			// Because of the way arrays work, we can only ever remove one element at once.
--- a/src/components/list/partials/list-card.vue
+++ b/src/components/list/partials/list-card.vue
@ -1,8 +1,8 @@
 <template>
 	<router-link
 		:class="{
-			'has-light-text': !colorIsDark(list.hexColor),
-			'has-background': blurHashUrl !== ''
+			'has-light-text': !colorIsDark(list.hexColor) || background !== null,
+			'has-background': blurHashUrl !== '' || background !== null,
 		}"
 		:style="{
 			'background-color': list.hexColor,
@ -24,7 +24,7 @@
 			<BaseButton
 				v-else
 				:class="{'is-favorite': list.isFavorite}"
-				@click.stop="toggleFavoriteList(list)"
+				@click.stop="listStore.toggleListFavorite(list)"
 				class="favorite"
 			>
 				<icon :icon="list.isFavorite ? 'star' : ['far', 'star']"/>
@ -37,7 +37,6 @@

 <script lang="ts" setup>
 import {type PropType, ref, watch} from 'vue'
-import {useStore} from '@/store'

 import ListService from '@/services/list'
 import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
@ -45,7 +44,8 @@ import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
 import {colorIsDark} from '@/helpers/color/colorIsDark'

 import BaseButton from '@/components/base/BaseButton.vue'
-import type { IList } from '@/models/list'
+import type {IList} from '@/modelTypes/IList'
+import {useListStore} from '@/stores/lists'

 const background = ref<string | null>(null)
 const backgroundLoading = ref(false)
@ -84,16 +84,7 @@ async function loadBackground() {
 	}
 }

-const store = useStore()
-
-function toggleFavoriteList(list: IList) {
-	// The favorites pseudo list is always favorite
-	// Archived lists cannot be marked favorite
-	if (list.id === -1 || list.isArchived) {
-		return
-	}
-	store.dispatch('lists/toggleListFavorite', list)
-}
+const listStore = useListStore()
 </script>

 <style lang="scss" scoped>
@ -110,7 +101,7 @@ function toggleFavoriteList(list: IList) {
 	overflow: hidden;

 	&.has-light-text .title {
-		color: var(--grey-100);
+		color: var(--grey-100) !important;
 	}

 	&.has-background,
--- a/src/components/misc/Icon.ts
+++ b/src/components/misc/Icon.ts
@ -11,16 +11,17 @@ import {
 	faCheckDouble,
 	faChessKnight,
 	faChevronDown,
+	faCircleInfo,
 	faCloudDownloadAlt,
 	faCloudUploadAlt,
 	faCocktail,
 	faCoffee,
 	faCog,
-	faEye,
-	faEyeSlash,
 	faEllipsisH,
 	faEllipsisV,
 	faExclamation,
+	faEye,
+	faEyeSlash,
 	faFillDrip,
 	faFilter,
 	faForward,
@ -82,6 +83,7 @@ library.add(faCheck)
 library.add(faCheckDouble)
 library.add(faChessKnight)
 library.add(faChevronDown)
+library.add(faCircleInfo)
 library.add(faClock)
 library.add(faCloudDownloadAlt)
 library.add(faCloudUploadAlt)
@ -89,11 +91,11 @@ library.add(faCocktail)
 library.add(faCoffee)
 library.add(faCog)
 library.add(faComments)
-library.add(faEye)
-library.add(faEyeSlash)
 library.add(faEllipsisH)
 library.add(faEllipsisV)
 library.add(faExclamation)
+library.add(faEye)
+library.add(faEyeSlash)
 library.add(faFillDrip)
 library.add(faFilter)
 library.add(faForward)
--- a/src/components/misc/colorBubble.vue
+++ b/src/components/misc/colorBubble.vue
@ -0,0 +1,24 @@
+<template>
+	<span
+		:style="{backgroundColor: color }"
+		class="color-bubble"
+	></span>
+</template>
+
+<script lang="ts" setup>
+import type { Color } from 'csstype'
+
+defineProps< {
+	color: Color,
+}>()
+</script>
+
+<style scoped>
+.color-bubble {
+	display: inline-block;
+	border-radius: 100%;
+	height: 10px;
+	width: 10px;
+	flex-shrink: 0;
+}
+</style>
--- a/src/components/misc/legal.vue
+++ b/src/components/misc/legal.vue
@ -8,14 +8,13 @@

 <script lang="ts" setup>
 import {computed} from 'vue'
-import {useStore} from '@/store'
-
 import BaseButton from '@/components/base/BaseButton.vue'
+import {useConfigStore} from '@/stores/config'

-const store = useStore()
+const configStore = useConfigStore()

-const imprintUrl = computed(() => store.state.config.legal.imprintUrl)
-const privacyPolicyUrl = computed(() => store.state.config.legal.privacyPolicyUrl)
+const imprintUrl = computed(() => configStore.legal.imprintUrl)
+const privacyPolicyUrl = computed(() => configStore.legal.privacyPolicyUrl)
 </script>

 <style lang="scss" scoped>
--- a/src/components/misc/no-auth-wrapper.vue
+++ b/src/components/misc/no-auth-wrapper.vue
@ -26,22 +26,23 @@
 </template>

 <script lang="ts" setup>
+import {computed} from 'vue'
+import {useRoute} from 'vue-router'
+import {useI18n} from 'vue-i18n'
+
 import Logo from '@/components/home/Logo.vue'
 import Message from '@/components/misc/message.vue'
 import Legal from '@/components/misc/legal.vue'
 import ApiConfig from '@/components/misc/api-config.vue'
-import {useStore} from '@/store'
-import {computed} from 'vue'
-import {useRoute} from 'vue-router'
-import {useI18n} from 'vue-i18n'
+
 import {useTitle} from '@/composables/useTitle'
+import {useConfigStore} from '@/stores/config'
+
+const configStore = useConfigStore()
+const motd = computed(() => configStore.motd)

 const route = useRoute()
-const store = useStore()
 const {t} = useI18n({useScope: 'global'})
-
-const motd = computed(() => store.state.config.motd)
-
 const title = computed(() => t(route.meta?.title as string || ''))
 useTitle(() => title.value)
 </script>
--- a/src/components/misc/subscription.vue
+++ b/src/components/misc/subscription.vue
@ -5,7 +5,7 @@
 		:icon="iconName"
 		v-tooltip="tooltipText"
 		@click="changeSubscription"
-		:disabled="disabled || undefined"
+		:disabled="disabled"
 	>
 		{{ buttonText }}
 	</x-button>
@ -23,6 +23,7 @@
 		v-tooltip="tooltipText"
 		@click="changeSubscription"
 		:class="{'is-disabled': disabled}"
+		:disabled="disabled"
 	>
 		<span class="icon">
 			<icon :icon="iconName"/>
@ -39,7 +40,8 @@ import BaseButton from '@/components/base/BaseButton.vue'
 import DropdownItem from '@/components/misc/dropdown-item.vue'

 import SubscriptionService from '@/services/subscription'
-import SubscriptionModel, { type ISubscription } from '@/models/subscription'
+import SubscriptionModel from '@/models/subscription'
+import type {ISubscription} from '@/modelTypes/ISubscription'

 import {success} from '@/message'

@ -50,7 +52,7 @@ const props = defineProps({
 		type: Boolean,
 		default: true,
 	},
-	subscription: {
+	modelValue: {
 		type: Object as PropType<ISubscription>,
 		default: null,
 	},
@ -60,9 +62,9 @@ const props = defineProps({
 	},
 })

-const subscriptionEntity = computed<string | null>(() => props.subscription?.entity ?? null)
+const subscriptionEntity = computed<string | null>(() => props.modelValue?.entity ?? null)

-const emit = defineEmits(['change'])
+const emit = defineEmits(['update:modelValue'])

 const subscriptionService = shallowRef(new SubscriptionService())

@ -75,27 +77,21 @@ const tooltipText = computed(() => {
 		})
 	}

-	return props.subscription !== null ?
+	return props.modelValue !== null ?
 		t('task.subscription.subscribed', {entity: props.entity}) :
 		t('task.subscription.notSubscribed', {entity: props.entity})
 })

-const buttonText = computed(() => props.subscription !== null ? t('task.subscription.unsubscribe') : t('task.subscription.subscribe'))
-const iconName = computed(() => props.subscription !== null ? ['far', 'bell-slash'] : 'bell')
-const disabled = computed(() => {
-	if (props.subscription === null) {
-		return false
-	}
-
-	return subscriptionEntity.value !== props.entity
-})
+const buttonText = computed(() => props.modelValue ? t('task.subscription.unsubscribe') : t('task.subscription.subscribe'))
+const iconName = computed(() => props.modelValue ? ['far', 'bell-slash'] : 'bell')
+const disabled = computed(() => props.modelValue && subscriptionEntity.value !== props.entity)

 function changeSubscription() {
 	if (disabled.value) {
 		return
 	}

-	if (props.subscription === null) {
+	if (props.modelValue === null) {
 		subscribe()
 	} else {
 		unsubscribe()
@ -108,7 +104,7 @@ async function subscribe() {
 		entityId: props.entityId,
 	})
 	await subscriptionService.value.create(subscription)
-	emit('change', subscription)
+	emit('update:modelValue', subscription)
 	success({message: t('task.subscription.subscribeSuccess', {entity: props.entity})})
 }

@ -118,7 +114,7 @@ async function unsubscribe() {
 		entityId: props.entityId,
 	})
 	await subscriptionService.value.delete(subscription)
-	emit('change', null)
+	emit('update:modelValue', null)
 	success({message: t('task.subscription.unsubscribeSuccess', {entity: props.entity})})
 }
 </script>
--- a/src/components/namespace/namespace-settings-dropdown.vue
+++ b/src/components/namespace/namespace-settings-dropdown.vue
@ -34,12 +34,13 @@
 				{{ $t('menu.archive') }}
 			</dropdown-item>
 			<task-subscription
+				v-if="subscription"
 				class="has-no-shadow"
 				:is-button="false"
 				entity="namespace"
 				:entity-id="namespace.id"
-				:subscription="subscription"
-				@change="sub => subscription = sub"
+				:model-value="subscription"
+				@update:model-value="sub => subscription = sub"
 				type="dropdown"
 			/>
 			<dropdown-item
@ -59,7 +60,8 @@ 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 type { INamespace } from '@/models/namespace'
+import type {INamespace} from '@/modelTypes/INamespace'
+import type {ISubscription} from '@/modelTypes/ISubscription'

 const props = defineProps({
 	namespace: {
@ -68,7 +70,7 @@ const props = defineProps({
 	},
 })

-const subscription = ref(null)
+const subscription = ref<ISubscription | null>(null)
 onMounted(() => {
 	subscription.value = props.namespace.subscription
 })
--- a/src/components/quick-actions/quick-actions.vue
+++ b/src/components/quick-actions/quick-actions.vue
@ -70,6 +70,9 @@ import {getHistory} from '@/modules/listHistory'
 import {parseTaskText, PrefixMode} from '@/modules/parseTaskText'
 import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
 import {PREFIXES} from '@/modules/parseTaskText'
+import {useListStore} from '@/stores/lists'
+import {useNamespaceStore} from '@/stores/namespaces'
+import {useLabelStore} from '@/stores/labels'

 const TYPE_LIST = 'list'
 const TYPE_TASK = 'task'
@ -116,6 +119,8 @@ export default defineComponent({
 		},
 		results() {
 			let lists = []
+			const listStore = useListStore()
+
 			if (this.searchMode === SEARCH_MODE_ALL || this.searchMode === SEARCH_MODE_LISTS) {
 				const {list} = this.parsedQuery

@ -126,10 +131,8 @@ export default defineComponent({
 					const history = getHistory()
 					// Puts recently visited lists at the top
 					const allLists = [...new Set([
-						...history.map(l => {
-							return this.$store.getters['lists/getListById'](l.id)
-						}),
-						...this.$store.getters['lists/searchList'](list),
+						...history.map(l => listStore.getListById(l.id)),
+						...listStore.searchList(list),
 					])]

 					lists = allLists.filter(l => {
@ -138,7 +141,7 @@ export default defineComponent({
 						}

 						if (typeof ncache[l.namespaceId] === 'undefined') {
-							ncache[l.namespaceId] = this.$store.getters['namespaces/getNamespaceById'](l.namespaceId)
+							ncache[l.namespaceId] = useNamespaceStore().getNamespaceById(l.namespaceId)
 						}

 						return !ncache[l.namespaceId].isArchived
@ -205,7 +208,7 @@ export default defineComponent({
 					case CMD_NEW_TASK:
 						return this.$t('quickActions.createTask', {title: this.currentList.title})
 					case CMD_NEW_LIST:
-						namespace = this.$store.getters['namespaces/getNamespaceById'](this.currentList.namespaceId)
+						namespace = useNamespaceStore().getNamespaceById(this.currentList.namespaceId)
 						return this.$t('quickActions.createList', {title: namespace.title})
 				}
 			}
@ -296,8 +299,10 @@ export default defineComponent({
 				filter_comparator: [],
 			}

+			const listStore = useListStore()
+
 			if (list !== null) {
-				const l = this.$store.getters['lists/findListByExactname'](list)
+				const l = listStore.findListByExactname(list)
 				if (l !== null) {
 					params.filter_by.push('list_id')
 					params.filter_value.push(l.id)
@ -306,7 +311,7 @@ export default defineComponent({
 			}

 			if (labels.length > 0) {
-				const labelIds = this.$store.getters['labels/getLabelsByExactTitles'](labels).map(l => l.id)
+				const labelIds = useLabelStore().getLabelsByExactTitles(labels).map(l => l.id)
 				if (labelIds.length > 0) {
 					params.filter_by.push('labels')
 					params.filter_value.push(labelIds.join())
@ -318,7 +323,7 @@ export default defineComponent({
 				const r = await this.taskService.getAll({}, params)
 				this.foundTasks = r.map(t => {
 					t.type = TYPE_TASK
-					const list = this.$store.getters['lists/getListById'](t.listId)
+					const list = listStore.getListById(t.listId)
 					if (list !== null) {
 						t.title = `${t.title} (${list.title})`
 					}
@ -424,7 +429,8 @@ export default defineComponent({
 				title: this.query,
 				namespaceId: this.currentList.namespaceId,
 			})
-			const list = await this.$store.dispatch('lists/createList', newList)
+			const listStore = useListStore()
+			const list = await listStore.createList(newList)
 			this.$message.success({message: this.$t('list.create.createdSuccess')})
 			this.$router.push({name: 'list.index', params: {listId: list.id}})
 			this.closeQuickActions()
@ -432,7 +438,7 @@ export default defineComponent({
 		async newNamespace() {
 			const newNamespace = new NamespaceModel({title: this.query})

-			await this.$store.dispatch('namespaces/createNamespace', newNamespace)
+			await useNamespaceStore().createNamespace(newNamespace)
 			this.$message.success({message: this.$t('namespace.create.success')})
 			this.closeQuickActions()
 		},
--- a/src/components/sharing/linkSharing.vue
+++ b/src/components/sharing/linkSharing.vue
@ -79,30 +79,59 @@
 			>
 				<thead>
 				<tr>
-					<th>{{ $t('list.share.attributes.link') }}</th>
-					<th>{{ $t('list.share.attributes.name') }}</th>
-					<th>{{ $t('list.share.attributes.sharedBy') }}</th>
-					<th>{{ $t('list.share.attributes.right') }}</th>
+					<th></th>
+					<th>{{ $t('list.share.links.view') }}</th>
 					<th>{{ $t('list.share.attributes.delete') }}</th>
 				</tr>
 				</thead>
 				<tbody>
 				<tr :key="s.id" v-for="s in linkShares">
 					<td>
+						<p class="mb-2 is-italic" v-if="s.name !== ''">
+							{{ s.name }}
+						</p>
+
+						<p class="mb-2">
+							<i18n-t keypath="list.share.links.sharedBy">
+								<strong>{{ s.sharedBy.getDisplayName() }}</strong>
+							</i18n-t>
+						</p>
+
+						<p class="mb-2">
+							<template v-if="s.right === RIGHTS.ADMIN">
+								<span class="icon is-small">
+									<icon icon="lock"/>
+								</span>&nbsp;
+								{{ $t('list.share.right.admin') }}
+							</template>
+							<template v-else-if="s.right === RIGHTS.READ_WRITE">
+								<span class="icon is-small">
+									<icon icon="pen"/>
+								</span>&nbsp;
+								{{ $t('list.share.right.readWrite') }}
+							</template>
+							<template v-else>
+								<span class="icon is-small">
+									<icon icon="users"/>
+								</span>&nbsp;
+								{{ $t('list.share.right.read') }}
+							</template>
+						</p>
+						
 						<div class="field has-addons no-input-mobile">
 							<div class="control">
 								<input
-									:value="getShareLink(s.hash)"
-									class="input"
-									readonly
-									type="text"
+										:value="getShareLink(s.hash, selectedView[s.id])"
+										class="input"
+										readonly
+										type="text"
 								/>
 							</div>
 							<div class="control">
 								<x-button
-									@click="copy(getShareLink(s.hash))"
-									:shadow="false"
-									v-tooltip="$t('misc.copy')"
+										@click="copy(getShareLink(s.hash, selectedView[s.id]))"
+										:shadow="false"
+										v-tooltip="$t('misc.copy')"
 								>
 									<span class="icon">
 										<icon icon="paste"/>
@ -112,33 +141,16 @@
 						</div>
 					</td>
 					<td>
-						<template v-if="s.name !== ''">
-							{{ s.name }}
-						</template>
-						<i v-else>{{ $t('list.share.links.noName') }}</i>
-					</td>
-					<td>
-						{{ s.sharedBy.getDisplayName() }}
-					</td>
-					<td class="type">
-						<template v-if="s.right === RIGHTS.ADMIN">
-							<span class="icon is-small">
-								<icon icon="lock"/>
-							</span>&nbsp;
-							{{ $t('list.share.right.admin') }}
-						</template>
-						<template v-else-if="s.right === RIGHTS.READ_WRITE">
-							<span class="icon is-small">
-								<icon icon="pen"/>
-							</span>&nbsp;
-							{{ $t('list.share.right.readWrite') }}
-						</template>
-						<template v-else>
-							<span class="icon is-small">
-								<icon icon="users"/>
-							</span>&nbsp;
-							{{ $t('list.share.right.read') }}
-						</template>
+						<div class="select">
+							<select v-model="selectedView[s.id]">
+								<option
+									v-for="(title, key) in availableViews"
+									:value="key"
+									:key="key">
+									{{ title }}
+								</option>
+							</select>
+						</div>
 					</td>
 					<td class="actions">
 						<x-button
@ -166,7 +178,7 @@
 				<template #header>
 					<span>{{ $t('list.share.links.remove') }}</span>
 				</template>
-				
+
 				<template #text>
 					<p>{{ $t('list.share.links.removeText') }}</p>
 				</template>
@ -177,17 +189,21 @@

 <script setup lang="ts">
 import {ref, watch, computed, shallowReactive} from 'vue'
-import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'

 import {RIGHTS} from '@/constants/rights'
-import LinkShareModel, { type ILinkShare } from '@/models/linkShare'
+import LinkShareModel from '@/models/linkShare'
+
+import type {ILinkShare} from '@/modelTypes/ILinkShare'
+import type {IList} from '@/modelTypes/IList'

 import LinkShareService from '@/services/linkShare'

 import {useCopyToClipboard} from '@/composables/useCopyToClipboard'
 import {success} from '@/message'
-import type { IList } from '@/models/list'
+import type {ListView} from '@/types/ListView'
+import {LIST_VIEWS} from '@/types/ListView'
+import {useConfigStore} from '@/stores/config'

 const props = defineProps({
 	listId: {
@ -207,6 +223,17 @@ const showDeleteModal = ref(false)
 const linkIdToDelete = ref(0)
 const showNewForm = ref(false)

+type SelectedViewMapper = Record<IList['id'], ListView>
+
+const selectedView = ref<SelectedViewMapper>({})
+
+const availableViews = computed<Record<ListView, string>>(() => ({
+	list: t('list.list.title'),
+	gantt: t('list.gantt.title'),
+	table: t('list.table.title'),
+	kanban: t('list.kanban.title'),
+}))
+
 const copy = useCopyToClipboard()
 watch(
 	() => props.listId,
@ -214,8 +241,8 @@ watch(
 	{immediate: true},
 )

-const store = useStore()
-const frontendUrl = computed(() => store.state.config.frontendUrl)
+const configStore = useConfigStore()
+const frontendUrl = computed(() => configStore.frontendUrl)

 async function load(listId: IList['id']) {
 	// If listId == 0 the list on the calling component wasn't already loaded, so we just bail out here
@ -223,7 +250,11 @@ async function load(listId: IList['id']) {
 		return
 	}

-	linkShares.value = await linkShareService.getAll({listId})
+	const links = await linkShareService.getAll({listId})
+	links.forEach((l: ILinkShare) => {
+		selectedView.value[l.id] = 'list'
+	})
+	linkShares.value = links
 }

 async function add(listId: IList['id']) {
@ -255,15 +286,15 @@ async function remove(listId: IList['id']) {
 	}
 }

-function getShareLink(hash: string) {
-	return frontendUrl.value + 'share/' + hash + '/auth'
+function getShareLink(hash: string, view: ListView = LIST_VIEWS.LIST) {
+	return frontendUrl.value + 'share/' + hash + '/auth?view=' + view
 }
 </script>

 <style lang="scss" scoped>
 // FIXME: I think this is not needed
 .sharables-list:not(.card-content) {
-  overflow-y: auto
+	overflow-y: auto
 }

@include modal-transition();
--- a/src/components/sharing/userTeam.vue
+++ b/src/components/sharing/userTeam.vue
@ -143,22 +143,29 @@ import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'

 import UserNamespaceService from '@/services/userNamespace'
-import UserNamespaceModel, { type IUserNamespace } from '@/models/userNamespace'
+import UserNamespaceModel from '@/models/userNamespace'
+import type {IUserNamespace} from '@/modelTypes/IUserNamespace'

 import UserListService from '@/services/userList'
-import UserListModel, { type IUserList } from '@/models/userList'
+import UserListModel from '@/models/userList'
+import type {IUserList} from '@/modelTypes/IUserList'

 import UserService from '@/services/user'
-import UserModel, { type IUser } from '@/models/user'
+import UserModel from '@/models/user'
+import type {IUser} from '@/modelTypes/IUser'

 import TeamNamespaceService from '@/services/teamNamespace'
-import TeamNamespaceModel, { type ITeamNamespace } from '@/models/teamNamespace'
+import TeamNamespaceModel from '@/models/teamNamespace'
+import type { ITeamNamespace } from '@/modelTypes/ITeamNamespace'

 import TeamListService from '@/services/teamList'
-import TeamListModel, { type ITeamList } from '@/models/teamList'
+import TeamListModel from '@/models/teamList'
+import type { ITeamList } from '@/modelTypes/ITeamList'

 import TeamService from '@/services/team'
-import TeamModel, { type ITeam } from '@/models/team'
+import TeamModel from '@/models/team'
+import type {ITeam} from '@/modelTypes/ITeam'
+

 import {RIGHTS} from '@/constants/rights'
 import Multiselect from '@/components/input/multiselect.vue'
@ -235,6 +242,7 @@ const sharableName = computed(() => {

 if (props.shareType === 'user') {
 	searchService = shallowReactive(new UserService())
+	// eslint-disable-next-line vue/no-ref-as-operand
 	sharable = ref(new UserModel())
 	searchLabel.value = 'username'

@ -251,6 +259,7 @@ if (props.shareType === 'user') {
 	}
 } else if (props.shareType === 'team') {
 	searchService = new TeamService()
+	// eslint-disable-next-line vue/no-ref-as-operand
 	sharable = ref(new TeamModel())
 	searchLabel.value = 'name'

--- a/src/components/tasks/add-task.vue
+++ b/src/components/tasks/add-task.vue
@ -3,7 +3,7 @@
 		<div class="field is-grouped">
 			<p class="control has-icons-left is-expanded">
 				<textarea
-					:disabled="taskService.loading || undefined"
+					:disabled="loading || undefined"
 					class="add-task-textarea input"
 					:class="{'textarea-empty': newTaskTitle === ''}"
 					:placeholder="$t('list.list.addPlaceholder')"
@ -21,10 +21,10 @@
 			<p class="control">
 				<x-button
 					class="add-task-button"
-					:disabled="newTaskTitle === '' || taskService.loading || undefined"
+					:disabled="newTaskTitle === '' || loading || undefined"
 					@click="addTask()"
 					icon="plus"
-					:loading="taskService.loading"
+					:loading="loading"
 					:aria-label="$t('list.list.add')"
 				>
 					<span class="button-text">
@ -41,13 +41,13 @@
 </template>

 <script setup lang="ts">
-import {ref, watch, unref, shallowReactive} from 'vue'
+import {ref, watch, unref, computed} from 'vue'
 import {useI18n} from 'vue-i18n'
 import {useStore} from '@/store'
 import {tryOnMounted, debouncedWatch, useWindowSize, type MaybeRef} from '@vueuse/core'

-import TaskService from '@/services/task'
 import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'
+import {LOADING, LOADING_MODULE} from '@/store/mutation-types'

 function cleanupTitle(title: string) {
 	return title.replace(/^((\* |\+ |- )(\[ \] )?)/g, '')
@ -136,7 +136,6 @@ const newTaskInput = useAutoHeightTextarea(newTaskTitle)
 const {t} = useI18n({useScope: 'global'})
 const store = useStore()

-const taskService = shallowReactive(new TaskService())
 const errorMessage = ref('')

 function resetEmptyTitleError(e) {
@ -148,6 +147,7 @@ function resetEmptyTitleError(e) {
 	}
 }

+const loading = computed(() => store.state[LOADING] && store.state[LOADING_MODULE] === 'tasks')
 async function addTask() {
 	if (newTaskTitle.value === '') {
 		errorMessage.value = t('list.create.addTitleRequired')
@ -155,7 +155,7 @@ async function addTask() {
 	}
 	errorMessage.value = ''

-	if (taskService.loading) {
+	if (loading.value) {
 		return
 	}

@ -214,7 +214,7 @@ defineExpose({
 }

 .add-task-button {
-	height: 2.5rem;
+	height: 100% !important;

 	@media screen and (max-width: $mobile) {
 		.button-text {
--- a/src/components/tasks/edit-task.vue
+++ b/src/components/tasks/edit-task.vue
@ -36,8 +36,8 @@

 		<strong>{{ $t('task.attributes.reminders') }}</strong>
 		<reminders
-			@change="editTaskSubmit()"
 			v-model="taskEditTask.reminderDates"
+			@update:model-value="editTaskSubmit()"
 		/>

 		<div class="field">
@ -83,7 +83,8 @@ import {useI18n} from 'vue-i18n'
 import Editor from '@/components/input/AsyncEditor'

 import TaskService from '@/services/task'
-import TaskModel, { type ITask } from '@/models/task'
+import TaskModel from '@/models/task'
+import type {ITask} from '@/modelTypes/ITask'
 import EditLabels from './partials/editLabels.vue'
 import Reminders from './partials/reminders.vue'
 import ColorPicker from '../input/colorPicker.vue'
--- a/src/components/tasks/partials/attachments.vue
+++ b/src/components/tasks/partials/attachments.vue
@ -8,19 +8,19 @@
 		</h3>

 		<input
+			v-if="editEnabled"
 			:disabled="attachmentService.loading || undefined"
 			@change="uploadNewAttachment()"
 			id="files"
 			multiple
-			ref="files"
+			ref="filesRef"
 			type="file"
-			v-if="editEnabled"
 		/>
 		<progress
+			v-if="attachmentService.uploadProgress > 0"
 			:value="attachmentService.uploadProgress"
 			class="progress is-primary"
 			max="100"
-			v-if="attachmentService.uploadProgress > 0"
 		>
 			{{ attachmentService.uploadProgress }}%
 		</progress>
@ -42,7 +42,7 @@
 							<span v-tooltip="formatDateLong(a.created)">
 								{{ formatDateSince(a.created) }}
 							</span>
-							<user
+							<User
 								:avatar-size="24"
 								:user="a.createdBy"
 								:is-inline="true"
@ -73,7 +73,7 @@
 						<BaseButton
 							v-if="editEnabled"
 							class="attachment-info-meta-button"
-							@click.prevent.stop="() => {attachmentToDelete = a; showDeleteModal = true}"
+							@click.prevent.stop="setAttachmentToDelete(a)"
 							v-tooltip="$t('task.attachment.deleteTooltip')"
 						>
 							{{ $t('misc.delete') }}
@ -86,7 +86,7 @@
 		<x-button
 			v-if="editEnabled"
 			:disabled="attachmentService.loading"
-			@click="$refs.files.click()"
+			@click="filesRef?.click()"
 			class="mb-4"
 			icon="cloud-upload-alt"
 			variant="secondary"
@ -97,7 +97,7 @@

 		<!-- Dropzone -->
 		<div
-			:class="{ hidden: !showDropzone }"
+			:class="{ hidden: !isOverDropZone }"
 			class="dropzone"
 			v-if="editEnabled"
 		>
@ -110,269 +110,229 @@
 		</div>

 		<!-- Delete modal -->
-		<transition name="modal">
-			<modal
-				@close="showDeleteModal = false"
-				v-if="showDeleteModal"
-				@submit="deleteAttachment()"
-			>
-				<template #header><span>{{ $t('task.attachment.delete') }}</span></template>
-				
-				<template #text>
-					<p>
-						{{ $t('task.attachment.deleteText1', {filename: attachmentToDelete.file.name}) }}<br/>
-						<strong class="has-text-white">{{ $t('misc.cannotBeUndone') }}</strong>
-					</p>
-				</template>
-			</modal>
-		</transition>
+		<modal
+			v-if="attachmentToDelete !== null"
+			@close="setAttachmentToDelete(null)"
+			@submit="deleteAttachment()"
+		>
+			<template #header>
+				<span>{{ $t('task.attachment.delete') }}</span>
+			</template>
+			
+			<template #text>
+				<p>
+					{{ $t('task.attachment.deleteText1', {filename: attachmentToDelete.file.name}) }}<br/>
+					<strong class="has-text-white">{{ $t('misc.cannotBeUndone') }}</strong>
+				</p>
+			</template>
+		</modal>

-		<transition name="modal">
-			<modal
-				@close="
-					() => {
-						showImageModal = false
-						attachmentImageBlobUrl = null
-					}
-				"
-				v-if="showImageModal"
-			>
-				<img :src="attachmentImageBlobUrl" alt=""/>
-			</modal>
-		</transition>
+		<!-- Attachment image modal -->
+		<modal
+			v-if="attachmentImageBlobUrl !== null"
+			@close="attachmentImageBlobUrl = null"
+		>
+			<img :src="attachmentImageBlobUrl" alt=""/>
+		</modal>
 	</div>
 </template>

-<script lang="ts">
-import {defineComponent} from 'vue'
+<script setup lang="ts">
+import {ref, shallowReactive, computed, type PropType} from 'vue'
+import {useDropZone} from '@vueuse/core'

-import AttachmentService from '../../../services/attachment'
-import AttachmentModel, { type IAttachment } from '@/models/attachment'
 import User from '@/components/misc/user.vue'
-import {mapState} from 'vuex'
+import BaseButton from '@/components/base/BaseButton.vue'

-import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
-import { uploadFiles, generateAttachmentUrl } from '@/helpers/attachments'
-import {formatDate, formatDateSince, formatDateLong} from '@/helpers/time/formatDate'
+import AttachmentService from '@/services/attachment'
+import type AttachmentModel from '@/models/attachment'
+import type {IAttachment} from '@/modelTypes/IAttachment'
+import type {ITask} from '@/modelTypes/ITask'

-import BaseButton from '@/components/base/BaseButton'
-import type { IFile } from '@/models/file'
-import { getHumanSize } from '@/helpers/getHumanSize'
+import {useAttachmentStore} from '@/stores/attachments'
+import {formatDateSince, formatDateLong} from '@/helpers/time/formatDate'
+import {uploadFiles, generateAttachmentUrl} from '@/helpers/attachments'
+import {getHumanSize} from '@/helpers/getHumanSize'
+import {useCopyToClipboard} from '@/composables/useCopyToClipboard'
+import {error, success} from '@/message'

-export default defineComponent({
-	name: 'attachments',
-	components: {
-		BaseButton,
-		User,
+const props = defineProps({
+	taskId: {
+		type: Number as PropType<ITask['id']>,
+		required: true,
 	},
-	data() {
-		return {
-			attachmentService: new AttachmentService(),
-			showDropzone: false,
-
-			showDeleteModal: false,
-			attachmentToDelete: AttachmentModel,
-
-			showImageModal: false,
-			attachmentImageBlobUrl: null,
-		}
+	initialAttachments: {
+		type: Array,
 	},
-	props: {
-		taskId: {
-			required: true,
-			type: Number,
-		},
-		initialAttachments: {
-			type: Array,
-		},
-		editEnabled: {
-			default: true,
-		},
-	},
-
-	setup(props) {
-		const copy = useCopyToClipboard()
-
-		function copyUrl(attachment: IAttachment) {
-			copy(generateAttachmentUrl(props.taskId, attachment.id))
-		}
-
-		return { copyUrl }
-	},
-
-	computed: mapState({
-		attachments: (state) => state.attachments.attachments,
-	}),
-	mounted() {
-		document.addEventListener('dragenter', (e) => {
-			e.stopPropagation()
-			e.preventDefault()
-			this.showDropzone = true
-		})
-
-		window.addEventListener('dragleave', (e) => {
-			e.stopPropagation()
-			e.preventDefault()
-			this.showDropzone = false
-		})
-
-		document.addEventListener('dragover', (e) => {
-			e.stopPropagation()
-			e.preventDefault()
-			this.showDropzone = true
-		})
-
-		document.addEventListener('drop', (e) => {
-			e.stopPropagation()
-			e.preventDefault()
-
-			let files = e.dataTransfer.files
-			this.uploadFiles(files)
-			this.showDropzone = false
-		})
-	},
-	methods: {
-		getHumanSize,
-		formatDate,
-		formatDateSince,
-		formatDateLong,
-
-		downloadAttachment(attachment: IAttachment) {
-			this.attachmentService.download(attachment)
-		},
-		uploadNewAttachment() {
-			if (this.$refs.files.files.length === 0) {
-				return
-			}
-
-			this.uploadFiles(this.$refs.files.files)
-		},
-		uploadFiles(files: IFile[]) {
-			uploadFiles(this.attachmentService, this.taskId, files)
-		},
-		async deleteAttachment() {
-			try {
-				const r = await this.attachmentService.delete(this.attachmentToDelete)
-				this.$store.commit(
-					'attachments/removeById',
-					this.attachmentToDelete.id,
-				)
-				this.$message.success(r)
-			} finally{
-				this.showDeleteModal = false
-			}
-		},
-		async viewOrDownload(attachment) {
-			if (
-				attachment.file.name.endsWith('.jpg') ||
-				attachment.file.name.endsWith('.png') ||
-				attachment.file.name.endsWith('.bmp') ||
-				attachment.file.name.endsWith('.gif')
-			) {
-				this.showImageModal = true
-				this.attachmentImageBlobUrl = await this.attachmentService.getBlobUrl(attachment)
-			} else {
-				this.downloadAttachment(attachment)
-			}
-		},
+	editEnabled: {
+		default: true,
 	},
 })
+
+const attachmentService = shallowReactive(new AttachmentService())
+
+const attachmentStore = useAttachmentStore()
+const attachments = computed(() => attachmentStore.attachments)
+
+function onDrop(files: File[] | null) {
+	if (files && files.length !== 0) {
+		uploadFilesToTask(files)
+	}
+}
+
+const { isOverDropZone } = useDropZone(document, onDrop)
+
+function downloadAttachment(attachment: IAttachment) {
+	attachmentService.download(attachment)
+}
+
+const filesRef = ref<HTMLInputElement | null>(null)
+function uploadNewAttachment() {
+	const files = filesRef.value?.files
+
+	if (!files || files.length === 0) {
+		return
+	}
+
+	uploadFilesToTask(files)
+}
+
+function uploadFilesToTask(files: File[] | FileList) {
+	uploadFiles(attachmentService, props.taskId, files)
+}
+
+const attachmentToDelete = ref<AttachmentModel | null>(null)
+
+function setAttachmentToDelete(attachment: AttachmentModel | null) {
+	attachmentToDelete.value = attachment
+}
+
+async function deleteAttachment() {
+	if (attachmentToDelete.value === null) {
+		return
+	}
+
+	try {
+		const r = await attachmentService.delete(attachmentToDelete.value)
+		attachmentStore.removeById(this.attachmentToDelete.id)
+		success(r)
+		setAttachmentToDelete(null)
+	} 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))	) {
+		attachmentImageBlobUrl.value = await attachmentService.getBlobUrl(attachment)
+	} else {
+		downloadAttachment(attachment)
+	}
+}
+
+const copy = useCopyToClipboard()
+function copyUrl(attachment: IAttachment) {
+	copy(generateAttachmentUrl(props.taskId, attachment.id))
+}
 </script>

 <style lang="scss" scoped>
 .attachments {
-  input[type=file] {
-    display: none;
-  }
+	input[type=file] {
+		display: none;
+	}

-  .files {
-    margin-bottom: 1rem;
-
-    .attachment {
-      margin-bottom: .5rem;
-      display: block;
-      transition: background-color $transition;
-      border-radius: $radius;
-      padding: .5rem;
-
-      &:hover {
-        background-color: var(--grey-200);
-      }
-
-      .filename {
-        font-weight: bold;
-        margin-bottom: .25rem;
-        color: var(--text);
-      }
-
-      .info {
-        color: var(--grey-500);
-        font-size: .9rem;
-
-        p {
-          margin-bottom: 0;
-          display: flex;
-
-          > span:not(:last-child):after,
-          > button:not(:last-child):after {
-            content: '·';
-            padding: 0 .25rem;
-          }
-        }
-      }
-    }
-  }
-
-  @media screen and (max-width: $tablet) {
-    .button {
-      width: 100%;
-    }
-  }
-
-  .dropzone {
-    position: fixed;
-    background: rgba(250, 250, 250, 0.8);
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    z-index: 100;
-    text-align: center;
-
-    &.hidden {
-      display: none;
-    }
-
-    .drop-hint {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-
-      .icon {
-        width: 100%;
-        font-size: 5rem;
-        height: auto;
-        text-shadow: var(--shadow-md);
-        animation: bounce 2s infinite;
-		
-		@media (prefers-reduced-motion: reduce) {
-          animation: none;
+	@media screen and (max-width: $tablet) {
+		.button {
+			width: 100%;
 		}
-      }
+	}
+}

-      .hint {
-        margin: .5rem auto 2rem;
-        border-radius: 2px;
-        box-shadow: var(--shadow-md);
-        background: var(--primary);
-        padding: 1rem;
-        color: var(--white);
-        width: 100%;
-        max-width: 300px;
-      }
-    }
-  }
+.files {
+	margin-bottom: 1rem;
+}
+
+.attachment {
+	margin-bottom: .5rem;
+	display: block;
+	transition: background-color $transition;
+	border-radius: $radius;
+	padding: .5rem;
+
+	&:hover {
+		background-color: var(--grey-200);
+	}
+}
+
+.filename {
+	font-weight: bold;
+	margin-bottom: .25rem;
+	color: var(--text);
+}
+
+.info {
+	color: var(--grey-500);
+	font-size: .9rem;
+
+	p {
+		margin-bottom: 0;
+		display: flex;
+
+		> span:not(:last-child):after,
+		> button:not(:last-child):after {
+			content: '·';
+			padding: 0 .25rem;
+		}
+	}
+}
+
+.dropzone {
+	position: fixed;
+	background: rgba(250, 250, 250, 0.8);
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	z-index: 100;
+	text-align: center;
+
+	&.hidden {
+		display: none;
+	}
+
+	.drop-hint {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+
+		.icon {
+			width: 100%;
+			font-size: 5rem;
+			height: auto;
+			text-shadow: var(--shadow-md);
+			animation: bounce 2s infinite;
+	
+			@media (prefers-reduced-motion: reduce) {
+				animation: none;
+			}
+		}
+
+		.hint {
+			margin: .5rem auto 2rem;
+			border-radius: 2px;
+			box-shadow: var(--shadow-md);
+			background: var(--primary);
+			padding: 1rem;
+			color: var(--white);
+			width: 100%;
+			max-width: 300px;
+		}
+	}
 }

 .attachment-info-meta {
@ -409,29 +369,29 @@ export default defineComponent({
 }

@keyframes bounce {
-  from,
-  20%,
-  53%,
-  80%,
-  to {
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    transform: translate3d(0, 0, 0);
-  }
+	from,
+	20%,
+	53%,
+	80%,
+	to {
+		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+		transform: translate3d(0, 0, 0);
+	}

-  40%,
-  43% {
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    transform: translate3d(0, -30px, 0);
-  }
+	40%,
+	43% {
+		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+		transform: translate3d(0, -30px, 0);
+	}

-  70% {
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    transform: translate3d(0, -15px, 0);
-  }
+	70% {
+		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+		transform: translate3d(0, -15px, 0);
+	}

-  90% {
-    transform: translate3d(0, -4px, 0);
-  }
+	90% {
+		transform: translate3d(0, -4px, 0);
+	}
 }

@include modal-transition();
--- a/src/components/tasks/partials/checklist-summary.vue
+++ b/src/components/tasks/partials/checklist-summary.vue
@ -14,7 +14,7 @@ import {computed, type PropType} from 'vue'
 import { useI18n } from 'vue-i18n'

 import {getChecklistStatistics} from '@/helpers/checklistFromText'
-import type {ITask} from '@/models/task'
+import type {ITask} from '@/modelTypes/ITask'

 const props = defineProps({
 	task: {
--- a/src/components/tasks/partials/comments.vue
+++ b/src/components/tasks/partials/comments.vue
@ -70,13 +70,13 @@
 						:is-edit-enabled="canWrite && c.author.id === currentUserId"
 						:upload-callback="attachmentUpload"
 						:upload-enabled="true"
-						@change="
+						v-model="c.comment"
+						@update:model-value="
 							() => {
 								toggleEdit(c)
 								editComment()
 							}
 						"
-						v-model="c.comment"
 						:bottom-actions="actions[c.id]"
 						:show-save="true"
 					/>
@ -159,12 +159,16 @@ import {useI18n} from 'vue-i18n'
 import Editor from '@/components/input/AsyncEditor'

 import TaskCommentService from '@/services/taskComment'
-import TaskCommentModel, { type ITaskComment } from '@/models/taskComment'
+import TaskCommentModel from '@/models/taskComment'
+
+import type {ITaskComment} from '@/modelTypes/ITaskComment'
+import type {ITask} from '@/modelTypes/ITask'
+
 import {uploadFile} from '@/helpers/attachments'
 import {success} from '@/message'
 import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
+import {useConfigStore} from '@/stores/config'

-import type { ITask } from '@/models/task'
 const props = defineProps({
 	taskId: {
 		type: Number,
@ -177,6 +181,7 @@ const props = defineProps({

 const {t} = useI18n({useScope: 'global'})
 const store = useStore()
+const configStore = useConfigStore()

 const comments = ref<ITaskComment[]>([])

@ -193,7 +198,7 @@ const saving = ref<ITask['id'] | null>(null)

 const userAvatar = computed(() => store.state.auth.info.getAvatarUrl(48))
 const currentUserId = computed(() => store.state.auth.info.id)
-const enabled = computed(() => store.state.config.taskCommentsEnabled)
+const enabled = computed(() => configStore.taskCommentsEnabled)
 const actions = computed(() => {
 	if (!props.canWrite) {
 		return {}
@ -209,8 +214,13 @@ const actions = computed(() => {
 	])))
 })

-function attachmentUpload(...args) {
-	return uploadFile(props.taskId, ...args)
+function attachmentUpload(
+	file: File,
+	onSuccess: (url: string) => void,
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	onError: (error: string) => void,
+) {
+	return uploadFile(props.taskId, file, onSuccess)
 }

 const taskCommentService = shallowReactive(new TaskCommentService())
--- a/src/components/tasks/partials/createdUpdated.vue
+++ b/src/components/tasks/partials/createdUpdated.vue
@ -28,7 +28,7 @@

 <script lang="ts" setup>
 import {computed, toRefs, type PropType} from 'vue'
-import type { ITask } from '@/models/task'
+import type {ITask} from '@/modelTypes/ITask'
 import {formatISO, formatDateLong, formatDateSince} from '@/helpers/time/formatDate'

 const props = defineProps({
--- a/src/components/tasks/partials/defer-task.vue
+++ b/src/components/tasks/partials/defer-task.vue
@ -44,7 +44,7 @@ import {useI18n} from 'vue-i18n'
 import flatPickr from 'vue-flatpickr-component'

 import TaskService from '@/services/task'
-import { type ITask } from '@/models/task'
+import type {ITask} from '@/modelTypes/ITask'

 const props = defineProps({
 	modelValue: {
--- a/src/components/tasks/partials/description.vue
+++ b/src/components/tasks/partials/description.vue
@ -20,12 +20,12 @@
 			:is-edit-enabled="canWrite"
 			:upload-callback="attachmentUpload"
 			:upload-enabled="true"
-			@change="save"
 			:placeholder="$t('task.description.placeholder')"
 			:empty-text="$t('task.description.empty')"
 			:show-save="true"
 			edit-shortcut="e"
 			v-model="task.description"
+			@update:model-value="save"
 		/>
 	</div>
 </template>
@ -36,7 +36,7 @@ import {useStore} from '@/store'

 import Editor from '@/components/input/AsyncEditor'

-import type { ITask } from '@/models/task'
+import type {ITask} from '@/modelTypes/ITask'


 const props = defineProps({
--- a/src/components/tasks/partials/editLabels.vue
+++ b/src/components/tasks/partials/editLabels.vue
@ -50,6 +50,7 @@ import {success} from '@/message'
 import BaseButton from '@/components/base/BaseButton.vue'
 import Multiselect from '@/components/input/multiselect.vue'
 import type { ILabel } from '@/modelTypes/ILabel'
+import { useLabelStore } from '@/stores/labels'

 const props = defineProps({
 	modelValue: {
@ -66,7 +67,7 @@ const props = defineProps({
 	},
 })

-const emit = defineEmits(['update:modelValue', 'change'])
+const emit = defineEmits(['update:modelValue'])

 const store = useStore()
 const {t} = useI18n({useScope: 'global'})
@ -86,8 +87,10 @@ watch(
 	},
 )

-const foundLabels = computed(() => store.getters['labels/filterLabelsByQuery'](labels.value, query.value))
-const loading = computed(() => labelTaskService.loading || (store.state.loading && store.state.loadingModule === 'labels'))
+const labelStore = useLabelStore()
+
+const foundLabels = computed(() => labelStore.filterLabelsByQuery(labels.value, query.value))
+const loading = computed(() => labelTaskService.loading || labelStore.isLoading)

 function findLabel(newQuery: string) {
 	query.value = newQuery
@ -96,7 +99,6 @@ function findLabel(newQuery: string) {
 async function addLabel(label: ILabel, showNotification = true) {
 	const bubble = () => {
 		emit('update:modelValue', labels.value)
-		emit('change', labels.value)
 	}
 	
 	if (props.taskId === 0) {
@ -122,7 +124,6 @@ async function removeLabel(label: ILabel) {
 		}
 	}
 	emit('update:modelValue', labels.value)
-	emit('change', labels.value)
 	success({message: t('task.label.removeSuccess')})
 }

@ -131,7 +132,8 @@ async function createAndAddLabel(title: string) {
 		return
 	}

-	const newLabel = await store.dispatch('labels/createLabel', new LabelModel({title}))
+	const labelStore = useLabelStore()
+	const newLabel = await labelStore.createLabel(new LabelModel({title}))
 	addLabel(newLabel, false)
 	labels.value.push(newLabel)
 	success({message: t('task.label.addCreateSuccess')})
--- a/src/components/tasks/partials/heading.vue
+++ b/src/components/tasks/partials/heading.vue
@ -1,7 +1,12 @@
 <template>
 	<div class="heading">
 		<BaseButton @click="copyUrl"><h1 class="title task-id">{{ textIdentifier }}</h1></BaseButton>
-		<Done class="heading__done" :is-done="task.done" />
+		<Done class="heading__done" :is-done="task.done"/>
+		<ColorBubble
+			v-if="task.hexColor !== ''"
+			:color="task.getHexColor()"
+			class="mt-1 ml-2"
+		/>
 		<h1
 			class="title input"
 			:class="{'disabled': !canWrite}"
@ -34,12 +39,15 @@
 <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 Done from '@/components/misc/Done.vue'
-import type {ITask} from '@/models/task'
-import { useRouter } from 'vue-router'
-import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
+
+import {useCopyToClipboard} from '@/composables/useCopyToClipboard'
+
+import type {ITask} from '@/modelTypes/ITask'
+import ColorBubble from '@/components/misc/colorBubble.vue'

 const props = defineProps({
 	task: {
@ -56,10 +64,11 @@ const emit = defineEmits(['update:task'])

 const router = useRouter()
 const copy = useCopyToClipboard()
+
 async function copyUrl() {
-	const route = router.resolve({ name: 'task.detail', query: { taskId: props.task.id}})
+	const route = router.resolve({name: 'task.detail', query: {taskId: props.task.id}})
 	const absoluteURL = new URL(route.href, window.location.href).href
-	
+
 	await copy(absoluteURL)
 }

@ -93,8 +102,7 @@ async function save(title: string) {
 		setTimeout(() => {
 			showSavedMessage.value = false
 		}, 2000)
-	}
-	finally {
+	} finally {
 		saving.value = false
 	}
 }
@ -104,4 +112,9 @@ async function save(title: string) {
 .heading__done {
 	margin-left: .5rem;
 }
+
+.color-bubble {
+	height: .75rem;
+	width: .75rem;
+}
 </style>
--- a/src/components/tasks/partials/kanban-card.vue
+++ b/src/components/tasks/partials/kanban-card.vue
@ -68,13 +68,13 @@
 <script lang="ts">
 import {defineComponent, type PropType} from 'vue'

-import {playPop} from '../../../helpers/playPop'
 import PriorityLabel from '../../../components/tasks/partials/priorityLabel.vue'
 import User from '../../../components/misc/user.vue'
 import Done from '@/components/misc/Done.vue'
 import Labels from '../../../components/tasks/partials/labels.vue'
 import ChecklistSummary from './checklist-summary.vue'
-import {TASK_DEFAULT_COLOR, type ITask} from '@/models/task'
+import {TASK_DEFAULT_COLOR} from '@/models/task'
+import type {ITask} from '@/modelTypes/ITask'

 import {formatDateLong, formatISO, formatDateSince} from '@/helpers/time/formatDate'
 import {colorIsDark} from '@/helpers/color/colorIsDark'
@ -125,9 +125,6 @@ export default defineComponent({
 					...task,
 					done,
 				})
-				if (done) {
-					playPop()
-				}
 			} finally {
 				this.loadingInternal = false
 			}
--- a/src/components/tasks/partials/labels.vue
+++ b/src/components/tasks/partials/labels.vue
@ -11,8 +11,8 @@
 </template>

 <script setup lang="ts">
-import type { PropType } from 'vue'
-import type { ILabel } from '@/models/label'
+import type {PropType} from 'vue'
+import type {ILabel} from '@/modelTypes/ILabel'

 defineProps({
 	labels: {
--- a/src/components/tasks/partials/listSearch.vue
+++ b/src/components/tasks/partials/listSearch.vue
@ -19,10 +19,12 @@
 <script lang="ts" setup>
 import {reactive, ref, watch} from 'vue'
 import type {PropType} from 'vue'
-import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
-import ListModel, { type IList } from '@/models/list'
+import ListModel from '@/models/list'
+import type {IList} from '@/modelTypes/IList'
 import Multiselect from '@/components/input/multiselect.vue'
+import {useListStore} from '@/stores/lists'
+import {useNamespaceStore} from '@/stores/namespaces'

 const props = defineProps({
 	modelValue: {
@ -32,7 +34,6 @@ const props = defineProps({
 })
 const emit = defineEmits(['update:modelValue'])

-const store = useStore()
 const {t} = useI18n({useScope: 'global'})

 const list: IList = reactive(new ListModel())
@ -46,12 +47,14 @@ watch(
 	},
 )

-const foundLists = ref([])
+const listStore = useListStore()
+const namespaceStore = useNamespaceStore()
+const foundLists = ref<IList[]>([])
 function findLists(query: string) {
 	if (query === '') {
 		select(null)
 	}
-	foundLists.value = store.getters['lists/searchList'](query)
+	foundLists.value = listStore.searchList(query)
 }

 function select(l: IList | null) {
@ -63,7 +66,7 @@ function select(l: IList | null) {
 }

 function namespace(namespaceId: number) {
-	const namespace = store.getters['namespaces/getNamespaceById'](namespaceId)
+	const namespace = namespaceStore.getNamespaceById(namespaceId)
 	return namespace !== null
 		? namespace.title
 		: t('list.shared')
--- a/src/components/tasks/partials/percentDoneSelect.vue
+++ b/src/components/tasks/partials/percentDoneSelect.vue
@ -32,13 +32,12 @@ const props = defineProps({
 	},
 })

-const emit = defineEmits(['update:modelValue', 'change'])
+const emit = defineEmits(['update:modelValue'])

 const percentDone = computed({
 	get: () => props.modelValue,
 	set(percentDone) {
 		emit('update:modelValue', percentDone)
-		emit('change')
 	},
 })
 </script>
--- a/src/components/tasks/partials/prioritySelect.vue
+++ b/src/components/tasks/partials/prioritySelect.vue
@ -19,19 +19,19 @@
 import {ref, watch} from 'vue'
 import {PRIORITIES} from '@/constants/priorities'

-const priority = ref(0)
-
 const props = defineProps({
 	modelValue: {
-		default: 0,
 		type: Number,
+		default: 0,
 	},
 	disabled: {
 		default: false,
 	},
 })

-const emit = defineEmits(['update:modelValue', 'change'])
+const emit = defineEmits(['update:modelValue'])
+
+const priority = ref(0)

 // FIXME: store value outside
 // Set the priority to the :value every time it changes from the outside
@ -45,6 +45,5 @@ watch(

 function updateData() {
 	emit('update:modelValue', priority.value)
-	emit('change')
 }
 </script>
--- a/src/components/tasks/partials/relatedTasks.vue
+++ b/src/components/tasks/partials/relatedTasks.vue
@ -25,49 +25,48 @@
 					</transition>
 				</label>
 				<div class="field" key="field-search">
-					<multiselect
+					<Multiselect
 						:placeholder="$t('task.relation.searchPlaceholder')"
 						@search="findTasks"
 						:loading="taskService.loading"
 						:search-results="mappedFoundTasks"
 						label="title"
-						v-model="newTaskRelationTask"
+						v-model="newTaskRelation.task"
 						:creatable="true"
 						:create-placeholder="$t('task.relation.createPlaceholder')"
 						@create="createAndRelateTask"
-						@select="addTaskRelation"
 					>
-						<template #searchResult="props">
-							<span v-if="typeof props.option !== 'string'" class="search-result">
+						<template #searchResult="{option: task}">
+							<span v-if="typeof task !== 'string'" class="search-result">
 								<span
 									class="different-list"
-									v-if="props.option.listId !== listId"
+									v-if="task.listId !== listId"
 								>
 									<span
-										v-if="props.option.differentNamespace !== null"
+										v-if="task.differentNamespace !== null"
 										v-tooltip="$t('task.relation.differentNamespace')">
-										{{ props.option.differentNamespace }} >
+										{{ task.differentNamespace }} >
 									</span>
 									<span
-										v-if="props.option.differentList !== null"
+										v-if="task.differentList !== null"
 										v-tooltip="$t('task.relation.differentList')">
-										{{ props.option.differentList }} >
+										{{ task.differentList }} >
 									</span>
 								</span>
-								{{ props.option.title }}
+								{{ task.title }}
 							</span>
 							<span class="search-result" v-else>
-								{{ props.option }}
+								{{ task }}
 							</span>
 						</template>
-					</multiselect>
+					</Multiselect>
 				</div>
 				<div class="field has-addons mb-4" key="field-kind">
 					<div class="control is-expanded">
 						<div class="select is-fullwidth has-defaults">
-							<select v-model="newTaskRelationKind">
+							<select v-model="newTaskRelation.kind">
 								<option value="unset">{{ $t('task.relation.select') }}</option>
-								<option :key="rk" :value="rk" v-for="rk in relationKinds">
+								<option :key="`option_${rk}`" :value="rk" v-for="rk in RELATION_KINDS">
 									{{ $tc(`task.relation.kinds.${rk}`, 1) }}
 								</option>
 							</select>
@ -84,29 +83,40 @@
 			<span class="title">{{ rts.title }}</span>
 			<div class="tasks">
 				<div :key="t.id" class="task" v-for="t in rts.tasks">
-					<router-link
-						:to="{ name: $route.name, params: { id: t.id } }"
-						:class="{ 'is-strikethrough': t.done}">
-						<span
-							class="different-list"
-							v-if="t.listId !== listId"
+					<div class="is-flex is-align-items-center">
+						<Fancycheckbox
+							class="task-done-checkbox"
+							v-model="t.done"
+							@update:model-value="toggleTaskDone(t)"
+						/>
+						<router-link
+							:to="{ name: route.name as string, params: { id: t.id } }"
+							:class="{ 'is-strikethrough': t.done}"
 						>
 							<span
-								v-if="t.differentNamespace !== null"
-								v-tooltip="$t('task.relation.differentNamespace')">
-								{{ t.differentNamespace }} >
+								class="different-list"
+								v-if="t.listId !== listId"
+							>
+								<span
+									v-if="t.differentNamespace !== null"
+									v-tooltip="$t('task.relation.differentNamespace')">
+									{{ t.differentNamespace }} >
+								</span>
+								<span
+									v-if="t.differentList !== null"
+									v-tooltip="$t('task.relation.differentList')">
+									{{ t.differentList }} >
+								</span>
 							</span>
-							<span
-								v-if="t.differentList !== null"
-								v-tooltip="$t('task.relation.differentList')">
-								{{ t.differentList }} >
-							</span>
-						</span>
-						{{ t.title }}
-					</router-link>
+							{{ t.title }}
+						</router-link>
+					</div>
 					<BaseButton
 						v-if="editEnabled"
-						@click="() => {showDeleteModal = true; relationToDelete = {relationKind: rts.kind, otherTaskId: t.id}}"
+						@click="setRelationToDelete({
+							relationKind: rts.kind,
+							otherTaskId: t.id
+						})"
 						class="remove"
 					>
 						<icon icon="trash-alt"/>
@ -118,204 +128,237 @@
 			{{ $t('task.relation.noneYet') }}
 		</p>

-		<!-- Delete modal -->
-		<transition name="modal">
-			<modal
-				@close="showDeleteModal = false"
-				@submit="removeTaskRelation()"
-				v-if="showDeleteModal"
-			>
-				<template #header><span>{{ $t('task.relation.delete') }}</span></template>
+		<modal
+			v-if="relationToDelete !== undefined"
+			@close="relationToDelete = undefined"
+			@submit="removeTaskRelation()"
+		>
+			<template #header><span>{{ $t('task.relation.delete') }}</span></template>

-				<template #text>
-					<p>
-						{{ $t('task.relation.deleteText1') }}<br/>
-						<strong class="has-text-white">{{ $t('misc.cannotBeUndone') }}</strong>
-					</p>
-				</template>
-			</modal>
-		</transition>
+			<template #text>
+				<p>
+					{{ $t('task.relation.deleteText1') }}<br/>
+					<strong class="has-text-white">{{ $t('misc.cannotBeUndone') }}</strong>
+				</p>
+			</template>
+		</modal>
 	</div>
 </template>

-<script lang="ts">
-import {defineComponent} from 'vue'
+<script setup lang="ts">
+import {ref, reactive, shallowReactive, watch, computed, type PropType} from 'vue'
+import {useI18n} from 'vue-i18n'
+import {useRoute} from 'vue-router'
+import {useStore} from '@/store'

-import TaskService from '../../../services/task'
-import TaskModel from '../../../models/task'
-import TaskRelationService from '../../../services/taskRelation'
+import TaskService from '@/services/task'
+import TaskModel from '@/models/task'
+import type {ITask} from '@/modelTypes/ITask'
+import type {ITaskRelation} from '@/modelTypes/ITaskRelation'
+import {RELATION_KINDS, RELATION_KIND, type IRelationKind} from '@/types/IRelationKind'
+
+import TaskRelationService from '@/services/taskRelation'
 import TaskRelationModel from '@/models/taskRelation'
-import { RELATION_KIND, RELATION_KINDS } from '@/types/IRelationKind'

 import BaseButton from '@/components/base/BaseButton.vue'
 import Multiselect from '@/components/input/multiselect.vue'
+import Fancycheckbox from '@/components/input/fancycheckbox.vue'

-export default defineComponent({
-	name: 'relatedTasks',
-	data() {
-		return {
-			relatedTasks: {},
-			taskService: new TaskService(),
-			foundTasks: [],
-			relationKinds: RELATION_KINDS,
-			newTaskRelationTask: new TaskModel(),
-			newTaskRelationKind: RELATION_KIND.RELATED,
-			taskRelationService: new TaskRelationService(),
-			showDeleteModal: false,
-			relationToDelete: {},
-			saved: false,
-			showNewRelationForm: false,
-			query: '',
-		}
+import {useNamespaceStore} from '@/stores/namespaces'
+
+import {error, success} from '@/message'
+
+const props = defineProps({
+	taskId: {
+		type: Number,
+		required: true,
 	},
-	components: {
-		BaseButton,
-		Multiselect,
+	initialRelatedTasks: {
+		type: Object as PropType<ITask['relatedTasks']>,
+		default: () => ({}),
 	},
-	props: {
-		taskId: {
-			type: Number,
-			required: true,
-		},
-		initialRelatedTasks: {
-			type: Object,
-			default: () => {
-			},
-		},
-		showNoRelationsNotice: {
-			type: Boolean,
-			default: false,
-		},
-		listId: {
-			type: Number,
-			default: 0,
-		},
-		editEnabled: {
-			default: true,
-		},
+	showNoRelationsNotice: {
+		type: Boolean,
+		default: false,
 	},
-	watch: {
-		initialRelatedTasks: {
-			handler(value) {
-				this.relatedTasks = value
-			},
-			immediate: true,
-		},
+	listId: {
+		type: Number,
+		default: 0,
 	},
-	computed: {
-		showCreate() {
-			return Object.keys(this.relatedTasks).length === 0 || this.showNewRelationForm
-		},
-		namespace() {
-			return this.$store.getters['namespaces/getListAndNamespaceById'](this.listId, true)?.namespace
-		},
-		mappedRelatedTasks() {
-			return Object.entries(this.relatedTasks).map(([kind, tasks]) => ({
-				title: this.$tc(`task.relation.kinds.${kind}`, tasks.length),
-				tasks: this.mapRelatedTasks(tasks),
-				kind,
-			}))
-		},
-		mappedFoundTasks() {
-			return this.mapRelatedTasks(this.foundTasks.filter(t => t.id !== this.taskId))
-		},
-	},
-	methods: {
-		async findTasks(query: string) {
-			this.query = query
-			this.foundTasks = await this.taskService.getAll({}, {s: query})
-		},
-
-		async addTaskRelation() {
-			if (this.newTaskRelationTask.id === 0 && this.query !== '') {
-				return this.createAndRelateTask(this.query)
-			}
-
-			if (this.newTaskRelationTask.id === 0) {
-				this.$message.error({message: this.$t('task.relation.taskRequired')})
-				return
-			}
-
-			const rel = new TaskRelationModel({
-				taskId: this.taskId,
-				otherTaskId: this.newTaskRelationTask.id,
-				relationKind: this.newTaskRelationKind,
-			})
-			await this.taskRelationService.create(rel)
-			if (!this.relatedTasks[this.newTaskRelationKind]) {
-				this.relatedTasks[this.newTaskRelationKind] = []
-			}
-			this.relatedTasks[this.newTaskRelationKind].push(this.newTaskRelationTask)
-			this.newTaskRelationTask = null
-			this.saved = true
-			this.showNewRelationForm = false
-			setTimeout(() => {
-				this.saved = false
-			}, 2000)
-		},
-
-		async removeTaskRelation() {
-			const rel = new TaskRelationModel({
-				relationKind: this.relationToDelete.relationKind,
-				taskId: this.taskId,
-				otherTaskId: this.relationToDelete.otherTaskId,
-			})
-			try {
-				await this.taskRelationService.delete(rel)
-
-				const kind = this.relationToDelete.relationKind
-				for (const t in this.relatedTasks[kind]) {
-					if (this.relatedTasks[kind][t].id === this.relationToDelete.otherTaskId) {
-						this.relatedTasks[kind].splice(t, 1)
-
-						break
-					}
-				}
-
-				this.saved = true
-				setTimeout(() => {
-					this.saved = false
-				}, 2000)
-			} finally {
-				this.showDeleteModal = false
-			}
-		},
-
-		async createAndRelateTask(title) {
-			const newTask = new TaskModel({title: title, listId: this.listId})
-			this.newTaskRelationTask = await this.taskService.create(newTask)
-			await this.addTaskRelation()
-		},
-
-		relationKindTitle(kind, length) {
-			return this.$tc(`task.relation.kinds.${kind}`, length)
-		},
-
-		mapRelatedTasks(tasks) {
-			return tasks
-				.map(task => {
-					// by doing this here once we can save a lot of duplicate calls in the template
-					const listAndNamespace = this.$store.getters['namespaces/getListAndNamespaceById'](task.listId, true)
-					const {
-						list,
-						namespace,
-					} = listAndNamespace === null ? {list: null, namespace: null} : listAndNamespace
-
-					return {
-						...task,
-						differentNamespace:
-							(namespace !== null &&
-								namespace.id !== this.namespace.id &&
-								namespace?.title) || null,
-						differentList:
-							(list !== null &&
-								task.listId !== this.listId &&
-								list?.title) || null,
-					}
-				})
-		},
+	editEnabled: {
+		default: true,
 	},
 })
+
+const store = useStore()
+const namespaceStore = useNamespaceStore()
+const route = useRoute()
+const {t} = useI18n({useScope: 'global'})
+
+type TaskRelation = {kind: IRelationKind, task: ITask}
+
+const taskService = shallowReactive(new TaskService())
+
+const relatedTasks = ref<ITask['relatedTasks']>({})
+
+const newTaskRelation: TaskRelation = reactive({
+	kind: RELATION_KIND.RELATED,
+	task: new TaskModel(),
+})
+
+watch(
+	() => props.initialRelatedTasks,
+	(value) => {
+		relatedTasks.value = value
+	},
+		{immediate: true},
+)
+
+const showNewRelationForm = ref(false)
+const showCreate = computed(() => Object.keys(relatedTasks.value).length === 0 || showNewRelationForm.value)
+
+const query = ref('')
+const foundTasks = ref<ITask[]>([])
+
+async function findTasks(newQuery: string) {
+	query.value = newQuery
+	foundTasks.value = await taskService.getAll({}, {s: newQuery})
+}
+
+const getListAndNamespaceById = (listId: number) => namespaceStore.getListAndNamespaceById(listId, true)
+
+const namespace = computed(() => getListAndNamespaceById(props.listId)?.namespace)
+
+function mapRelatedTasks(tasks: ITask[]) {
+	return tasks.map(task => {
+		// by doing this here once we can save a lot of duplicate calls in the template
+		const {
+			list,
+			namespace: taskNamespace,
+		} = getListAndNamespaceById(task.listId) || {list: null, namespace: null}
+
+		return {
+			...task,
+			differentNamespace:
+				(taskNamespace !== null &&
+					taskNamespace.id !== namespace.value.id &&
+					taskNamespace?.title) || null,
+			differentList:
+				(list !== null &&
+					task.listId !== props.listId &&
+					list?.title) || null,
+		}
+	})
+}
+
+const mapRelationKindsTitleGetter = computed(() => ({
+	'subtask': (count: number) => t('task.relation.kinds.subtask', count),
+	'parenttask': (count: number) => t('task.relation.kinds.parenttask', count),
+	'related': (count: number) => t('task.relation.kinds.related', count),
+	'duplicateof': (count: number) => t('task.relation.kinds.duplicateof', count),
+	'duplicates': (count: number) => t('task.relation.kinds.duplicates', count),
+	'blocking': (count: number) => t('task.relation.kinds.blocking', count),
+	'blocked': (count: number) => t('task.relation.kinds.blocked', count),
+	'precedes': (count: number) => t('task.relation.kinds.precedes', count),
+	'follows': (count: number) => t('task.relation.kinds.follows', count),
+	'copiedfrom': (count: number) => t('task.relation.kinds.copiedfrom', count),
+	'copiedto': (count: number) => t('task.relation.kinds.copiedto', count),
+}))
+
+const mappedRelatedTasks = computed(() => Object.entries(relatedTasks.value).map(
+	([kind, tasks]) => ({
+		title: mapRelationKindsTitleGetter.value[kind as IRelationKind](tasks.length),
+		tasks: mapRelatedTasks(tasks),
+		kind: kind as IRelationKind,
+	}),
+))
+const mappedFoundTasks = computed(() => mapRelatedTasks(foundTasks.value.filter(t => t.id !== props.taskId)))
+
+const taskRelationService = shallowReactive(new TaskRelationService())
+const saved = ref(false)
+
+async function addTaskRelation() {
+	if (newTaskRelation.task.id === 0 && query.value !== '') {
+		return createAndRelateTask(query.value)
+	}
+
+	if (newTaskRelation.task.id === 0) {
+		error({message: t('task.relation.taskRequired')})
+		return
+	}
+
+	await taskRelationService.create(new TaskRelationModel({
+		taskId: props.taskId,
+		otherTaskId: newTaskRelation.task.id,
+		relationKind: newTaskRelation.kind,
+	}))
+	relatedTasks.value[newTaskRelation.kind] = [
+		...(relatedTasks.value[newTaskRelation.kind] || []),
+		newTaskRelation.task,
+	]
+	newTaskRelation.task = new TaskModel()
+	saved.value = true
+	showNewRelationForm.value = false
+	setTimeout(() => {
+		saved.value = false
+	}, 2000)
+}
+
+const relationToDelete = ref<Partial<ITaskRelation>>()
+
+function setRelationToDelete(relation: Partial<ITaskRelation>) {
+	relationToDelete.value = relation
+}
+
+async function removeTaskRelation() {
+	const relation = relationToDelete.value
+	if (!relation || !relation.relationKind || !relation.otherTaskId) {
+		relationToDelete.value = undefined
+		return
+	}
+	try {
+		const relationKind = relation.relationKind
+		await taskRelationService.delete(new TaskRelationModel({
+			relationKind,
+			taskId: props.taskId,
+			otherTaskId: relation.otherTaskId,
+		}))
+
+		relatedTasks.value[relationKind] = relatedTasks.value[relationKind]?.filter(
+			({id}) => id !== relation.otherTaskId,
+		)
+
+		saved.value = true
+		setTimeout(() => {
+			saved.value = false
+		}, 2000)
+	} finally {
+		relationToDelete.value = undefined
+	}
+}
+
+async function createAndRelateTask(title: string) {
+	const newTask = await taskService.create(new TaskModel({title, listId: props.listId}))
+	newTaskRelation.task = newTask
+	await addTaskRelation()
+}
+
+async function toggleTaskDone(task: ITask) {
+	await store.dispatch('tasks/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) => {
+			const found = t.id === task.id
+			if (found) {
+				relatedTasks.value[kind as IRelationKind]![key] = task
+			}
+			return found
+		})
+	})
+
+	success({message: t('task.detail.updateSuccess')})
+}
 </script>

 <style lang="scss" scoped>
@ -366,15 +409,16 @@ export default defineComponent({
 		}
 	}

-	.remove {
-		text-align: center;
-		color: var(--danger);
-		opacity: 0;
-		transition: opacity $transition;
-	}
 }

-.related-tasks:hover .tasks .task .remove {
+.remove {
+	text-align: center;
+	color: var(--danger);
+	opacity: 0;
+	transition: opacity $transition;
+}
+
+.task:hover .remove {
 	opacity: 1;
 }

@ -387,5 +431,13 @@ export default defineComponent({
 	padding: 0.5rem;
 }

+// FIXME: The height of the actual checkbox in the <Fancycheckbox/> component is too much resulting in a 
+//  weired positioning of the checkbox. Setting the height here is a workaround until we fix the styling 
+//  of the component.
+.task-done-checkbox {
+	padding: 0;
+	height: 18px; // The exact height of the checkbox in the container
+}
+
@include modal-transition();
 </style>
--- a/src/components/tasks/partials/reminders.vue
+++ b/src/components/tasks/partials/reminders.vue
@ -63,7 +63,7 @@ const props = defineProps({
 	},
 })

-const emit = defineEmits(['update:modelValue', 'change'])
+const emit = defineEmits(['update:modelValue'])

 const reminders = ref<Reminder[]>([])

@ -86,7 +86,6 @@ watch(

 function updateData() {
 	emit('update:modelValue', reminders.value)
-	emit('change')
 }

 const newReminder = ref(null)
--- a/src/components/tasks/partials/repeatAfter.vue
+++ b/src/components/tasks/partials/repeatAfter.vue
@ -85,7 +85,7 @@ const props = defineProps({

 const {t} = useI18n({useScope: 'global'})

-const emit = defineEmits(['update:modelValue', 'change'])
+const emit = defineEmits(['update:modelValue'])

 const task = ref<ITask>()
 const repeatAfter = reactive({
@ -116,7 +116,6 @@ function updateData() {

 	Object.assign(task.value.repeatAfter, repeatAfter)
 	emit('update:modelValue', task.value)
-	emit('change')
 }

 function setRepeatAfter(amount: number, type: IRepeatAfter['type']) {
--- a/src/components/tasks/partials/singleTaskInList.vue
+++ b/src/components/tasks/partials/singleTaskInList.vue
@ -1,12 +1,11 @@
 <template>
 	<div :class="{'is-loading': taskService.loading}" class="task loader-container">
 		<fancycheckbox :disabled="(isArchived || disabled) && !canMarkAsDone" @change="markAsDone" v-model="task.done"/>
-		<span
+		<ColorBubble
 			v-if="showListColor && listColor !== ''"
-			:style="{backgroundColor: listColor }"
-			class="color-bubble"
-		>
-		</span>
+			:color="listColor"
+			class="mr-1"
+		/>
 		<router-link
 			:to="taskDetailRoute"
 			:class="{ 'done': task.done}"
@ -15,11 +14,17 @@
 				<router-link
 					:to="{ name: 'list.list', params: { listId: task.listId } }"
 					class="task-list"
-					v-if="showList && $store.getters['lists/getListById'](task.listId) !== null"
-					v-tooltip="$t('task.detail.belongsToList', {list: $store.getters['lists/getListById'](task.listId).title})">
-					{{ $store.getters['lists/getListById'](task.listId).title }}
+					:class="{'mr-2': task.hexColor !== ''}"
+					v-if="showList && getListById(task.listId) !== null"
+					v-tooltip="$t('task.detail.belongsToList', {list: getListById(task.listId).title})">
+					{{ getListById(task.listId).title }}
 				</router-link>

+				<ColorBubble
+					v-if="task.hexColor !== ''"
+					:color="task.getHexColor()"
+					class="mr-1"
+				/>
 				<!-- Show any parent tasks to make it clear this task is a sub task of something -->
 				<span class="parent-tasks" v-if="typeof task.relatedTasks.parenttask !== 'undefined'">
 					<template v-for="(pt, i) in task.relatedTasks.parenttask">
@ -30,7 +35,7 @@
 				{{ task.title }}
 			</span>

-			<labels class="labels ml-2 mr-1" :labels="task.labels" v-if="task.labels.length > 0" />
+			<labels class="labels ml-2 mr-1" :labels="task.labels" v-if="task.labels.length > 0"/>
 			<user
 				:avatar-size="27"
 				:is-inline="true"
@ -80,9 +85,9 @@
 		<router-link
 			:to="{ name: 'list.list', params: { listId: task.listId } }"
 			class="task-list"
-			v-if="!showList && currentList.id !== task.listId && $store.getters['lists/getListById'](task.listId) !== null"
-			v-tooltip="$t('task.detail.belongsToList', {list: $store.getters['lists/getListById'](task.listId).title})">
-			{{ $store.getters['lists/getListById'](task.listId).title }}
+			v-if="!showList && currentList.id !== task.listId && getListById(task.listId) !== null"
+			v-tooltip="$t('task.detail.belongsToList', {list: getListById(task.listId).title})">
+			{{ getListById(task.listId).title }}
 		</router-link>
 		<BaseButton
 			:class="{'is-favorite': task.isFavorite}"
@ -97,8 +102,10 @@

 <script lang="ts">
 import {defineComponent, type PropType} from 'vue'
+import {mapState} from 'pinia'

-import TaskModel, { type ITask } from '../../../models/task'
+import TaskModel from '@/models/task'
+import type {ITask} from '@/modelTypes/ITask'
 import PriorityLabel from './priorityLabel.vue'
 import TaskService from '../../../services/task'
 import Labels from '@/components/tasks/partials/labels.vue'
@ -107,9 +114,11 @@ import BaseButton from '@/components/base/BaseButton.vue'
 import Fancycheckbox from '../../input/fancycheckbox.vue'
 import DeferTask from './defer-task.vue'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
-import {playPop} from '@/helpers/playPop'
 import ChecklistSummary from './checklist-summary.vue'
 import {formatDateSince, formatISO, formatDateLong} from '@/helpers/time/formatDate'
+import ColorBubble from '@/components/misc/colorBubble.vue'
+import {useListStore} from '@/stores/lists'
+import {useNamespaceStore} from '@/stores/namespaces'

 export default defineComponent({
 	name: 'singleTaskInList',
@ -121,6 +130,7 @@ export default defineComponent({
 		}
 	},
 	components: {
+		ColorBubble,
 		BaseButton,
 		ChecklistSummary,
 		DeferTask,
@ -169,8 +179,11 @@ export default defineComponent({
 		document.removeEventListener('click', this.hideDeferDueDatePopup)
 	},
 	computed: {
+		...mapState(useListStore, {
+			getListById: 'getListById',
+		}),
 		listColor() {
-			const list = this.$store.getters['lists/getListById'](this.task.listId)
+			const list = this.getListById(this.task.listId)
 			return list !== null ? list.hexColor : ''
 		},
 		currentList() {
@ -195,10 +208,7 @@ export default defineComponent({

 		async markAsDone(checked: boolean) {
 			const updateFunc = async () => {
-				const task = await this.taskService.update(this.task)
-				if (this.task.done) {
-					playPop()
-				}
+				const task = await this.$store.dispatch('tasks/update', this.task)
 				this.task = task
 				this.$emit('task-updated', task)
 				this.$message.success({
@ -227,7 +237,8 @@ export default defineComponent({
 			this.task.isFavorite = !this.task.isFavorite
 			this.task = await this.taskService.update(this.task)
 			this.$emit('task-updated', this.task)
-			this.$store.dispatch('namespaces/loadNamespacesIfFavoritesDontExist')
+			const namespaceStore = useNamespaceStore()
+			namespaceStore.loadNamespacesIfFavoritesDontExist()
 		},
 		hideDeferDueDatePopup(e) {
 			if (!this.showDefer) {
@ -281,11 +292,6 @@ export default defineComponent({
 		white-space: nowrap;
 	}

-	.color-bubble {
-		height: 10px;
-		flex: 0 0 10px;
-	}
-
 	.avatar {
 		border-radius: 50%;
 		vertical-align: bottom;
--- a/src/composables/useCopyToClipboard.ts
+++ b/src/composables/useCopyToClipboard.ts
@ -3,11 +3,42 @@ import {useI18n} from 'vue-i18n'

 export function useCopyToClipboard() {
 	const {t} = useI18n({useScope: 'global'})
-
+	
+	function fallbackCopyTextToClipboard(text: string) {
+		const textArea = document.createElement('textarea')
+		textArea.value = text
+		
+		// Avoid scrolling to bottom
+		textArea.style.top = '0'
+		textArea.style.left = '0'
+		textArea.style.position = 'fixed'
+	
+		document.body.appendChild(textArea)
+		textArea.focus()
+		textArea.select()
+	
+		try {
+			// NOTE: the execCommand is deprecated but as of 2022_09
+			// widely supported and works without https
+			const successful = document.execCommand('copy')
+			if (!successful) {
+				throw new Error()
+			}
+		} catch (err) {
+			error(t('misc.copyError'))
+		}
+	
+		document.body.removeChild(textArea)
+	}
+	
 	return async (text: string) => {
+		if (!navigator.clipboard) {
+			fallbackCopyTextToClipboard(text)
+			return
+		}
 		try {
 			await navigator.clipboard.writeText(text)
-		} catch {
+		} catch(e) {
 			error(t('misc.copyError'))
 		}
 	}
--- a/src/composables/useList.ts
+++ b/src/composables/useList.ts
@ -1,37 +0,0 @@
-import {watch, reactive, shallowReactive, unref, toRefs, readonly} from 'vue'
-import type {MaybeRef} from '@vueuse/core'
-import {useStore} from '@/store'
-
-import ListService from '@/services/list'
-import ListModel from '@/models/list'
-import { success } from '@/message'
-import {useI18n} from 'vue-i18n'
-
-export function useList(listId: MaybeRef<ListModel['id']>) {
-	const listService = shallowReactive(new ListService())
-	const {loading: isLoading} = toRefs(listService)
-	const list : ListModel = reactive(new ListModel({}))
-	const {t} = useI18n()
-
-	watch(
-		() => unref(listId),
-		async (listId) => {
-			const loadedList = await listService.get(new ListModel({id: listId}))
-			Object.assign(list, loadedList)
-		},
-		{immediate: true},
-	)
-
-
-	const store = useStore()
-	async function save() {
-		await store.dispatch('lists/updateList', list)
-		success({message: t('list.edit.success')})
-	}
-
-	return {
-		isLoading: readonly(isLoading),
-		list,
-		save,
-	}
-}
--- a/src/composables/useNamespaceSearch.ts
+++ b/src/composables/useNamespaceSearch.ts
@ -1,11 +1,11 @@
 import {ref, computed} from 'vue'
-import {useStore} from '@/store'
+import {useNamespaceStore} from '@/stores/namespaces'

-export function useNameSpaceSearch() {
+export function useNamespaceSearch() {
 	const query = ref('')
 	
-	const store = useStore()
-	const namespaces = computed(() => store.getters['namespaces/searchNamespace'](query.value))
+	const namespaceStore = useNamespaceStore()
+	const namespaces = computed(() => namespaceStore.searchNamespace(query.value))
 	
 	function findNamespaces(newQuery: string) {
 		query.value = newQuery
--- a/src/composables/useTitle.ts
+++ b/src/composables/useTitle.ts
@ -1,12 +1,21 @@
-import { computed, watchEffect } from 'vue'
-import type { ComputedGetter } from 'vue'
+import { computed } from 'vue'
+import type { Ref } from 'vue'

-import { setTitle } from '@/helpers/setTitle'
+import {useTitle as useTitleVueUse, resolveRef} from '@vueuse/core'

-export function useTitle(titleGetter: ComputedGetter<string>) {
-	const titleRef = computed(titleGetter)
+type UseTitleParameters = Parameters<typeof useTitleVueUse>

-	watchEffect(() => setTitle(titleRef.value))
+export function useTitle(...args: UseTitleParameters) {

-	return titleRef
+	const [newTitle, ...restArgs] = args
+
+  const pageTitle = resolveRef(newTitle) as Ref<string>
+
+	const completeTitle = computed(() => 
+		(typeof pageTitle.value === 'undefined' || pageTitle.value === '')
+		? 'Vikunja'
+		: `${pageTitle.value} | Vikunja`,
+	)
+
+	return useTitleVueUse(completeTitle, ...restArgs)
 }
--- a/src/helpers/attachments.ts
+++ b/src/helpers/attachments.ts
@ -1,10 +1,10 @@
-import AttachmentModel, { type IAttachment } from '@/models/attachment'
-import type {IFile} from '@/models/file'
+import AttachmentModel from '@/models/attachment'
+import type {IAttachment} from '@/modelTypes/IAttachment'

 import AttachmentService from '@/services/attachment'
 import { store } from '@/store'

-export function uploadFile(taskId: number, file: IFile, onSuccess: () => Function) {
+export function uploadFile(taskId: number, file: File, onSuccess: (url: string) => void) {
 	const attachmentService = new AttachmentService()
 	const files = [file]

@ -14,7 +14,7 @@ export function uploadFile(taskId: number, file: IFile, onSuccess: () => Functio
 export async function uploadFiles(
 	attachmentService: AttachmentService,
 	taskId: number,
-	files: IFile[],
+	files: File[] | FileList,
 	onSuccess: Function = () => {},
 ) {
 	const attachmentModel = new AttachmentModel({taskId})
--- a/src/helpers/checkAndSetApiUrl.ts
+++ b/src/helpers/checkAndSetApiUrl.ts
@ -1,10 +1,9 @@
-import {store} from '@/store'
+import {useConfigStore} from '@/stores/config'

 const API_DEFAULT_PORT = '3456'

 export const ERROR_NO_API_URL = 'noApiUrlProvided'

-const updateConfig = () => store.dispatch('config/update') 

 export const checkAndSetApiUrl = (url: string): Promise<string> => {
 	if(url.startsWith('/')) {
@ -25,6 +24,9 @@ export const checkAndSetApiUrl = (url: string): Promise<string> => {
 	const oldUrl = window.API_URL
 	window.API_URL = urlToCheck.toString()

+	const configStore = useConfigStore()
+	const updateConfig = () => configStore.update()
+
 	// Check if the api is reachable at the provided url
 	return updateConfig()
 		.catch(e => {
--- a/src/helpers/getListTitle.ts
+++ b/src/helpers/getListTitle.ts
@ -1,5 +1,5 @@
 import {i18n} from '@/i18n'
-import type { IList } from '@/models/list'
+import type {IList} from '@/modelTypes/IList'

 export function getListTitle(l: IList) {
 	if (l.id === -1) {
--- a/src/helpers/getNamespaceTitle.ts
+++ b/src/helpers/getNamespaceTitle.ts
@ -1,5 +1,5 @@
 import {i18n} from '@/i18n'
-import type {INamespace} from '@/models/namespace'
+import type {INamespace} from '@/modelTypes/INamespace'

 export const getNamespaceTitle = (n: INamespace) => {
 	if (n.id === -1) {
--- a/src/helpers/labels.test.ts
+++ b/src/helpers/labels.test.ts
@ -1,47 +0,0 @@
-import {describe, it, expect} from 'vitest'
-
-import {filterLabelsByQuery} from './labels'
-import {createNewIndexer} from '../indexes'
-
-const {add} = createNewIndexer('labels', ['title', 'description'])
-
-describe('filter labels', () => {
-	const state = {
-		labels: {
-			1: {id: 1, title: 'label1'},
-			2: {id: 2, title: 'label2'},
-			3: {id: 3, title: 'label3'},
-			4: {id: 4, title: 'label4'},
-			5: {id: 5, title: 'label5'},
-			6: {id: 6, title: 'label6'},
-			7: {id: 7, title: 'label7'},
-			8: {id: 8, title: 'label8'},
-			9: {id: 9, title: 'label9'},
-		},
-	}
-
-	Object.values(state.labels).forEach(add)
-
-	it('should return an empty array for an empty query', () => {
-		const labels = filterLabelsByQuery(state, [], '')
-
-		expect(labels).toHaveLength(0)
-	})
-	it('should return labels for a query', () => {
-		const labels = filterLabelsByQuery(state, [], 'label2')
-
-		expect(labels).toHaveLength(1)
-		expect(labels[0].title).toBe('label2')
-	})
-	it('should not return found but hidden labels', () => {
-		interface label {
-			id: number,
-			title: string,
-		}
-
-		const labelsToHide: label[] = [{id: 1, title: 'label1'}]
-		const labels = filterLabelsByQuery(state, labelsToHide, 'label1')
-
-		expect(labels).toHaveLength(0)
-	})
-})
--- a/src/helpers/labels.ts
+++ b/src/helpers/labels.ts
@ -1,33 +0,0 @@
-import {createNewIndexer} from '../indexes'
-
-import type {LabelState} from '@/store/types'
-import type {ILabel} from '@/models/label'
-
-const {search} = createNewIndexer('labels', ['title', 'description'])
-
-/**
- * Checks if a list of labels is available in the store and filters them then query
- * @param {Object} state
- * @param {Array} labelsToHide
- * @param {String} query
- * @returns {Array}
- */
-export function filterLabelsByQuery(state: LabelState, labelsToHide: ILabel[], query: string) {
-	const labelIdsToHide: number[] = labelsToHide.map(({id}) => id)
-
-	return search(query)
-			?.filter(value => !labelIdsToHide.includes(value))
-			.map(id => state.labels[id])
-		|| []
-}
-
-
-/**
- * Returns the labels by id if found
- * @param {Object} state
- * @param {Array} ids
- * @returns {Array}
- */
-export function getLabelsByIds(state: LabelState, ids: ILabel['id'][]) {
-	return Object.values(state.labels).filter(({id}) => ids.includes(id))
-}
--- a/src/helpers/markdownRenderer.ts
+++ b/src/helpers/markdownRenderer.ts
@ -0,0 +1,44 @@
+import {marked} from 'marked'
+import hljs from 'highlight.js/lib/common'
+
+export function setupMarkdownRenderer(checkboxId: string) {
+	const renderer = new marked.Renderer()
+	const linkRenderer = renderer.link
+
+	let checkboxNum = -1
+	marked.use({
+		renderer: {
+			image: (src, title, text) => {
+
+				title = title ? ` title="${title}` : ''
+
+				// If the url starts with the api url, the image is likely an attachment and
+				// we'll need to download and parse it properly.
+				if (src.substr(0, window.API_URL.length + 7) === `${window.API_URL}/tasks/`) {
+					return `<img data-src="${src}" alt="${text}" ${title} class="attachment-image"/>`
+				}
+
+				return `<img src="${src}" alt="${text}" ${title}/>`
+			},
+			checkbox: (checked) => {
+				if (checked) {
+					checked = ' checked="checked"'
+				}
+
+				checkboxNum++
+				return `<input type="checkbox" data-checkbox-num="${checkboxNum}" ${checked} class="text-checkbox-${checkboxId}"/>`
+			},
+			link: (href, title, text) => {
+				const isLocal = href.startsWith(`${location.protocol}//${location.hostname}`)
+				const html = linkRenderer.call(renderer, href, title, text)
+				return isLocal ? html : html.replace(/^<a /, '<a target="_blank" rel="noreferrer noopener nofollow" ')
+			},
+		},
+		highlight: function (code, language) {
+			const validLanguage = hljs.getLanguage(language) ? language : 'plaintext'
+			return hljs.highlight(code, {language: validLanguage}).value
+		},
+	})
+	
+	return renderer
+}
--- a/src/helpers/saveCollapsedBucketState.ts
+++ b/src/helpers/saveCollapsedBucketState.ts
@ -1,4 +1,4 @@
-import type {IList} from '@/models/list'
+import type {IList} from '@/modelTypes/IList'

 const key = 'collapsedBuckets'

--- a/src/helpers/savedFilter.ts
+++ b/src/helpers/savedFilter.ts
@ -1,4 +1,4 @@
-import type {IList} from '@/models/list'
+import type {IList} from '@/modelTypes/IList'

 export function getSavedFilterIdFromListId(listId: IList['id']) {
 	let filterId = listId * -1 - 1
--- a/src/helpers/time/parseDate.ts
+++ b/src/helpers/time/parseDate.ts
@ -12,7 +12,9 @@ interface dateFoundResult {
 	date: Date | null,
 }

-export const parseDate = (text: string): dateParseResult => {
+const monthsRegexGroup = '(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)'
+
+export const parseDate = (text: string, now: Date = new Date()): dateParseResult => {
 	const lowerText: string = text.toLowerCase()

 	if (lowerText.includes('today')) {
@ -62,39 +64,44 @@ export const parseDate = (text: string): dateParseResult => {
 	}

 	parsed = getDayFromText(text)
+	if (parsed.date !== null) {
+		const month = getMonthFromText(text, parsed.date)
+		return addTimeToDate(text, month.date, parsed.foundText)
+	}
+
+	parsed = getDateFromTextIn(text, now)
 	if (parsed.date !== null) {
 		return addTimeToDate(text, parsed.date, parsed.foundText)
 	}

-	parsed = getDateFromTextIn(text)
-	if (parsed.date !== null) {
+	parsed = getDateFromText(text)
+
+	if (parsed.date === null) {
 		return {
 			newText: replaceAll(text, parsed.foundText, ''),
 			date: parsed.date,
 		}
 	}

-	parsed = getDateFromText(text)
-
-	return {
-		newText: replaceAll(text, parsed.foundText, ''),
-		date: parsed.date,
-	}
+	return addTimeToDate(text, parsed.date, parsed.foundText)
 }

-const addTimeToDate = (text: string, date: Date, match: string | null): dateParseResult => {
-	if (match === null) {
+const addTimeToDate = (text: string, date: Date, previousMatch: string | null): dateParseResult => {
+	previousMatch = previousMatch?.trim() || ''
+	text = replaceAll(text, previousMatch, '')
+	if (previousMatch === null) {
 		return {
 			newText: text,
 			date: null,
 		}
 	}

-	const matcher = new RegExp(`(${match} (at|@) )([0-9][0-9]?(:[0-9][0-9]?)?( ?(a|p)m)?)`, 'ig')
+	const timeRegex = ' (at|@) ([0-9][0-9]?(:[0-9][0-9]?)?( ?(a|p)m)?)'
+	const matcher = new RegExp(timeRegex, 'ig')
 	const results = matcher.exec(text)

 	if (results !== null) {
-		const time = results[3]
+		const time = results[2]
 		const parts = time.split(':')
 		let hours = parseInt(parts[0])
 		let minutes = 0
@ -110,7 +117,7 @@ const addTimeToDate = (text: string, date: Date, match: string | null): datePars
 		date.setSeconds(0)
 	}

-	const replace = results !== null ? results[0] : match
+	const replace = results !== null ? results[0] : previousMatch
 	return {
 		newText: replaceAll(text, replace, ''),
 		date: date,
@ -118,7 +125,7 @@ const addTimeToDate = (text: string, date: Date, match: string | null): datePars
 }

 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: 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

 	// 1. Try parsing the text as a "usual" date, like 2021-06-24 or 06/24/2021
 	let results: string[] | null = fullDateRegex.exec(text)
@ -127,15 +134,15 @@ export const getDateFromText = (text: string, now: Date = new Date()) => {
 	let containsYear: boolean = true
 	if (result === null) {
 		// 2. Try parsing the date as something like "jan 21" or "21 jan"
-		const monthRegex: RegExp = /((jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec) [0-9][0-9]?|[0-9][0-9]? (jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec))/ig
+		const monthRegex: RegExp = 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()}`
-		foundText = results === null ? '' : results[0]
+		result = results === null ? null : `${results[0]} ${now.getFullYear()}`.trim()
+		foundText = results === null ? '' : results[0].trim()
 		containsYear = false

 		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: RegExp = / ([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
@ -309,7 +316,7 @@ const getDayFromText = (text: string) => {
 	while (date < now) {
 		date.setMonth(date.getMonth() + 1)
 	}
-	
+
 	if (date.getDate() !== day) {
 		date.setDate(day)
 	}
@ -320,6 +327,25 @@ const getDayFromText = (text: string) => {
 	}
 }

+const getMonthFromText = (text: string, date: Date) => {
+	const matcher = new RegExp(monthsRegexGroup, 'ig')
+	const results = matcher.exec(text)
+
+	if (results === null) {
+		return {
+			newText: text,
+			date,
+		}
+	}
+
+	const fullDate = new Date(`${results[0]} 1 ${(new Date()).getFullYear()}`)
+	date.setMonth(fullDate.getMonth())
+	return {
+		newText: replaceAll(text, results[0], ''),
+		date,
+	}
+}
+
 const getDateFromInterval = (interval: number): Date => {
 	const newDate = new Date()
 	newDate.setDate(newDate.getDate() + interval)
--- a/src/i18n/lang/ca-ES.json
+++ b/src/i18n/lang/ca-ES.json
@ -172,6 +172,7 @@
    "search": "Type to search for a list…",
    "searchSelect": "Click or press enter to select this list",
    "shared": "Shared Lists",
+    "noDescriptionAvailable": "No list description is available.",
    "create": {
      "header": "New list",
      "titlePlaceholder": "The list's title goes here…",
@ -242,7 +243,9 @@
        "remove": "Remove a link share",
        "removeText": "Are you sure you want to remove this link share? It will no longer be possible to access this list with this link share. This cannot be undone!",
        "createSuccess": "The link share was successfully created.",
-        "deleteSuccess": "The link share was successfully deleted"
+        "deleteSuccess": "The link share was successfully deleted",
+        "view": "View",
+        "sharedBy": "Shared by {0}"
      },
      "userTeam": {
        "typeUser": "user | users",
@ -264,9 +267,6 @@
      },
      "attributes": {
        "link": "Link",
-        "name": "Name",
-        "sharedBy": "Shared by",
-        "right": "Right",
        "delete": "Delete"
      }
    },
@ -870,7 +870,8 @@
      "related": "Modify related tasks of this task",
      "color": "Change the color of this task",
      "move": "Move this task to another list",
-      "reminder": "Manage reminders of this task"
+      "reminder": "Manage reminders of this task",
+      "description": "Toggle editing of the task description"
    },
    "list": {
      "title": "List Views",
--- a/src/i18n/lang/cs-CZ.json
+++ b/src/i18n/lang/cs-CZ.json
@ -172,6 +172,7 @@
    "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",
+    "noDescriptionAvailable": "No list description is available.",
    "create": {
      "header": "Nový seznam",
      "titlePlaceholder": "Název seznamu přijde sem…",
@ -242,7 +243,9 @@
        "remove": "Odstranit sdílený odkaz",
        "removeText": "Jste si jisti, že chcete odstranit tento sdílený odkaz? K tomuto seznamu již nebude možné přistupovat s tímto sdíleným odkazem. Tuto akci nelze vrátit zpět!",
        "createSuccess": "Sdílený odkaz byl úspěšně vytvořen.",
-        "deleteSuccess": "Sdílený odkaz byl úspěšně smazán"
+        "deleteSuccess": "Sdílený odkaz byl úspěšně smazán",
+        "view": "View",
+        "sharedBy": "Shared by {0}"
      },
      "userTeam": {
        "typeUser": "uživatel | uživatelé",
@ -264,9 +267,6 @@
      },
      "attributes": {
        "link": "Odkaz",
-        "name": "Název",
-        "sharedBy": "Sdíleno od",
-        "right": "Právo",
        "delete": "Smazat"
      }
    },
@ -870,7 +870,8 @@
      "related": "Upravit související úkoly tohoto úkolu",
      "color": "Změnit barvu tohoto úkolu",
      "move": "Přesunout tento úkol do jiného seznamu",
-      "reminder": "Manage reminders of this task"
+      "reminder": "Manage reminders of this task",
+      "description": "Toggle editing of the task description"
    },
    "list": {
      "title": "Zobrazení seznamů",
--- a/src/i18n/lang/de-DE.json
+++ b/src/i18n/lang/de-DE.json
@ -172,6 +172,7 @@
    "search": "Tippe, um nach einer Liste zu suchen…",
    "searchSelect": "Klicke auf oder drücke die Eingabetaste, um diese Liste auszuwählen",
    "shared": "Geteilte Listen",
+    "noDescriptionAvailable": "Keine Listenbeschreibung verfügbar.",
    "create": {
      "header": "Neue Liste",
      "titlePlaceholder": "Der Titel der Liste steht hier…",
@ -242,7 +243,9 @@
        "remove": "Eine Linkfreigabe löschen",
        "removeText": "Bist du sicher, dass du diese Linkfreigabe unwiderruflich löschen möchtest? Über die Linkfreigabe ist danach der Zugriff auf die Liste nicht mehr möglich!",
        "createSuccess": "Die Linkfreigabe wurde erfolgreich erstellt.",
-        "deleteSuccess": "Die Linkfreigabe wurde erfolgreich gelöscht"
+        "deleteSuccess": "Die Linkfreigabe wurde erfolgreich gelöscht",
+        "view": "Ansicht",
+        "sharedBy": "Von {0} geteilt"
      },
      "userTeam": {
        "typeUser": "Benutzer:in | Benutzer:innen",
@ -264,9 +267,6 @@
      },
      "attributes": {
        "link": "Link",
-        "name": "Name",
-        "sharedBy": "Geteilt von",
-        "right": "Berechtigungen",
        "delete": "Löschen"
      }
    },
@ -870,7 +870,8 @@
      "related": "Ändere die Abhängigen Aufgaben dieser Aufgabe",
      "color": "Die Farbe dieser Aufgabe ändern",
      "move": "Diese Aufgabe in eine andere Liste verschieben",
-      "reminder": "Erinnerungen für diese Aufgabe verwalten"
+      "reminder": "Erinnerungen für diese Aufgabe verwalten",
+      "description": "Aufgabenbeschreibung bearbeiten"
    },
    "list": {
      "title": "Listenansicht",
--- a/src/i18n/lang/de-swiss.json
+++ b/src/i18n/lang/de-swiss.json
@ -172,6 +172,7 @@
    "search": "Schriib, um nachere Liste z'sueche…",
    "searchSelect": "Druck uf Enter um die Liste uuszwähle",
    "shared": "Teilti Liste",
+    "noDescriptionAvailable": "Keine Listenbeschreibung verfügbar.",
    "create": {
      "header": "Neue Liste",
      "titlePlaceholder": "Listetitl da ahgeh…",
@ -242,7 +243,9 @@
        "remove": "Linkfreigab lösche",
        "removeText": "Bisch du sicher, dass du die Freigab lösche wetsch? Es wird nüme möglich sii, die Liste mit dem Link z'erreiche. Das chann nid rückgängig gmacht werde!",
        "createSuccess": "De Freigabelink isch erfolgriich erstellt wore.",
-        "deleteSuccess": "De g'teilti Link isch erfolgriich g'chüblet wore"
+        "deleteSuccess": "De g'teilti Link isch erfolgriich g'chüblet wore",
+        "view": "Ansicht",
+        "sharedBy": "Von {0} geteilt"
      },
      "userTeam": {
        "typeUser": "Benutzer | Benutzer",
@ -264,9 +267,6 @@
      },
      "attributes": {
        "link": "Link",
-        "name": "Namä",
-        "sharedBy": "Teilt vo",
-        "right": "Rechts",
        "delete": "Chüble"
      }
    },
@ -870,7 +870,8 @@
      "related": "Beziehige vo dere Uufgab bearbeite",
      "color": "Die Farbe dieser Aufgabe ändern",
      "move": "Diese Aufgabe in eine andere Liste verschieben",
-      "reminder": "Erinnerungen für diese Aufgabe verwalten"
+      "reminder": "Erinnerungen für diese Aufgabe verwalten",
+      "description": "Aufgabenbeschreibung bearbeiten"
    },
    "list": {
      "title": "Listenansicht",
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@ -172,6 +172,7 @@
    "search": "Type to search for a list…",
    "searchSelect": "Click or press enter to select this list",
    "shared": "Shared Lists",
+    "noDescriptionAvailable": "No list description is available.",
    "create": {
      "header": "New list",
      "titlePlaceholder": "The list's title goes here…",
@ -242,7 +243,9 @@
        "remove": "Remove a link share",
        "removeText": "Are you sure you want to remove this link share? It will no longer be possible to access this list with this link share. This cannot be undone!",
        "createSuccess": "The link share was successfully created.",
-        "deleteSuccess": "The link share was successfully deleted"
+        "deleteSuccess": "The link share was successfully deleted",
+        "view": "View",
+        "sharedBy": "Shared by {0}"
      },
      "userTeam": {
        "typeUser": "user | users",
@ -264,9 +267,6 @@
      },
      "attributes": {
        "link": "Link",
-        "name": "Name",
-        "sharedBy": "Shared by",
-        "right": "Right",
        "delete": "Delete"
      }
    },
--- a/src/i18n/lang/es-ES.json
+++ b/src/i18n/lang/es-ES.json
@ -172,6 +172,7 @@
    "search": "Type to search for a list…",
    "searchSelect": "Click or press enter to select this list",
    "shared": "Shared Lists",
+    "noDescriptionAvailable": "No list description is available.",
    "create": {
      "header": "New list",
      "titlePlaceholder": "The list's title goes here…",
@ -242,7 +243,9 @@
        "remove": "Remove a link share",
        "removeText": "Are you sure you want to remove this link share? It will no longer be possible to access this list with this link share. This cannot be undone!",
        "createSuccess": "The link share was successfully created.",
-        "deleteSuccess": "The link share was successfully deleted"
+        "deleteSuccess": "The link share was successfully deleted",
+        "view": "View",
+        "sharedBy": "Shared by {0}"
      },
      "userTeam": {
        "typeUser": "user | users",
@ -264,9 +267,6 @@
      },
      "attributes": {
        "link": "Link",
-        "name": "Name",
-        "sharedBy": "Shared by",
-        "right": "Right",
        "delete": "Delete"
      }
    },
@ -870,7 +870,8 @@
      "related": "Modify related tasks of this task",
      "color": "Change the color of this task",
      "move": "Move this task to another list",
-      "reminder": "Manage reminders of this task"
+      "reminder": "Manage reminders of this task",
+      "description": "Toggle editing of the task description"
    },
    "list": {
      "title": "List Views",
--- a/src/i18n/lang/fr-FR.json
+++ b/src/i18n/lang/fr-FR.json
@ -172,6 +172,7 @@
    "search": "Écris pour rechercher une liste…",
    "searchSelect": "Clique ou appuie sur la touche Entrée pour sélectionner cette liste",
    "shared": "Listes partagées",
+    "noDescriptionAvailable": "No list description is available.",
    "create": {
      "header": "Nouvelle liste",
      "titlePlaceholder": "Entre le nom de la liste…",
@ -242,7 +243,9 @@
        "remove": "Retirer un lien de partage",
        "removeText": "Retirer ce partage de lien ? Il ne sera plus possible d’accéder à cette liste avec ce partage de lien. Cette opération ne peut être annulée !",
        "createSuccess": "Partage créé.",
-        "deleteSuccess": "Lien supprimé"
+        "deleteSuccess": "Lien supprimé",
+        "view": "View",
+        "sharedBy": "Shared by {0}"
      },
      "userTeam": {
        "typeUser": "utilisateur·rice | utilisateur·rice·s",
@ -264,9 +267,6 @@
      },
      "attributes": {
        "link": "Lien",
-        "name": "Nom",
-        "sharedBy": "Partagé par",
-        "right": "Droit",
        "delete": "Supprimer"
      }
    },
@ -870,7 +870,8 @@
      "related": "Modifier les tâches connexes de cette tâche",
      "color": "Changer la couleur de cette tâche",
      "move": "Déplacer cette tâche dans une autre liste",
-      "reminder": "Manage reminders of this task"
+      "reminder": "Manage reminders of this task",
+      "description": "Toggle editing of the task description"
    },
    "list": {
      "title": "Vues en liste",
--- a/src/i18n/lang/it-IT.json
+++ b/src/i18n/lang/it-IT.json
@ -87,7 +87,7 @@
        "language": "Lingua",
        "defaultList": "Lista predefinita",
        "timezone": "Fuso Orario",
-        "overdueTasksRemindersTime": "Orario email del promemoria attività in ritardo"
+        "overdueTasksRemindersTime": "Orario email attività in scadute"
      },
      "totp": {
        "title": "Autenticazione a due fattori",
@ -172,6 +172,7 @@
    "search": "Digita per cercare una lista…",
    "searchSelect": "Fare clic o premere invio per selezionare questa lista",
    "shared": "Liste Condivise",
+    "noDescriptionAvailable": "Nessuna descrizione della lista disponibile.",
    "create": {
      "header": "Nuova lista",
      "titlePlaceholder": "Il titolo della lista va qui…",
@ -242,7 +243,9 @@
        "remove": "Rimuovi un link di condivisione",
        "removeText": "Sei sicuro di voler rimuovere questo link di condivisione? Non sarà più possibile accedere a questa lista con questo link. Non può essere ripristinato!",
        "createSuccess": "Link di condivisione creato.",
-        "deleteSuccess": "Link di condivisione elimitato"
+        "deleteSuccess": "Link di condivisione elimitato",
+        "view": "Mostra",
+        "sharedBy": "Condiviso da {0}"
      },
      "userTeam": {
        "typeUser": "utente | utenti",
@ -264,9 +267,6 @@
      },
      "attributes": {
        "link": "Link",
-        "name": "Nome",
-        "sharedBy": "Condiviso da",
-        "right": "Permessi",
        "delete": "Elimina"
      }
    },
@ -562,12 +562,12 @@
      }
    },
    "datemathHelp": {
-      "canuse": "You can use date math to filter for relative dates.",
+      "canuse": "Puoi usare le date calcolate per filtrare per date relative.",
      "learnhow": "Scopri come funziona",
-      "title": "Date Math",
-      "intro": "Date Math allows you to specify relative dates which are resolved on the fly by Vikunja when applying the filter.",
-      "expression": "Each Date Math expression starts with an anchor date, which can either be {0}, or a date string ending with {1}. This anchor date can optionally be followed by one or more maths expressions.",
-      "similar": "These expressions are similar to the ones provided by {0} and {1}.",
+      "title": "Date Calcolate",
+      "intro": "Le Date Calcolate ti permettono di specificare date relative che vengono calcolate al volo da Vikunja quando viene applicato il filtro.",
+      "expression": "Ogni Data Calcolata inizia con una data base, che può essere {0}, o una data con {1} alla fine. Questa data base può essere seguita da una o più espressioni matematiche.",
+      "similar": "Queste espressioni sono simili a quelle fornite da {0} e {1}.",
      "add1Day": "Aggiungi un giorno",
      "minus1Day": "Sottrai un giorno",
      "roundDay": "Arrotonda per difetto al giorno più vicino",
@ -781,7 +781,7 @@
      "weeks": "Settimane",
      "months": "Mesi",
      "years": "Anni",
-      "invalidAmount": "Please enter more than 0."
+      "invalidAmount": "Inserisci più di 0."
    },
    "quickAddMagic": {
      "hint": "Puoi usare l'Aggiunta Rapida Magica",
@ -791,15 +791,15 @@
      "multiple": "Puoi usarlo più volte.",
      "label1": "Per aggiungere un'etichetta, basta aggiungere il nome dell'etichetta preceduto da {prefix}.",
      "label2": "Vikunja controllerà prima se l'etichetta esiste già e nel caso la creerà.",
-      "label3": "To use spaces, simply add a \" or ' around the label name.",
+      "label3": "Per usare gli spazi, basta aggiungere un \" o ' prima e dopo il nome dell'etichetta.",
      "label4": "Per esempio: {prefix}\"Etichetta con spazi\".",
      "priority1": "Per impostare la priorità di un'attività, aggiungi un numero 1-5, preceduto da {prefix}.",
      "priority2": "Più alto è il numero, più alta è la priorità.",
      "assignees": "Per assegnare direttamente l'attività a un utente, aggiungere il suo nome utente preceduto da {prefix} all'attività.",
      "list1": "Per impostare una lista di appartenenza all'attività, inserisci il suo nome prefisso con {prefix}.",
      "list2": "Ciò restituirà un errore se la lista non esiste.",
-      "list3": "To use spaces, simply add a \" or ' around the list name.",
-      "list4": "For example: {prefix}\"List with spaces\".",
+      "list3": "Per usare gli spazi, basta aggiungere un \" o ' prima e dopo il nome della lista.",
+      "list4": "Per esempio: {prefix}\"Etichetta con spazi\".",
      "dateAndTime": "Data e ora",
      "date": "Qualsiasi data verrà utilizzata come data di scadenza della nuova attività. È possibile utilizzare le date in uno qualsiasi di questi formati:",
      "dateWeekday": "qualsiasi giorno della settimana, userà la data più vicina",
@ -870,7 +870,8 @@
      "related": "Modifica le attività collegate a questa",
      "color": "Cambia il colore di questa attività",
      "move": "Sposta questa attività in un altro elenco",
-      "reminder": "Gestisci i promemoria di questa attività"
+      "reminder": "Gestisci i promemoria di questa attività",
+      "description": "Attiva/Disattiva modifica della descrizione dell'attività"
    },
    "list": {
      "title": "Viste Liste",
--- a/src/i18n/lang/nl-NL.json
+++ b/src/i18n/lang/nl-NL.json
@ -172,6 +172,7 @@
    "search": "Typ om naar een lijst te zoeken…",
    "searchSelect": "Klik of druk op enter om deze lijst te selecteren",
    "shared": "Gedeelde lijsten",
+    "noDescriptionAvailable": "No list description is available.",
    "create": {
      "header": "Nieuwe lijst",
      "titlePlaceholder": "De titel van de lijst komt hier…",
@ -242,7 +243,9 @@
        "remove": "Remove a link share",
        "removeText": "Are you sure you want to remove this link share? It will no longer be possible to access this list with this link share. This cannot be undone!",
        "createSuccess": "The link share was successfully created.",
-        "deleteSuccess": "The link share was successfully deleted"
+        "deleteSuccess": "The link share was successfully deleted",
+        "view": "View",
+        "sharedBy": "Shared by {0}"
      },
      "userTeam": {
        "typeUser": "gebruiker | gebruikers",
@ -264,9 +267,6 @@
      },
      "attributes": {
        "link": "Link",
-        "name": "Naam",
-        "sharedBy": "Gedeeld door",
-        "right": "Rechten",
        "delete": "Verwijderen"
      }
    },
@ -870,7 +870,8 @@
      "related": "Modify related tasks of this task",
      "color": "Change the color of this task",
      "move": "Move this task to another list",
-      "reminder": "Manage reminders of this task"
+      "reminder": "Manage reminders of this task",
+      "description": "Toggle editing of the task description"
    },
    "list": {
      "title": "List Views",
--- a/src/i18n/lang/pl-PL.json
+++ b/src/i18n/lang/pl-PL.json
@ -172,6 +172,7 @@
    "search": "Wpisz, aby wyszukać listę…",
    "searchSelect": "Kliknij lub naciśnij Enter, aby wybrać tę listę",
    "shared": "Współdzielone listy",
+    "noDescriptionAvailable": "No list description is available.",
    "create": {
      "header": "Nowa lista",
      "titlePlaceholder": "Tu wpisz tytuł listy…",
@ -242,7 +243,9 @@
        "remove": "Usuń link",
        "removeText": "Czy na pewno chcesz usunąć ten link? Dostęp do tej listy z tym linkiem nie będzie już możliwy. Tego nie da się cofnąć!",
        "createSuccess": "Pomyślnie utworzono udostępniony link.",
-        "deleteSuccess": "Udostępniony link został pomyślnie usunięty"
+        "deleteSuccess": "Udostępniony link został pomyślnie usunięty",
+        "view": "View",
+        "sharedBy": "Shared by {0}"
      },
      "userTeam": {
        "typeUser": "użytkownik(a) | użytkownikom",
@ -264,9 +267,6 @@
      },
      "attributes": {
        "link": "Link",
-        "name": "Nazwa",
-        "sharedBy": "Udostępniony przez",
-        "right": "Uprawnienia",
        "delete": "Usuń"
      }
    },
@ -870,7 +870,8 @@
      "related": "Zmodyfikuj zadania powiązane z tym zadaniem",
      "color": "Zmień kolor tego zadania",
      "move": "Przenieś to zadanie do innej listy",
-      "reminder": "Zarządzaj przypomnieniami o tym zadaniu"
+      "reminder": "Zarządzaj przypomnieniami o tym zadaniu",
+      "description": "Toggle editing of the task description"
    },
    "list": {
      "title": "Widoki listy",
--- a/src/i18n/lang/pt-BR.json
+++ b/src/i18n/lang/pt-BR.json
@ -172,6 +172,7 @@
    "search": "Type to search for a list…",
    "searchSelect": "Click or press enter to select this list",
    "shared": "Shared Lists",
+    "noDescriptionAvailable": "No list description is available.",
    "create": {
      "header": "New list",
      "titlePlaceholder": "The list's title goes here…",
@ -242,7 +243,9 @@
        "remove": "Remove a link share",
        "removeText": "Are you sure you want to remove this link share? It will no longer be possible to access this list with this link share. This cannot be undone!",
        "createSuccess": "The link share was successfully created.",
-        "deleteSuccess": "The link share was successfully deleted"
+        "deleteSuccess": "The link share was successfully deleted",
+        "view": "View",
+        "sharedBy": "Shared by {0}"
      },
      "userTeam": {
        "typeUser": "user | users",
@ -264,9 +267,6 @@
      },
      "attributes": {
        "link": "Link",
-        "name": "Name",
-        "sharedBy": "Shared by",
-        "right": "Right",
        "delete": "Delete"
      }
    },
@ -870,7 +870,8 @@
      "related": "Modify related tasks of this task",
      "color": "Change the color of this task",
      "move": "Move this task to another list",
-      "reminder": "Manage reminders of this task"
+      "reminder": "Manage reminders of this task",
+      "description": "Toggle editing of the task description"
    },
    "list": {
      "title": "List Views",
--- a/src/i18n/lang/pt-PT.json
+++ b/src/i18n/lang/pt-PT.json
@ -172,6 +172,7 @@
    "search": "Escreve para pesquisar por uma lista…",
    "searchSelect": "Clica ou pressiona Enter para selecionar esta lista",
    "shared": "Listas Partilhadas",
+    "noDescriptionAvailable": "Não está disponível nenhuma descrição da lista.",
    "create": {
      "header": "Nova lista",
      "titlePlaceholder": "O título da lista será aqui…",
@ -242,7 +243,9 @@
        "remove": "Remover um link partilhado",
        "removeText": "Tens a certeza que queres remover este link partilhado? Não será mais possível aceder a esta lista utilizando este link partilhado. Isto não pode ser revertido!",
        "createSuccess": "O link partilhado foi criado com sucesso.",
-        "deleteSuccess": "O link partilhado foi eliminado com sucesso"
+        "deleteSuccess": "O link partilhado foi eliminado com sucesso",
+        "view": "Visualizar",
+        "sharedBy": "Partilhado por {0}"
      },
      "userTeam": {
        "typeUser": "utilizador | utilizadores",
@ -264,9 +267,6 @@
      },
      "attributes": {
        "link": "Link",
-        "name": "Nome",
-        "sharedBy": "Partilhado por",
-        "right": "Permissões",
        "delete": "Eliminar"
      }
    },
@ -781,7 +781,7 @@
      "weeks": "Semanas",
      "months": "Meses",
      "years": "Anos",
-      "invalidAmount": "Please enter more than 0."
+      "invalidAmount": "Por favor, insere mais do que 0."
    },
    "quickAddMagic": {
      "hint": "Podes utilizar a Introdução Mágica Rápida",
@ -870,7 +870,8 @@
      "related": "Modificar as tarefas relacionadas desta tarefa",
      "color": "Alterar a cor desta tarefa",
      "move": "Mover esta tarefa para outra lista",
-      "reminder": "Gerir lembretes desta tarefa"
+      "reminder": "Gerir lembretes desta tarefa",
+      "description": "Alternar edição da descrição da tarefa"
    },
    "list": {
      "title": "Visualização em Lista",
--- a/src/i18n/lang/ro-RO.json
+++ b/src/i18n/lang/ro-RO.json
@ -172,6 +172,7 @@
    "search": "Type to search for a list…",
    "searchSelect": "Click or press enter to select this list",
    "shared": "Shared Lists",
+    "noDescriptionAvailable": "No list description is available.",
    "create": {
      "header": "New list",
      "titlePlaceholder": "The list's title goes here…",
@ -242,7 +243,9 @@
        "remove": "Remove a link share",
        "removeText": "Are you sure you want to remove this link share? It will no longer be possible to access this list with this link share. This cannot be undone!",
        "createSuccess": "The link share was successfully created.",
-        "deleteSuccess": "The link share was successfully deleted"
+        "deleteSuccess": "The link share was successfully deleted",
+        "view": "View",
+        "sharedBy": "Shared by {0}"
      },
      "userTeam": {
        "typeUser": "user | users",
@ -264,9 +267,6 @@
      },
      "attributes": {
        "link": "Link",
-        "name": "Name",
-        "sharedBy": "Shared by",
-        "right": "Right",
        "delete": "Delete"
      }
    },
@ -870,7 +870,8 @@
      "related": "Modify related tasks of this task",
      "color": "Change the color of this task",
      "move": "Move this task to another list",
-      "reminder": "Manage reminders of this task"
+      "reminder": "Manage reminders of this task",
+      "description": "Toggle editing of the task description"
    },
    "list": {
      "title": "List Views",
--- a/src/i18n/lang/ru-RU.json
+++ b/src/i18n/lang/ru-RU.json
@ -172,6 +172,7 @@
    "search": "Введи запрос для поиска списка…",
    "searchSelect": "Кликни или нажми Enter для выбора этого списка",
    "shared": "Общие списки",
+    "noDescriptionAvailable": "No list description is available.",
    "create": {
      "header": "New list",
      "titlePlaceholder": "Введи имя списка…",
@ -242,7 +243,9 @@
        "remove": "Удалить ссылку для обмена",
        "removeText": "Удалить эту ссылку для обмена? Больше не удастся получить доступ к списку через эту ссылку. Это действие отменить нельзя!",
        "createSuccess": "Ссылка создана.",
-        "deleteSuccess": "Ссылка удалена"
+        "deleteSuccess": "Ссылка удалена",
+        "view": "View",
+        "sharedBy": "Shared by {0}"
      },
      "userTeam": {
        "typeUser": "пользователь | пользователи",
@ -264,9 +267,6 @@
      },
      "attributes": {
        "link": "Ссылка",
-        "name": "Имя",
-        "sharedBy": "Создатель",
-        "right": "Права",
        "delete": "Удалить"
      }
    },
@ -870,7 +870,8 @@
      "related": "Изменить связанные задачи",
      "color": "Change the color of this task",
      "move": "Move this task to another list",
-      "reminder": "Manage reminders of this task"
+      "reminder": "Manage reminders of this task",
+      "description": "Toggle editing of the task description"
    },
    "list": {
      "title": "List Views",
--- a/src/i18n/lang/sk-SK.json
+++ b/src/i18n/lang/sk-SK.json
@ -172,6 +172,7 @@
    "search": "Type to search for a list…",
    "searchSelect": "Click or press enter to select this list",
    "shared": "Shared Lists",
+    "noDescriptionAvailable": "No list description is available.",
    "create": {
      "header": "New list",
      "titlePlaceholder": "The list's title goes here…",
@ -242,7 +243,9 @@
        "remove": "Remove a link share",
        "removeText": "Are you sure you want to remove this link share? It will no longer be possible to access this list with this link share. This cannot be undone!",
        "createSuccess": "The link share was successfully created.",
-        "deleteSuccess": "The link share was successfully deleted"
+        "deleteSuccess": "The link share was successfully deleted",
+        "view": "View",
+        "sharedBy": "Shared by {0}"
      },
      "userTeam": {
        "typeUser": "user | users",
@ -264,9 +267,6 @@
      },
      "attributes": {
        "link": "Link",
-        "name": "Name",
-        "sharedBy": "Shared by",
-        "right": "Right",
        "delete": "Delete"
      }
    },
@ -870,7 +870,8 @@
      "related": "Modify related tasks of this task",
      "color": "Change the color of this task",
      "move": "Move this task to another list",
-      "reminder": "Manage reminders of this task"
+      "reminder": "Manage reminders of this task",
+      "description": "Toggle editing of the task description"
    },
    "list": {
      "title": "List Views",
--- a/src/i18n/lang/sv-SE.json
+++ b/src/i18n/lang/sv-SE.json
@ -172,6 +172,7 @@
    "search": "Type to search for a list…",
    "searchSelect": "Click or press enter to select this list",
    "shared": "Shared Lists",
+    "noDescriptionAvailable": "No list description is available.",
    "create": {
      "header": "New list",
      "titlePlaceholder": "The list's title goes here…",
@ -242,7 +243,9 @@
        "remove": "Remove a link share",
        "removeText": "Are you sure you want to remove this link share? It will no longer be possible to access this list with this link share. This cannot be undone!",
        "createSuccess": "The link share was successfully created.",
-        "deleteSuccess": "The link share was successfully deleted"
+        "deleteSuccess": "The link share was successfully deleted",
+        "view": "View",
+        "sharedBy": "Shared by {0}"
      },
      "userTeam": {
        "typeUser": "user | users",
@ -264,9 +267,6 @@
      },
      "attributes": {
        "link": "Link",
-        "name": "Name",
-        "sharedBy": "Shared by",
-        "right": "Right",
        "delete": "Delete"
      }
    },
@ -870,7 +870,8 @@
      "related": "Modify related tasks of this task",
      "color": "Change the color of this task",
      "move": "Move this task to another list",
-      "reminder": "Manage reminders of this task"
+      "reminder": "Manage reminders of this task",
+      "description": "Toggle editing of the task description"
    },
    "list": {
      "title": "List Views",
--- a/src/i18n/lang/tr-TR.json
+++ b/src/i18n/lang/tr-TR.json
@ -172,6 +172,7 @@
    "search": "Type to search for a list…",
    "searchSelect": "Click or press enter to select this list",
    "shared": "Shared Lists",
+    "noDescriptionAvailable": "No list description is available.",
    "create": {
      "header": "New list",
      "titlePlaceholder": "The list's title goes here…",
@ -242,7 +243,9 @@
        "remove": "Remove a link share",
        "removeText": "Are you sure you want to remove this link share? It will no longer be possible to access this list with this link share. This cannot be undone!",
        "createSuccess": "The link share was successfully created.",
-        "deleteSuccess": "The link share was successfully deleted"
+        "deleteSuccess": "The link share was successfully deleted",
+        "view": "View",
+        "sharedBy": "Shared by {0}"
      },
      "userTeam": {
        "typeUser": "user | users",
@ -264,9 +267,6 @@
      },
      "attributes": {
        "link": "Link",
-        "name": "Name",
-        "sharedBy": "Shared by",
-        "right": "Right",
        "delete": "Delete"
      }
    },
@ -870,7 +870,8 @@
      "related": "Modify related tasks of this task",
      "color": "Change the color of this task",
      "move": "Move this task to another list",
-      "reminder": "Manage reminders of this task"
+      "reminder": "Manage reminders of this task",
+      "description": "Toggle editing of the task description"
    },
    "list": {
      "title": "List Views",
--- a/src/i18n/lang/vi-VN.json
+++ b/src/i18n/lang/vi-VN.json
@ -172,6 +172,7 @@
    "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",
+    "noDescriptionAvailable": "No list description is available.",
    "create": {
      "header": "Danh sách mới",
      "titlePlaceholder": "Tên danh sách ở đây…",
@ -242,7 +243,9 @@
        "remove": "Gỡ liên kết chia sẻ",
        "removeText": "Bạn có chắc chắn muốn xóa liên kết chia sẻ này không? Không ai có thể truy cập liên kết này được nữa. Điều này không thể hoàn tác!",
        "createSuccess": "Liên kết chia sẻ đã được tạo thành công.",
-        "deleteSuccess": "Liên kết chia sẽ đã được xóa rồi"
+        "deleteSuccess": "Liên kết chia sẽ đã được xóa rồi",
+        "view": "View",
+        "sharedBy": "Shared by {0}"
      },
      "userTeam": {
        "typeUser": "người dùng | người dùng",
@ -264,9 +267,6 @@
      },
      "attributes": {
        "link": "Liên kết",
-        "name": "Tên",
-        "sharedBy": "Chia sẻ bởi",
-        "right": "Quyền hạn",
        "delete": "Xóa"
      }
    },
@ -870,7 +870,8 @@
      "related": "Sửa đổi các công việc liên kết",
      "color": "Thay đổi màu công việc này",
      "move": "Dời công việc này sang danh sách khác",
-      "reminder": "Manage reminders of this task"
+      "reminder": "Manage reminders of this task",
+      "description": "Toggle editing of the task description"
    },
    "list": {
      "title": "Xem danh sách",
--- a/src/i18n/lang/zh-CN.json
+++ b/src/i18n/lang/zh-CN.json
@ -172,6 +172,7 @@
    "search": "Type to search for a list…",
    "searchSelect": "Click or press enter to select this list",
    "shared": "Shared Lists",
+    "noDescriptionAvailable": "No list description is available.",
    "create": {
      "header": "New list",
      "titlePlaceholder": "The list's title goes here…",
@ -242,7 +243,9 @@
        "remove": "Remove a link share",
        "removeText": "Are you sure you want to remove this link share? It will no longer be possible to access this list with this link share. This cannot be undone!",
        "createSuccess": "The link share was successfully created.",
-        "deleteSuccess": "The link share was successfully deleted"
+        "deleteSuccess": "The link share was successfully deleted",
+        "view": "View",
+        "sharedBy": "Shared by {0}"
      },
      "userTeam": {
        "typeUser": "user | users",
@ -264,9 +267,6 @@
      },
      "attributes": {
        "link": "Link",
-        "name": "Name",
-        "sharedBy": "Shared by",
-        "right": "Right",
        "delete": "Delete"
      }
    },
@ -870,7 +870,8 @@
      "related": "Modify related tasks of this task",
      "color": "Change the color of this task",
      "move": "Move this task to another list",
-      "reminder": "Manage reminders of this task"
+      "reminder": "Manage reminders of this task",
+      "description": "Toggle editing of the task description"
    },
    "list": {
      "title": "List Views",
--- a/src/main.ts
+++ b/src/main.ts
@ -2,6 +2,7 @@ import {createApp} from 'vue'

 import App from './App.vue'
 import router from './router'
+import {createPinia} from 'pinia'

 import {error, success} from './message'

@ -57,7 +58,7 @@ app.directive('shortcut', shortcut)
 app.directive('cy', cypress)

 // global components
-import FontAwesomeIcon from './icons'
+import FontAwesomeIcon from '@/components/misc/Icon'
 import Button from '@/components/input/button.vue'
 import Modal from '@/components/misc/modal.vue'
 import Card from '@/components/misc/card.vue'
@ -104,8 +105,8 @@ if (window.SENTRY_ENABLED) {
 	import('./sentry').then(sentry => sentry.default(app, router))
 }

-import ganttastic from '@infectoone/vue-ganttastic'
-app.use(ganttastic)
+const pinia = createPinia()
+app.use(pinia)

 app.use(store, key) // pass the injection key
 app.use(router)
--- a/src/modelTypes/ITask.ts
+++ b/src/modelTypes/ITask.ts
@ -31,7 +31,7 @@ export interface ITask extends IAbstract {
 	parentTaskId: ITask['id']
 	hexColor: string
 	percentDone: number
-	relatedTasks: Partial<Record<IRelationKind, ITask>>,
+	relatedTasks: Partial<Record<IRelationKind, ITask[]>>,
 	attachments: IAttachment[]
 	identifier: string
 	index: number
--- a/src/models/attachment.ts
+++ b/src/models/attachment.ts
@ -5,7 +5,7 @@ import type { IUser } from '@/modelTypes/IUser'
 import type { IFile } from '@/modelTypes/IFile'
 import type { IAttachment } from '@/modelTypes/IAttachment'

-export default class AttachmentModel extends AbstractModel implements IAttachment {
+export default class AttachmentModel extends AbstractModel<IAttachment> implements IAttachment {
 	id = 0
 	taskId = 0
 	createdBy: IUser = UserModel
--- a/src/models/avatar.ts
+++ b/src/models/avatar.ts
@ -1,7 +1,7 @@
 import AbstractModel from './abstractModel'
 import type { IAvatar } from '@/modelTypes/IAvatar'

-export default class AvatarModel extends AbstractModel implements IAvatar {
+export default class AvatarModel extends AbstractModel<IAvatar> implements IAvatar {
 	avatarProvider: IAvatar['avatarProvider'] = 'default'

 	constructor(data: Partial<IAvatar>) {
--- a/src/models/backgroundImage.ts
+++ b/src/models/backgroundImage.ts
@ -1,7 +1,7 @@
 import AbstractModel from './abstractModel'
 import type {IBackgroundImage} from '@/modelTypes/IBackgroundImage'

-export default class BackgroundImageModel extends AbstractModel implements IBackgroundImage {
+export default class BackgroundImageModel extends AbstractModel<IBackgroundImage> implements IBackgroundImage {
 	id = 0
 	url = ''
 	thumb = ''
--- a/src/models/bucket.ts
+++ b/src/models/bucket.ts
@ -6,14 +6,14 @@ import type {IBucket} from '@/modelTypes/IBucket'
 import type {ITask} from '@/modelTypes/ITask'
 import type {IUser} from '@/modelTypes/IUser'

-export default class BucketModel extends AbstractModel implements IBucket {
+export default class BucketModel extends AbstractModel<IBucket> implements IBucket {
 	id = 0
 	title = ''
 	listId = ''
 	limit = 0
 	tasks: ITask[] = []
-	isDoneBucket: false
-	position: 0
+	isDoneBucket = false
+	position = 0
 	
 	createdBy: IUser = null
 	created: Date = null
--- a/src/models/caldavToken.ts
+++ b/src/models/caldavToken.ts
@ -2,7 +2,7 @@ import AbstractModel from './abstractModel'

 import type {ICaldavToken} from '@/modelTypes/ICaldavToken'

-export default class CaldavTokenModel extends AbstractModel implements ICaldavToken {
+export default class CaldavTokenModel extends AbstractModel<ICaldavToken> implements ICaldavToken {
 	id: number
 	created: Date

--- a/src/models/emailUpdate.ts
+++ b/src/models/emailUpdate.ts
@ -2,7 +2,7 @@ import AbstractModel from './abstractModel'

 import type {IEmailUpdate} from '@/modelTypes/IEmailUpdate'

-export default class EmailUpdateModel extends AbstractModel implements IEmailUpdate {
+export default class EmailUpdateModel extends AbstractModel<IEmailUpdate> implements IEmailUpdate {
 	newEmail = ''
 	password = ''

--- a/src/models/file.ts
+++ b/src/models/file.ts
@ -1,7 +1,7 @@
 import AbstractModel from './abstractModel'
 import type {IFile} from '@/modelTypes/IFile'

-export default class FileModel extends AbstractModel implements IFile {
+export default class FileModel extends AbstractModel<IFile> implements IFile {
 	id = 0
 	mime = ''
 	name = ''
--- a/src/models/label.ts
+++ b/src/models/label.ts
@ -8,7 +8,7 @@ import {colorIsDark} from '@/helpers/color/colorIsDark'

 const DEFAULT_LABEL_BACKGROUND_COLOR = 'e8e8e8'

-export default class LabelModel extends AbstractModel implements ILabel {
+export default class LabelModel extends AbstractModel<ILabel> implements ILabel {
 	id = 0
 	title = ''
 	// FIXME: this should be empty and be definied in the client.
@ -22,7 +22,7 @@ export default class LabelModel extends AbstractModel implements ILabel {
 	created: Date = null
 	updated: Date = null

-	constructor(data: Partial<ILabel>) {
+	constructor(data: Partial<ILabel> = {}) {
 		super()
 		this.assignData(data)

--- a/src/models/labelTask.ts
+++ b/src/models/labelTask.ts
@ -2,7 +2,7 @@ import AbstractModel from './abstractModel'

 import type { ILabelTask } from '@/modelTypes/ILabelTask'

-export default class LabelTask extends AbstractModel implements ILabelTask {
+export default class LabelTask extends AbstractModel<ILabelTask> implements ILabelTask {
 	id = 0
 	taskId = 0
 	labelId = 0
--- a/src/models/linkShare.ts
+++ b/src/models/linkShare.ts
@ -5,7 +5,7 @@ import {RIGHTS, type Right} from '@/constants/rights'
 import type {ILinkShare} from '@/modelTypes/ILinkShare'
 import type {IUser} from '@/modelTypes/IUser'

-export default class LinkShareModel extends AbstractModel implements ILinkShare {
+export default class LinkShareModel extends AbstractModel<ILinkShare> implements ILinkShare {
 	id = 0
 	hash = ''
 	right: Right = RIGHTS.READ
--- a/src/models/list.ts
+++ b/src/models/list.ts
@ -11,7 +11,7 @@ import type {ISubscription} from '@/modelTypes/ISubscription'

 import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'

-export default class ListModel extends AbstractModel implements IList {
+export default class ListModel extends AbstractModel<IList> implements IList {
 	id = 0
 	title = ''
 	description = ''
@ -30,7 +30,7 @@ export default class ListModel extends AbstractModel implements IList {
 	created: Date = null
 	updated: Date = null

-	constructor(data: Partial<IList>) {
+	constructor(data: Partial<IList> = {}) {
 		super()
 		this.assignData(data)

--- a/src/models/listDuplicateModel.ts
+++ b/src/models/listDuplicateModel.ts
@ -5,7 +5,7 @@ import type {IListDuplicate} from '@/modelTypes/IListDuplicate'
 import type {INamespace} from '@/modelTypes/INamespace'
 import type {IList} from '@/modelTypes/IList'

-export default class ListDuplicateModel extends AbstractModel implements IListDuplicate {
+export default class ListDuplicateModel extends AbstractModel<IListDuplicate> implements IListDuplicate {
 	listId = 0
 	namespaceId: INamespace['id'] = 0
 	list: IList = ListModel
--- a/src/models/namespace.ts
+++ b/src/models/namespace.ts
@ -8,7 +8,7 @@ import type {IUser} from '@/modelTypes/IUser'
 import type {IList} from '@/modelTypes/IList'
 import type {ISubscription} from '@/modelTypes/ISubscription'

-export default class NamespaceModel extends AbstractModel implements INamespace {
+export default class NamespaceModel extends AbstractModel<INamespace> implements INamespace {
 	id = 0
 	title = ''
 	description = ''
@ -21,7 +21,7 @@ export default class NamespaceModel extends AbstractModel implements INamespace
 	created: Date = null
 	updated: Date = null

-	constructor(data: Partial<INamespace>) {
+	constructor(data: Partial<INamespace> = {}) {
 		super()
 		this.assignData(data)

--- a/src/models/notification.ts
+++ b/src/models/notification.ts
@ -8,7 +8,7 @@ import TeamModel from '@/models/team'

 import {NOTIFICATION_NAMES, type INotification} from '@/modelTypes/INotification'

-export default class NotificationModel extends AbstractModel implements INotification {
+export default class NotificationModel extends AbstractModel<INotification> implements INotification {
 	id = 0
 	name = ''
 	notification: INotification['notification'] = null
--- a/Show more
+++ b/Show more