chore(deps): update dependency netlify-cli to v10.7.1

.drone.yml

@@ -1,6 +1,5 @@
 ---
 kind: pipeline
-type: docker
 name: build
 
 trigger:
@@ -23,101 +22,36 @@ steps:
 # Disabled until we figure out why it is so slow
 #  - name: restore-cache
 #    image: meltwater/drone-cache:dev
-#    pull: always
+#    pull: true
 #    environment:
 #      AWS_ACCESS_KEY_ID:
 #        from_secret: cache_aws_access_key_id
 #      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 "pnpm-lock.yaml" }}_{{ arch }}_{{ os }}'
+#      cache_key: '{{ .Repo.Name }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
 #      mount:
-#        - .cache
+#        - '.cache'
 
   - name: dependencies
-    image: node:18-alpine
-    pull: always
+    image: node:18
+    pull: true
     environment:
-      PNPM_CACHE_FOLDER: .cache/pnpm
-      CYPRESS_CACHE_FOLDER: .cache/cypress
+      YARN_CACHE_FOLDER: .cache/yarn/
+      CYPRESS_CACHE_FOLDER: .cache/cypress/
     commands:
-      - corepack enable && pnpm config set store-dir .cache/pnpm
-      - pnpm install --fetch-timeout 100000
+      - yarn --frozen-lockfile --network-timeout 100000
 #    depends_on:
 #      - restore-cache
 
-  - name: lint
-    image: node:18-alpine
-    pull: always
-    environment:
-      PNPM_CACHE_FOLDER: .cache/pnpm
-    commands:
-      - corepack enable && pnpm config set store-dir .cache/pnpm
-      - pnpm run lint
-    depends_on:
-      - dependencies
-
-  - name: build-prod
-    image: node:18-alpine
-    pull: always
-    environment:
-      PNPM_CACHE_FOLDER: .cache/pnpm
-    commands:
-      - corepack enable && pnpm config set store-dir .cache/pnpm
-      - pnpm run build
-    depends_on:
-      - dependencies
-
-  - name: test-unit
-    image: node:18-alpine
-    pull: always
-    commands:
-      - corepack enable && pnpm config set store-dir .cache/pnpm
-      - pnpm run test:unit
-    depends_on:
-      - dependencies
-
-  - name: typecheck
-    failure: ignore
-    image: node:18-alpine
-    pull: always
-    environment:
-      PNPM_CACHE_FOLDER: .cache/pnpm
-    commands:
-      - corepack enable && pnpm config set store-dir .cache/pnpm
-      - pnpm run typecheck
-    depends_on:
-      - dependencies
-
-  - name: test-frontend
-    image: cypress/browsers:node18.12.0-chrome106-ff106
-    pull: always
-    environment:
-      CYPRESS_API_URL: http://api:3456/api/v1
-      CYPRESS_TEST_SECRET: averyLongSecretToSe33dtheDB
-      PNPM_CACHE_FOLDER: .cache/pnpm
-      CYPRESS_CACHE_FOLDER: .cache/cypress
-      CYPRESS_DEFAULT_COMMAND_TIMEOUT: 60000
-      CYPRESS_RECORD_KEY:
-        from_secret: cypress_project_key
-    commands:
-      - sed -i 's/localhost/api/g' dist/index.html
-      - corepack enable && pnpm config set store-dir .cache/pnpm
-      - pnpm cypress install
-      - pnpm run serve:dist & npx wait-on http://localhost:4173
-      - pnpm run test:frontend --browser chrome --record
-    depends_on:
-      - build-prod
-
 #  - name: rebuild-cache
 #    image: meltwater/drone-cache:dev
-#    pull: always
+#    pull: true
 #    environment:
 #      AWS_ACCESS_KEY_ID:
 #        from_secret: cache_aws_access_key_id
@@ -129,15 +63,71 @@ steps:
 #      endpoint: https://s3.fr-par.scw.cloud
 #      region: fr-par
 #      path_style: true
-#      cache_key: '{{ .Repo.Name }}_{{ checksum "pnpm-lock.yaml" }}_{{ arch }}_{{ os }}'
+#      cache_key: '{{ .Repo.Name }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
 #      mount:
-#        - .cache
+#        - '.cache'
 #    depends_on:
 #      - dependencies
 
+  - name: lint
+    image: node:18
+    pull: true
+    environment:
+      YARN_CACHE_FOLDER: .cache/yarn/
+      CYPRESS_CACHE_FOLDER: .cache/cypress/
+    commands:
+      - yarn run lint
+    depends_on:
+      - dependencies
+
+  - name: build-prod
+    image: node:18
+    pull: true
+    environment:
+      YARN_CACHE_FOLDER: .cache/yarn/
+    commands:
+      - yarn build
+    depends_on:
+      - dependencies
+
+  - name: test-unit
+    image: node:18
+    pull: true
+    commands:
+      - yarn test:unit
+    depends_on:
+      - dependencies
+
+  - name: typecheck
+    failure: ignore
+    image: node:18
+    pull: true
+    commands:
+      - yarn typecheck
+    depends_on:
+      - dependencies
+
+  - name: test-frontend
+    image: cypress/browsers:node16.5.0-chrome94-ff93
+    pull: true
+    environment:
+      CYPRESS_API_URL: http://api:3456/api/v1
+      CYPRESS_TEST_SECRET: averyLongSecretToSe33dtheDB
+      YARN_CACHE_FOLDER: .cache/yarn/
+      CYPRESS_CACHE_FOLDER: .cache/cypress/
+      CYPRESS_DEFAULT_COMMAND_TIMEOUT: 60000
+      CYPRESS_RECORD_KEY:
+        from_secret: cypress_project_key
+    commands:
+      - sed -i 's/localhost/api/g' dist/index.html
+      - yarn serve:dist & npx wait-on http://localhost:4173
+      - yarn test:frontend --browser chrome --record
+    depends_on:
+      - build-prod
+
   - name: deploy-preview
-    image: node:18-alpine
-    pull: always
+    image: node:18
+    pull: true
     environment:
       NETLIFY_AUTH_TOKEN:
         from_secret: netlify_auth_token
@@ -148,8 +138,7 @@ steps:
     commands:
       - cp -r dist dist-preview
       # Override the default api url used for preview
-      - sed -i 's|http://localhost:3456|https://try.vikunja.io|g' dist-preview/index.html
-      - apk add --no-cache perl-utils
+      - sed -i 's|localhost:3456|try.vikunja.io|g' dist-preview/index.html
       - shasum -a 384 -c ./scripts/deploy-preview-netlify.js.sha384
       - node ./scripts/deploy-preview-netlify.js
     depends_on:
@@ -161,7 +150,6 @@ steps:
 
 ---
 kind: pipeline
-type: docker
 name: release-latest
 
 depends_on:
@@ -181,7 +169,7 @@ steps:
 
 #  - name: restore-cache
 #    image: meltwater/drone-cache:dev
-#    pull: always
+#    pull: true
 #    environment:
 #      AWS_ACCESS_KEY_ID:
 #        from_secret: cache_aws_access_key_id
@@ -193,29 +181,28 @@ steps:
 #      endpoint: https://s3.fr-par.scw.cloud
 #      region: fr-par
 #      path_style: true
-#      cache_key: '{{ .Repo.Name }}_{{ checksum "pnpm-lock.yaml" }}_{{ arch }}_{{ os }}'
+#      cache_key: '{{ .Repo.Name }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
 #      mount:
-#        - .cache
+#        - '.cache'
 
   - name: build
-    image: node:18-alpine
-    pull: always
+    image: node:18
+    pull: true
+    group: build-static
     environment:
-      PNPM_CACHE_FOLDER: .cache/pnpm
+      YARN_CACHE_FOLDER: .cache/yarn/
     commands:
-      - apk add git
-      - corepack enable && pnpm config set store-dir .cache/.pnpm
-      - pnpm install --fetch-timeout 100000 --frozen-lockfile
-      - pnpm run lint
+      - yarn --frozen-lockfile --network-timeout 100000
+      - yarn run lint
       - "echo '{\"VERSION\": \"'$(git describe --tags --always --abbrev=10 | sed 's/-/+/' | sed 's/^v//' | sed 's/-g/-/')'\"}' > src/version.json"
-      - pnpm run build
+      - yarn 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
 
   - name: static
     image: kolaente/zip
-    pull: always
+    pull: true
     commands:
       - cd dist
       - zip -r ../vikunja-frontend-unstable.zip *
@@ -224,7 +211,7 @@ steps:
 
   - name: release
     image: plugins/s3
-    pull: always
+    pull: true
     settings:
       bucket: vikunja-releases
       access_key:
@@ -240,7 +227,6 @@ steps:
 
 ---
 kind: pipeline
-type: docker
 name: release-version
 
 depends_on:
@@ -258,7 +244,7 @@ steps:
 
 #  - name: restore-cache
 #    image: meltwater/drone-cache:dev
-#    pull: always
+#    pull: true
 #    environment:
 #      AWS_ACCESS_KEY_ID:
 #        from_secret: cache_aws_access_key_id
@@ -270,29 +256,28 @@ steps:
 #      endpoint: https://s3.fr-par.scw.cloud
 #      region: fr-par
 #      path_style: true
-#      cache_key: '{{ .Repo.Name }}_{{ checksum "pnpm-lock.yaml" }}_{{ arch }}_{{ os }}'
+#      cache_key: '{{ .Repo.Name }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
 #      mount:
-#        - .cache
+#        - '.cache'
 
   - name: build
-    image: node:18-alpine
-    pull: always
+    image: node:18
+    pull: true
+    group: build-static
     environment:
-      PNPM_CACHE_FOLDER: .cache/pnpm
+      YARN_CACHE_FOLDER: .cache/yarn/
     commands:
-      - apk add git
-      - corepack enable && pnpm config set store-dir .cache/pnpm
-      - pnpm install --fetch-timeout 100000 --frozen-lockfile
-      - pnpm run lint
+      - yarn --frozen-lockfile --network-timeout 100000
+      - yarn run lint
       - "echo '{\"VERSION\": \"'$(git describe --tags --always --abbrev=10 | sed 's/-/+/' | sed 's/^v//' | sed 's/-g/-/')'\"}' > src/version.json"
-      - pnpm run build
+      - yarn 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
 
   - name: static
     image: kolaente/zip
-    pull: always
+    pull: true
     commands:
       - cd dist
       - zip -r ../vikunja-frontend-${DRONE_TAG##v}.zip *
@@ -301,7 +286,7 @@ steps:
 
   - name: release
     image: plugins/s3
-    pull: always
+    pull: true
     settings:
       bucket: vikunja-releases
       access_key:
@@ -317,7 +302,6 @@ steps:
 
 ---
 kind: pipeline
-type: docker
 name: trigger-desktop-update
 
 trigger:
@@ -342,7 +326,111 @@ steps:
 ---
 kind: pipeline
 type: docker
-name: docker-release
+name: docker-arm-release
+
+depends_on:
+  - release-latest
+  - release-version
+
+platform:
+  os: linux
+  arch: arm64
+
+trigger:
+  ref:
+    - refs/heads/main
+    - "refs/tags/**"
+  event:
+    exclude:
+      - cron
+
+steps:
+  - name: docker-unstable
+    image: plugins/docker:linux-arm
+    pull: true
+    settings:
+      username:
+        from_secret: docker_username
+      password:
+        from_secret: docker_password
+      repo: vikunja/frontend
+      tags: unstable-linux-arm
+      build_args:
+        - USE_RELEASE=true
+        - RELEASE_VERSION=unstable
+    when:
+      ref:
+        - refs/heads/main
+    depends_on:
+      - clone
+
+  - name: docker-version
+    image: plugins/docker:linux-arm
+    pull: true
+    settings:
+      username:
+        from_secret: docker_username
+      password:
+        from_secret: docker_password
+      repo: vikunja/frontend
+      auto_tag: true
+      auto_tag_suffix: linux-arm
+      build_args:
+        - USE_RELEASE=true
+        - RELEASE_VERSION=${DRONE_TAG##v}
+    when:
+      ref:
+        - "refs/tags/**"
+    depends_on:
+      - clone
+
+  - name: docker-unstable-arm64
+    image: plugins/docker:linux-arm64
+    pull: true
+    settings:
+      username:
+        from_secret: docker_username
+      password:
+        from_secret: docker_password
+      repo: vikunja/frontend
+      tags: unstable-linux-arm64
+      build_args:
+        - USE_RELEASE=true
+        - RELEASE_VERSION=unstable
+    when:
+      ref:
+        - refs/heads/main
+    depends_on:
+      - clone
+
+  - name: docker-version-arm64
+    image: plugins/docker:linux-arm64
+    pull: true
+    settings:
+      username:
+        from_secret: docker_username
+      password:
+        from_secret: docker_password
+      repo: vikunja/frontend
+      auto_tag: true
+      auto_tag_suffix: linux-arm64
+      build_args:
+        - USE_RELEASE=true
+        - RELEASE_VERSION=${DRONE_TAG##v}
+    when:
+      ref:
+        - "refs/tags/**"
+    depends_on:
+      - clone
+
+---
+kind: pipeline
+type: docker
+name: docker-amd64-release
+
+platform:
+  os: linux
+  arch: amd64
 
 depends_on:
   - release-latest
@@ -357,14 +445,8 @@ trigger:
       - cron
 
 steps:
-  - name: fetch-tags
-    image: docker:git
-    commands:
-      - git fetch --tags
-
   - name: docker-unstable
-    image: thegeeklab/drone-docker-buildx
-    privileged: true
+    image: plugins/docker:linux-amd64
     pull: true
     settings:
       username:
@@ -372,24 +454,16 @@ steps:
       password:
         from_secret: docker_password
       repo: vikunja/frontend
-      tags: unstable
+      tags: unstable-linux-amd64
       build_args:
         - USE_RELEASE=true
         - RELEASE_VERSION=unstable
-      platforms:
-        - linux/386
-        - linux/amd64
-        - linux/arm/v6
-        - linux/arm/v7
-        - linux/arm64/v8
-    depends_on: [ fetch-tags ]
     when:
       ref:
         - refs/heads/main
 
-  - name: docker-release
-    image: thegeeklab/drone-docker-buildx
-    privileged: true
+  - name: docker-version
+    image: plugins/docker:linux-amd64
     pull: true
     settings:
       username:
@@ -398,16 +472,74 @@ steps:
         from_secret: docker_password
       repo: vikunja/frontend
       auto_tag: true
+      auto_tag_suffix: linux-amd64
       build_args:
         - USE_RELEASE=true
         - RELEASE_VERSION=${DRONE_TAG##v}
-      platforms:
-        - linux/386
-        - linux/amd64
-        - linux/arm/v6
-        - linux/arm/v7
-        - linux/arm64/v8
-    depends_on: [ fetch-tags ]
+    when:
+      ref:
+        - "refs/tags/**"
+
+---
+kind: pipeline
+type: docker
+name: docker-manifest
+
+trigger:
+  ref:
+    - refs/heads/main
+    - "refs/tags/**"
+  event:
+    exclude:
+      - cron
+
+depends_on:
+  - docker-amd64-release
+  - docker-arm-release
+
+steps:
+  - name: manifest-unstable
+    pull: always
+    image: plugins/manifest
+    settings:
+      tags: unstable
+      spec: docker-manifest-unstable.tmpl
+      password:
+        from_secret: docker_password
+      username:
+        from_secret: docker_username
+    when:
+      ref:
+        - refs/heads/main
+
+  - name: manifest-release
+    pull: always
+    image: plugins/manifest
+    settings:
+      auto_tag: true
+      ignore_missing: true
+      spec: docker-manifest.tmpl
+      password:
+        from_secret: docker_password
+      username:
+        from_secret: docker_username
+    when:
+      ref:
+        - "refs/tags/**"
+  
+  - name: manifest-release-latest
+    pull: always
+    image: plugins/manifest
+    depends_on:
+      - clone
+    settings:
+      tags: latest
+      ignore_missing: true
+      spec: docker-manifest.tmpl
+      password:
+        from_secret: docker_password
+      username:
+        from_secret: docker_username
     when:
       ref:
         - "refs/tags/**"
@@ -430,7 +562,9 @@ depends_on:
   - release-version
   - release-latest
   - trigger-desktop-update
-  - docker-release
+  - docker-arm-release
+  - docker-amd64-release
+  - docker-manifest
 
 steps:
   - name: notify
@@ -513,6 +647,6 @@ steps:
         from_secret: crowdin_key
 ---
 kind: signature
-hmac: 9f26b5af73e3464e9ee1b5fbcb96854ca8a7e5f8d6ee2d85fd8376aad951b446
+hmac: 997e1badebe484ac29557c4af356e63db4d3d57f3d32e92d482f117f8cec64da
 
 ...

.envrc

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

.eslintrc.cjs

@@ -1,58 +0,0 @@
-/* eslint-env node */
-require("@rushstack/eslint-patch/modern-module-resolution")
-
-module.exports = {
-	'root': true,
-	'env': {
-		'browser': true,
-		'es2022': true,
-		'node': true,
-		'vue/setup-compiler-macros': true,
-	},
-	'extends': [
-		'eslint:recommended',
-		'plugin:vue/vue3-essential',
-		'@vue/eslint-config-typescript/recommended',
-	],
-	'rules': {
-		'vue/html-quotes': [
-			'error',
-			'double',
-		],
-		'quotes': [
-			'error',
-			'single',
-		],
-		'comma-dangle': [
-			'error',
-			'always-multiline',
-		],
-		'semi': [
-			'error',
-			'never',
-		],
-
-		// see https://segmentfault.com/q/1010000040813116/a-1020000041134455 (original in chinese)
-		'no-unused-vars': 'off',
-		'@typescript-eslint/no-unused-vars': ['error', { vars: 'all', args: 'after-used', ignoreRestSiblings: true }],
-
-		'vue/multi-word-component-names': 0,
-		// disabled until we have support for reactivityTransform
-		// See https://github.com/vuejs/eslint-plugin-vue/issues/1948
-		// see also setting in `vite.config`
-		'vue/no-setup-props-destructure': 0,
-	},
-	'parser': 'vue-eslint-parser',
-	'parserOptions': {
-		'parser': '@typescript-eslint/parser',
-		'ecmaVersion': 2022,
-		'sourceType': 'module',
-	},
-	'ignorePatterns': [
-		'*.test.*',
-		'cypress/*',
-	],
-	'globals': {
-		'defineProps': 'readonly',
-	},
-}

.gitea/issue_template.md

@@ -1,44 +0,0 @@
-<!--
-
-Please fill out this issue template to report a bug.
-If you want to propose a new feature, please open a discussion thread in the forum: https://community.vikunja.io
-
--->
-
-**Version information:**
-
-Frontend Version:
-API Version: 
-Browser and OS Version:
-
-**Steps to reproduce:**
-
-<!--
-Add clear steps to reproduce the bug. Provide screenshots where applicable.
--->
-
-1. 
-2.
-...
-
-**Expected behavior:**
-
-<!--
-Describe what happened.
--->
-
-
-
-**Actual behavior:**
-
-<!--
-Describe what happened instead.
--->
-
-
-
-**Checklist:**
-
-* [ ] I have provided all required information
-* [ ] I am using the latest release or the latest unstable build
-* [ ] I was able to reproduce the bug on [try](https://try.vikunja.io)

.github/ISSUE_TEMPLATE/bug-report.yml

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

.github/ISSUE_TEMPLATE/config.yml

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

.gitignore

@@ -2,21 +2,16 @@
 node_modules
 /dist*
 *.zip
-.direnv/
 
 # local env files
 .env.local
 .env.*.local
 
 # Log files
-logs
-*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 stats.html
-pnpm-debug.log*
-lerna-debug.log*
 
 # Editor directories and files
 .idea

.npmrc

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

.vscode.example/settings.json

@@ -1,5 +1,5 @@
 {
-  "eslint.packageManager": "pnpm",
+  "eslint.packageManager": "yarn",
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
     "source.fixAll": true
@@ -18,11 +18,13 @@
     "javascriptreact",
     "vue"
   ],
+  "vetur.validation.template": false,
+
   // i18n ally
   "i18n-ally.localesPaths": [
     "src/i18n/lang"
   ],
   "i18n-ally.sortKeys": true,
   "i18n-ally.keepFulfilled": true,
-  "i18n-ally.keystyle": "nested"
+  "i18n-ally.keystyle": "nested",
 }

Dockerfile

@@ -1,35 +1,31 @@
 # Stage 1: Build application
-FROM --platform=$BUILDPLATFORM node:18-alpine AS compile-image
+FROM node:18 AS compile-image
 
 WORKDIR /build
 
 ARG USE_RELEASE=false
 ARG RELEASE_VERSION=main
 
-ENV PNPM_CACHE_FOLDER .cache/pnpm/
-ADD .  ./
+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 && \
-  # https://pnpm.io/installation#using-corepack
-  corepack enable && \
-  # we don't use corepack prepare here by intend since
-  # we have renovate to keep our dependencies up to date
   # Build the frontend
-  pnpm install && \
-  apk add --no-cache git && \
+  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 && \
-  pnpm run build
+  yarn run build
 
 # Stage 2: copy 
-FROM nginx:alpine
+FROM nginx
 
 COPY nginx.conf /etc/nginx/nginx.conf
-COPY scripts/run.sh /run.sh
+COPY run.sh /run.sh
 
 # copy compiled files from stage 1
 COPY --from=compile-image /build/dist /usr/share/nginx/html
@@ -40,10 +36,4 @@ ENV PGID 1000
 
 LABEL maintainer="maintainers@vikunja.io"
 
-RUN apk add --no-cache \
-  # for sh file
-	bash \
-	# installs usermod and groupmod
-	shadow
-
 CMD "/run.sh"

README.md

@@ -4,7 +4,7 @@
 
 [![Build Status](https://drone.kolaente.de/api/badges/vikunja/frontend/status.svg)](https://drone.kolaente.de/vikunja/frontend)
 [![License: AGPL v3](https://img.shields.io/badge/License-AGPL%20v3-blue.svg)](LICENSE)
-[![Download](https://img.shields.io/badge/download-v0.20.1-brightgreen.svg)](https://dl.vikunja.io)
+[![Download](https://img.shields.io/badge/download-v0.18.2-brightgreen.svg)](https://dl.vikunja.io)
 [![Translation](https://badges.crowdin.net/vikunja/localized.svg)](https://crowdin.com/project/vikunja)
 
 This is the web frontend for Vikunja, written in Vue.js.
@@ -22,27 +22,23 @@ There is a [docker image available](https://hub.docker.com/r/vikunja/api) with s
 ## Project setup
 
 ```shell
-pnpm install
+yarn install
 ```
 
 ### Compiles and hot-reloads for development
 
 ```shell
-pnpm run serve
+yarn run serve
 ```
 
 ### Compiles and minifies for production
 
 ```shell
-pnpm run build
+yarn run build
 ```
 
 ### Lints and fixes files
 
 ```shell
-pnpm run lint
+yarn run lint
 ```
-
-## Sponsors
-
-[![Relm](https://vikunja.io/images/sponsors/relm.png)](https://relm.us)

cliff.toml

@@ -1,59 +0,0 @@
-[changelog]
-body = """
-{% if version %}\
-    ## [{{ version | trim_start_matches(pat="v") }}] - {{ timestamp | date(format="%Y-%m-%d") }}
-{% else %}\
-    ## [unreleased]
-{% endif %}\
-
-
-{% for group, commits in commits | group_by(attribute="group") %}
-    ### {{ group | upper_first }}
-    {% for commit in commits
-    | filter(attribute="scope")
-    | sort(attribute="scope") %}
-        * *({{commit.scope}})* {{ commit.message | upper_first }}
-        {%- if commit.breaking %}
-        {% raw %}  {% endraw %}- **BREAKING**: {{commit.breaking_description}}
-        {%- endif -%}
-    {%- endfor -%}
-    {%- for commit in commits %}
-        {%- if commit.scope -%}
-        {% else -%}
-            * {{ commit.message | upper_first }} ([{{ commit.id | truncate(length=7, end="") }}]({{ commit.id }}))
-            {% if commit.breaking -%}
-            {% raw %}  {% endraw %}- **BREAKING**: {{commit.breaking_description}}
-            {% endif -%}
-        {% endif -%}
-    {% endfor -%}
-    {% raw %}\n{% endraw %}\
-{% endfor %}\n
-
-"""
-#{% for group, commits in commits | group_by(attribute="group") %}
-#    ### {{ group | upper_first }}
-#    {% for commit in commits %}\
-#        - {% if commit.breaking %}[**breaking**] {% endif %}{{ commit.message | upper_first }} ([{{ commit.id | truncate(length=7, end="") }}]({{ commit.id }}))
-#    {% endfor %}\
-#{% endfor %}\n
-# remove the leading and trailing whitespace from the template
-trim = true
-
-[git]
-conventional_commits = true
-filter_unconventional = false
-commit_parsers = [
-    { message = ".*(deps).*", group = "Dependencies"},
-    { message = "^feat", group = "Features"},
-    { message = "^fix", group = "Bug Fixes"},
-    { message = "^doc", group = "Documentation"},
-    { message = "^perf", group = "Performance"},
-    { message = "^refactor", group = "Refactor"},
-    { message = "^style", group = "Styling"},
-    { message = "^test", group = "Testing"},
-    { message = "^chore\\(release\\): prepare for", skip = true},
-    { message = "^chore", group = "Miscellaneous Tasks"},
-    { body = ".*security", group = "Security"},
-    { message = ".*", group = "Other", default_scope = "other"}, # Everything that's not a conventional commit goes into the "Other" category
-]
-

cypress.config.ts

@@ -1,25 +1,22 @@
-import {defineConfig} from 'cypress'
+import { defineConfig } from 'cypress'
 
 export default defineConfig({
-	env: {
-		API_URL: 'http://localhost:3456/api/v1',
-		TEST_SECRET: 'averyLongSecretToSe33dtheDB',
-	},
-	video: false,
-	retries: {
-		runMode: 2,
-	},
-	projectId: '181c7x',
-	e2e: {
-		baseUrl: 'http://localhost:4173',
-		specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
-	},
-	component: {
-		devServer: {
-			framework: 'vue',
-			bundler: 'vite',
-		},
-	},
-	viewportWidth: 1600,
-	viewportHeight: 900,
+  env: {
+    API_URL: 'http://localhost:3456/api/v1',
+    TEST_SECRET: 'averyLongSecretToSe33dtheDB',
+  },
+  video: false,
+  retries: {
+    runMode: 2,
+  },
+  projectId: '181c7x',
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.js')(on, config)
+    },
+    baseUrl: 'http://localhost:4173',
+    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+  },
 })

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
-pnpm run test:frontend
+yarn test:frontend
 ```
 
 ### Using The Cypress Dashboard
@@ -44,5 +44,5 @@ pnpm run test:frontend
 To open the Cypress Dashboard and run tests from there, run
 
 ```shell
-pnpm run cypress:open
+yarn cypress:open
 ```

cypress/docker-compose.yml

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

cypress/e2e/list/list-history.spec.js

@@ -45,7 +45,7 @@ describe('List History', () => {
 		
 		cy.get('body')
 			.should('contain', 'Last viewed')
-		cy.get('[data-cy="listCardGrid"]')
+		cy.get('.list-cards-wrapper-2-rows')
 			.should('not.contain', lists[0].title)
 			.should('contain', lists[1].title)
 			.should('contain', lists[2].title)

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

@@ -0,0 +1,76 @@
+import {formatISO, format} from 'date-fns'
+import {TaskFactory} from '../../factories/task'
+import {prepareLists} from './prepareLists'
+
+import '../../support/authenticateUser'
+
+describe('List View Gantt', () => {
+	prepareLists()
+	
+	it('Hides tasks with no dates', () => {
+		const tasks = TaskFactory.create(1)
+		cy.visit('/lists/1/gantt')
+
+		cy.get('.gantt-chart .tasks')
+			.should('not.contain', tasks[0].title)
+	})
+
+	it('Shows tasks from the current and next month', () => {
+		const now = new Date()
+		const nextMonth = now
+		nextMonth.setDate(1)
+		nextMonth.setMonth(now.getMonth() + 1)
+
+		cy.visit('/lists/1/gantt')
+
+		cy.get('.gantt-chart .months')
+			.should('contain', format(now, 'MMMM'))
+			.should('contain', format(nextMonth, 'MMMM'))
+	})
+
+	it('Shows tasks with dates', () => {
+		const now = new Date()
+		const tasks = TaskFactory.create(1, {
+			start_date: formatISO(now),
+			end_date: formatISO(now.setDate(now.getDate() + 4))
+		})
+		cy.visit('/lists/1/gantt')
+
+		cy.get('.gantt-chart .tasks')
+			.should('not.be.empty')
+		cy.get('.gantt-chart .tasks')
+			.should('contain', tasks[0].title)
+	})
+
+	it('Shows tasks with no dates after enabling them', () => {
+		TaskFactory.create(1, {
+			start_date: null,
+			end_date: null,
+		})
+		cy.visit('/lists/1/gantt')
+
+		cy.get('.gantt-options .fancycheckbox')
+			.contains('Show tasks which don\'t have dates set')
+			.click()
+
+		cy.get('.gantt-chart .tasks')
+			.should('not.be.empty')
+		cy.get('.gantt-chart .tasks .task.nodate')
+			.should('exist')
+	})
+
+	it('Drags a task around', () => {
+		const now = new Date()
+		TaskFactory.create(1, {
+			start_date: formatISO(now),
+			end_date: formatISO(now.setDate(now.getDate() + 4))
+		})
+		cy.visit('/lists/1/gantt')
+
+		cy.get('.gantt-chart .tasks .task')
+			.first()
+			.trigger('mousedown', {which: 1})
+			.trigger('mousemove', {clientX: 500, clientY: 0})
+			.trigger('mouseup', {force: true})
+	})
+})

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

@@ -1,125 +0,0 @@
-import {formatISO, format} from 'date-fns'
-import {TaskFactory} from '../../factories/task'
-import {prepareLists} from './prepareLists'
-
-import '../../support/authenticateUser'
-
-describe('List View Gantt', () => {
-	prepareLists()
-
-	it('Hides tasks with no dates', () => {
-		const tasks = TaskFactory.create(1)
-		cy.visit('/lists/1/gantt')
-
-		cy.get('.g-gantt-rows-container')
-			.should('not.contain', tasks[0].title)
-	})
-
-	it('Shows tasks from the current and next month', () => {
-		const now = Date.UTC(2022, 8, 25)
-		cy.clock(now, ['Date'])
-
-		const nextMonth = new Date(now)
-		nextMonth.setDate(1)
-		nextMonth.setMonth(9)
-
-		cy.visit('/lists/1/gantt')
-
-		cy.get('.g-timeunits-container')
-			.should('contain', format(now, 'MMMM'))
-			.should('contain', format(nextMonth, 'MMMM'))
-	})
-
-	it('Shows tasks with dates', () => {
-		const now = new Date()
-		const tasks = TaskFactory.create(1, {
-			start_date: formatISO(now),
-			end_date: formatISO(now.setDate(now.getDate() + 4)),
-		})
-		cy.visit('/lists/1/gantt')
-
-		cy.get('.g-gantt-rows-container')
-			.should('not.be.empty')
-			.should('contain', tasks[0].title)
-	})
-
-	it('Shows tasks with no dates after enabling them', () => {
-		const tasks = TaskFactory.create(1, {
-			start_date: null,
-			end_date: null,
-		})
-		cy.visit('/lists/1/gantt')
-
-		cy.get('.gantt-options .fancycheckbox')
-			.contains('Show tasks which don\'t have dates set')
-			.click()
-
-		cy.get('.g-gantt-rows-container')
-			.should('not.be.empty')
-			.should('contain', tasks[0].title)
-	})
-
-	it('Drags a task around', () => {
-		cy.intercept('**/api/v1/tasks/*')
-			.as('taskUpdate')
-
-		const now = new Date()
-		TaskFactory.create(1, {
-			start_date: formatISO(now),
-			end_date: formatISO(now.setDate(now.getDate() + 4)),
-		})
-		cy.visit('/lists/1/gantt')
-
-		cy.get('.g-gantt-rows-container .g-gantt-row .g-gantt-row-bars-container div .g-gantt-bar')
-			.first()
-			.trigger('mousedown', {which: 1})
-			.trigger('mousemove', {clientX: 500, clientY: 0})
-			.trigger('mouseup', {force: true})
-		cy.wait('@taskUpdate')
-	})
-
-	it('Should change the query parameters when selecting a date range', () => {
-		const now = Date.UTC(2022, 10, 9)
-		cy.clock(now, ['Date'])
-
-		cy.visit('/lists/1/gantt')
-
-		cy.get('.list-gantt .gantt-options .field .control input.input.form-control')
-			.click()
-		cy.get('.flatpickr-calendar .flatpickr-innerContainer .dayContainer .flatpickr-day')
-			.first()
-			.click()
-		cy.get('.flatpickr-calendar .flatpickr-innerContainer .dayContainer .flatpickr-day')
-			.last()
-			.click()
-
-		cy.url().should('contain', 'dateFrom=2022-09-25')
-		cy.url().should('contain', 'dateTo=2022-11-05')
-	})
-
-	it('Should change the date range based on date query parameters', () => {
-		cy.visit('/lists/1/gantt?dateFrom=2022-09-25&dateTo=2022-11-05')
-
-		cy.get('.g-timeunits-container')
-			.should('contain', 'September 2022')
-			.should('contain', 'October 2022')
-			.should('contain', 'November 2022')
-		cy.get('.list-gantt .gantt-options .field .control input.input.form-control')
-			.should('have.value', '25 Sep 2022 to 5 Nov 2022')
-	})
-
-	it('Should open a task when double clicked on it', () => {
-		const now = new Date()
-		const tasks = TaskFactory.create(1, {
-			start_date: formatISO(now),
-			end_date: formatISO(now.setDate(now.getDate() + 4)),
-		})
-		cy.visit('/lists/1/gantt')
-
-		cy.get('.gantt-container .g-gantt-chart .g-gantt-row-bars-container .g-gantt-bar')
-			.dblclick()
-
-		cy.url()
-			.should('contain', `/tasks/${tasks[0].id}`)
-	})
-})

cypress/e2e/list/list-view-kanban.spec.js

@@ -193,48 +193,4 @@ describe('List View Kanban', () => {
 		cy.get('.kanban .bucket')
 			.should('not.contain', task.title)
 	})
-	
-	it('Shows a button to filter the kanban board', () => {
-		const data = TaskFactory.create(10, {
-			list_id: 1,
-			bucket_id: 1,
-		})
-		cy.visit('/lists/1/kanban')
-		
-		cy.get('.list-kanban .filter-container .base-button')
-			.should('exist')
-	})
-	
-	it('Should remove a task from the board when deleting it', () => {
-		const lists = ListFactory.create(1)
-		const buckets = BucketFactory.create(2, {
-			list_id: lists[0].id,
-		})
-		const tasks = TaskFactory.create(5, {
-			list_id: 1,
-			bucket_id: buckets[0].id,
-		})
-		const task = tasks[0]
-		cy.visit('/lists/1/kanban')
-
-		cy.getSettled('.kanban .bucket .tasks .task')
-			.contains(task.title)
-			.should('be.visible')
-			.click()
-		cy.get('.task-view .action-buttons .button')
-			.should('be.visible')
-			.contains('Delete')
-			.click()
-		cy.get('.modal-mask .modal-container .modal-content .header')
-			.should('contain', 'Delete this task')
-		cy.get('.modal-mask .modal-container .modal-content .actions .button')
-			.contains('Do it!')
-			.click()
-
-		cy.get('.global-notification')
-			.should('contain', 'Success')
-		
-		cy.getSettled('.kanban .bucket .tasks')
-			.should('not.contain', task.title)
-	})
 })

cypress/e2e/list/list-view-list.spec.js

@@ -61,7 +61,7 @@ describe('List View List', () => {
 		})
 		cy.visit(`/lists/${lists[1].id}/`)
 
-		cy.get('.list-title .icon')
+		cy.get('.list-title a.icon')
 			.should('not.exist')
 		cy.get('input.input[placeholder="Add a new task..."')
 			.should('not.exist')
@@ -78,7 +78,7 @@ describe('List View List', () => {
 
 		cy.get('.menu-list li .list-menu-link .color-bubble')
 			.should('have.css', 'background-color', 'rgb(0, 219, 96)')
-		cy.get('.tasks .color-bubble')
+		cy.get('.tasks-container .tasks .color-bubble')
 			.should('not.exist')
 	})
 
@@ -90,10 +90,8 @@ describe('List View List', () => {
 		})
 		cy.visit('/lists/1/list')
 
-		cy.get('.tasks')
-			.should('contain', tasks[1].title)
-		cy.get('.tasks')
-			.should('not.contain', tasks[99].title)
+		cy.get('.tasks-container .tasks')
+			.should('contain', tasks[99].title)
 
 		cy.get('.card-content .pagination .pagination-link')
 			.contains('2')
@@ -101,9 +99,9 @@ describe('List View List', () => {
 
 		cy.url()
 			.should('contain', '?page=2')
-		cy.get('.tasks')
-			.should('contain', tasks[99].title)
-		cy.get('.tasks')
-			.should('not.contain', tasks[1].title)
+		cy.get('.tasks-container .tasks')
+			.should('contain', tasks[1].title)
+		cy.get('.tasks-container .tasks')
+			.should('not.contain', tasks[99].title)
 	})
 })

cypress/e2e/list/list.spec.js

@@ -52,14 +52,14 @@ describe('Lists', () => {
 		cy.get('.list-title h1')
 			.should('contain', 'First List')
 
-		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .menu-list-dropdown-trigger')
+		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-trigger')
 			.click()
-		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-content')
+		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-content')
 			.contains('Edit')
 			.click()
 		cy.get('#title')
 			.type(`{selectall}${newListName}`)
-		cy.get('footer.card-footer .button')
+		cy.get('footer.modal-card-foot .button')
 			.contains('Save')
 			.click()
 
@@ -68,7 +68,7 @@ describe('Lists', () => {
 		cy.get('.list-title h1')
 			.should('contain', newListName)
 			.should('not.contain', lists[0].title)
-		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child')
+		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child')
 			.should('contain', newListName)
 			.should('not.contain', lists[0].title)
 		cy.visit('/')
@@ -80,9 +80,9 @@ describe('Lists', () => {
 	it('Should remove a list', () => {
 		cy.visit(`/lists/${lists[0].id}`)
 
-		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .menu-list-dropdown-trigger')
+		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-trigger')
 			.click()
-		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-content')
+		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-content')
 			.contains('Delete')
 			.click()
 		cy.url()
@@ -93,7 +93,7 @@ describe('Lists', () => {
 
 		cy.get('.global-notification')
 			.should('contain', 'Success')
-		cy.get('.namespace-container .menu.namespaces-lists .menu-list')
+		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list')
 			.should('not.contain', lists[0].title)
 		cy.location('pathname')
 			.should('equal', '/')
@@ -112,7 +112,7 @@ describe('Lists', () => {
 		cy.get('.modal-content [data-cy=modalPrimary]')
 			.click()
 		
-		cy.get('.namespace-container .menu.namespaces-lists .menu-list')
+		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list')
 			.should('not.contain', lists[0].title)
 		cy.get('main.app-content')
 			.should('contain.text', 'This list is archived. It is not possible to create new or edit tasks for it.')

cypress/e2e/list/namespaces.spec.js

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

cypress/e2e/list/prepareLists.js

@@ -3,19 +3,14 @@ import {UserFactory} from '../../factories/user'
 import {NamespaceFactory} from '../../factories/namespace'
 import {TaskFactory} from '../../factories/task'
 
-export function createLists() {
-	UserFactory.create(1)
-	NamespaceFactory.create(1)
-	const lists = ListFactory.create(1, {
-		title: 'First List'
-	})
-	TaskFactory.truncate()
-	return lists
-}
-
 export function prepareLists(setLists = () => {}) {
 	beforeEach(() => {
-		const lists = createLists()
+		UserFactory.create(1)
+		NamespaceFactory.create(1)
+		const lists = ListFactory.create(1, {
+			title: 'First List'
+		})
 		setLists(lists)
+		TaskFactory.truncate()
 	})
 }

cypress/e2e/task/overview.spec.js

@@ -128,24 +128,4 @@ describe('Home Page Task Overview', () => {
 			.last()
 			.should('contain.text', newTaskTitle)
 	})
-	
-	it('Should show the cta buttons for new list when there are no tasks', () => {
-		TaskFactory.truncate()
-		
-		cy.visit('/')
-		
-		cy.get('.home.app-content .content')
-			.should('contain.text', 'You can create a new list for your new tasks:')
-			.should('contain.text', 'Or import your lists and tasks from other services into Vikunja:')
-	})
-	
-	it('Should not show the cta buttons for new list when there are tasks', () => {
-		seedTasks()
-
-		cy.visit('/')
-
-		cy.get('.home.app-content .content')
-			.should('not.contain.text', 'You can create a new list for your new tasks:')
-			.should('not.contain.text', 'Or import your lists and tasks from other services into Vikunja:')
-	})
 })

cypress/e2e/task/task.spec.js

@@ -12,51 +12,15 @@ import {LabelTaskFactory} from '../../factories/label_task'
 import {BucketFactory} from '../../factories/bucket'
 
 import '../../support/authenticateUser'
-import {TaskAttachmentFactory} from '../../factories/task_attachments'
-
-function addLabelToTaskAndVerify(labelTitle: string) {
-	cy.get('.task-view .action-buttons .button')
-		.contains('Add Labels')
-		.click()
-	cy.get('.task-view .details.labels-list .multiselect input')
-		.type(labelTitle)
-	cy.get('.task-view .details.labels-list .multiselect .search-results')
-		.children()
-		.first()
-		.click()
-
-	cy.get('.global-notification', { timeout: 4000 })
-		.should('contain', 'Success')
-	cy.get('.task-view .details.labels-list .multiselect .input-wrapper span.tag')
-		.should('exist')
-		.should('contain', labelTitle)
-}
-
-function uploadAttachmentAndVerify(taskId: number) {
-	cy.intercept(`${Cypress.env('API_URL')}/tasks/${taskId}/attachments`).as('uploadAttachment')
-	cy.get('.task-view .action-buttons .button')
-		.contains('Add Attachments')
-		.click()
-	cy.get('input[type=file]', {timeout: 1000})
-		.selectFile('cypress/fixtures/image.jpg', {force: true}) // The input is not visible, but on purpose
-	cy.wait('@uploadAttachment')
-
-	cy.get('.attachments .attachments .files a.attachment')
-		.should('exist')
-}
 
 describe('Task', () => {
 	let namespaces
 	let lists
-	let buckets
 
 	beforeEach(() => {
 		UserFactory.create(1)
 		namespaces = NamespaceFactory.create(1)
 		lists = ListFactory.create(1)
-		buckets = BucketFactory.create(1, {
-			list_id: lists[0].id,
-		})
 		TaskFactory.truncate()
 		UserListFactory.truncate()
 	})
@@ -116,7 +80,6 @@ describe('Task', () => {
 	describe('Task Detail View', () => {
 		beforeEach(() => {
 			TaskCommentFactory.truncate()
-			LabelTaskFactory.truncate()
 		})
 
 		it('Shows all task details', () => {
@@ -202,7 +165,7 @@ describe('Task', () => {
 			})
 			cy.visit(`/tasks/${tasks[0].id}`)
 
-			cy.get('.task-view .details.content.description .editor button')
+			cy.get('.task-view .details.content.description .editor a')
 				.click()
 			cy.get('.task-view .details.content.description .editor .vue-easymde .EasyMDEContainer .CodeMirror-scroll')
 				.type('{selectall}New Description')
@@ -334,7 +297,7 @@ describe('Task', () => {
 			cy.visit(`/tasks/${tasks[0].id}`)
 
 			cy.get('.task-view .column.assignees .multiselect .input-wrapper span.assignee')
-				.get('.remove-assignee')
+				.get('a.remove-assignee')
 				.click()
 
 			cy.get('.global-notification')
@@ -377,35 +340,24 @@ describe('Task', () => {
 				list_id: 1,
 			})
 			const labels = LabelFactory.create(1)
-			LabelTaskFactory.truncate()
 
 			cy.visit(`/tasks/${tasks[0].id}`)
 
-			addLabelToTaskAndVerify(labels[0].title)
-		})
-		
-		it('Can add a label to a task and it shows up on the kanban board afterwards', () => {
-			const tasks = TaskFactory.create(1, {
-				id: 1,
-				list_id: lists[0].id,
-				bucket_id: buckets[0].id,
-			})
-			const labels = LabelFactory.create(1)
-			LabelTaskFactory.truncate()
-			
-			cy.visit(`/lists/${lists[0].id}/kanban`)
-			
-			cy.get('.bucket .task')
-				.contains(tasks[0].title)
+			cy.get('.task-view .action-buttons .button')
+				.contains('Add Labels')
 				.click()
-			
-			addLabelToTaskAndVerify(labels[0].title)
-			
-			cy.get('.modal-content .close')
+			cy.get('.task-view .details.labels-list .multiselect input')
+				.type(labels[0].title)
+			cy.get('.task-view .details.labels-list .multiselect .search-results')
+				.children()
+				.first()
 				.click()
-			
-			cy.get('.bucket .task')
-				.should('contain.text', labels[0].title)
+
+			cy.get('.global-notification', { timeout: 4000 })
+				.should('contain', 'Success')
+			cy.get('.task-view .details.labels-list .multiselect .input-wrapper span.tag')
+				.should('exist')
+				.should('contain', labels[0].title)
 		})
 
 		it('Can remove a label from a task', () => {
@@ -450,7 +402,7 @@ describe('Task', () => {
 				.contains('Due Date')
 				.get('.date-input .datepicker .show')
 				.click()
-			cy.get('.datepicker .datepicker-popup button')
+			cy.get('.datepicker .datepicker-popup a')
 				.contains('Tomorrow')
 				.click()
 			cy.get('[data-cy="closeDatepicker"]')
@@ -464,117 +416,5 @@ describe('Task', () => {
 			cy.get('.global-notification')
 				.should('contain', 'Success')
 		})
-		
-		it('Can set a priority for a task', () => {
-			const tasks = TaskFactory.create(1, {
-				id: 1,
-			})
-			cy.visit(`/tasks/${tasks[0].id}`)
-
-			cy.get('.task-view .action-buttons .button')
-				.contains('Set Priority')
-				.click()
-			cy.get('.task-view .columns.details .column')
-				.contains('Priority')
-				.get('.select select')
-				.select('Urgent')
-			cy.get('.global-notification')
-				.should('contain', 'Success')
-
-			cy.get('.task-view .columns.details .column')
-				.contains('Priority')
-				.get('.select select')
-				.should('have.value', '4')
-		})
-
-		it('Can set the progress for a task', () => {
-			const tasks = TaskFactory.create(1, {
-				id: 1,
-			})
-			cy.visit(`/tasks/${tasks[0].id}`)
-
-			cy.get('.task-view .action-buttons .button')
-				.contains('Set Progress')
-				.click()
-			cy.get('.task-view .columns.details .column')
-				.contains('Progress')
-				.get('.select select')
-				.select('50%')
-			cy.get('.global-notification')
-				.should('contain', 'Success')
-			
-			cy.wait(200)
-
-			cy.get('.task-view .columns.details .column')
-				.contains('Progress')
-				.get('.select select')
-				.should('be.visible')
-				.should('have.value', '0.5')
-		})
-		
-		it('Can add an attachment to a task', () => {
-			TaskAttachmentFactory.truncate()
-			const tasks = TaskFactory.create(1, {
-				id: 1,
-			})
-			cy.visit(`/tasks/${tasks[0].id}`)
-
-			uploadAttachmentAndVerify(tasks[0].id)
-		})
-
-		it('Can add an attachment to a task and see it appearing on kanban', () => {
-			TaskAttachmentFactory.truncate()
-			const tasks = TaskFactory.create(1, {
-				id: 1,
-				list_id: lists[0].id,
-				bucket_id: buckets[0].id,
-			})
-			const labels = LabelFactory.create(1)
-			LabelTaskFactory.truncate()
-
-			cy.visit(`/lists/${lists[0].id}/kanban`)
-
-			cy.get('.bucket .task')
-				.contains(tasks[0].title)
-				.click()
-
-			uploadAttachmentAndVerify(tasks[0].id)
-
-			cy.get('.modal-content .close')
-				.click()
-
-			cy.get('.bucket .task .footer .icon svg.fa-paperclip')
-				.should('exist')
-		})
-		
-		it('Can check items off a checklist', () => {
-			const tasks = TaskFactory.create(1, {
-				id: 1,
-				description: `
-This is a checklist:
-
-* [ ] one item
-* [ ] another item
-* [ ] third item
-* [ ] fourth item
-* [x] and this one is already done
-`,
-			})
-			cy.visit(`/tasks/${tasks[0].id}`)
-			
-			cy.get('.task-view .checklist-summary')
-				.should('contain.text', '1 of 5 tasks')
-			cy.get('.editor .content ul > li input[type=checkbox]')
-				.eq(2)
-				.click()
-			
-			cy.get('.editor .content ul > li input[type=checkbox]')
-				.eq(2)
-				.should('be.checked')
-			cy.get('.editor .content input[type=checkbox]')
-				.should('have.length', 5)
-			cy.get('.task-view .checklist-summary')
-				.should('contain.text', '2 of 5 tasks')
-		})
 	})
 })

cypress/e2e/user/login.spec.js

@@ -55,9 +55,4 @@ context('Login', () => {
 
 		testAndAssertFailed(fixture)
 	})
-	
-	it('Should redirect to /login when no user is logged in', () => {
-		cy.visit('/')
-		cy.url().should('include', '/login')
-	})
 })

cypress/e2e/user/logout.spec.js

@@ -0,0 +1,16 @@
+import '../../support/authenticateUser'
+
+describe('Log out', () => {
+	it('Logs the user out', () => {
+		cy.visit('/')
+
+		cy.get('.navbar .user .username')
+			.click()
+		cy.get('.navbar .user .dropdown-menu .dropdown-item')
+			.contains('Logout')
+			.click()
+
+		cy.url()
+			.should('contain', '/login')
+	})
+})

cypress/e2e/user/logout.spec.ts

@@ -1,44 +0,0 @@
-import '../../support/authenticateUser'
-import {createLists} from '../list/prepareLists'
-
-function logout() {
-	cy.get('.navbar .user .username')
-		.click()
-	cy.get('.navbar .user .dropdown-menu .dropdown-item')
-		.contains('Logout')
-		.click()
-}
-
-describe('Log out', () => {
-	it('Logs the user out', () => {
-		cy.visit('/')
-
-		expect(localStorage.getItem('token')).to.not.eq(null)
-
-		logout()
-
-		cy.url()
-			.should('contain', '/login')
-			.then(() => {
-				expect(localStorage.getItem('token')).to.eq(null)
-			})
-	})
-	
-	it.skip('Should clear the list history after logging the user out', () => {
-		const lists = createLists()
-		cy.visit(`/lists/${lists[0].id}`)
-			.then(() => {
-				expect(localStorage.getItem('listHistory')).to.not.eq(null)
-			})
-
-		logout()
-
-		cy.wait(1000) // This makes re-loading of the list and associated entities (and the resulting error) visible
-		
-		cy.url()
-			.should('contain', '/login')
-			.then(() => {
-				expect(localStorage.getItem('listHistory')).to.eq(null)
-			})
-	})
-})

cypress/factories/task.js

@@ -15,7 +15,6 @@ export class TaskFactory extends Factory {
 			list_id: 1,
 			created_by_id: 1,
 			index: '{increment}',
-			position: '{increment}',
 			created: formatISO(now),
 			updated: formatISO(now)
 		}

cypress/factories/task_attachments.ts

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

cypress/factories/user.js

@@ -14,7 +14,6 @@ export class UserFactory extends Factory {
             username: faker.lorem.word(10) + faker.datatype.uuid(),
             password: '$2a$14$dcadBoMBL9jQoOcZK8Fju.cy0Ptx2oZECkKLnaa8ekRoTFe1w7To.', // 1234
 			status: 0,
-			issuer: 'local',
 			created: formatISO(now),
 			updated: formatISO(now)
 		}

cypress/plugins/index.js

@@ -0,0 +1,21 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/support/commands.js

@@ -0,0 +1,33 @@
+/**
+ * Recursively gets an element, returning only after it's determined to be attached to the DOM for good.
+ *
+ * Source: https://github.com/cypress-io/cypress/issues/7306#issuecomment-850621378
+ */
+Cypress.Commands.add('getSettled', (selector, opts = {}) => {
+	const retries = opts.retries || 3
+	const delay = opts.delay || 100
+
+	const isAttached = (resolve, count = 0) => {
+		const el = Cypress.$(selector)
+
+		// is element attached to the DOM?
+		count = Cypress.dom.isAttached(el) ? count + 1 : 0
+
+		// hit our base case, return the element
+		if (count >= retries) {
+			return resolve(el)
+		}
+
+		// retry after a bit of a delay
+		setTimeout(() => isAttached(resolve, count), delay)
+	}
+
+	// wrap, so we can chain cypress commands off the result
+	return cy.wrap(null).then(() => {
+		return new Cypress.Promise((resolve) => {
+			return isAttached(resolve, 0)
+		}).then((el) => {
+			return cy.wrap(el)
+		})
+	})
+})

cypress/support/commands.ts

@@ -1,71 +0,0 @@
-/// <reference types="cypress" />
-// ***********************************************
-// This example commands.ts shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-//
-// declare global {
-//   namespace Cypress {
-//     interface Chainable {
-//       login(email: string, password: string): Chainable<void>
-//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
-//     }
-//   }
-// }
-
-/**
- * Recursively gets an element, returning only after it's determined to be attached to the DOM for good.
- *
- * Source: https://github.com/cypress-io/cypress/issues/7306#issuecomment-850621378
- */
-Cypress.Commands.add('getSettled', (selector, opts = {}) => {
-	const retries = opts.retries || 3
-	const delay = opts.delay || 100
-
-	const isAttached = (resolve, count = 0) => {
-		const el = Cypress.$(selector)
-
-		// is element attached to the DOM?
-		count = Cypress.dom.isAttached(el) ? count + 1 : 0
-
-		// hit our base case, return the element
-		if (count >= retries) {
-			return resolve(el)
-		}
-
-		// retry after a bit of a delay
-		setTimeout(() => isAttached(resolve, count), delay)
-	}
-
-	// wrap, so we can chain cypress commands off the result
-	return cy.wrap(null).then(() => {
-		return new Cypress.Promise((resolve) => {
-			return isAttached(resolve, 0)
-		}).then((el) => {
-			return cy.wrap(el)
-		})
-	})
-})

cypress/support/component.index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>Components App</title>
-  </head>
-  <body>
-    <div data-cy-root></div>
-  </body>
-</html>

cypress/support/component.ts

@@ -1,29 +0,0 @@
-// ***********************************************************
-// This example support/component.ts is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
-
-import { mount } from 'cypress/vue'
-// Ensure global styles are loaded
-import '../../src/styles/global.scss';
-
-Cypress.Commands.add('mount', mount)
-
-// Example use:
-// cy.mount(MyComponent)

cypress/tsconfig.json

@@ -1,10 +0,0 @@
-{
-  "extends": "@vue/tsconfig/tsconfig.web.json",
-  "include": ["./integration/**/*", "./support/**/*"],
-  "compilerOptions": {
-    "isolatedModules": false,
-    "target": "es5",
-    "lib": ["es5", "dom"],
-    "types": ["cypress"]
-  }
-}

docker-manifest-unstable.tmpl

@@ -0,0 +1,17 @@
+image: vikunja/frontend:unstable
+manifests:
+  -
+    image: vikunja/frontend:unstable-linux-amd64
+    platform:
+      architecture: amd64
+      os: linux
+  -
+    image: vikunja/frontend:unstable-linux-arm64
+    platform:
+      architecture: arm64
+      os: linux
+  -
+    image: vikunja/frontend:unstable-linux-arm
+    platform:
+      architecture: arm
+      os: linux

docker-manifest.tmpl

@@ -0,0 +1,23 @@
+image: vikunja/frontend:{{#if build.tag}}{{trimPrefix "v" build.tag}}{{else}}latest{{/if}}
+{{#if build.tags}}
+tags:
+{{#each build.tags}}
+  - {{this}}
+{{/each}}
+{{/if}}
+manifests:
+  -
+    image: vikunja/frontend:{{#if build.tag}}{{trimPrefix "v" build.tag}}-{{/if}}linux-amd64
+    platform:
+      architecture: amd64
+      os: linux
+  -
+    image: vikunja/frontend:{{#if build.tag}}{{trimPrefix "v" build.tag}}-{{/if}}linux-arm64
+    platform:
+      architecture: arm64
+      os: linux
+  -
+    image: vikunja/frontend:{{#if build.tag}}{{trimPrefix "v" build.tag}}-{{/if}}linux-arm
+    platform:
+      architecture: arm
+      os: linux

env.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="vite/client" />
-/// <reference types="vite-svg-loader" />
-/// <reference types="cypress" />

flake.lock

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

flake.nix

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

index.html

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

netlify.toml

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

package.json

@@ -9,106 +9,140 @@
     "build": "vite build && workbox copyLibraries dist/",
     "build:modern-only": "BUILD_MODERN_ONLY=true vite build && workbox copyLibraries dist/",
     "build:dev": "vite build -m development --outDir dist-dev/",
+    "typecheck": "vue-tsc --noEmit",
     "lint": "eslint --ignore-pattern '*.test.*' ./src --ext .vue,.js,.ts",
     "cypress:open": "cypress open",
-    "test:unit": "vitest --run",
+    "test:unit": "vitest run",
     "test:unit-watch": "vitest watch",
     "test:frontend": "cypress run",
-    "typecheck": "vue-tsc --noEmit && vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "browserslist:update": "npx browserslist@latest --update-db"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.2.1",
-    "@fortawesome/free-regular-svg-icons": "6.2.1",
-    "@fortawesome/free-solid-svg-icons": "6.2.1",
-    "@fortawesome/vue-fontawesome": "3.0.2",
-    "@github/hotkey": "2.0.1",
-    "@infectoone/vue-ganttastic": "2.1.3",
-    "@intlify/unplugin-vue-i18n": "0.8.0",
-    "@kyvg/vue3-notification": "2.7.0",
-    "@sentry/tracing": "7.24.2",
-    "@sentry/vue": "7.24.2",
+    "@github/hotkey": "2.0.0",
+    "@kyvg/vue3-notification": "2.3.4",
+    "@sentry/tracing": "7.4.1",
+    "@sentry/vue": "7.4.1",
     "@types/is-touch-device": "1.0.0",
-    "@types/lodash.clonedeep": "4.5.7",
-    "@types/sortablejs": "1.15.0",
-    "@vueuse/core": "9.6.0",
-    "axios": "0.27.2",
-    "blurhash": "2.0.4",
+    "@types/sortablejs": "1.13.0",
+    "@vueuse/core": "8.7.5",
+    "@vueuse/router": "8.7.5",
+    "blurhash": "1.1.5",
     "bulma-css-variables": "0.9.33",
     "camel-case": "4.1.2",
-    "codemirror": "5.65.10",
-    "date-fns": "2.29.3",
-    "dayjs": "1.11.7",
-    "dompurify": "2.4.1",
-    "easymde": "2.18.0",
-    "fast-deep-equal": "3.1.3",
+    "date-fns": "2.28.0",
+    "dompurify": "2.3.8",
+    "easymde": "2.16.1",
     "flatpickr": "4.6.13",
     "flexsearch": "0.7.21",
-    "floating-vue": "2.0.0-beta.20",
-    "highlight.js": "11.7.0",
+    "highlight.js": "11.5.1",
     "is-touch-device": "1.0.1",
     "lodash.clonedeep": "4.5.0",
     "lodash.debounce": "4.0.8",
-    "marked": "4.2.4",
-    "minimist": "1.2.7",
-    "pinia": "2.0.28",
+    "marked": "4.0.17",
+    "minimist": "1.2.6",
     "register-service-worker": "1.7.2",
     "snake-case": "3.0.4",
-    "sortablejs": "1.15.0",
-    "ufo": "1.0.1",
-    "vue": "3.2.45",
-    "vue-advanced-cropper": "2.8.6",
-    "vue-flatpickr-component": "11.0.1",
-    "vue-i18n": "9.2.2",
-    "vue-router": "4.1.6",
-    "workbox-precaching": "6.5.4",
+    "ufo": "0.8.4",
+    "v-tooltip": "4.0.0-beta.17",
+    "vue": "3.2.37",
+    "vue-advanced-cropper": "2.8.3",
+    "vue-drag-resize": "2.0.3",
+    "vue-flatpickr-component": "9.0.6",
+    "vue-i18n": "9.2.0-beta.36",
+    "vue-router": "4.0.16",
+    "vuex": "4.0.2",
+    "workbox-precaching": "6.5.3",
     "zhyswan-vuedraggable": "4.1.3"
   },
   "devDependencies": {
-    "@4tw/cypress-drag-drop": "2.2.2",
-    "@cypress/vite-dev-server": "5.0.2",
-    "@cypress/vue": "5.0.3",
-    "@faker-js/faker": "7.6.0",
-    "@rushstack/eslint-patch": "1.2.0",
-    "@types/codemirror": "5.60.5",
-    "@types/dompurify": "2.4.0",
+    "@4tw/cypress-drag-drop": "2.2.1",
+    "@faker-js/faker": "7.3.0",
+    "@fortawesome/fontawesome-svg-core": "6.1.1",
+    "@fortawesome/free-regular-svg-icons": "6.1.1",
+    "@fortawesome/free-solid-svg-icons": "6.1.1",
+    "@fortawesome/vue-fontawesome": "3.0.1",
     "@types/flexsearch": "0.7.3",
-    "@types/lodash.debounce": "4.0.7",
-    "@types/marked": "4.0.8",
-    "@types/node": "18.11.13",
-    "@types/postcss-preset-env": "7.7.0",
-    "@typescript-eslint/eslint-plugin": "5.46.0",
-    "@typescript-eslint/parser": "5.46.0",
-    "@vitejs/plugin-legacy": "3.0.1",
-    "@vitejs/plugin-vue": "4.0.0",
-    "@vue/eslint-config-typescript": "11.0.2",
-    "@vue/test-utils": "2.2.6",
-    "@vue/tsconfig": "0.1.3",
-    "autoprefixer": "10.4.13",
-    "browserslist": "4.21.4",
-    "caniuse-lite": "1.0.30001436",
-    "csstype": "3.1.1",
-    "cypress": "12.0.2",
-    "esbuild": "0.16.4",
-    "eslint": "8.29.0",
-    "eslint-plugin-vue": "9.8.0",
-    "express": "4.18.2",
-    "happy-dom": "7.7.2",
-    "netlify-cli": "12.2.8",
-    "postcss": "8.4.19",
-    "postcss-preset-env": "7.8.3",
-    "rollup": "3.7.2",
-    "rollup-plugin-visualizer": "5.8.3",
-    "sass": "1.56.2",
-    "typescript": "4.9.4",
-    "vite": "3.2.5",
-    "vite-plugin-pwa": "0.13.3",
-    "vite-svg-loader": "3.6.0",
-    "vitest": "0.25.7",
-    "vue-tsc": "1.0.12",
+    "@typescript-eslint/eslint-plugin": "5.30.4",
+    "@typescript-eslint/parser": "5.30.4",
+    "@vitejs/plugin-legacy": "1.8.2",
+    "@vitejs/plugin-vue": "2.3.3",
+    "@vue/eslint-config-typescript": "11.0.0",
+    "autoprefixer": "10.4.7",
+    "axios": "0.27.2",
+    "browserslist": "4.20.4",
+    "caniuse-lite": "1.0.30001357",
+    "cypress": "10.3.0",
+    "esbuild": "0.14.48",
+    "eslint": "8.19.0",
+    "eslint-plugin-vue": "9.1.1",
+    "express": "4.18.1",
+    "happy-dom": "6.0.0",
+    "netlify-cli": "10.7.1",
+    "postcss": "8.4.14",
+    "postcss-preset-env": "7.7.2",
+    "rollup": "2.75.7",
+    "rollup-plugin-visualizer": "5.6.0",
+    "sass": "1.53.0",
+    "typescript": "4.7.4",
+    "vite": "2.9.13",
+    "vite-plugin-pwa": "0.12.2",
+    "vite-svg-loader": "3.4.0",
+    "vitest": "0.17.0",
+    "vue-tsc": "0.38.2",
     "wait-on": "6.0.1",
-    "workbox-cli": "6.5.4"
+    "workbox-cli": "6.5.3"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "browser": true,
+      "es2021": true,
+      "node": true,
+      "vue/setup-compiler-macros": true
+    },
+    "extends": [
+      "eslint:recommended",
+      "plugin:vue/vue3-essential",
+      "@vue/typescript"
+    ],
+    "rules": {
+      "vue/html-quotes": [
+        "error",
+        "double"
+      ],
+      "quotes": [
+        "error",
+        "single"
+      ],
+      "comma-dangle": [
+        "error",
+        "always-multiline"
+      ],
+      "semi": [
+        "error",
+        "never"
+      ],
+      "vue/script-setup-uses-vars": "error",
+      "vue/multi-word-component-names": 0
+    },
+    "parser": "vue-eslint-parser",
+    "parserOptions": {
+      "parser": "@typescript-eslint/parser",
+      "ecmaVersion": 2022
+    },
+    "ignorePatterns": [
+      "*.test.*",
+      "cypress/*"
+    ],
+    "globals": {
+      "defineProps": "readonly"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
   },
   "license": "AGPL-3.0-or-later",
-  "packageManager": "pnpm@7.18.1"
+  "packageManager": "yarn@1.22.19"
 }

renovate.json

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

scripts/deploy-preview-netlify.js

@@ -1,4 +1,5 @@
-const { exec } = require('child_process')
+const {exec} = require('child_process')
+const axios = require('axios')
 
 const BOT_USER_ID = 513
 const giteaToken = process.env.GITEA_TOKEN
@@ -34,7 +35,7 @@ const promiseExec = cmd => {
 	stdout = await promiseExec(`./node_modules/.bin/netlify deploy --alias ${alias}`)
 	console.log(stdout)
 
-	const data = await fetch(prIssueCommentsUrl).then(response => response.json())
+	const {data} = await axios.get(prIssueCommentsUrl)
 	const hasComment = data.some(c => c.user.id === BOT_USER_ID)
 
 	if (hasComment) {
@@ -42,7 +43,8 @@ const promiseExec = cmd => {
 		return
 	}
 
-	const message = `
+	await axios.post(prIssueCommentsUrl, {
+		body: `
 Hi ${process.env.DRONE_COMMIT_AUTHOR}!
 
 Thank you for creating a PR!
@@ -55,25 +57,14 @@ You will need to manually connect this to an api running somehwere. The easiest
 Have a nice day!
 
 > Beep boop, I'm a bot.
-`
+`,
+	}, {
+		headers: {
+			'Content-Type': 'application/json',
+			'accept': 'application/json',
+			'Authorization': `token ${giteaToken}`,
+		},
+	})
 
-	try {
-		const response = await fetch(prIssueCommentsUrl, {
-			method: 'POST',
-			body: JSON.stringify({
-				body: message,
-			}),
-			headers: {
-				'Content-Type': 'application/json',
-				'accept': 'application/json',
-				'Authorization': `token ${giteaToken}`,
-			},
-		})
-		if (!response.ok) {
-			throw new Error(`HTTP error, status = ${response.status}`)
-		}
-		console.log(`Preview comment sent successfully to PR #${prNumber}!`)
-	} catch (e) {
-		console.log(`Could not send preview comment to PR #${prNumber}! ${e.message}`)
-	}
+	console.log(`Preview comment sent successfully to PR #${prNumber}!`)
 })()

scripts/deploy-preview-netlify.js.sha384

@@ -1 +1 @@
-05c69e5323a4d4bac041ade830735becd52c230277396d1f72be8fde83683a75dc095f6678804083b2ca66f27cc7995f  ./scripts/deploy-preview-netlify.js
+bb46342a0a08105b340ba7976cff9d80ef89901120ec0639669caa70bb7d2dbc43e78b1f635a7654ab2456e8358c98a4  ./scripts/deploy-preview-netlify.js

src/App.vue

@@ -10,13 +10,17 @@
 		</no-auth-wrapper>
 		<Notification/>
 
-		<keyboard-shortcuts v-if="keyboardShortcutsActive"/>
+		<transition name="fade">
+			<keyboard-shortcuts v-if="keyboardShortcutsActive"/>
+		</transition>
 	</ready>
 </template>
 
 <script lang="ts" setup>
-import {computed, watch} from 'vue'
-import {useRoute, useRouter} from 'vue-router'
+import {computed, watch, Ref} from 'vue'
+import {useRouter} from 'vue-router'
+import {useRouteQuery} from '@vueuse/router'
+import {useStore} from 'vuex'
 import {useI18n} from 'vue-i18n'
 import isTouchDevice from 'is-touch-device'
 import {success} from '@/message'
@@ -32,41 +36,37 @@ import Ready from '@/components/misc/ready.vue'
 import {setLanguage} from './i18n'
 import AccountDeleteService from '@/services/accountDelete'
 
-import {useBaseStore} from '@/stores/base'
 import {useColorScheme} from '@/composables/useColorScheme'
 import {useBodyClass} from '@/composables/useBodyClass'
-import {useAuthStore} from './stores/auth'
 
-const baseStore = useBaseStore()
-const authStore = useAuthStore()
+const store = useStore()
 const router = useRouter()
-const route = useRoute()
 
 useBodyClass('is-touch', isTouchDevice())
-const keyboardShortcutsActive = computed(() => baseStore.keyboardShortcutsActive)
+const keyboardShortcutsActive = computed(() => store.state.keyboardShortcutsActive)
 
-const authUser = computed(() => authStore.authUser)
-const authLinkShare = computed(() => authStore.authLinkShare)
+const authUser = computed(() => store.getters['auth/authUser'])
+const authLinkShare = computed(() => store.getters['auth/authLinkShare'])
 
 const {t} = useI18n({useScope: 'global'})
 
 // setup account deletion verification
-const accountDeletionConfirm = computed(() => route.query?.accountDeletionConfirm as (string | undefined))
+const accountDeletionConfirm = useRouteQuery('accountDeletionConfirm') as Ref<null | string>
 watch(accountDeletionConfirm, async (accountDeletionConfirm) => {
-	if (accountDeletionConfirm === undefined) {
+	if (accountDeletionConfirm === null) {
 		return
 	}
 
 	const accountDeletionService = new AccountDeleteService()
 	await accountDeletionService.confirm(accountDeletionConfirm)
 	success({message: t('user.deletion.confirmSuccess')})
-	authStore.refreshUserInfo()
+	store.dispatch('auth/refreshUserInfo')
 }, { immediate: true })
 
 // setup password reset redirect
-const userPasswordReset = computed(() => route.query?.userPasswordReset as (string | undefined))
+const userPasswordReset = useRouteQuery('userPasswordReset') as Ref<null | string>
 watch(userPasswordReset, (userPasswordReset) => {
-	if (userPasswordReset === undefined) {
+	if (userPasswordReset === null) {
 		return
 	}
 
@@ -75,9 +75,9 @@ watch(userPasswordReset, (userPasswordReset) => {
 }, { immediate: true })
 
 // setup email verification redirect
-const userEmailConfirm = computed(() => route.query?.userEmailConfirm as (string | undefined))
+const userEmailConfirm = useRouteQuery('userEmailConfirm') as Ref<null | string>
 watch(userEmailConfirm, (userEmailConfirm) => {
-	if (userEmailConfirm === undefined) {
+	if (userEmailConfirm === null) {
 		return
 	}
 

src/components/base/BaseButton.vue

@@ -1,53 +1,22 @@
-<!-- a disabled link of any kind is not a link -->
-<!-- we have a router link -->
-<!-- just a normal link -->
-<!-- a button it shall be -->
-<!-- note that we only pass the click listener here -->
 <template>
-	<div
-		v-if="disabled === true && (to !== undefined || href !== undefined)"
+	<component
+		:is="componentNodeName"
 		class="base-button"
-		:aria-disabled="disabled || undefined"
-		ref="button"
-	>
-		<slot/>
-	</div>
-	<router-link
-		v-else-if="to !== undefined"
-		:to="to"
-		class="base-button"
-		ref="button"
-	>
-		<slot/>
-	</router-link>
-	<a v-else-if="href !== undefined"
-		class="base-button"
-		:href="href"
-		rel="noreferrer noopener nofollow"
-		target="_blank"
-		ref="button"
-	>
-		<slot/>
-	</a>
-	<button
-		v-else
-		:type="type"
-		class="base-button base-button--type-button"
+		:class="{ 'base-button--type-button': isButton }"
+		v-bind="elementBindings"
 		:disabled="disabled || undefined"
-		ref="button"
-		@click="(event: MouseEvent) => emit('click', event)"
 	>
-		<slot/>
-	</button>
+		<slot />
+	</component>
 </template>
 
 <script lang="ts">
-const BASE_BUTTON_TYPES_MAP = {
-	BUTTON: 'button',
-	SUBMIT: 'submit',
-} as const
+import {defineComponent} from 'vue'
 
-export type BaseButtonTypes = typeof BASE_BUTTON_TYPES_MAP[keyof typeof BASE_BUTTON_TYPES_MAP] | undefined
+// see https://v3.vuejs.org/api/sfc-script-setup.html#usage-alongside-normal-script
+export default defineComponent({
+  inheritAttrs: false,
+})
 </script>
 
 <script lang="ts" setup>
@@ -55,41 +24,67 @@ export type BaseButtonTypes = typeof BASE_BUTTON_TYPES_MAP[keyof typeof BASE_BUT
 // by doing so we make it easy abstract the functionality from style and enable easier and semantic
 // correct button and link usage. Also see: https://css-tricks.com/a-complete-guide-to-links-and-buttons/#accessibility-considerations
 
-// the component tries to heuristically determine what it should be checking the props 
+// the component tries to heuristically determine what it should be checking the props (see the
+// componentNodeName and elementBindings ref for this).
 
 // NOTE: Do NOT use buttons with @click to push routes. => Use router-links instead!
 
-import {unrefElement} from '@vueuse/core'
-import {ref, type HTMLAttributes} from 'vue'
-import type {RouteLocationNamedRaw} from 'vue-router'
+import { ref, watchEffect, computed, useAttrs, PropType } from 'vue'
 
-export interface BaseButtonProps extends HTMLAttributes {
-	type?: BaseButtonTypes
-	disabled?: boolean
-	to?: RouteLocationNamedRaw
-	href?: string
-}
-
-export interface BaseButtonEmits {
-	(e: 'click', payload: MouseEvent): void
-}
-
-const {
-	type = BASE_BUTTON_TYPES_MAP.BUTTON,
-	disabled = false,
-} = defineProps<BaseButtonProps>()
-
-const emit = defineEmits<BaseButtonEmits>()
-
-const button = ref<HTMLElement | null>(null)
-
-function focus() {
-	unrefElement(button)?.focus()
-}
-
-defineExpose({
-	focus,
+const BASE_BUTTON_TYPES_MAP =  Object.freeze({
+  button: 'button',
+  submit: 'submit',
 })
+
+type BaseButtonTypes = keyof typeof BASE_BUTTON_TYPES_MAP
+
+const props = defineProps({
+	type: {
+		type: String as PropType<BaseButtonTypes>,
+		default: 'button',
+	},
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+})
+
+
+const componentNodeName = ref<Node['nodeName']>('button')
+interface ElementBindings {
+	type?: string;
+	rel?: string,
+}
+
+const elementBindings = ref({})
+
+const attrs = useAttrs()
+watchEffect(() => {
+	// by default this component is a button element with the attribute of the type "button" (default prop value)
+	let nodeName = 'button'
+	let bindings: ElementBindings = {type: props.type}
+
+	// if we find a "to" prop we set it as router-link
+	if ('to' in attrs) {
+		nodeName = 'router-link'
+		bindings = {}
+	}
+
+	// if there is a href we assume the user wants an external link via a link element
+	// we also set a predefined value for the attribute rel, but make it possible to overwrite this by the user.
+	if ('href' in attrs) {
+		nodeName = 'a'
+		bindings = {rel: 'noreferrer noopener nofollow'}
+	}
+
+	componentNodeName.value = nodeName
+	elementBindings.value = {
+		...bindings,
+		...attrs,
+	}
+})
+
+const isButton = computed(() => componentNodeName.value === 'button')
 </script>
 
 <style lang="scss">
@@ -108,13 +103,13 @@ defineExpose({
 
 :where(.base-button) {
 	cursor: pointer;
-	display: inline-block;
+	display: block;
 	color: inherit;
 	font: inherit;
 	user-select: none;
 	pointer-events: auto; // disable possible resets
 
-	&:focus, &.is-focused {
+	&:focus {
 		outline: transparent;
 	}
 

src/components/date/datemathHelp.vue

@@ -6,13 +6,13 @@
 			{{ $t('input.datemathHelp.intro') }}
 		</p>
 		<p>
-			<i18n-t keypath="input.datemathHelp.expression" scope="global">
+			<i18n-t keypath="input.datemathHelp.expression">
 				<code>now</code>
 				<code>||</code>
 			</i18n-t>
 		</p>
 		<p>
-			<i18n-t keypath="input.datemathHelp.similar" scope="global">
+			<i18n-t keypath="input.datemathHelp.similar">
 				<BaseButton
 					href="https://grafana.com/docs/grafana/latest/dashboards/time-range-controls/"
 					target="_blank">
@@ -99,7 +99,7 @@
 			<tr>
 				<td><code>{{ exampleDate }}||+1M/d</code></td>
 				<td>
-					<i18n-t keypath="input.datemathHelp.examples.datePlusMonth" scope="global">
+					<i18n-t keypath="input.datemathHelp.examples.datePlusMonth">
 						<code>{{ exampleDate }}</code>
 					</i18n-t>
 				</td>
@@ -110,13 +110,13 @@
 </template>
 
 <script lang="ts" setup>
-import {formatDate} from '@/helpers/time/formatDate'
+import {format} from 'date-fns'
 import BaseButton from '@/components/base/BaseButton.vue'
 
-const exampleDate = formatDate(new Date(), 'yyyy-MM-dd')
+const exampleDate = format(new Date(), 'yyyy-MM-dd')
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .how-it-works-modal {
 	font-size: 1rem;
 }

src/components/date/datepickerWithRange.vue

@@ -54,8 +54,8 @@
 						</p>
 
 						<modal
-							:enabled="showHowItWorks"
 							@close="() => showHowItWorks = false"
+							:enabled="showHowItWorks"
 							transition-name="fade"
 							:overflow="true"
 							variant="hint-modal"
@@ -71,6 +71,7 @@
 
 <script lang="ts" setup>
 import {computed, ref, watch} from 'vue'
+import {useStore} from 'vuex'
 import {useI18n} from 'vue-i18n'
 
 import flatPickr from 'vue-flatpickr-component'
@@ -80,20 +81,14 @@ import Popup from '@/components/misc/popup.vue'
 import {DATE_RANGES} from '@/components/date/dateRanges'
 import BaseButton from '@/components/base/BaseButton.vue'
 import DatemathHelp from '@/components/date/datemathHelp.vue'
-import {useAuthStore} from '@/stores/auth'
 
-const authStore = useAuthStore()
+const store = useStore()
 const {t} = useI18n({useScope: 'global'})
 
-const emit = defineEmits(['update:modelValue'])
-const props = defineProps({
-	modelValue: {
-		required: false,
-	},
-})
+const emit = defineEmits(['dateChanged'])
 
 // FIXME: This seems to always contain the default value - that breaks the picker
-const weekStart = computed(() => authStore.settings.weekStart ?? 0)
+const weekStart = computed<number>(() => store.state.auth.settings.weekStart ?? 0)
 const flatPickerConfig = computed(() => ({
 	altFormat: t('date.altFormatLong'),
 	altInput: true,
@@ -113,27 +108,11 @@ const flatpickrRange = ref('')
 const from = ref('')
 const to = ref('')
 
-watch(
-	() => props.modelValue,
-	newValue => {
-		from.value = newValue.dateFrom
-		to.value = newValue.dateTo
-		// Only set the date back to flatpickr when it's an actual date.
-		// Otherwise flatpickr runs in an endless loop and slows down the browser.
-		const dateFrom = new Date(from.value)
-		const dateTo = new Date(to.value)
-		if (dateTo.getTime() === dateTo.getTime() && dateFrom.getTime() === dateFrom.getTime()) {
-			flatpickrRange.value = `${from.value} to ${to.value}`
-		}
-	},
-)
-
 function emitChanged() {
-	const args = {
+	emit('dateChanged', {
 		dateFrom: from.value === '' ? null : from.value,
 		dateTo: to.value === '' ? null : to.value,
-	}
-	emit('update:modelValue', args)
+	})
 }
 
 watch(

src/components/home/MenuButton.vue

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

src/components/home/TheNavigation.vue

@@ -16,24 +16,20 @@
 					{{ 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>
 
 		<div class="navbar-end">
 			<update/>
-			<BaseButton
+			<a
 				@click="openQuickActions"
 				class="trigger-button pr-0"
 				v-shortcut="'Control+k'"
 				:title="$t('keyboardShortcuts.quickSearch')"
 			>
 				<icon icon="search"/>
-			</BaseButton>
+			</a>
 			<notifications/>
 			<div class="user">
 				<dropdown class="is-right" ref="usernameDropdown">
@@ -44,46 +40,52 @@
 							variant="secondary"
 							:shadow="false"
 						>
-							<img :src="authStore.avatarUrl" alt="" class="avatar" width="40" height="40"/>
-							<span class="username">{{ authStore.userDisplayName }}</span>
+							<img :src="userAvatar" alt="" class="avatar" width="40" height="40"/>
+							<span class="username">{{ userInfo.name !== '' ? userInfo.name : userInfo.username }}</span>
 							<span class="icon is-small">
 								<icon icon="chevron-down"/>
 							</span>
 						</x-button>
 					</template>
 
-					<dropdown-item
+					<BaseButton
 						:to="{name: 'user.settings'}"
+						class="dropdown-item"
 					>
 						{{ $t('user.settings.title') }}
-					</dropdown-item>
-					<dropdown-item
+					</BaseButton>
+					<BaseButton
 						v-if="imprintUrl"
 						:href="imprintUrl"
+						class="dropdown-item"
 					>
 						{{ $t('navigation.imprint') }}
-					</dropdown-item>
-					<dropdown-item
+					</BaseButton>
+					<BaseButton
 						v-if="privacyPolicyUrl"
 						:href="privacyPolicyUrl"
+						class="dropdown-item"
 					>
 						{{ $t('navigation.privacy') }}
-					</dropdown-item>
-					<dropdown-item
-						@click="baseStore.setKeyboardShortcutsActive(true)"
+					</BaseButton>
+					<BaseButton
+						@click="$store.commit('keyboardShortcutsActive', true)"
+						class="dropdown-item"
 					>
 						{{ $t('keyboardShortcuts.title') }}
-					</dropdown-item>
-					<dropdown-item
+					</BaseButton>
+					<BaseButton
 						:to="{name: 'about'}"
+						class="dropdown-item"
 					>
 						{{ $t('about.title') }}
-					</dropdown-item>
-					<dropdown-item
-						@click="authStore.logout()"
+					</BaseButton>
+					<BaseButton
+						@click="logout()"
+						class="dropdown-item"
 					>
 						{{ $t('user.auth.logout') }}
-					</dropdown-item>
+					</BaseButton>
 				</dropdown>
 			</div>
 		</div>
@@ -92,35 +94,30 @@
 
 <script setup lang="ts">
 import {ref, computed, onMounted, nextTick} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter} from 'vue-router'
 
-import {RIGHTS as Rights} from '@/constants/rights'
+import {QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
+import Rights from '@/models/constants/rights.json'
 
 import Update from '@/components/home/update.vue'
 import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
 import Dropdown from '@/components/misc/dropdown.vue'
-import DropdownItem from '@/components/misc/dropdown-item.vue'
 import Notifications from '@/components/notifications/notifications.vue'
 import Logo from '@/components/home/Logo.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 import MenuButton from '@/components/home/MenuButton.vue'
 
-import {getListTitle} from '@/helpers/getListTitle'
+const store = useStore()
 
-import {useBaseStore} from '@/stores/base'
-import {useConfigStore} from '@/stores/config'
-import {useAuthStore} from '@/stores/auth'
-
-const baseStore = useBaseStore()
-const currentList = computed(() => baseStore.currentList)
-const background = computed(() => baseStore.background)
-const canWriteCurrentList = computed(() => baseStore.currentList.maxRight > Rights.READ)
-const menuActive = computed(() => baseStore.menuActive)
-
-const authStore = useAuthStore()
-
-const configStore = useConfigStore()
-const imprintUrl = computed(() => configStore.legal.imprintUrl)
-const privacyPolicyUrl = computed(() => configStore.legal.privacyPolicyUrl)
+const userInfo = computed(() => store.state.auth.info)
+const userAvatar = computed(() => store.state.auth.avatarUrl)
+const currentList = computed(() => store.state.currentList)
+const background = computed(() => store.state.background)
+const imprintUrl = computed(() => store.state.config.legal.imprintUrl)
+const privacyPolicyUrl = computed(() => store.state.config.legal.privacyPolicyUrl)
+const canWriteCurrentList = computed(() => store.state.currentList.maxRight > Rights.READ)
+const menuActive = computed(() => store.state.menuActive)
 
 const usernameDropdown = ref()
 const listTitle = ref()
@@ -134,8 +131,15 @@ onMounted(async () => {
 	listTitle.value.style.setProperty('--nav-username-width', `${usernameWidth}px`)
 })
 
+const router = useRouter()
+
+function logout() {
+	store.dispatch('auth/logout')
+	router.push({name: 'user.login'})
+}
+
 function openQuickActions() {
-	baseStore.setQuickActionsActive(true)
+	store.commit(QUICK_ACTIONS_ACTIVE, true)
 }
 </script>
 
@@ -283,21 +287,10 @@ $hamburger-menu-icon-width: 28px;
 
 	:deep(.dropdown-trigger) {
 		color: var(--grey-400);
-		margin-left: .5rem;
+		margin-left: 1rem;
 		height: 1rem;
 		width: 1rem;
 		cursor: pointer;
 	}
 }
-
-.info-button {
-	text-align: center;
-	height: 1.25rem;
-	line-height: 1.25rem;
-	width: 2rem;
-	margin-top: .25rem;
-	padding: 0 .5rem;
-	color: var(--grey-400);
-	margin-left: .5rem;
-}
 </style>

src/components/home/contentAuth.vue

@@ -2,7 +2,7 @@
 	<div class="content-auth">
 		<BaseButton
 			v-if="menuActive"
-			@click="baseStore.setMenuActive(false)"
+			@click="$store.commit('menuActive', false)"
 			class="menu-hide-button d-print-none"
 		>
 			<icon icon="times"/>
@@ -26,7 +26,7 @@
 			>
 				<BaseButton
 					v-if="menuActive"
-					@click="baseStore.setMenuActive(false)"
+					@click="$store.commit('menuActive', false)"
 					class="mobile-overlay d-print-none"
 				/>
 
@@ -38,56 +38,105 @@
 					</keep-alive>
 				</router-view>
 
-				<modal
-					:enabled="Boolean(currentModal)"
-					@close="closeModal()"
-					variant="scrolling"
-					class="task-detail-view-modal"
-				>
-					<component :is="currentModal"/>
-				</modal>
+				<transition name="modal">
+					<modal
+						v-if="currentModal"
+						@close="closeModal()"
+						variant="scrolling"
+						class="task-detail-view-modal"
+					>
+						<component :is="currentModal"/>
+					</modal>
+				</transition>
 
-				<BaseButton
+				<a
 					class="keyboard-shortcuts-button d-print-none"
 					@click="showKeyboardShortcuts()"
 					v-shortcut="'?'"
 				>
 					<icon icon="keyboard"/>
-				</BaseButton>
+				</a>
 			</main>
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import {watch, computed} from 'vue'
-import {useRoute} from 'vue-router'
+import {watch, computed, shallowRef, watchEffect, VNode, h} from 'vue'
+import {useStore} from 'vuex'
+import {useRoute, useRouter} from 'vue-router'
+import {useEventListener} from '@vueuse/core'
 
+import {CURRENT_LIST, KEYBOARD_SHORTCUTS_ACTIVE, MENU_ACTIVE} from '@/store/mutation-types'
 import Navigation from '@/components/home/navigation.vue'
 import QuickActions from '@/components/quick-actions/quick-actions.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 
-import {useBaseStore} from '@/stores/base'
-import {useLabelStore} from '@/stores/labels'
+function useRouteWithModal() {
+	const router = useRouter()
+	const route = useRoute()
+	const backdropView = computed(() => route.fullPath && window.history.state.backdropView)
 
-import {useRouteWithModal} from '@/composables/useRouteWithModal'
-import {useRenewTokenOnFocus} from '@/composables/useRenewTokenOnFocus'
+	const routeWithModal = computed(() => {
+		return backdropView.value
+			? router.resolve(backdropView.value)
+			: route
+	})
+
+	const currentModal = shallowRef<VNode>()
+	watchEffect(() => {
+		if (!backdropView.value) {
+			currentModal.value = undefined
+			return
+		}
+
+		// logic from vue-router
+		// https://github.com/vuejs/vue-router-next/blob/798cab0d1e21f9b4d45a2bd12b840d2c7415f38a/src/RouterView.ts#L125
+		const routePropsOption = route.matched[0]?.props.default
+		const routeProps = routePropsOption
+			? routePropsOption === true
+				? route.params
+				: typeof routePropsOption === 'function'
+					? routePropsOption(route)
+					: routePropsOption
+			: null
+
+		currentModal.value = h(
+			route.matched[0]?.components.default,
+			routeProps,
+		)
+	})
+
+	function closeModal() {
+		const historyState = computed(() => route.fullPath && window.history.state)
+
+		if (historyState.value) {
+			router.back()
+		} else {
+			const backdropRoute = historyState.value?.backdropView && router.resolve(historyState.value.backdropView)
+			router.push(backdropRoute)
+		}
+	}
+
+	return {routeWithModal, currentModal, closeModal}
+}
 
 const {routeWithModal, currentModal, closeModal} = useRouteWithModal()
 
-const baseStore = useBaseStore()
-const background = computed(() => baseStore.background)
-const blurHash = computed(() => baseStore.blurHash)
-const menuActive = computed(() => baseStore.menuActive)
+const store = useStore()
+
+const background = computed(() => store.state.background)
+const blurHash = computed(() => store.state.blurHash)
+const menuActive = computed(() => store.state.menuActive)
 
 function showKeyboardShortcuts() {
-	baseStore.setKeyboardShortcutsActive(true)
+	store.commit(KEYBOARD_SHORTCUTS_ACTIVE, true)
 }
 
 const route = useRoute()
 
 // hide menu on mobile
-watch(() => route.fullPath, () => window.innerWidth < 769 && baseStore.setMenuActive(false))
+watch(() => route.fullPath, () => window.innerWidth < 769 && store.commit(MENU_ACTIVE, false))
 
 // FIXME: this is really error prone
 // Reset the current list highlight in menu if the current route is not list related.
@@ -109,16 +158,48 @@ watch(() => route.name as string, (routeName) => {
 			routeName.startsWith('user.settings')
 		)
 	) {
-		baseStore.handleSetCurrentList({list: null})
+		store.dispatch(CURRENT_LIST, {list: null})
 	}
 })
 
 // TODO: Reset the title if the page component does not set one itself
 
-useRenewTokenOnFocus()
+function useRenewTokenOnFocus() {
+	const router = useRouter()
 
-const labelStore = useLabelStore()
-labelStore.loadAllLabels()
+	const userInfo = computed(() => store.state.auth.info)
+	const authenticated = computed(() => store.state.auth.authenticated)
+
+	// Try renewing the token every time vikunja is loaded initially
+	// (When opening the browser the focus event is not fired)
+	store.dispatch('auth/renewToken')
+
+	// Check if the token is still valid if the window gets focus again to maybe renew it
+	useEventListener('focus', () => {
+		if (!authenticated.value) {
+			return
+		}
+
+		const expiresIn = (userInfo.value !== null ? userInfo.value.exp : 0) - +new Date() / 1000
+
+		// If the token expiry is negative, it is already expired and we have no choice but to redirect
+		// the user to the login page
+		if (expiresIn < 0) {
+			store.dispatch('auth/checkAuth')
+			router.push({name: 'user.login'})
+			return
+		}
+
+		// Check if the token is valid for less than 60 hours and renew if thats the case
+		if (expiresIn < 60 * 3600) {
+			store.dispatch('auth/renewToken')
+			console.debug('renewed token')
+		}
+	})
+}
+
+useRenewTokenOnFocus()
+store.dispatch('labels/loadAllLabels')
 </script>
 
 <style lang="scss" scoped>
@@ -154,36 +235,41 @@ labelStore.loadAllLabels()
 	@media screen and (max-width: $tablet) {
 		padding-top: $navbar-height;
 	}
-}
 
-.app-content {
-	z-index: 10;
-	position: relative;
-	padding: 1.5rem 0.5rem 1rem;
+	.app-content {
+		z-index: 10;
+		position: relative;
+		padding-top: 1rem;
 
-	@media screen and (max-width: $tablet) {
-		margin-left: 0;
-		min-height: calc(100vh - 4rem);
-	}
-
-	@media screen and (min-width: $tablet) {
-		padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
-	}
-
-	&.is-menu-enabled {
-		@media screen and (min-width: $tablet) {
-			margin-left: $navbar-width;
+		@media screen {
+			padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
 		}
-	}
 
-	// Used to make sure the spinner is always in the middle while loading
-	> .loader-container {
-		min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem});
-	}
+		// Used to make sure the spinner is always in the middle while loading
+		> .loader-container {
+			min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem});
+		}
 
-	// FIXME: This should be somehow defined inside Card.vue
-	.card {
-		background: var(--white);
+		@media screen and (max-width: $tablet) {
+			margin-left: 0;
+			padding-top: 1.5rem;
+			min-height: calc(100vh - 4rem);
+		}
+
+		@media screen {
+			&.is-menu-enabled {
+				margin-left: $navbar-width;
+
+				@media screen and (max-width: $tablet) {
+					min-width: 100%;
+					margin-left: 0;
+				}
+			}
+		}
+
+		.card {
+			background: var(--white);
+		}
 	}
 }
 
@@ -230,4 +316,6 @@ labelStore.loadAllLabels()
 .content-auth.z-unset {
 	z-index: unset;
 }
+
+@include modal-transition();
 </style>

src/components/home/contentLinkShare.vue

@@ -6,16 +6,15 @@
 	>
 		<div class="container has-text-centered link-share-view">
 			<div class="column is-10 is-offset-1">
-				<Logo class="logo" v-if="logoVisible"/>
+				<Logo class="logo" />
 				<h1
-					:class="{'m-0': !logoVisible}"
 					:style="{ 'opacity': currentList.title === '' ? '0': '1' }"
 					class="title">
 					{{ currentList.title === '' ? $t('misc.loading') : currentList.title }}
 				</h1>
 				<div class="box has-text-left view">
 					<router-view/>
-					<PoweredByLink/>
+					<PoweredByLink />
 				</div>
 			</div>
 		</div>
@@ -24,29 +23,26 @@
 
 <script lang="ts" setup>
 import {computed} from 'vue'
-
-import {useBaseStore} from '@/stores/base'
+import {useStore} from 'vuex'
 
 import Logo from '@/components/home/Logo.vue'
 import PoweredByLink from './PoweredByLink.vue'
 
-const baseStore = useBaseStore()
-const currentList = computed(() => baseStore.currentList)
-const background = computed(() => baseStore.background)
-const logoVisible = computed(() => baseStore.logoVisible)
+const store = useStore()
+const currentList = computed(() => store.state.currentList)
+const background = computed(() => store.state.background)
 </script>
 
 <style lang="scss" scoped>
 .link-share-container.has-background .view {
-	background-color: transparent;
-	border: none;
+  background-color: transparent;
+  border: none;
 }
 
 .logo {
 	max-width: 300px;
 	width: 90%;
 	margin: 2rem 0 1.5rem;
-	height: 100px;
 }
 
 .column {
@@ -59,6 +55,6 @@ const logoVisible = computed(() => baseStore.logoVisible)
 
 // FIXME: this should be defined somewhere deep
 .link-share-view .card {
-	background-color: var(--white);
+    background-color: var(--white);
 }
 </style>

src/components/home/navigation.vue

@@ -7,7 +7,7 @@
 			<ul class="menu-list">
 				<li>
 					<router-link :to="{ name: 'home'}" v-shortcut="'g o'">
-						<span class="menu-item-icon icon">
+						<span class="icon">
 							<icon icon="calendar"/>
 						</span>
 						{{ $t('navigation.overview') }}
@@ -15,7 +15,7 @@
 				</li>
 				<li>
 					<router-link :to="{ name: 'tasks.range'}" v-shortcut="'g u'">
-						<span class="menu-item-icon icon">
+						<span class="icon">
 							<icon :icon="['far', 'calendar-alt']"/>
 						</span>
 						{{ $t('navigation.upcoming') }}
@@ -23,7 +23,7 @@
 				</li>
 				<li>
 					<router-link :to="{ name: 'namespaces.index'}" v-shortcut="'g n'">
-						<span class="menu-item-icon icon">
+						<span class="icon">
 							<icon icon="layer-group"/>
 						</span>
 						{{ $t('namespace.title') }}
@@ -31,7 +31,7 @@
 				</li>
 				<li>
 					<router-link :to="{ name: 'labels.index'}" v-shortcut="'g a'">
-						<span class="menu-item-icon icon">
+						<span class="icon">
 							<icon icon="tags"/>
 						</span>
 						{{ $t('label.title') }}
@@ -39,7 +39,7 @@
 				</li>
 				<li>
 					<router-link :to="{ name: 'teams.index'}" v-shortcut="'g m'">
-						<span class="menu-item-icon icon">
+						<span class="icon">
 							<icon icon="users"/>
 						</span>
 						{{ $t('team.title') }}
@@ -51,35 +51,42 @@
 		<nav class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}">
 			<template v-for="(n, nk) in namespaces" :key="n.id">
 				<div class="namespace-title" :class="{'has-menu': n.id > 0}">
-					<BaseButton
+					<span
 						@click="toggleLists(n.id)"
 						class="menu-label"
 						v-tooltip="namespaceTitles[nk]"
 					>
-						<ColorBubble
+						<span
 							v-if="n.hexColor !== ''"
-							:color="n.hexColor"
-							class="mr-1"
+							:style="{ backgroundColor: n.hexColor }"
+							class="color-bubble"
 						/>
-						<span class="name">{{ namespaceTitles[nk] }}</span>
-						<div
-							class="icon menu-item-icon is-small toggle-lists-icon pl-2"
+						<span class="name">
+							{{ namespaceTitles[nk] }}
+						</span>
+						<a
+							class="icon is-small toggle-lists-icon pl-2"
 							:class="{'active': typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true}"
+							@click="toggleLists(n.id)"
 						>
 							<icon icon="chevron-down"/>
-						</div>
+						</a>
 						<span class="count" :class="{'ml-2 mr-0': n.id > 0}">
 							({{ namespaceListsCount[nk] }})
 						</span>
-					</BaseButton>
-					<namespace-settings-dropdown class="menu-list-dropdown" :namespace="n" v-if="n.id > 0"/>
+					</span>
+					<namespace-settings-dropdown :namespace="n" v-if="n.id > 0"/>
 				</div>
+				<div
+					v-if="listsVisible[n.id] ?? true"
+					:key="n.id + 'child'"
+					class="more-container"
+				>
 					<!--
 						NOTE: a v-model / computed setter is not possible, since the updateActiveLists function
 						triggered by the change needs to have access to the current namespace
 					-->
 					<draggable
-						v-if="listsVisible[n.id] ?? true"
 						v-bind="dragOptions"
 						:modelValue="activeLists[nk]"
 						@update:modelValue="(lists) => updateActiveLists(n, lists)"
@@ -88,12 +95,13 @@
 						@end="saveListPosition"
 						handle=".handle"
 						:disabled="n.id < 0 || undefined"
-						tag="ul"
+						tag="transition-group"
 						item-key="id"
 						:data-namespace-id="n.id"
 						:data-namespace-index="nk"
 						:component-data="{
-							type: 'transition-group',
+							type: 'transition',
+							tag: 'ul',
 							name: !drag ? 'flip-list' : null,
 							class: [
 								'menu-list can-be-hidden',
@@ -103,42 +111,45 @@
 					>
 						<template #item="{element: l}">
 							<li
-								class="list-menu loader-container is-loading-small"
+								class="loader-container is-loading-small"
 								:class="{'is-loading': listUpdating[l.id]}"
 							>
-								<BaseButton
+								<router-link
 									:to="{ name: 'list.index', params: { listId: l.id} }"
-									class="list-menu-link"
-									:class="{'router-link-exact-active': currentList.id === l.id}"
+									v-slot="{ href, navigate, isActive }"
+									custom
 								>
-									<span class="icon menu-item-icon handle">
-										<icon icon="grip-lines"/>
-									</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="listStore.toggleListFavorite(l)"
-								>
-									<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
-								</BaseButton>
-								<list-settings-dropdown class="menu-list-dropdown" :list="l" v-if="l.id > 0">
-									<template #trigger="{toggleOpen}">
-										<BaseButton class="menu-list-dropdown-trigger" @click="toggleOpen">
-											<icon icon="ellipsis-h" class="icon"/>
-										</BaseButton>
-									</template>
-								</list-settings-dropdown>
+									<a
+										@click="navigate"
+										:href="href"
+										class="list-menu-link"
+										:class="{'router-link-exact-active': isActive || currentList?.id === l.id}"
+									>
+										<span class="icon handle">
+											<icon icon="grip-lines"/>
+										</span>
+										<span
+											:style="{ backgroundColor: l.hexColor }"
+											class="color-bubble"
+											v-if="l.hexColor !== ''">
+										</span>
+										<span class="list-menu-title">
+											{{ getListTitle(l) }}
+										</span>
+										<span
+											:class="{'is-favorite': l.isFavorite}"
+											@click.prevent.stop="toggleFavoriteList(l)"
+											class="favorite">
+											<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
+										</span>
+									</a>
+								</router-link>
+								<list-settings-dropdown :list="l" v-if="l.id > 0"/>
 								<span class="list-setting-spacer" v-else></span>
 							</li>
 						</template>
 					</draggable>
+				</div>
 			</template>
 		</nav>
 		<PoweredByLink/>
@@ -147,26 +158,21 @@
 
 <script setup lang="ts">
 import {ref, computed, onMounted, onBeforeMount} from 'vue'
+import {useStore} from 'vuex'
 import draggable from 'zhyswan-vuedraggable'
-import type {SortableEvent} from 'sortablejs'
+import {SortableEvent} from 'sortablejs'
 
-import BaseButton from '@/components/base/BaseButton.vue'
 import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
 import NamespaceSettingsDropdown from '@/components/namespace/namespace-settings-dropdown.vue'
 import PoweredByLink from '@/components/home/PoweredByLink.vue'
 import Logo from '@/components/home/Logo.vue'
 
+import {MENU_ACTIVE} from '@/store/mutation-types'
 import {calculateItemPosition} from '@/helpers/calculateItemPosition'
 import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
-import {getListTitle} from '@/helpers/getListTitle'
 import {useEventListener} from '@vueuse/core'
-import type {IList} from '@/modelTypes/IList'
-import type {INamespace} from '@/modelTypes/INamespace'
-import ColorBubble from '@/components/misc/colorBubble.vue'
-
-import {useBaseStore} from '@/stores/base'
-import {useListStore} from '@/stores/lists'
-import {useNamespaceStore} from '@/stores/namespaces'
+import NamespaceModel from '@/models/namespace'
+import ListModel from '@/models/list'
 
 const drag = ref(false)
 const dragOptions = {
@@ -174,15 +180,14 @@ const dragOptions = {
 	ghostClass: 'ghost',
 }
 
-const baseStore = useBaseStore()
-const namespaceStore = useNamespaceStore()
-const currentList = computed(() => baseStore.currentList)
-const menuActive = computed(() => baseStore.menuActive)
-const loading = computed(() => namespaceStore.isLoading)
+const store = useStore()
+const currentList = computed(() => store.state.currentList)
+const menuActive = computed(() => store.state.menuActive)
+const loading = computed(() => store.state.loading && store.state.loadingModule === 'namespaces')
 
 
 const namespaces = computed(() => {
-	return namespaceStore.namespaces.filter(n => !n.isArchived)
+	return (store.state.namespaces.namespaces as NamespaceModel[]).filter(n => !n.isArchived)
 })
 const activeLists = computed(() => {
 	return namespaces.value.map(({lists}) => {
@@ -204,21 +209,29 @@ const namespaceListsCount = computed(() => {
 useEventListener('resize', resize)
 onMounted(() => resize())
 
-const listStore = useListStore()
+
+function toggleFavoriteList(list: ListModel) {
+	// The favorites pseudo list is always favorite
+	// Archived lists cannot be marked favorite
+	if (list.id === -1 || list.isArchived) {
+		return
+	}
+	store.dispatch('lists/toggleListFavorite', list)
+}
 
 function resize() {
 	// Hide the menu by default on mobile
-	baseStore.setMenuActive(window.innerWidth >= 770)
+	store.commit(MENU_ACTIVE, window.innerWidth >= 770)
 }
 
-function toggleLists(namespaceId: INamespace['id']) {
+function toggleLists(namespaceId: number) {
 	listsVisible.value[namespaceId] = !listsVisible.value[namespaceId]
 }
 
-const listsVisible = ref<{ [id: INamespace['id']]: boolean }>({})
+const listsVisible = ref<{ [id: NamespaceModel['id']]: boolean }>({})
 // FIXME: async action will be unfinished when component mounts
 onBeforeMount(async () => {
-	const namespaces = await namespaceStore.loadNamespaces()
+	const namespaces = await store.dispatch('namespaces/loadNamespaces') as NamespaceModel[]
 	namespaces.forEach(n => {
 		if (typeof listsVisible.value[n.id] === 'undefined') {
 			listsVisible.value[n.id] = true
@@ -226,7 +239,7 @@ onBeforeMount(async () => {
 	})
 })
 
-function updateActiveLists(namespace: INamespace, activeLists: IList[]) {
+function updateActiveLists(namespace: NamespaceModel, activeLists: ListModel[]) {
 	// This is a bit hacky: since we do have to filter out the archived items from the list
 	// for vue draggable updating it is not as simple as replacing it.
 	// To work around this, we merge the active lists with the archived ones. Doing so breaks the order
@@ -237,29 +250,24 @@ function updateActiveLists(namespace: INamespace, activeLists: IList[]) {
 		...namespace.lists.filter(l => l.isArchived),
 	]
 
-	namespaceStore.setNamespaceById({
+	store.commit('namespaces/setNamespaceById', {
 		...namespace,
 		lists,
 	})
 }
 
-const listUpdating = ref<{ [id: INamespace['id']]: boolean }>({})
+const listUpdating = ref<{ [id: NamespaceModel['id']]: boolean }>({})
 
 async function saveListPosition(e: SortableEvent) {
-	if (!e.newIndex && e.newIndex !== 0) return
+	if (!e.newIndex) return
 
 	const namespaceId = parseInt(e.to.dataset.namespaceId as string)
 	const newNamespaceIndex = parseInt(e.to.dataset.namespaceIndex as string)
 
 	const listsActive = activeLists.value[newNamespaceIndex]
-	// If the list was dragged to the last position, Safari will report e.newIndex as the size of the listsActive
-	// array instead of using the position. Because the index is wrong in that case, dragging the list will fail.
-	// To work around that we're explicitly checking that case here and decrease the index.
-	const newIndex = e.newIndex === listsActive.length ? e.newIndex - 1 : e.newIndex 
-	
-	const list = listsActive[newIndex]
-	const listBefore = listsActive[newIndex - 1] ?? null
-	const listAfter = listsActive[newIndex + 1] ?? null
+	const list = listsActive[e.newIndex]
+	const listBefore = listsActive[e.newIndex - 1] ?? null
+	const listAfter = listsActive[e.newIndex + 1] ?? null
 	listUpdating.value[list.id] = true
 
 	const position = calculateItemPosition(
@@ -268,8 +276,8 @@ async function saveListPosition(e: SortableEvent) {
 	)
 
 	try {
-		// create a copy of the list in order to not violate pinia manipulation
-		await listStore.updateList({
+		// create a copy of the list in order to not violate vuex mutations
+		await store.dispatch('lists/updateList', {
 			...list,
 			position,
 			namespaceId,
@@ -286,18 +294,6 @@ $vikunja-nav-background: var(--site-background);
 $vikunja-nav-color: var(--grey-700);
 $vikunja-nav-selected-width: 0.4rem;
 
-.logo {
-	display: block;
-
-	padding-left: 1rem;
-	margin-right: 1rem;
-	margin-bottom: 1rem;
-
-	@media screen and (min-width: $tablet) {
-		display: none;
-	}
-}
-
 .namespace-container {
 	background: $vikunja-nav-background;
 	color: $vikunja-nav-color;
@@ -321,227 +317,255 @@ $vikunja-nav-selected-width: 0.4rem;
 		transform: translateX(0);
 		transition: transform $transition-duration ease-out;
 	}
-}
 
-// these are general menu styles
-// should be in own components
-.menu {
-	.menu-label,
-	.menu-list .list-menu-link,
-	.menu-list a {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		cursor: pointer;
+	.menu {
+		.menu-label {
+			font-size: 1rem;
+			font-weight: 700;
+			font-weight: bold;
+			font-family: $vikunja-font;
+			color: $vikunja-nav-color;
+			font-weight: 500;
+			min-height: 2.5rem;
+			padding-top: 0;
+			padding-left: $navbar-padding;
 
-		.color-bubble {
-			height: 12px;
-			flex: 0 0 12px;
+			overflow: hidden;
 		}
-	}
 
-	.menu-list {
-		li {
-			height: 44px;
+		.menu-label,
+		.menu-list span.list-menu-link,
+		.menu-list a {
 			display: flex;
 			align-items: center;
+			justify-content: space-between;
+			cursor: pointer;
 
-			&:hover {
-				background: var(--white);
+			.list-menu-title {
+				overflow: hidden;
+				text-overflow: ellipsis;
+				width: 100%;
 			}
 
-			.menu-list-dropdown {
+			.color-bubble {
+				height: 12px;
+				flex: 0 0 12px;
+			}
+
+			.favorite {
+				margin-left: .25rem;
+				transition: opacity $transition, color $transition;
 				opacity: 0;
-				transition: $transition;
+
+				&:hover {
+					color: var(--warning);
+				}
+
+				&.is-favorite {
+					opacity: 1;
+					color: var(--warning);
+				}
 			}
 
-			&:hover .menu-list-dropdown {
+			&:hover .favorite {
 				opacity: 1;
 			}
+
+			&:hover {
+				background: transparent;
+			}
 		}
 
-		.menu-item-icon {
-			color: var(--grey-400);
+		.menu-label {
+			.color-bubble {
+				width: 14px;
+				height: 14px;
+				flex-basis: auto;
+			}
+
+			.is-archived {
+				min-width: 85px;
+			}
 		}
 
-		.menu-list-dropdown-trigger {
+		.namespace-title {
 			display: flex;
-			padding: 0.5rem;
-		}
+			align-items: center;
+			justify-content: space-between;
 
-		.flip-list-move {
-			transition: transform $transition-duration;
-		}
+			.menu-label {
+				margin-bottom: 0;
+				flex: 1 1 auto;
 
-		.ghost {
-			background: var(--grey-200);
+				.name {
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+					margin-right: auto;
+				}
 
-			* {
-				opacity: 0;
-			}
-		}
-
-		a:hover {
-			background: transparent;
-		}
-
-		.list-menu-link,
-		li > a {
-			color: $vikunja-nav-color;
-			padding: 0.75rem .5rem 0.75rem ($navbar-padding * 1.5 - 1.75rem);
-			transition: all 0.2s ease;
-
-			border-radius: 0;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			overflow: hidden;
-			width: 100%;
-			border-left: $vikunja-nav-selected-width solid transparent;
-
-			&:hover {
-				border-left: $vikunja-nav-selected-width solid var(--primary);
+				.count {
+					color: var(--grey-500);
+					margin-right: .5rem;
+				}
 			}
 
-			&.router-link-exact-active {
-				color: var(--primary);
-				border-left: $vikunja-nav-selected-width solid var(--primary);
+			a:not(.dropdown-item) {
+				color: $vikunja-nav-color;
+				padding: 0 .25rem;
 			}
 
-			.icon {
-				height: 1rem;
-				vertical-align: middle;
-				padding-right: 0.5rem;
+			:deep(.dropdown-trigger) {
+				padding: .5rem;
+				cursor: pointer;
 			}
 
-			&.router-link-exact-active .icon:not(.handle) {
-				color: var(--primary);
+			.toggle-lists-icon {
+				svg {
+					transition: all $transition;
+					transform: rotate(90deg);
+					opacity: 1;
+				}
+
+				&.active svg {
+					transform: rotate(0deg);
+					opacity: 0;
+				}
 			}
 
-			.handle {
-				opacity: 0;
-				transition: opacity $transition;
-				margin-right: .25rem;
-				cursor: grab;
-			}
-			&:hover .handle {
+			&:hover .toggle-lists-icon svg {
 				opacity: 1;
 			}
-		}
-	}
-}
 
-.top-menu {
-	margin-top: math.div($navbar-padding, 2);
- 
-	.menu-list {
-		li {
-			font-weight: 500;
-			font-family: $vikunja-font;
-		}
-
-		.list-menu-link,
-		li > a {
-			padding-left: 2rem;
-			display: inline-block;
-
-			.icon {
-				padding-bottom: .25rem;
+			&:not(.has-menu) .toggle-lists-icon {
+				padding-right: 1rem;
 			}
 		}
-	}
-}
 
-.namespaces-lists {
-	padding-top: math.div($navbar-padding, 2);
-
-	.menu-label {
-		font-size: 1rem;
-		font-weight: 700;
-		font-weight: bold;
-		font-family: $vikunja-font;
-		color: $vikunja-nav-color;
-		font-weight: 500;
-		min-height: 2.5rem;
-		padding-top: 0;
-		padding-left: $navbar-padding;
-
-		overflow: hidden;
-		margin-bottom: 0;
-		flex: 1 1 auto;
-
-		.name {
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			margin-right: auto;
+		.menu-label,
+		.nsettings,
+		.menu-list span.list-menu-link,
+		.menu-list a {
+			color: $vikunja-nav-color;
 		}
 
-		.count {
-			color: var(--grey-500);
-			margin-right: .5rem;
+		.menu-list {
+			li {
+				height: 44px;
+				display: flex;
+				align-items: center;
+
+				&:hover {
+					background: var(--white);
+				}
+
+				:deep(.dropdown-trigger) {
+					opacity: 0;
+					padding: .5rem;
+					cursor: pointer;
+					transition: $transition;
+				}
+
+				&:hover :deep(.dropdown-trigger) {
+					opacity: 1;
+				}
+			}
+
+			.flip-list-move {
+				transition: transform $transition-duration;
+			}
+
+			.ghost {
+				background: var(--grey-200);
+
+				* {
+					opacity: 0;
+				}
+			}
+
+			span.list-menu-link, li > a {
+				padding: 0.75rem .5rem 0.75rem ($navbar-padding * 1.5 - 1.75rem);
+				transition: all 0.2s ease;
+
+				border-radius: 0;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				width: 100%;
+				border-left: $vikunja-nav-selected-width solid transparent;
+
+				.icon {
+					height: 1rem;
+					vertical-align: middle;
+					padding-right: 0.5rem;
+
+					&.handle {
+						opacity: 0;
+						transition: opacity $transition;
+						margin-right: .25rem;
+						cursor: grab;
+					}
+				}
+
+				&:hover .icon.handle {
+					opacity: 1;
+				}
+
+				&.router-link-exact-active {
+					color: var(--primary);
+					border-left: $vikunja-nav-selected-width solid var(--primary);
+
+					.icon {
+						color: var(--primary);
+					}
+				}
+
+				&:hover {
+					border-left: $vikunja-nav-selected-width solid var(--primary);
+				}
+			}
+		}
+
+		.logo {
+			display: block;
+
+			padding-left: 1rem;
+			margin-right: 1rem;
+			margin-bottom: 1rem;
+
+			@media screen and (min-width: $tablet) {
+				display: none;
+			}
+		}
+
+		&.namespaces-lists {
+			padding-top: math.div($navbar-padding, 2);
+		}
+
+		.icon {
+			color: var(--grey-400) !important;
 		}
 	}
 
-	.favorite {
-		margin-left: .25rem;
-		transition: opacity $transition, color $transition;
-		opacity: 0;
+	.top-menu {
+		margin-top: math.div($navbar-padding, 2);
 
-		&:hover,
-		&.is-favorite {
-			color: var(--warning);
+		.menu-list {
+			li {
+				font-weight: 500;
+				font-family: $vikunja-font;
+			}
+
+			span.list-menu-link, li > a {
+				padding-left: 2rem;
+				display: inline-block;
+
+				.icon {
+					padding-bottom: .25rem;
+				}
+			}
 		}
 	}
-
-	.favorite.is-favorite,
-	.list-menu:hover .favorite {
-		opacity: 1;
-	}
-
-	.list-menu-title {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		width: 100%;
-	}
-
-	.color-bubble {
-		width: 14px;
-		height: 14px;
-		flex-basis: auto;
-	}
-
-	.is-archived {
-		min-width: 85px;
-	}
-}
-
-.namespace-title {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	color: $vikunja-nav-color;
-	padding: 0 .25rem;
-
-	.toggle-lists-icon {
-		svg {
-			transition: all $transition;
-			transform: rotate(90deg);
-			opacity: 1;
-		}
-
-		&.active svg {
-			transform: rotate(0deg);
-			opacity: 0;
-		}
-	}
-
-	&:hover .toggle-lists-icon svg {
-		opacity: 1;
-	}
-
-	&:not(.has-menu) .toggle-lists-icon {
-		padding-right: 1rem;
-	}
 }
 
 .list-setting-spacer {
@@ -552,4 +576,8 @@ $vikunja-nav-selected-width: 0.4rem;
 .namespaces-list.loader-container.is-loading {
 	min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem + 1.5rem});
 }
+
+a.dropdown-item:hover {
+	background: var(--dropdown-item-hover-background-color) !important;
+}
 </style>

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" class="has-no-text-wrap">
+		<x-button @click="refreshApp()" :shadow="false">
 			{{ $t('update.do') }}
 		</x-button>
 	</div>
@@ -26,7 +26,7 @@ if (navigator && navigator.serviceWorker) {
 	)
 }
 
-function showRefreshUI(e: Event) {
+function showRefreshUI(e) {
 	console.log('recieved refresh event', e)
 	registration.value = e.detail
 	updateAvailable.value = true
@@ -43,19 +43,24 @@ function refreshApp() {
 
 <style lang="scss" scoped>
 .update-notification {
+	margin: .5rem;
 	display: flex;
 	align-items: center;
 	background: $warning;
-	padding: .5rem;
+	padding: 0 .25rem;
 	border-radius: $radius;
 	font-size: .9rem;
 	color: var(--grey-900);
 	justify-content: space-between;
 
-	position: fixed;
-	bottom: 1rem;
-	width: 450px;
-	left: calc(50vw - 225px);
+	@media screen and (max-width: $desktop) {
+		position: fixed;
+		bottom: 1rem;
+		margin: 0;
+		width: 450px;
+		left: calc(50vw - 225px);
+		padding: .5rem;
+	}
 
 	@media screen and (max-width: $tablet) {
 		position: fixed;

src/components/input/AsyncEditor.ts

@@ -1,3 +1,12 @@
-import {createAsyncComponent} from '@/helpers/createAsyncComponent'
+import { defineAsyncComponent } from 'vue'
+import ErrorComponent from '@/components/misc/error.vue'
+import LoadingComponent from '@/components/misc/loading.vue'
 
-export default createAsyncComponent(() => import('@/components/input/editor.vue'))
+const Editor = () => import('@/components/input/editor.vue')
+
+export default defineAsyncComponent({
+	loader: Editor,
+	loadingComponent: LoadingComponent,
+	errorComponent: ErrorComponent,
+	timeout: 60000,
+})

src/components/input/SelectList.vue

@@ -1,63 +0,0 @@
-<template>
-	<multiselect
-		v-model="selectedLists"
-		:search-results="foundLists"
-		:loading="listService.loading"
-		:multiple="true"
-		:placeholder="$t('list.search')"
-		label="title"
-		@search="findLists"
-	/>
-</template>
-
-<script setup lang="ts">
-import {computed, ref, shallowReactive, watchEffect, type PropType} from 'vue'
-
-import Multiselect from '@/components/input/multiselect.vue'
-
-import type {IList} from '@/modelTypes/IList'
-
-import ListService from '@/services/list'
-import {includesById} from '@/helpers/utils'
-
-const props = defineProps({
-	modelValue: {
-		type: Array as PropType<IList[]>,
-		default: () => [],
-	},
-})
-const emit = defineEmits<{
-	(e: 'update:modelValue', value: IList[]): void
-}>()
-
-const lists = ref<IList[]>([])
-
-watchEffect(() => {
-	lists.value = props.modelValue
-})
-
-const selectedLists = computed({
-	get() {
-		return lists.value
-	},
-	set: (value) => {
-		lists.value = value
-		emit('update:modelValue', value)
-	},
-})
-
-const listService = shallowReactive(new ListService())
-const foundLists = ref<IList[]>([])
-
-async function findLists(query: string) {
-	if (query === '') {
-		foundLists.value = []
-		return
-	}
-
-	const response = await listService.getAll({}, {s: query}) as IList[]
-
-	// Filter selected items from the results
-	foundLists.value = response.filter(({id}) => !includesById(lists.value, id))
-}
-</script>

src/components/input/SelectNamespace.vue

@@ -1,63 +0,0 @@
-<template>
-	<multiselect
-		v-model="selectedNamespaces"
-		:search-results="foundNamespaces"
-		:loading="namespaceService.loading"
-		:multiple="true"
-		:placeholder="$t('namespace.search')"
-		label="namespace"
-		@search="findNamespaces"
-	/>
-</template>
-
-<script setup lang="ts">
-import {computed, ref, shallowReactive, watchEffect, type PropType} from 'vue'
-
-import Multiselect from '@/components/input/multiselect.vue'
-
-import type {INamespace} from '@/modelTypes/INamespace'
-
-import NamespaceService from '@/services/namespace'
-import {includesById} from '@/helpers/utils'
-
-const props = defineProps({
-	modelValue: {
-		type: Array as PropType<INamespace[]>,
-		default: () => [],
-	},
-})
-const emit = defineEmits<{
-	(e: 'update:modelValue', value: INamespace[]): void
-}>()
-
-const namespaces = ref<INamespace[]>([])
-
-watchEffect(() => {
-	namespaces.value = props.modelValue
-})
-
-const selectedNamespaces = computed({
-	get() {
-		return namespaces.value
-	},
-	set: (value) => {
-		namespaces.value = value
-		emit('update:modelValue', value)
-	},
-})
-
-const namespaceService = shallowReactive(new NamespaceService())
-const foundNamespaces = ref<INamespace[]>([])
-
-async function findNamespaces(query: string) {
-	if (query === '') {
-		foundNamespaces.value = []
-		return
-	}
-
-	const response = await namespaceService.getAll({}, {s: query}) as INamespace[]
-
-	// Filter selected items from the results
-	foundNamespaces.value = response.filter(({id}) => !includesById(namespaces.value, id))
-}
-</script>

src/components/input/SelectUser.vue

@@ -1,63 +0,0 @@
-<template>
-	<multiselect
-		v-model="selectedUsers"
-		:search-results="foundUsers"
-		:loading="userService.loading"
-		:multiple="true"
-		:placeholder="$t('team.edit.search')"
-		label="username"
-		@search="findUsers"
-	/>
-</template>
-
-<script setup lang="ts">
-import {computed, ref, shallowReactive, watchEffect, type PropType} from 'vue'
-
-import Multiselect from '@/components/input/multiselect.vue'
-
-import type {IUser} from '@/modelTypes/IUser'
-
-import UserService from '@/services/user'
-import {includesById} from '@/helpers/utils'
-
-const props = defineProps({
-	modelValue: {
-		type: Array as PropType<IUser[]>,
-		default: () => [],
-	},
-})
-const emit = defineEmits<{
-	(e: 'update:modelValue', value: IUser[]): void
-}>()
-
-const users = ref<IUser[]>([])
-
-watchEffect(() => {
-	users.value = props.modelValue
-})
-
-const selectedUsers = computed({
-	get() {
-		return users.value
-	},
-	set: (value) => {
-		users.value = value
-		emit('update:modelValue', value)
-	},
-})
-
-const userService = shallowReactive(new UserService())
-const foundUsers = ref<IUser[]>([])
-
-async function findUsers(query: string) {
-	if (query === '') {
-		foundUsers.value = []
-		return
-	}
-
-	const response = await userService.getAll({}, {s: query}) as IUser[]
-
-	// Filter selected items from the results
-	foundUsers.value = response.filter(({id}) => !includesById(users.value, id))
-}
-</script>

src/components/input/button.vue

@@ -9,61 +9,57 @@
 			}
 		]"
 	>
-		<template v-if="icon">
-			<icon 
-				v-if="showIconOnly"
-				:icon="icon"
-				:style="{'color': iconColor !== '' ? iconColor : false}"
-			/>
-			<span class="icon is-small" v-else>
-				<icon 
-					:icon="icon"
-					:style="{'color': iconColor !== '' ? iconColor : false}"
-				/>
-			</span>
-		</template>
+		<icon :icon="icon" v-if="showIconOnly"/>
+		<span class="icon is-small" v-else-if="icon !== ''">
+			<icon :icon="icon"/>
+		</span>
 		<slot />
 	</BaseButton>
 </template>
 
 <script lang="ts">
-const BUTTON_TYPES_MAP = {
-  primary: 'is-primary',
-  secondary: 'is-outlined',
-  tertiary: 'is-text is-inverted underline-none',
-} as const
+import {defineComponent} from 'vue'
 
-export type ButtonTypes = keyof typeof BUTTON_TYPES_MAP
-
-export default { name: 'x-button' }
+export default defineComponent({
+	name: 'x-button',
+})
 </script>
 
 <script setup lang="ts">
-import {computed, useSlots} from 'vue'
-import BaseButton, {type BaseButtonProps} from '@/components/base/BaseButton.vue'
-import type { IconProp } from '@fortawesome/fontawesome-svg-core'
+import {computed, useSlots, PropType} from 'vue'
+import BaseButton from '@/components/base/BaseButton.vue'
 
-// extending the props of the BaseButton
-export interface ButtonProps extends BaseButtonProps {
-	variant?: ButtonTypes
-	icon?: IconProp
-	iconColor?: string
-	loading?: boolean
-	shadow?: boolean
-}
+const BUTTON_TYPES_MAP =  Object.freeze({
+  primary: 'is-primary',
+  secondary: 'is-outlined',
+  tertiary: 'is-text is-inverted underline-none',
+})
 
-const {
-	variant = 'primary',
-	icon = '',
-	iconColor = '',
-	loading = false,
-	shadow = true,
-} = defineProps<ButtonProps>()
+type ButtonTypes = keyof typeof BUTTON_TYPES_MAP
 
-const variantClass = computed(() => BUTTON_TYPES_MAP[variant])
+const props = defineProps({
+	variant: {
+		type: String as PropType<ButtonTypes>,
+		default: 'primary',
+	},
+	icon: {
+		type: [String, Array],
+		default: '',
+	},
+	loading: {
+		type: Boolean,
+		default: false,
+	},
+	shadow: {
+		type: Boolean,
+		default: true,
+	},
+})
+
+const variantClass = computed(() => BUTTON_TYPES_MAP[props.variant])
 
 const slots = useSlots()
-const showIconOnly = computed(() => icon !== '' && typeof slots.default === 'undefined')
+const showIconOnly = computed(() => props.icon !== '' && typeof slots.default === 'undefined')
 </script>
 
 <style lang="scss" scoped>
@@ -73,11 +69,9 @@ const showIconOnly = computed(() => icon !== '' && typeof slots.default === 'und
   text-transform: uppercase;
   font-size: 0.85rem;
   font-weight: bold;
-  height: auto;
   min-height: $button-height;
   box-shadow: var(--shadow-sm);
   display: inline-flex;
-  white-space: break-spaces;
 
   &:hover {
     box-shadow: var(--shadow-md);

src/components/input/colorPicker.vue

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

src/components/input/datepicker.vue

@@ -1,73 +1,95 @@
 <template>
-	<div class="datepicker">
-		<BaseButton @click.stop="toggleDatePopup" class="show" :disabled="disabled || undefined">
-			{{ date === null ? chooseDateLabel : formatDateShort(date) }}
-		</BaseButton>
+	<div class="datepicker" :class="{'disabled': disabled}">
+		<a @click.stop="toggleDatePopup" class="show">
+			<template v-if="date === null">
+				{{ chooseDateLabel }}
+			</template>
+			<template v-else>
+				{{ formatDateShort(date) }}
+			</template>
+		</a>
 
-		<CustomTransition name="fade">
+		<transition name="fade">
 			<div v-if="show" class="datepicker-popup" ref="datepickerPopup">
 
-				<BaseButton
-					v-if="(new Date()).getHours() < 21"
-					class="datepicker__quick-select-date"
-					@click.stop="setDate('today')"
-				>
-					<span class="icon"><icon :icon="['far', 'calendar-alt']"/></span>
-					<span class="text">
-						<span>{{ $t('input.datepicker.today') }}</span>
-						<span class="weekday">{{ getWeekdayFromStringInterval('today') }}</span>
+				<a @click.stop="() => setDate('today')" v-if="(new Date()).getHours() < 21">
+					<span class="icon">
+						<icon :icon="['far', 'calendar-alt']"/>
 					</span>
-				</BaseButton>
-				<BaseButton
-					class="datepicker__quick-select-date"
-					@click.stop="setDate('tomorrow')"
-				>
-					<span class="icon"><icon :icon="['far', 'sun']"/></span>
 					<span class="text">
-						<span>{{ $t('input.datepicker.tomorrow') }}</span>
-						<span class="weekday">{{ getWeekdayFromStringInterval('tomorrow') }}</span>
+						<span>
+							{{ $t('input.datepicker.today') }}
+						</span>
+						<span class="weekday">
+							{{ getWeekdayFromStringInterval('today') }}
+						</span>
+					</span>
+				</a>
+				<a @click.stop="() => setDate('tomorrow')">
+					<span class="icon">
+						<icon :icon="['far', 'sun']"/>
 					</span>
-				</BaseButton>
-				<BaseButton
-					class="datepicker__quick-select-date"
-					@click.stop="setDate('nextMonday')"
-				>
-					<span class="icon"><icon icon="coffee"/></span>
 					<span class="text">
-						<span>{{ $t('input.datepicker.nextMonday') }}</span>
-						<span class="weekday">{{ getWeekdayFromStringInterval('nextMonday') }}</span>
+						<span>
+							{{ $t('input.datepicker.tomorrow') }}
+						</span>
+						<span class="weekday">
+							{{ getWeekdayFromStringInterval('tomorrow') }}
+						</span>
+					</span>
+				</a>
+				<a @click.stop="() => setDate('nextMonday')">
+					<span class="icon">
+						<icon icon="coffee"/>
 					</span>
-				</BaseButton>
-				<BaseButton
-					class="datepicker__quick-select-date"
-					@click.stop="setDate('thisWeekend')"
-				>
-					<span class="icon"><icon icon="cocktail"/></span>
 					<span class="text">
-						<span>{{ $t('input.datepicker.thisWeekend') }}</span>
-						<span class="weekday">{{ getWeekdayFromStringInterval('thisWeekend') }}</span>
+						<span>
+							{{ $t('input.datepicker.nextMonday') }}
+						</span>
+						<span class="weekday">
+							{{ getWeekdayFromStringInterval('nextMonday') }}
+						</span>
+					</span>
+				</a>
+				<a @click.stop="() => setDate('thisWeekend')">
+					<span class="icon">
+						<icon icon="cocktail"/>
 					</span>
-				</BaseButton>
-				<BaseButton
-					class="datepicker__quick-select-date"
-					@click.stop="setDate('laterThisWeek')"
-				>
-					<span class="icon"><icon icon="chess-knight"/></span>
 					<span class="text">
-						<span>{{ $t('input.datepicker.laterThisWeek') }}</span>
-						<span class="weekday">{{ getWeekdayFromStringInterval('laterThisWeek') }}</span>
+						<span>
+							{{ $t('input.datepicker.thisWeekend') }}
+						</span>
+						<span class="weekday">
+							{{ getWeekdayFromStringInterval('thisWeekend') }}
+						</span>
+					</span>
+				</a>
+				<a @click.stop="() => setDate('laterThisWeek')">
+					<span class="icon">
+						<icon icon="chess-knight"/>
 					</span>
-				</BaseButton>
-				<BaseButton
-					class="datepicker__quick-select-date"
-					@click.stop="setDate('nextWeek')"
-				>
-					<span class="icon"><icon icon="forward"/></span>
 					<span class="text">
-						<span>{{ $t('input.datepicker.nextWeek') }}</span>
-						<span class="weekday">{{ getWeekdayFromStringInterval('nextWeek') }}</span>
+						<span>
+							{{ $t('input.datepicker.laterThisWeek') }}
+						</span>
+						<span class="weekday">
+							{{ getWeekdayFromStringInterval('laterThisWeek') }}
+						</span>
 					</span>
-				</BaseButton>
+				</a>
+				<a @click.stop="() => setDate('nextWeek')">
+					<span class="icon">
+						<icon icon="forward"/>
+					</span>
+					<span class="text">
+						<span>
+							{{ $t('input.datepicker.nextWeek') }}
+						</span>
+						<span class="weekday">
+							{{ getWeekdayFromStringInterval('nextWeek') }}
+						</span>
+					</span>
+				</a>
 
 				<flat-pickr
 					:config="flatPickerConfig"
@@ -76,7 +98,7 @@
 				/>
 
 				<x-button
-					class="datepicker__close-button"
+					class="is-fullwidth"
 					:shadow="false"
 					@click="close"
 					v-cy="'closeDatepicker'"
@@ -84,157 +106,156 @@
 					{{ $t('misc.confirm') }}
 				</x-button>
 			</div>
-		</CustomTransition>
+		</transition>
 	</div>
 </template>
 
-<script setup lang="ts">
-import {ref, onMounted, onBeforeUnmount, toRef, watch, computed, type PropType} from 'vue'
+<script lang="ts">
+import {defineComponent} from 'vue'
+
 import flatPickr from 'vue-flatpickr-component'
 import 'flatpickr/dist/flatpickr.css'
+import {i18n} from '@/i18n'
 
-import BaseButton from '@/components/base/BaseButton.vue'
-import CustomTransition from '@/components/misc/CustomTransition.vue'
-
-import {formatDate, formatDateShort} from '@/helpers/time/formatDate'
+import {format} from 'date-fns'
 import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
 import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import {createDateFromString} from '@/helpers/time/createDateFromString'
-import {useAuthStore} from '@/stores/auth'
-import {useI18n} from 'vue-i18n'
 
-const props = defineProps({
-	modelValue: {
-		type: [Date, null, String] as PropType<Date | null | string>,
-		validator: prop => prop instanceof Date || prop === null || typeof prop === 'string',
-		default: null,
+export default defineComponent({
+	name: 'datepicker',
+	data() {
+		return {
+			date: null,
+			show: false,
+			changed: false,
+		}
 	},
-	chooseDateLabel: {
-		type: String,
-		default() {
-			const {t} = useI18n({useScope: 'global'})
-			return t('input.datepicker.chooseDate')
+	components: {
+		flatPickr,
+	},
+	props: {
+		modelValue: {
+			validator: prop => prop instanceof Date || prop === null || typeof prop === 'string',
+		},
+		chooseDateLabel: {
+			type: String,
+			default() {
+				return i18n.global.t('input.datepicker.chooseDate')
+			},
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
 		},
 	},
-	disabled: {
-		type: Boolean,
-		default: false,
+	emits: ['update:modelValue', 'change', 'close', 'close-on-change'],
+	mounted() {
+		document.addEventListener('click', this.hideDatePopup)
+	},
+	beforeUnmount() {
+		document.removeEventListener('click', this.hideDatePopup)
+	},
+	watch: {
+		modelValue: {
+			handler: 'setDateValue',
+			immediate: true,
+		},
+	},
+	computed: {
+		flatPickerConfig() {
+			return {
+				altFormat: this.$t('date.altFormatLong'),
+				altInput: true,
+				dateFormat: 'Y-m-d H:i',
+				enableTime: true,
+				time_24hr: true,
+				inline: true,
+				locale: {
+					firstDayOfWeek: this.$store.state.auth.settings.weekStart,
+				},
+			}
+		},
+		// Since flatpickr dates are strings, we need to convert them to native date objects.
+		// To make that work, we need a separate variable since flatpickr does not have a change event.
+		flatPickrDate: {
+			set(newValue) {
+				this.date = createDateFromString(newValue)
+				this.updateData()
+			},
+			get() {
+				if (!this.date) {
+					return ''
+				}
+
+				return format(this.date, 'yyy-LL-dd H:mm')
+			},
+		},
+	},
+	methods: {
+		setDateValue(newVal) {
+			if (newVal === null) {
+				this.date = null
+				return
+			}
+			this.date = createDateFromString(newVal)
+		},
+		updateData() {
+			this.changed = true
+			this.$emit('update:modelValue', this.date)
+			this.$emit('change', this.date)
+		},
+		toggleDatePopup() {
+			if (this.disabled) {
+				return
+			}
+
+			this.show = !this.show
+		},
+		hideDatePopup(e) {
+			if (this.show) {
+				closeWhenClickedOutside(e, this.$refs.datepickerPopup, this.close)
+			}
+		},
+		close() {
+			// Kind of dirty, but the timeout allows us to enter a time and click on "confirm" without
+			// having to click on another input field before it is actually used.
+			setTimeout(() => {
+				this.show = false
+				this.$emit('close', this.changed)
+				if (this.changed) {
+					this.changed = false
+					this.$emit('close-on-change', this.changed)
+				}
+			}, 200)
+		},
+		setDate(date) {
+			if (this.date === null) {
+				this.date = new Date()
+			}
+
+			const interval = calculateDayInterval(date)
+			const newDate = new Date()
+			newDate.setDate(newDate.getDate() + interval)
+			newDate.setHours(calculateNearestHours(newDate))
+			newDate.setMinutes(0)
+			newDate.setSeconds(0)
+			this.date = newDate
+			this.flatPickrDate = newDate
+			this.updateData()
+		},
+		getDayIntervalFromString(date) {
+			return calculateDayInterval(date)
+		},
+		getWeekdayFromStringInterval(date) {
+			const interval = calculateDayInterval(date)
+			const newDate = new Date()
+			newDate.setDate(newDate.getDate() + interval)
+			return format(newDate, 'E')
+		},
 	},
 })
-
-const emit = defineEmits(['update:modelValue', 'close', 'close-on-change'])
-
-const {t} = useI18n({useScope: 'global'})
-
-const date = ref<Date | null>()
-const show = ref(false)
-const changed = ref(false)
-
-onMounted(() => document.addEventListener('click', hideDatePopup))
-onBeforeUnmount(() =>document.removeEventListener('click', hideDatePopup))
-
-const modelValue = toRef(props, 'modelValue')
-watch(
-	modelValue,
-	setDateValue,
-	{immediate: true},
-)
-
-const authStore = useAuthStore()
-const weekStart = computed(() => authStore.settings.weekStart)
-const flatPickerConfig = computed(() => ({
-	altFormat: t('date.altFormatLong'),
-	altInput: true,
-	dateFormat: 'Y-m-d H:i',
-	enableTime: true,
-	time_24hr: true,
-	inline: true,
-	locale: {
-		firstDayOfWeek: weekStart.value,
-	},
-}))
-
-// Since flatpickr dates are strings, we need to convert them to native date objects.
-// To make that work, we need a separate variable since flatpickr does not have a change event.
-const flatPickrDate = computed({
-	set(newValue: string | Date) {
-		date.value = createDateFromString(newValue)
-		updateData()
-	},
-	get() {
-		if (!date.value) {
-			return ''
-		}
-
-		return formatDate(date.value, 'yyy-LL-dd H:mm')
-	},
-})
-
-
-function setDateValue(dateString: string | Date | null) {
-	if (dateString === null) {
-		date.value = null
-		return
-	}
-	date.value = createDateFromString(dateString)
-}
-
-function updateData() {
-	changed.value = true
-	emit('update:modelValue', date.value)
-}
-
-function toggleDatePopup() {
-	if (props.disabled) {
-		return
-	}
-
-	show.value = !show.value
-}
-
-const datepickerPopup = ref<HTMLElement | null>(null)
-function hideDatePopup(e: MouseEvent) {
-	if (show.value) {
-		closeWhenClickedOutside(e, datepickerPopup.value, close)
-	}
-}
-
-function close() {
-	// Kind of dirty, but the timeout allows us to enter a time and click on "confirm" without
-	// having to click on another input field before it is actually used.
-	setTimeout(() => {
-		show.value = false
-		emit('close', changed.value)
-		if (changed.value) {
-			changed.value = false
-			emit('close-on-change', changed.value)
-		}
-	}, 200)
-}
-
-function setDate(dateString: string) {
-	if (date.value === null) {
-		date.value = new Date()
-	}
-
-	const interval = calculateDayInterval(dateString)
-	const newDate = new Date()
-	newDate.setDate(newDate.getDate() + interval)
-	newDate.setHours(calculateNearestHours(newDate))
-	newDate.setMinutes(0)
-	newDate.setSeconds(0)
-	date.value = newDate
-	flatPickrDate.value = newDate
-	updateData()
-}
-
-function getWeekdayFromStringInterval(dateString: string) {
-	const interval = calculateDayInterval(dateString)
-	const newDate = new Date()
-	newDate.setDate(newDate.getDate() + interval)
-	return formatDate(newDate, 'E')
-}
 </script>
 
 <style lang="scss" scoped>
@@ -242,64 +263,68 @@ function getWeekdayFromStringInterval(dateString: string) {
 	input.input {
 		display: none;
 	}
-}
 
-.datepicker-popup {
-	position: absolute;
-	z-index: 99;
-	width: 320px;
-	background: var(--white);
-	border-radius: $radius;
-	box-shadow: $shadow;
-
-	@media screen and (max-width: ($tablet)) {
-		width: calc(100vw - 5rem);
-	}
-}
-
-.datepicker__quick-select-date {
-	display: flex;
-	align-items: center;
-	padding: 0 .5rem;
-	width: 100%;
-	height: 2.25rem;
-	color: var(--text);
-	transition: all $transition;
-
-	&:first-child {
-		border-radius: $radius $radius 0 0;
+	&.disabled a {
+		cursor: default;
 	}
 
-	&:hover {
-		background: var(--grey-100);
-	}
+	.datepicker-popup {
+		position: absolute;
+		z-index: 99;
+		width: 320px;
+		background: var(--white);
+		border-radius: $radius;
+		box-shadow: $shadow;
 
-	.text {
-		width: 100%;
-		font-size: .85rem;
-		display: flex;
-		justify-content: space-between;
-		padding-right: .25rem;
+		@media screen and (max-width: ($tablet)) {
+			width: calc(100vw - 5rem);
+		}
 
-		.weekday {
-			color: var(--text-light);
-			text-transform: capitalize;
+		a:not(.button) {
+			display: flex;
+			align-items: center;
+			padding: 0 .5rem;
+			width: 100%;
+			height: 2.25rem;
+			color: var(--text);
+			transition: all $transition;
+
+			&:first-child {
+				border-radius: $radius $radius 0 0;
+			}
+
+			&:hover {
+				background: var(--grey-100);
+			}
+
+			.text {
+				width: 100%;
+				font-size: .85rem;
+				display: flex;
+				justify-content: space-between;
+				padding-right: .25rem;
+
+				.weekday {
+					color: var(--text-light);
+					text-transform: capitalize;
+				}
+			}
+
+			.icon {
+				width: 2rem;
+				text-align: center;
+			}
+		}
+
+		a.button {
+			margin: 1rem;
+			width: calc(100% - 2rem);
+		}
+
+		:deep(.flatpickr-calendar) {
+			margin: 0 auto 8px;
+			box-shadow: none;
 		}
 	}
-
-	.icon {
-		width: 2rem;
-		text-align: center;
-	}
-}
-	
-.datepicker__close-button {
-	margin: 1rem;
-	width: calc(100% - 2rem);
-}
-
-:deep(.flatpickr-calendar) {
-	margin: 0 auto 8px;
-	box-shadow: none;
 }
 </style>

src/components/input/editor.vue

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

src/components/input/editorConfig.ts

@@ -9,7 +9,6 @@ export function createEasyMDEConfig({ placeholder, uploadImage, imageUploadFunct
         uploadImage,
         imageUploadFunction,
         minHeight: '150px',
-        sideBySideFullscreen: false,
         toolbar: [
             {
                 name: 'heading-1',

src/components/input/fancycheckbox.vue

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

src/components/input/multiselect.vue

@@ -9,14 +9,13 @@
 		<div class="control" :class="{'is-loading': loading || localLoading}">
 			<div
 				class="input-wrapper input"
-				:class="{'has-multiple': hasMultiple}"
-			>
+				:class="{'has-multiple': hasMultiple}">
 				<template v-if="Array.isArray(internalValue)">
 					<template v-for="(item, key) in internalValue">
 						<slot name="tag" :item="item">
 						<span :key="`item${key}`" class="tag ml-2 mt-2">
 							{{ label !== '' ? item[label] : item }}
-							<BaseButton @click="() => remove(item)" class="delete is-small"></BaseButton>
+							<a @click="() => remove(item)" class="delete is-small"></a>
 						</span>
 						</slot>
 					</template>
@@ -36,15 +35,15 @@
 			</div>
 		</div>
 
-		<CustomTransition name="fade">
+		<transition name="fade">
 			<div class="search-results" :class="{'search-results-inline': inline}" v-if="searchResultsVisible">
-				<BaseButton
-					class="search-result-button is-fullwidth"
-					v-for="(data, index) in filteredSearchResults"
-					:key="index"
-					:ref="(el) => setResult(el, index)"
-					@keydown.up.prevent="() => preSelect(index - 1)"
-					@keydown.down.prevent="() => preSelect(index + 1)"
+				<button
+					class="is-fullwidth"
+					v-for="(data, key) in filteredSearchResults"
+					:key="key"
+					:ref="`result-${key}`"
+					@keydown.up.prevent="() => preSelect(key - 1)"
+					@keydown.down.prevent="() => preSelect(key + 1)"
 					@click.prevent.stop="() => select(data)"
 				>
 					<span>
@@ -55,12 +54,12 @@
 					<span class="hint-text">
 						{{ selectPlaceholder }}
 					</span>
-				</BaseButton>
+				</button>
 
-				<BaseButton
+				<button
 					v-if="creatableAvailable"
-					class="search-result-button is-fullwidth"
-					:ref="(el) => setResult(el, filteredSearchResults.length)"
+					class="is-fullwidth"
+					:ref="`result-${filteredSearchResults.length}`"
 					@keydown.up.prevent="() => preSelect(filteredSearchResults.length - 1)"
 					@keydown.down.prevent="() => preSelect(filteredSearchResults.length + 1)"
 					@keyup.enter.prevent="create"
@@ -76,355 +75,299 @@
 					<span class="hint-text">
 						{{ createPlaceholder }}
 					</span>
-				</BaseButton>
+				</button>
 			</div>
-		</CustomTransition>
+		</transition>
+
 	</div>
 </template>
 
-<script setup lang="ts">
-import {computed, onBeforeUnmount, onMounted, ref, toRefs, watch, type ComponentPublicInstance, type PropType} from 'vue'
-import {useI18n} from 'vue-i18n'
-
+<script lang="ts">
+import {defineComponent} from 'vue'
+import {i18n} from '@/i18n'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 
-import BaseButton from '@/components/base/BaseButton.vue'
-import CustomTransition from '@/components/misc/CustomTransition.vue'
-
-function elementInResults(elem: string | any, label: string, query: string): boolean {
-	// Don't make create available if we have an exact match in our search results.
-	if (label !== '') {
-		return elem[label] === query
-	}
-
-	return elem === query
-}
-
-const props = defineProps({
-	/**
-	 * When true, shows a loading spinner
-	 */
-	loading: {
-		type: Boolean,
-		default: false,
+export default defineComponent({
+	name: 'multiselect',
+	data() {
+		return {
+			query: '',
+			searchTimeout: null,
+			localLoading: false,
+			showSearchResults: false,
+			internalValue: null,
+		}
 	},
-	/**
-	 * The placeholder of the search input
-	 */
-	placeholder: {
-		type: String,
-		default: '',
-	},
-	/**
-	 * The search results where the @search listener needs to put the results into
-	 */
-	searchResults: {
-		type: Array as PropType<{[id: string]: any}>,
-		default: () => [],
-	},
-	/**
-	 * The name of the property of the searched object to show the user.
-	 * If empty the component will show all raw data of an entry.
-	 */
-	label: {
-		type: String,
-		default: '',
-	},
-	/**
-	 * The object with the value, updated every time an entry is selected.
-	 */
-	modelValue: {
-		type: [Object] as PropType<{[key: string]: any}>,
-		default: null,
-	},
-	/**
-	 * If true, will provide an "add this as a new value" entry which fires an @create event when clicking on it.
-	 */
-	creatable: {
-		type: Boolean,
-		default: false,
-	},
-	/**
-	 * The text shown next to the new value option.
-	 */
-	createPlaceholder: {
-		type: String,
-		default() {
-			const {t} = useI18n({useScope: 'global'}) 
-			return t('input.multiselect.createPlaceholder')
+	props: {
+		// When true, shows a loading spinner
+		loading: {
+			type: Boolean,
+			default() {
+				return false
+			},
+		},
+		// The placeholder of the search input
+		placeholder: {
+			type: String,
+			default() {
+				return ''
+			},
+		},
+		// The search results where the @search listener needs to put the results into
+		searchResults: {
+			type: Array,
+			default() {
+				return []
+			},
+		},
+		// The name of the property of the searched object to show the user.
+		// If empty the component will show all raw data of an entry.
+		label: {
+			type: String,
+			default() {
+				return ''
+			},
+		},
+		// The object with the value, updated every time an entry is selected.
+		modelValue: {
+			default() {
+				return null
+			},
+		},
+		// If true, will provide an "add this as a new value" entry which fires an @create event when clicking on it.
+		creatable: {
+			type: Boolean,
+			default: false,
+		},
+		// The text shown next to the new value option.
+		createPlaceholder: {
+			type: String,
+			default() {
+				return i18n.global.t('input.multiselect.createPlaceholder')
+			},
+		},
+		// The text shown next to an option.
+		selectPlaceholder: {
+			type: String,
+			default() {
+				return i18n.global.t('input.multiselect.selectPlaceholder')
+			},
+		},
+		// If true, allows for selecting multiple items. v-model will be an array with all selected values in that case.
+		multiple: {
+			type: Boolean,
+			default: false,
+		},
+		// If true, displays the search results inline instead of using a dropdown.
+		inline: {
+			type: Boolean,
+			default: false,
+		},
+		// If true, shows search results when no query is specified.
+		showEmpty: {
+			type: Boolean,
+			default: true,
+		},
+		// The delay in ms after which the search event will be fired. Used to avoid hitting the network on every keystroke.
+		searchDelay: {
+			type: Number,
+			default() {
+				return 200
+			},
+		},
+		closeAfterSelect: {
+			type: Boolean,
+			default: true,
 		},
 	},
+
 	/**
-	 * The text shown next to an option.
+	 * Available events:
+	 *   @search: Triggered every time the search query input changes
+	 *   @select: Triggered every time an option from the search results is selected. Also triggers a change in v-model.
+	 *   @create: If nothing or no exact match was found and `creatable` is true, this event is triggered with the current value of the search query.
+	 *   @remove: If `multiple` is enabled, this will be fired every time an item is removed from the array of selected items.
 	 */
-	selectPlaceholder: {
-		type: String,
-		default() {
-			const {t} = useI18n({useScope: 'global'}) 
-			return t('input.multiselect.selectPlaceholder')
+	emits: ['update:modelValue', 'search', 'select', 'create', 'remove'],
+
+	mounted() {
+		document.addEventListener('click', this.hideSearchResultsHandler)
+	},
+	beforeUnmount() {
+		document.removeEventListener('click', this.hideSearchResultsHandler)
+	},
+	watch: {
+		modelValue: {
+			handler(value) {
+				this.setSelectedObject(value)
+			},
+			immediate: true,
+			deep: true,
 		},
 	},
-	/**
-	 * If true, allows for selecting multiple items. v-model will be an array with all selected values in that case.
-	 */
-	multiple: {
-		type: Boolean,
-		default: false,
+	computed: {
+		searchResultsVisible() {
+			if (this.query === '' && !this.showEmpty) {
+				return false
+			}
+
+			return this.showSearchResults && (
+				(this.filteredSearchResults.length > 0) ||
+				(this.creatable && this.query !== '')
+			)
+		},
+		creatableAvailable() {
+			return this.creatable && this.query !== '' && !this.filteredSearchResults.some(elem => {
+				// Don't make create available if we have an exact match in our search results.
+				if (this.label !== '') {
+					return elem[this.label] === this.query
+				}
+
+				return elem === this.query
+			})
+		},
+		filteredSearchResults() {
+			if (this.multiple && this.internalValue !== null && Array.isArray(this.internalValue)) {
+				return this.searchResults.filter(item => !this.internalValue.some(e => e === item))
+			}
+
+			return this.searchResults
+		},
+		hasMultiple() {
+			return this.multiple && Array.isArray(this.internalValue) && this.internalValue.length > 0
+		},
 	},
-	/**
-	 * If true, displays the search results inline instead of using a dropdown.
-	 */
-	inline: {
-		type: Boolean,
-		default: false,
-	},
-	/**
-	 * If true, shows search results when no query is specified.
-	 */
-	showEmpty: {
-		type: Boolean,
-		default: true,
-	},
-	/**
-	 * The delay in ms after which the search event will be fired. Used to avoid hitting the network on every keystroke.
-	 */
-	searchDelay: {
-		type: Number,
-		default: 200,
-	},
-	closeAfterSelect: {
-		type: Boolean,
-		default: true,
+	methods: {
+		// Searching will be triggered with a 200ms delay to avoid searching on every keyup event.
+		search() {
+
+			// Updating the query with a binding does not work on mobile for some reason,
+			// getting the value manual does.
+			this.query = this.$refs.searchInput.value
+
+			if (this.searchTimeout !== null) {
+				clearTimeout(this.searchTimeout)
+				this.searchTimeout = null
+			}
+
+			this.localLoading = true
+
+			this.searchTimeout = setTimeout(() => {
+				this.$emit('search', this.query)
+				setTimeout(() => {
+					this.localLoading = false
+				}, 100) // The duration of the loading timeout of the services
+				this.showSearchResults = true
+			}, this.searchDelay)
+		},
+		hideSearchResultsHandler(e) {
+			closeWhenClickedOutside(e, this.$refs.multiselectRoot, this.closeSearchResults)
+		},
+		closeSearchResults() {
+			this.showSearchResults = false
+		},
+		handleFocus() {
+			// We need the timeout to avoid the hideSearchResultsHandler hiding the search results right after the input
+			// is focused. That would lead to flickering pre-loaded search results and hiding them right after showing.
+			setTimeout(() => {
+				this.showSearchResults = true
+			}, 10)
+		},
+		select(object) {
+			if (this.multiple) {
+				if (this.internalValue === null) {
+					this.internalValue = []
+				}
+
+				this.internalValue.push(object)
+			} else {
+				this.internalValue = object
+			}
+
+			this.$emit('update:modelValue', this.internalValue)
+			this.$emit('select', object)
+			this.setSelectedObject(object)
+			if (this.closeAfterSelect && this.filteredSearchResults.length > 0 && !this.creatableAvailable) {
+				this.closeSearchResults()
+			}
+		},
+		setSelectedObject(object, resetOnly = false) {
+			this.internalValue = object
+
+			// We assume we're getting an array when multiple is enabled and can therefore leave the query
+			// value etc as it is
+			if (this.multiple) {
+				this.query = ''
+				return
+			}
+
+			if (object === null) {
+				this.query = ''
+				return
+			}
+
+			if (resetOnly) {
+				return
+			}
+
+			this.query = this.label !== '' ? object[this.label] : object
+		},
+		preSelect(index) {
+			if (index < 0) {
+				this.$refs.searchInput.focus()
+				return
+			}
+
+			const elems = this.$refs[`result-${index}`]
+			if (typeof elems === 'undefined' || elems.length === 0) {
+				return
+			}
+
+			if (Array.isArray(elems)) {
+				elems[0].focus()
+				return
+			}
+
+			elems.focus()
+		},
+		create() {
+			if (this.query === '') {
+				return
+			}
+
+			this.$emit('create', this.query)
+			this.setSelectedObject(this.query, true)
+			this.closeSearchResults()
+		},
+		createOrSelectOnEnter() {
+
+			if (!this.creatableAvailable && this.searchResults.length === 1) {
+				this.select(this.searchResults[0])
+				return
+			}
+
+			if (!this.creatableAvailable) {
+				return
+			}
+
+			this.create()
+		},
+		remove(item) {
+			for (const ind in this.internalValue) {
+				if (this.internalValue[ind] === item) {
+					this.internalValue.splice(ind, 1)
+					break
+				}
+			}
+
+			this.$emit('update:modelValue', this.internalValue)
+			this.$emit('remove', item)
+		},
+		focus() {
+			this.$refs.searchInput.focus()
+		},
 	},
 })
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: null): void
-	/**
-	 * Triggered every time the search query input changes
-	 */
-  (e: 'search', query: string): void
-	/**
-	 * Triggered every time an option from the search results is selected. Also triggers a change in v-model.
-	 */
-  (e: 'select', value: {[key: string]: any}): void
-	/**
-	 * If nothing or no exact match was found and `creatable` is true, this event is triggered with the current value of the search query.
-	 */
-  (e: 'create', query: string): void
-	/**
-	 * If `multiple` is enabled, this will be fired every time an item is removed from the array of selected items.
-	 */
-  (e: 'remove', value: null): void
-}>()
-
-const query = ref<string | {[key: string]: any}>('')
-const searchTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
-const localLoading = ref(false)
-const showSearchResults = ref(false)
-const internalValue = ref<string | {[key: string]: any} | any[] | null>(null)
-
-onMounted(() => document.addEventListener('click', hideSearchResultsHandler))
-onBeforeUnmount(() => document.removeEventListener('click', hideSearchResultsHandler))
-
-const {modelValue, searchResults} = toRefs(props)
-
-watch(
-	modelValue,
-	(value) => setSelectedObject(value),
-	{
-		immediate: true,
-		deep: true,
-	},
-)
-
-const searchResultsVisible = computed(() => {
-	if (query.value === '' && !props.showEmpty) {
-		return false
-	}
-
-	return showSearchResults.value && (
-		(filteredSearchResults.value.length > 0) ||
-		(props.creatable && query.value !== '')
-	)
-})
-
-const creatableAvailable = computed(() => {
-	const hasResult = filteredSearchResults.value.some((elem: any) => elementInResults(elem, props.label, query.value))
-	const hasQueryAlreadyAdded = Array.isArray(internalValue.value) && internalValue.value.some(elem => elementInResults(elem, props.label, query.value))
-
-	return props.creatable 
-		&& query.value !== '' 
-		&& !(hasResult || hasQueryAlreadyAdded)
-})
-
-const filteredSearchResults = computed(() => {
-	const currentInternal = internalValue.value
-	if (props.multiple && currentInternal !== null && Array.isArray(currentInternal)) {
-		return searchResults.value.filter((item: any) => !currentInternal.some(e => e === item))
-	}
-
-	return searchResults.value
-})
-
-const hasMultiple = computed(() => {
-	return props.multiple && Array.isArray(internalValue.value) && internalValue.value.length > 0
-})
-
-const searchInput = ref<HTMLInputElement | null>(null)
-// Searching will be triggered with a 200ms delay to avoid searching on every keyup event.
-function search() {
-
-	// Updating the query with a binding does not work on mobile for some reason,
-	// getting the value manual does.
-	query.value = searchInput.value?.value || ''
-
-	if (searchTimeout.value !== null) {
-		clearTimeout(searchTimeout.value)
-		searchTimeout.value = null
-	}
-
-	localLoading.value = true
-
-	searchTimeout.value = setTimeout(() => {
-		emit('search', query.value)
-		setTimeout(() => {
-			localLoading.value = false
-		}, 100) // The duration of the loading timeout of the services
-		showSearchResults.value = true
-	}, props.searchDelay)
-}
-
-const multiselectRoot = ref<HTMLElement | null>(null)
-function hideSearchResultsHandler(e: MouseEvent) {
-	closeWhenClickedOutside(e, multiselectRoot.value, closeSearchResults)
-}
-
-function closeSearchResults() {
-	showSearchResults.value = false
-}
-
-function handleFocus() {
-	// We need the timeout to avoid the hideSearchResultsHandler hiding the search results right after the input
-	// is focused. That would lead to flickering pre-loaded search results and hiding them right after showing.
-	setTimeout(() => {
-		showSearchResults.value = true
-	}, 10)
-}
-
-function select(object: {[key: string]: any}) {
-	if (props.multiple) {
-		if (internalValue.value === null) {
-			internalValue.value = []
-		}
-
-		(internalValue.value as any[]).push(object)
-	} else {
-		internalValue.value = object
-	}
-
-	emit('update:modelValue', internalValue.value)
-	emit('select', object)
-	setSelectedObject(object)
-	if (props.closeAfterSelect && filteredSearchResults.value.length > 0 && !creatableAvailable.value) {
-		closeSearchResults()
-	}
-}
-
-function setSelectedObject(object: string | {[id: string]: any} | null, resetOnly = false) {
-	internalValue.value = object
-
-	// We assume we're getting an array when multiple is enabled and can therefore leave the query
-	// value etc as it is
-	if (props.multiple) {
-		query.value = ''
-		return
-	}
-
-	if (object === null) {
-		query.value = ''
-		return
-	}
-
-	if (resetOnly) {
-		return
-	}
-
-	query.value = props.label !== '' ? object[props.label] : object
-}
-
-const results = ref<(Element | ComponentPublicInstance)[]>([])
-function setResult(el: Element | ComponentPublicInstance | null, index: number) {
-	if (el === null) {
-		delete results.value[index]
-	} else {
-		results.value[index] = el
-	}
-}
-
-function preSelect(index: number) {
-	if (index < 0) {
-		searchInput.value?.focus()
-		return
-	}
-
-	const elems = results.value[index]
-	if (typeof elems === 'undefined' || elems.length === 0) {
-		return
-	}
-
-	if (Array.isArray(elems)) {
-		elems[0].focus()
-		return
-	}
-
-	elems.focus()
-}
-
-function create() {
-	if (query.value === '') {
-		return
-	}
-
-	emit('create', query.value)
-	setSelectedObject(query.value, true)
-	closeSearchResults()
-}
-
-function createOrSelectOnEnter() {
-	if (!creatableAvailable.value && searchResults.value.length === 1) {
-		select(searchResults.value[0])
-		return
-	}
-
-	if (!creatableAvailable.value) {
-		// Check if there's an exact match for our search term
-		const exactMatch = filteredSearchResults.value.find((elem: any) => elementInResults(elem, props.label, query.value))
-		if(exactMatch) {
-			select(exactMatch)
-		}
-
-		return
-	}
-
-	create()
-}
-
-function remove(item: any) {
-	for (const ind in internalValue.value) {
-		if (internalValue.value[ind] === item) {
-			internalValue.value.splice(ind, 1)
-			break
-		}
-	}
-
-	emit('update:modelValue', internalValue.value)
-	emit('remove', item)
-}
-
-function focus() {
-	searchInput.value?.focus()
-}
 </script>
 
 <style lang="scss" scoped>
@@ -435,125 +378,122 @@ function focus() {
 	.control.is-loading::after {
 		top: .75rem;
 	}
-}
 
-.input-wrapper {
-	padding: 0;
-	background: var(--white);
-	border-color: var(--grey-200);
-	flex-wrap: wrap;
-	height: auto;
-
-	&:hover {
-		border-color: var(--grey-300) !important;
-	}
-
-	.input {
-		display: flex;
-		max-width: 100%;
-		width: 100%;
-		align-items: center;
-		border: none !important;
-		background: transparent;
-		height: auto;
-
-		&::placeholder {
-			font-style: normal !important;
-		}
-	}
-
-	&.has-multiple .input {
-		max-width: 250px;
-
-		input {
-			padding-left: 0;
-		}
-	}
-
-	&:focus-within {
+	&.has-search-results .input-wrapper {
+		border-radius: $radius $radius 0 0;
 		border-color: var(--primary) !important;
 		background: var(--white) !important;
-	}
 
-	// doesn't seem to be used. maybe inside the slot?
-	.loader {
-		margin: 0 .5rem;
-	}
-}
-
-.has-search-results .input-wrapper {
-	border-radius: $radius $radius 0 0;
-	border-color: var(--primary) !important;
-	background: var(--white) !important;
-
-	&, &:focus-within {
-		border-bottom-color: var(--grey-200) !important;
-	}
-}
-
-.search-results {
-	background: var(--white);
-	border-radius: 0 0 $radius $radius;
-	border: 1px solid var(--primary);
-	border-top: none;
-
-	max-height: 50vh;
-	overflow-x: auto;
-	position: absolute;
-	z-index: 100;
-	max-width: 100%;
-	min-width: 100%;
-}
-
-.search-results-inline {
-	position: static;
-}
-
-.search-result-button {
-	background: transparent;
-	text-align: left;
-	box-shadow: none;
-	border-radius: 0;
-	text-transform: none;
-	font-family: $family-sans-serif;
-	font-weight: normal;
-	padding: .5rem;
-	border: none;
-	cursor: pointer;
-	color: var(--grey-800);
-
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	overflow: hidden;
-
-	&:focus,
-	&:hover {
-		background: var(--grey-100);
-		box-shadow: none !important;
-
-		.hint-text {
-			color: var(--text);
+		&, &:focus-within {
+			border-bottom-color: var(--grey-200) !important;
 		}
 	}
 
-	&:active {
-		background: var(--grey-200);
+	.input-wrapper {
+		padding: 0;
+		background: var(--white) !important;
+		border-color: var(--grey-200) !important;
+		flex-wrap: wrap;
+		height: auto;
+
+		&:hover {
+			border-color: var(--grey-300) !important;
+		}
+
+		.input {
+			display: flex;
+			max-width: 100%;
+			width: 100%;
+			align-items: center;
+			border: none !important;
+			background: transparent;
+			height: auto;
+
+			&::placeholder {
+				font-style: normal !important;
+			}
+		}
+
+		&.has-multiple .input {
+			max-width: 250px;
+
+			input {
+				padding-left: 0;
+			}
+		}
+
+		&:focus-within {
+			border-color: var(--primary) !important;
+			background: var(--white) !important;
+		}
+
+		.loader {
+			margin: 0 .5rem;
+		}
+	}
+
+	.search-results {
+		background: var(--white);
+		border-radius: 0 0 $radius $radius;
+		border: 1px solid var(--primary);
+		border-top: none;
+
+		max-height: 50vh;
+		overflow-x: auto;
+		position: absolute;
+		z-index: 100;
+		max-width: 100%;
+		min-width: 100%;
+
+		&-inline {
+			position: static;
+		}
+
+		button {
+			background: transparent;
+			text-align: left;
+			box-shadow: none;
+			border-radius: 0;
+			text-transform: none;
+			font-family: $family-sans-serif;
+			font-weight: normal;
+			padding: .5rem;
+			border: none;
+			cursor: pointer;
+			color: var(--grey-800);
+
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			overflow: hidden;
+
+			.search-result {
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				padding: .5rem .75rem;
+			}
+
+			.hint-text {
+				font-size: .75rem;
+				color: transparent;
+				transition: color $transition;
+				padding-left: .5rem;
+			}
+
+			&:focus, &:hover {
+				background: var(--grey-100);
+				box-shadow: none !important;
+
+				.hint-text {
+					color: var(--text);
+				}
+			}
+
+			&:active {
+				background: var(--grey-200);
+			}
+		}
 	}
 }
-
-.search-result {
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	overflow: hidden;
-	padding: .5rem .75rem;
-}
-
-
-.hint-text {
-	font-size: .75rem;
-	color: transparent;
-	transition: color $transition;
-	padding-left: .5rem;
-}
 </style>

src/components/input/password.vue

@@ -45,7 +45,7 @@ const password = ref('')
 const isValid = ref(!props.validateInitially)
 
 watch(
-	() => props.validateInitially,
+	props.validateInitially,
 	() => props.validateInitially && validate(),
 	{immediate: true},
 )

src/components/input/vue-easymde.vue

@@ -4,28 +4,22 @@
       class="vue-simplemde-textarea"
       :name="name"
       :value="modelValue"
-      @input="handleInput(($event.target as HTMLTextAreaElement).value)"
+      @input="handleInput($event.target.value)"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import {ref, watch, onMounted, onDeactivated, onBeforeUnmount, nextTick, shallowReactive, type ShallowReactive, type PropType} from 'vue'
-import EasyMDE, {toggleFullScreen} from 'easymde'
+import {ref, watch, onMounted, onDeactivated, onBeforeUnmount, nextTick, shallowReactive} from 'vue'
+import type { ShallowReactive } from 'vue'
+
+import EasyMDE from 'easymde'
 import {marked} from 'marked'
-import type CodeMirror from 'codemirror'
 
 const props = defineProps({
-	modelValue: {
-		type: String,
-		default: '',
-	},
-	name: {
-		type: String,
-	},
-	previewClass: {
-		type: String,
-	},
+	modelValue: String,
+	name: String,
+	previewClass: String,
 	autoinit: {
 		type: Boolean,
 		default: true,
@@ -43,7 +37,7 @@ const props = defineProps({
 		default: () => ({}),
 	},
 	previewRender: {
-		type: Function as PropType<EasyMDE.Options['previewRender']>,
+		type: Function,
 	},
 })
 
@@ -57,9 +51,9 @@ onMounted(() => {
 })
 
 onDeactivated(() => {
-	if (easymde === undefined) return
-	if (easymde.isFullscreenActive()) toggleFullScreen(easymde)
-	easymde.toTextArea
+	if (!easymde) return
+	const isFullScreen = easymde.codemirror.getOption('fullScreen')
+	if (isFullScreen) easymde.toggleFullScreen()
 })
 
 onBeforeUnmount(() => {
@@ -73,8 +67,8 @@ onBeforeUnmount(() => {
 const easymdeRef = ref<HTMLElement | null>(null)
 
 function initialize() {
-	const configs: EasyMDE.Options = Object.assign({
-		element: easymdeRef.value?.firstElementChild as HTMLElement,
+	const configs = Object.assign({
+		element: easymdeRef.value?.firstElementChild,
 		initialValue: props.modelValue,
 		previewRender: props.previewRender,
 		renderingConfig: {},
@@ -87,7 +81,7 @@ function initialize() {
 
 	// Determine whether to enable code highlighting
 	if (props.highlight) {
-		configs.renderingConfig!.codeSyntaxHighlighting = true
+		configs.renderingConfig.codeSyntaxHighlighting = true
 	}
 
 	// Set whether to render the input html
@@ -98,16 +92,15 @@ function initialize() {
 
 	// Add a custom previewClass
 	const className = props.previewClass || ''
-	addPreviewClass(easymde, className)
+	addPreviewClass(className)
 
 	// Binding event
-	easymde.codemirror.on('change', handleCodemirrorInput)
-	easymde.codemirror.on('blur', handleCodemirrorBlur)
+	bindingEvents()
 
 	nextTick(() => emit('initialized', easymde))
 }
 
-function addPreviewClass(easymde: EasyMDE, className: string) {
+function addPreviewClass(className: string) {
 	const wrapper = easymde.codemirror.getWrapperElement()
 	const preview = document.createElement('div')
 	wrapper.nextSibling.className += ` ${className}`
@@ -115,24 +108,28 @@ function addPreviewClass(easymde: EasyMDE, className: string) {
 	wrapper.appendChild(preview)
 }
 
-function handleInput(val: string) {
-	isValueUpdateFromInner.value = true
-	emit('update:modelValue', val)
+function bindingEvents() {
+	easymde.codemirror.on('change', handleCodemirrorInput)
+	easymde.codemirror.on('blur', handleCodemirrorBlur)
 }
 
-function handleCodemirrorInput(instance: CodeMirror.Editor, changeObj: CodeMirror.EditorChange)  {
-	if (changeObj.origin === 'setValue' || easymde === undefined) {
+function handleCodemirrorInput(instance, changeObj)  {
+	if (changeObj.origin === 'setValue') {
 		return
 	}
-	handleInput(easymde.value())
+	const val = easymde.value()
+	handleInput(val)
 }
 
 function handleCodemirrorBlur() {
-	if (easymde === undefined) {
-		return
-	}
+	const val = easymde.value()
 	isValueUpdateFromInner.value = true
-	emit('blur', easymde.value())
+	emit('blur', val)
+}
+
+function handleInput(val) {
+	isValueUpdateFromInner.value = true
+	emit('update:modelValue', val)
 }
 
 watch(
@@ -141,7 +138,7 @@ watch(
 		if (isValueUpdateFromInner.value) {
 			isValueUpdateFromInner.value = false
 		} else {
-			easymde?.value(val)
+			easymde.value(val)
 		}
 	},
 )

src/components/list/ListWrapper.vue

@@ -1,200 +0,0 @@
-<template>
-	<div
-		:class="{ 'is-loading': listService.loading, 'is-archived': currentList.isArchived}"
-		class="loader-container"
-	>
-		<div class="switch-view-container">
-			<div class="switch-view">
-				<BaseButton
-					v-shortcut="'g l'"
-					:title="$t('keyboardShortcuts.list.switchToListView')"
-					class="switch-view-button"
-					:class="{'is-active': viewName === 'list'}"
-					:to="{ name: 'list.list',   params: { listId } }"
-				>
-					{{ $t('list.list.title') }}
-				</BaseButton>
-				<BaseButton
-					v-shortcut="'g g'"
-					:title="$t('keyboardShortcuts.list.switchToGanttView')"
-					class="switch-view-button"
-					:class="{'is-active': viewName === 'gantt'}"
-					:to="{ name: 'list.gantt',  params: { listId } }"
-				>
-					{{ $t('list.gantt.title') }}
-				</BaseButton>
-				<BaseButton
-					v-shortcut="'g t'"
-					:title="$t('keyboardShortcuts.list.switchToTableView')"
-					class="switch-view-button"
-					:class="{'is-active': viewName === 'table'}"
-					:to="{ name: 'list.table',  params: { listId } }"
-				>
-					{{ $t('list.table.title') }}
-				</BaseButton>
-				<BaseButton
-					v-shortcut="'g k'"
-					:title="$t('keyboardShortcuts.list.switchToKanbanView')"
-					class="switch-view-button"
-					:class="{'is-active': viewName === 'kanban'}"
-					:to="{ name: 'list.kanban', params: { listId } }"
-				>
-					{{ $t('list.kanban.title') }}
-				</BaseButton>
-			</div>
-			<slot name="header" />
-		</div>
-		<CustomTransition name="fade">
-			<Message variant="warning" v-if="currentList.isArchived" class="mb-4">
-				{{ $t('list.archived') }}
-			</Message>
-		</CustomTransition>
-
-		<slot v-if="loadedListId"/>
-	</div>
-</template>
-
-<script setup lang="ts">
-import {ref, computed, watch} from 'vue'
-import {useRoute} from 'vue-router'
-
-import BaseButton from '@/components/base/BaseButton.vue'
-import Message from '@/components/misc/message.vue'
-import CustomTransition from '@/components/misc/CustomTransition.vue'
-
-import ListModel from '@/models/list'
-import ListService from '@/services/list'
-
-import {getListTitle} from '@/helpers/getListTitle'
-import {saveListToHistory} from '@/modules/listHistory'
-import {useTitle} from '@/composables/useTitle'
-
-import {useBaseStore} from '@/stores/base'
-import {useListStore} from '@/stores/lists'
-
-const props = defineProps({
-	listId: {
-		type: Number,
-		required: true,
-	},
-	viewName: {
-		type: String,
-		required: true,
-	},
-})
-
-const route = useRoute()
-
-const baseStore = useBaseStore()
-const listStore = useListStore()
-const listService = ref(new ListService())
-const loadedListId = ref(0)
-
-const currentList = computed(() => {
-	return typeof baseStore.currentList === 'undefined' ? {
-		id: 0,
-		title: '',
-		isArchived: false,
-		maxRight: null,
-	} : baseStore.currentList
-})
-useTitle(() => currentList.value.id ? getListTitle(currentList.value) : '')
-
-// watchEffect would be called every time the prop would get a value assigned, even if that value was the same as before.
-// This resulted in loading and setting the list multiple times, even when navigating away from it.
-// This caused wired bugs where the list background would be set on the home page but only right after setting a new 
-// list background and then navigating to home. It also highlighted the list in the menu and didn't allow changing any
-// of it, most likely due to the rights not being properly populated.
-watch(
-	() => props.listId,
-	// loadList
-	async (listIdToLoad: number) => {
-		const listData = {id: listIdToLoad}
-		saveListToHistory(listData)
-
-		// Don't load the list if we either already loaded it or aren't dealing with a list at all currently and
-		// the currently loaded list has the right set.
-		if (
-			(
-				listIdToLoad === loadedListId.value ||
-				typeof listIdToLoad === 'undefined' ||
-				listIdToLoad === currentList.value.id
-			)
-			&& typeof currentList.value !== 'undefined' && currentList.value.maxRight !== null
-		) {
-			loadedListId.value = props.listId
-			return
-		}
-
-		console.debug(`Loading list, props.viewName = ${props.viewName}, $route.params =`, route.params, `, loadedListId = ${loadedListId.value}, currentList = `, currentList.value)
-
-		// Set the current list to the one we're about to load so that the title is already shown at the top
-		loadedListId.value = 0
-		const listFromStore = listStore.getListById(listData.id)
-		if (listFromStore !== null) {
-			baseStore.setBackground(null)
-			baseStore.setBlurHash(null)
-			baseStore.handleSetCurrentList({list: listFromStore})
-		}
-
-		// We create an extra list object instead of creating it in list.value because that would trigger a ui update which would result in bad ux.
-		const list = new ListModel(listData)
-		try {
-			const loadedList = await listService.value.get(list)
-			baseStore.handleSetCurrentList({list: loadedList})
-		} finally {
-			loadedListId.value = props.listId
-		}
-	},
-	{immediate: true},
-)
-</script>
-
-<style lang="scss" scoped>
-.switch-view-container {
-  @media screen and (max-width: $tablet) {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-  }
-}
-
-.switch-view {
-  background: var(--white);
-  display: inline-flex;
-  border-radius: $radius;
-  font-size: .75rem;
-  box-shadow: var(--shadow-sm);
-  height: $switch-view-height;
-  margin: 0 auto 1rem;
-  padding: .5rem;
-}
-
-.switch-view-button {
-	padding: .25rem .5rem;
-	display: block;
-	border-radius: $radius;
-	transition: all 100ms;
-
-	&:not(:last-child) {
-		margin-right: .5rem;
-	}
-
-	&:hover {
-		color: var(--switch-view-color);
-		background: var(--primary);
-	}
-
-	&.is-active {
-		color: var(--switch-view-color);
-		background: var(--primary);
-		font-weight: bold;
-		box-shadow: var(--shadow-xs);
-	}
-}
-
-// FIXME: this should be in notification and set via a prop
-.is-archived .notification.is-warning {
-  margin-bottom: 1rem;
-}
-</style>

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

@@ -1,14 +1,6 @@
 <template>
 	<dropdown>
-		<template #trigger="triggerProps">
-			<slot name="trigger" v-bind="triggerProps">
-				<BaseButton class="dropdown-trigger" @click="triggerProps.toggleOpen">
-					<icon icon="ellipsis-h" class="icon"/>
-				</BaseButton>
-			</slot>
-		</template>
-
-		<template v-if="isSavedFilter(list)">
+		<template v-if="isSavedFilter">
 			<dropdown-item
 				:to="{ name: 'filter.settings.edit', params: { listId: list.id } }"
 				icon="pen"
@@ -63,14 +55,13 @@
 			>
 				{{ $t('menu.archive') }}
 			</dropdown-item>
-			<Subscription
-				class="has-no-shadow"
+			<task-subscription
+				class="dropdown-item has-no-shadow"
 				:is-button="false"
 				entity="list"
 				:entity-id="list.id"
-				:model-value="list.subscription"
-				@update:model-value="setSubscriptionInStore"
-				type="dropdown"
+				:subscription="list.subscription"
+				@change="sub => subscription = sub"
 			/>
 			<dropdown-item
 				:to="{ name: 'list.settings.delete', params: { listId: list.id } }"
@@ -84,44 +75,29 @@
 </template>
 
 <script setup lang="ts">
-import {ref, computed, watchEffect, type PropType} from 'vue'
+import {ref, computed, watchEffect} from 'vue'
+import {useStore} from 'vuex'
 
-import BaseButton from '@/components/base/BaseButton.vue'
+import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
 import Dropdown from '@/components/misc/dropdown.vue'
 import DropdownItem from '@/components/misc/dropdown-item.vue'
-import Subscription from '@/components/misc/subscription.vue'
-import type {IList} from '@/modelTypes/IList'
-import type {ISubscription} from '@/modelTypes/ISubscription'
-
-import {isSavedFilter} from '@/services/savedFilter'
-import {useConfigStore} from '@/stores/config'
-import {useListStore} from '@/stores/lists'
-import {useNamespaceStore} from '@/stores/namespaces'
+import TaskSubscription from '@/components/misc/subscription.vue'
+import ListModel from '@/models/list'
+import SubscriptionModel from '@/models/subscription'
 
 const props = defineProps({
 	list: {
-		type: Object as PropType<IList>,
+		type: ListModel,
 		required: true,
 	},
 })
 
-const listStore = useListStore()
-const namespaceStore = useNamespaceStore()
-const subscription = ref<ISubscription | null>(null)
+const subscription = ref<SubscriptionModel | null>(null)
 watchEffect(() => {
 	subscription.value = props.list.subscription ?? null
 })
 
-const configStore = useConfigStore()
-const backgroundsEnabled = computed(() => configStore.enabledBackgroundProviders?.length > 0)
-
-function setSubscriptionInStore(sub: ISubscription) {
-	subscription.value = sub
-	const updatedList = {
-		...props.list,
-		subscription: sub,
-	}
-	listStore.setList(updatedList)
-	namespaceStore.setListInNamespaceById(updatedList)
-}
-</script>
+const store = useStore()
+const backgroundsEnabled = computed(() => store.state.config.enabledBackgroundProviders?.length > 0)
+const isSavedFilter = computed(() => getSavedFilterIdFromListId(props.list.id) > 0)
+</script>

src/components/list/partials/ListCard.vue

@@ -1,176 +0,0 @@
-<template>
-	<div
-		class="list-card"
-		:class="{
-			'has-light-text': background !== null,
-			'has-background': blurHashUrl !== '' || background !== null
-		}"
-		:style="{
-			'border-left': list.hexColor ? `0.25rem solid ${list.hexColor}` : undefined,
-			'background-image': blurHashUrl !== '' ? `url(${blurHashUrl})` : undefined,
-		}"
-	>
-		<div
-			class="list-background background-fade-in"
-			:class="{'is-visible': background}"
-			:style="{'background-image': background !== null ? `url(${background})` : undefined}"
-		/>
-		<span v-if="list.isArchived" class="is-archived" >{{ $t('namespace.archived') }}</span>
-
-		<div class="list-title" aria-hidden="true">{{ list.title }}</div>
-		<BaseButton
-			class="list-button"
-			:aria-label="list.title"
-			:title="list.description"
-			:to="{
-				name: 'list.index',
-				params: { listId: list.id}
-			}"
-		/>
-		<BaseButton
-			v-if="!list.isArchived"
-			class="favorite"
-			:class="{'is-favorite': list.isFavorite}"
-			@click.prevent.stop="listStore.toggleListFavorite(list)"
-		>
-			<icon :icon="list.isFavorite ? 'star' : ['far', 'star']" />
-		</BaseButton>
-	</div>
-</template>
-
-<script lang="ts" setup>
-import {toRef, type PropType} from 'vue'
-
-import type {IList} from '@/modelTypes/IList'
-
-import BaseButton from '@/components/base/BaseButton.vue'
-
-import {useListBackground} from './useListBackground'
-import {useListStore} from '@/stores/lists'
-
-const props = defineProps({
-	list: {
-		type: Object as PropType<IList>,
-		required: true,
-	},
-})
-
-const {background, blurHashUrl} = useListBackground(toRef(props, 'list'))
-
-const listStore = useListStore()
-</script>
-
-<style lang="scss" scoped>
-.list-card {
-	--list-card-padding: 1rem;
-	background: var(--white);
-	padding: var(--list-card-padding);
-	border-radius: $radius;
-	box-shadow: var(--shadow-sm);
-	transition: box-shadow $transition;
-	position: relative;
-	overflow: hidden; // hide background
-
-	display: flex;
-	justify-content: space-between;
-	flex-wrap: wrap;
-
-	&:hover {
-		box-shadow: var(--shadow-md);
-	}
-
-	&:active,
-	&:focus {
-		box-shadow: var(--shadow-xs) !important;
-	}
-
-	> * {
-		// so the elements are on top of the background
-		position: relative;
-	}
-}
-
-.has-background,
-.list-background {
-	background-size: cover;
-	background-repeat: no-repeat;
-	background-position: center;
-}
-
-.list-background,
-.list-button {
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-}
-
-.is-archived {
-	font-size: .75rem;
-	float: left;
-}
-
-.list-title {
-	align-self: flex-end;
-	font-family: $vikunja-font;
-	font-weight: 400;
-	font-size: 1.5rem;
-	line-height: var(--title-line-height);
-	color: var(--text);
-	width: 100%;
-	margin-bottom: 0;
-	max-height: calc(100% - (var(--list-card-padding) + 1rem)); // padding & height of the "is archived" badge
-	overflow: hidden;
-	text-overflow: ellipsis;
-	word-break: break-word;
-
-	display: -webkit-box;
-	-webkit-line-clamp: 3;
-	-webkit-box-orient: vertical;
-}
-
-.has-light-text .list-title {
-	color: var(--grey-100);
-}
-
-.has-background .list-title {
-	text-shadow:
-		0 0 10px var(--black),
-		1px 1px 5px var(--grey-700),
-		-1px -1px 5px var(--grey-700);
-	color: var(--white);
-}
-
-.favorite {
-	position: absolute;
-	top: var(--list-card-padding);
-	right: var(--list-card-padding);
-	transition: opacity $transition, color $transition;
-	opacity: 0;
-
-	&:hover {
-		color: var(--warning);
-	}
-
-	&.is-favorite {
-		display: inline-block;
-		opacity: 1;
-		color: var(--warning);
-	}
-}
-
-.list-card:hover .favorite {
-	opacity: 1;
-}
-
-.background-fade-in {
-  opacity: 0;
-  transition: opacity $transition;
-  transition-delay: $transition-duration * 2; // To fake an appearing background
-
-  &.is-visible {
-    opacity: 1;
-  }
-}
-</style>

src/components/list/partials/ListCardGrid.vue

@@ -1,77 +0,0 @@
-<template>
-    <ul class="list-grid">
-			<li
-				v-for="(item, index) in filteredLists"
-				:key="`list_${item.id}_${index}`"
-				class="list-grid-item"
-			>
-				<ListCard :list="item" />
-			</li>
-    </ul>
-</template>
-
-<script lang="ts" setup>
-import {computed, type PropType} from 'vue'
-import type {IList} from '@/modelTypes/IList'
-
-import ListCard from './ListCard.vue'
-
-const props = defineProps({
-	lists: {
-		type: Array as PropType<IList[]>,
-		default: () => [],
-	},
-	showArchived: {
-		default: false,
-		type: Boolean,
-	},
-	itemLimit: {
-		type: Boolean,
-		default: false,
-	},
-})
-
-const filteredLists = computed(() => {
-	return props.showArchived
-		? props.lists
-		: props.lists.filter(l => !l.isArchived)
-})
-</script>
-
-<style lang="scss" scoped>
-$list-height: 150px;
-$list-spacing: 1rem;
-
-.list-grid {
-	margin: 0; // reset li
-	list-style-type: none;
-	display: grid;
-	grid-template-columns: repeat(var(--list-columns), 1fr);
-	grid-auto-rows: $list-height;
-	gap: $list-spacing;
-
-	@media screen and (min-width: $mobile) {
-		--list-rows: 4;
-		--list-columns: 1;
-	}
-
-	@media screen and (min-width: $mobile) and (max-width: $tablet) {
-		--list-columns: 2;
-	}
-
-	@media screen and (min-width: $tablet) and (max-width: $widescreen) {
-		--list-columns: 3;
-		--list-rows: 3;
-	}
-
-	@media screen and (min-width: $widescreen) {
-		--list-columns: 5;
-		--list-rows: 2;
-	}
-}
-
-.list-grid-item {
-	display: grid;
-	margin-top: 0; // remove padding coming form .content li + li
-}
-</style>