feat: review changes

.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:16
+    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,83 @@ 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:16
+    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:16
+    pull: true
+    environment:
+      YARN_CACHE_FOLDER: .cache/yarn/
+    commands:
+      - yarn build
+    depends_on:
+      - dependencies
+
+  - name: test-unit
+    image: node:16
+    pull: true
+    commands:
+      - yarn test:unit
+    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
+    commands:
+      - sed -i 's/localhost/api/g' dist/index.html
+      - yarn serve:dist & npx wait-on http://localhost:5000
+      - yarn test:frontend --browser chrome
+    depends_on:
+      - dependencies
+      - build-prod
+
+  - name: upload-test-results
+    image: plugins/s3
+    pull: true
+    settings:
+      bucket: drone-test-results
+      access_key:
+        from_secret: test_results_aws_access_key_id
+      secret_key:
+        from_secret: test_results_aws_secret_access_key
+      endpoint: https://s3.fr-par.scw.cloud
+      region: fr-par
+      path_style: true
+      source: cypress/screenshots/**/**/*
+      strip_prefix: cypress/screenshots/
+      target: /${DRONE_REPO}/${DRONE_PULL_REQUEST}_${DRONE_BRANCH}/${DRONE_BUILD_NUMBER}/
+    depends_on:
+      - test-frontend
+    when:
+      status:
+        - failure
+        - success
+
   - name: deploy-preview
-    image: node:18-alpine
-    pull: always
+    image: node:16
+    pull: true
     environment:
       NETLIFY_AUTH_TOKEN:
         from_secret: netlify_auth_token
@@ -146,10 +148,6 @@ steps:
       GITEA_TOKEN:
         from_secret: gitea_token
     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
       - shasum -a 384 -c ./scripts/deploy-preview-netlify.js.sha384
       - node ./scripts/deploy-preview-netlify.js
     depends_on:
@@ -161,7 +159,6 @@ steps:
 
 ---
 kind: pipeline
-type: docker
 name: release-latest
 
 depends_on:
@@ -181,7 +178,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 +190,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:16
+    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 +220,7 @@ steps:
 
   - name: release
     image: plugins/s3
-    pull: always
+    pull: true
     settings:
       bucket: vikunja-releases
       access_key:
@@ -240,7 +236,6 @@ steps:
 
 ---
 kind: pipeline
-type: docker
 name: release-version
 
 depends_on:
@@ -258,7 +253,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 +265,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:16
+    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 +295,7 @@ steps:
 
   - name: release
     image: plugins/s3
-    pull: always
+    pull: true
     settings:
       bucket: vikunja-releases
       access_key:
@@ -317,7 +311,6 @@ steps:
 
 ---
 kind: pipeline
-type: docker
 name: trigger-desktop-update
 
 trigger:
@@ -342,7 +335,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 +454,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 +463,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 +481,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 +571,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 +656,6 @@ steps:
         from_secret: crowdin_key
 ---
 kind: signature
-hmac: 9f26b5af73e3464e9ee1b5fbcb96854ca8a7e5f8d6ee2d85fd8376aad951b446
+hmac: 188ee90100c5fc5922a445e531e7a47453121edddb2a64a182eb23ed2bf602de
 
 ...

.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

.nvmrc

@@ -1 +1 @@
-v18
+v16

.vscode.example/extensions.json

@@ -3,8 +3,7 @@
     "codezombiech.gitignore",
     "dbaeumer.vscode-eslint",
     "editorconfig.editorconfig",
-    "vue.volar",
-    "vue.vscode-typescript-vue-plugin",
+    "johnsoncodehk.volar",
     "lokalise.i18n-ally",
     "mgmcdermott.vscode-language-babel",
     "mikestead.dotenv",

.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:16 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 +0,0 @@
-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,
-})

cypress.json

@@ -0,0 +1,11 @@
+{
+  "baseUrl": "http://localhost:5000",
+  "env": {
+    "API_URL": "http://localhost:3456/api/v1",
+    "TEST_SECRET": "averyLongSecretToSe33dtheDB"
+  },
+  "video": false,
+  "retries": {
+    "runMode": 2
+  }
+}

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

@@ -1,56 +0,0 @@
-import {ListFactory} from '../../factories/list'
-
-import '../../support/authenticateUser'
-import {prepareLists} from './prepareLists'
-
-describe('List History', () => {
-	prepareLists()
-	
-	it('should show a list history on the home page', () => {
-		cy.intercept(Cypress.env('API_URL') + '/namespaces*').as('loadNamespaces')
-		cy.intercept(Cypress.env('API_URL') + '/lists/*').as('loadList')
-		
-		const lists = ListFactory.create(6)
-
-		cy.visit('/')
-		cy.wait('@loadNamespaces')
-		cy.get('body')
-			.should('not.contain', 'Last viewed')
-
-		cy.visit(`/lists/${lists[0].id}`)
-		cy.wait('@loadNamespaces')
-		cy.wait('@loadList')
-		cy.visit(`/lists/${lists[1].id}`)
-		cy.wait('@loadNamespaces')
-		cy.wait('@loadList')
-		cy.visit(`/lists/${lists[2].id}`)
-		cy.wait('@loadNamespaces')
-		cy.wait('@loadList')
-		cy.visit(`/lists/${lists[3].id}`)
-		cy.wait('@loadNamespaces')
-		cy.wait('@loadList')
-		cy.visit(`/lists/${lists[4].id}`)
-		cy.wait('@loadNamespaces')
-		cy.wait('@loadList')
-		cy.visit(`/lists/${lists[5].id}`)
-		cy.wait('@loadNamespaces')
-		cy.wait('@loadList')
-
-		// cy.visit('/')
-		// cy.wait('@loadNamespaces')
-		// Not using cy.visit here to work around the redirect issue fixed in #1337
-		cy.get('nav.menu.top-menu a')
-			.contains('Overview')
-			.click()
-		
-		cy.get('body')
-			.should('contain', 'Last viewed')
-		cy.get('[data-cy="listCardGrid"]')
-			.should('not.contain', lists[0].title)
-			.should('contain', lists[1].title)
-			.should('contain', lists[2].title)
-			.should('contain', lists[3].title)
-			.should('contain', lists[4].title)
-			.should('contain', lists[5].title)
-	})
-})

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

@@ -1,240 +0,0 @@
-import {BucketFactory} from '../../factories/bucket'
-import {ListFactory} from '../../factories/list'
-import {TaskFactory} from '../../factories/task'
-import {prepareLists} from './prepareLists'
-
-import '../../support/authenticateUser'
-
-describe('List View Kanban', () => {
-	let buckets
-	prepareLists()
-
-	beforeEach(() => {
-		buckets = BucketFactory.create(2)
-	})
-
-	it('Shows all buckets with their tasks', () => {
-		const data = TaskFactory.create(10, {
-			list_id: 1,
-			bucket_id: 1,
-		})
-		cy.visit('/lists/1/kanban')
-
-		cy.get('.kanban .bucket .title')
-			.contains(buckets[0].title)
-			.should('exist')
-		cy.get('.kanban .bucket .title')
-			.contains(buckets[1].title)
-			.should('exist')
-		cy.get('.kanban .bucket')
-			.first()
-			.should('contain', data[0].title)
-	})
-
-	it('Can add a new task to a bucket', () => {
-		TaskFactory.create(2, {
-			list_id: 1,
-			bucket_id: 1,
-		})
-		cy.visit('/lists/1/kanban')
-
-		cy.getSettled('.kanban .bucket')
-			.contains(buckets[0].title)
-			.get('.bucket-footer .button')
-			.contains('Add another task')
-			.click()
-		cy.get('.kanban .bucket')
-			.contains(buckets[0].title)
-			.get('.bucket-footer .field .control input.input')
-			.type('New Task{enter}')
-
-		cy.get('.kanban .bucket')
-			.first()
-			.should('contain', 'New Task')
-	})
-
-	it('Can create a new bucket', () => {
-		cy.visit('/lists/1/kanban')
-
-		cy.get('.kanban .bucket.new-bucket .button')
-			.click()
-		cy.get('.kanban .bucket.new-bucket input.input')
-			.type('New Bucket{enter}')
-
-		cy.wait(1000) // Wait for the request to finish
-		cy.get('.kanban .bucket .title')
-			.contains('New Bucket')
-			.should('exist')
-	})
-
-	it('Can set a bucket limit', () => {
-		cy.visit('/lists/1/kanban')
-
-		cy.getSettled('.kanban .bucket .bucket-header .dropdown.options .dropdown-trigger')
-			.first()
-			.click()
-		cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item')
-			.contains('Limit: Not Set')
-			.click()
-		cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item .field input.input')
-			.first()
-			.type(3)
-		cy.get('[data-cy="setBucketLimit"]')
-			.first()
-			.click()
-
-		cy.get('.kanban .bucket .bucket-header span.limit')
-			.contains('0/3')
-			.should('exist')
-	})
-
-	it('Can rename a bucket', () => {
-		cy.visit('/lists/1/kanban')
-
-		cy.getSettled('.kanban .bucket .bucket-header .title')
-			.first()
-			.type('{selectall}New Bucket Title{enter}')
-		cy.get('.kanban .bucket .bucket-header .title')
-			.first()
-			.should('contain', 'New Bucket Title')
-	})
-
-	it('Can delete a bucket', () => {
-		cy.visit('/lists/1/kanban')
-
-		cy.getSettled('.kanban .bucket .bucket-header .dropdown.options .dropdown-trigger')
-			.first()
-			.click()
-		cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item')
-			.contains('Delete')
-			.click()
-		cy.get('.modal-mask .modal-container .modal-content .header')
-			.should('contain', 'Delete the bucket')
-		cy.get('.modal-mask .modal-container .modal-content .actions .button')
-			.contains('Do it!')
-			.click()
-
-		cy.get('.kanban .bucket .title')
-			.contains(buckets[0].title)
-			.should('not.exist')
-		cy.get('.kanban .bucket .title')
-			.contains(buckets[1].title)
-			.should('exist')
-	})
-
-	it('Can drag tasks around', () => {
-		const tasks = TaskFactory.create(2, {
-			list_id: 1,
-			bucket_id: 1,
-		})
-		cy.visit('/lists/1/kanban')
-
-		cy.getSettled('.kanban .bucket .tasks .task')
-			.contains(tasks[0].title)
-			.first()
-			.drag('.kanban .bucket:nth-child(2) .tasks')
-		
-		cy.get('.kanban .bucket:nth-child(2) .tasks')
-			.should('contain', tasks[0].title)
-		cy.get('.kanban .bucket:nth-child(1) .tasks')
-			.should('not.contain', tasks[0].title)
-	})
-
-	it('Should navigate to the task when the task card is clicked', () => {
-		const tasks = TaskFactory.create(5, {
-			id: '{increment}',
-			list_id: 1,
-			bucket_id: 1,
-		})
-		cy.visit('/lists/1/kanban')
-
-		cy.getSettled('.kanban .bucket .tasks .task')
-			.contains(tasks[0].title)
-			.should('be.visible')
-			.click()
-
-		cy.url()
-			.should('contain', `/tasks/${tasks[0].id}`, { timeout: 1000 })
-	})
-
-	it('Should remove a task from the kanban board when moving it to another list', () => {
-		const lists = ListFactory.create(2)
-		BucketFactory.create(2, {
-			list_id: '{increment}',
-		})
-		const tasks = TaskFactory.create(5, {
-			id: '{increment}',
-			list_id: 1,
-			bucket_id: 1,
-		})
-		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', { timeout: 3000 })
-			.contains('Move')
-			.click()
-		cy.get('.task-view .content.details .field .multiselect.control .input-wrapper input')
-			.type(`${lists[1].title}{enter}`)
-		// The requests happen with a 200ms timeout. Because of that, the results are not yet there when cypress
-		// presses enter and we can't simulate pressing on enter to select the item.
-		cy.get('.task-view .content.details .field .multiselect.control .search-results')
-			.children()
-			.first()
-			.click()
-
-		cy.get('.global-notification', { timeout: 1000 })
-			.should('contain', 'Success')
-		cy.go('back')
-		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.ts

@@ -1,109 +0,0 @@
-import {UserListFactory} from '../../factories/users_list'
-import {TaskFactory} from '../../factories/task'
-import {UserFactory} from '../../factories/user'
-import {ListFactory} from '../../factories/list'
-import {prepareLists} from './prepareLists'
-
-import '../../support/authenticateUser'
-
-describe('List View List', () => {
-	prepareLists()
-
-	it('Should be an empty list', () => {
-		cy.visit('/lists/1')
-		cy.url()
-			.should('contain', '/lists/1/list')
-		cy.get('.list-title h1')
-			.should('contain', 'First List')
-		cy.get('.list-title .dropdown')
-			.should('exist')
-		cy.get('p')
-			.contains('This list is currently empty.')
-			.should('exist')
-	})
-	
-	it('Should create a new task', () => {
-		const newTaskTitle = 'New task'
-		
-		cy.visit('/lists/1')
-		cy.get('.task-add textarea')
-			.type(newTaskTitle+'{enter}')
-		cy.get('.tasks')
-			.should('contain.text', newTaskTitle)
-	})
-
-	it('Should navigate to the task when the title is clicked', () => {
-		const tasks = TaskFactory.create(5, {
-			id: '{increment}',
-			list_id: 1,
-		})
-		cy.visit('/lists/1/list')
-
-		cy.get('.tasks .task .tasktext')
-			.contains(tasks[0].title)
-			.first()
-			.click()
-
-		cy.url()
-			.should('contain', `/tasks/${tasks[0].id}`)
-	})
-
-	it('Should not see any elements for a list which is shared read only', () => {
-		UserFactory.create(2)
-		UserListFactory.create(1, {
-			list_id: 2,
-			user_id: 1,
-			right: 0,
-		})
-		const lists = ListFactory.create(2, {
-			owner_id: '{increment}',
-			namespace_id: '{increment}',
-		})
-		cy.visit(`/lists/${lists[1].id}/`)
-
-		cy.get('.list-title .icon')
-			.should('not.exist')
-		cy.get('input.input[placeholder="Add a new task..."')
-			.should('not.exist')
-	})
-
-	it('Should only show the color of a list in the navigation and not in the list view', () => {
-		const lists = ListFactory.create(1, {
-			hex_color: '00db60',
-		})
-		TaskFactory.create(10, {
-			list_id: lists[0].id,
-		})
-		cy.visit(`/lists/${lists[0].id}/`)
-
-		cy.get('.menu-list li .list-menu-link .color-bubble')
-			.should('have.css', 'background-color', 'rgb(0, 219, 96)')
-		cy.get('.tasks .color-bubble')
-			.should('not.exist')
-	})
-
-	it('Should paginate for > 50 tasks', () => {
-		const tasks = TaskFactory.create(100, {
-			id: '{increment}',
-			title: i => `task${i}`,
-			list_id: 1,
-		})
-		cy.visit('/lists/1/list')
-
-		cy.get('.tasks')
-			.should('contain', tasks[1].title)
-		cy.get('.tasks')
-			.should('not.contain', tasks[99].title)
-
-		cy.get('.card-content .pagination .pagination-link')
-			.contains('2')
-			.click()
-
-		cy.url()
-			.should('contain', '?page=2')
-		cy.get('.tasks')
-			.should('contain', tasks[99].title)
-		cy.get('.tasks')
-			.should('not.contain', tasks[1].title)
-	})
-})

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

@@ -1,52 +0,0 @@
-import {TaskFactory} from '../../factories/task'
-
-import '../../support/authenticateUser'
-
-describe('List View Table', () => {
-	it('Should show a table with tasks', () => {
-		const tasks = TaskFactory.create(1)
-		cy.visit('/lists/1/table')
-
-		cy.get('.list-table table.table')
-			.should('exist')
-		cy.get('.list-table table.table')
-			.should('contain', tasks[0].title)
-	})
-
-	it('Should have working column switches', () => {
-		TaskFactory.create(1)
-		cy.visit('/lists/1/table')
-
-		cy.get('.list-table .filter-container .items .button')
-			.contains('Columns')
-			.click()
-		cy.get('.list-table .filter-container .card.columns-filter .card-content .fancycheckbox .check')
-			.contains('Priority')
-			.click()
-		cy.get('.list-table .filter-container .card.columns-filter .card-content .fancycheckbox .check')
-			.contains('Done')
-			.click()
-
-		cy.get('.list-table table.table th')
-			.contains('Priority')
-			.should('exist')
-		cy.get('.list-table table.table th')
-			.contains('Done')
-			.should('not.exist')
-	})
-
-	it('Should navigate to the task when the title is clicked', () => {
-		const tasks = TaskFactory.create(5, {
-			id: '{increment}',
-			list_id: 1,
-		})
-		cy.visit('/lists/1/table')
-
-		cy.get('.list-table table.table')
-			.contains(tasks[0].title)
-			.click()
-
-		cy.url()
-			.should('contain', `/tasks/${tasks[0].id}`)
-	})
-})

cypress/e2e/list/list.spec.ts

@@ -1,120 +0,0 @@
-import {TaskFactory} from '../../factories/task'
-import {prepareLists} from './prepareLists'
-
-import '../../support/authenticateUser'
-
-describe('Lists', () => {
-	let lists
-	prepareLists((newLists) => (lists = newLists))
-
-	it('Should create a new list', () => {
-		cy.visit('/')
-		cy.get('.namespace-title .dropdown-trigger')
-			.click()
-		cy.get('.namespace-title .dropdown .dropdown-item')
-			.contains('New list')
-			.click()
-		cy.url()
-			.should('contain', '/lists/new/1')
-		cy.get('.card-header-title')
-			.contains('New list')
-		cy.get('input.input')
-			.type('New List')
-		cy.get('.button')
-			.contains('Create')
-			.click()
-
-		cy.get('.global-notification', { timeout: 1000 }) // Waiting until the request to create the new list is done
-			.should('contain', 'Success')
-		cy.url()
-			.should('contain', '/lists/')
-		cy.get('.list-title h1')
-			.should('contain', 'New List')
-	})
-
-	it('Should redirect to a specific list view after visited', () => {
-		cy.visit('/lists/1/kanban')
-		cy.url()
-			.should('contain', '/lists/1/kanban')
-		cy.visit('/lists/1')
-		cy.url()
-			.should('contain', '/lists/1/kanban')
-	})
-
-	it('Should rename the list in all places', () => {
-		TaskFactory.create(5, {
-			id: '{increment}',
-			list_id: 1,
-		})
-		const newListName = 'New list name'
-
-		cy.visit('/lists/1')
-		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')
-			.click()
-		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-content')
-			.contains('Edit')
-			.click()
-		cy.get('#title')
-			.type(`{selectall}${newListName}`)
-		cy.get('footer.card-footer .button')
-			.contains('Save')
-			.click()
-
-		cy.get('.global-notification')
-			.should('contain', 'Success')
-		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')
-			.should('contain', newListName)
-			.should('not.contain', lists[0].title)
-		cy.visit('/')
-		cy.get('.card-content')
-			.should('contain', newListName)
-			.should('not.contain', lists[0].title)
-	})
-
-	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')
-			.click()
-		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-content')
-			.contains('Delete')
-			.click()
-		cy.url()
-			.should('contain', '/settings/delete')
-		cy.get('[data-cy="modalPrimary"]')
-			.contains('Do it')
-			.click()
-
-		cy.get('.global-notification')
-			.should('contain', 'Success')
-		cy.get('.namespace-container .menu.namespaces-lists .menu-list')
-			.should('not.contain', lists[0].title)
-		cy.location('pathname')
-			.should('equal', '/')
-	})
-	
-	it('Should archive a list', () => {
-		cy.visit(`/lists/${lists[0].id}`)
-		
-		cy.get('.list-title .dropdown')
-			.click()
-		cy.get('.list-title .dropdown .dropdown-menu .dropdown-item')
-			.contains('Archive')
-			.click()
-		cy.get('.modal-content')
-			.should('contain.text', 'Archive this list')
-		cy.get('.modal-content [data-cy=modalPrimary]')
-			.click()
-		
-		cy.get('.namespace-container .menu.namespaces-lists .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/prepareLists.ts

@@ -1,21 +0,0 @@
-import {ListFactory} from '../../factories/list'
-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()
-		setLists(lists)
-	})
-}

cypress/e2e/task/overview.spec.ts

@@ -1,151 +0,0 @@
-import {ListFactory} from '../../factories/list'
-import {seed} from '../../support/seed'
-import {TaskFactory} from '../../factories/task'
-import {formatISO} from 'date-fns'
-import {UserFactory} from '../../factories/user'
-import {NamespaceFactory} from '../../factories/namespace'
-import {BucketFactory} from '../../factories/bucket'
-import {updateUserSettings} from '../../support/updateUserSettings'
-
-import '../../support/authenticateUser'
-
-function seedTasks(numberOfTasks = 100, startDueDate = new Date()) {
-	UserFactory.create(1)
-	NamespaceFactory.create(1)
-	const list = ListFactory.create()[0]
-	BucketFactory.create(1, {
-		list_id: list.id,
-	})
-	const tasks = []
-	let dueDate = startDueDate
-	for (let i = 0; i < numberOfTasks; i++) {
-		const now = new Date()
-		dueDate = (new Date(dueDate.valueOf())).setDate((new Date(dueDate.valueOf())).getDate() + 2)
-		tasks.push({
-			id: i + 1,
-			list_id: list.id,
-			done: false,
-			created_by_id: 1,
-			title: 'Test Task ' + i,
-			index: i + 1,
-			due_date: formatISO(dueDate),
-			created: formatISO(now),
-			updated: formatISO(now),
-		})
-	}
-	seed(TaskFactory.table, tasks)
-	return {tasks, list}
-}
-
-describe('Home Page Task Overview', () => {
-	it('Should show tasks with a near due date first on the home page overview', () => {
-		const {tasks} = seedTasks()
-
-		cy.visit('/')
-		cy.get('[data-cy="showTasks"] .card .task')
-			.each(([task], index) => {
-				expect(task.innerText).to.contain(tasks[index].title)
-			})
-	})
-
-	it('Should show overdue tasks first, then show other tasks', () => {
-		const oldDate = (new Date()).setDate((new Date()).getDate() - 14)
-		const {tasks} = seedTasks(100, oldDate)
-
-		cy.visit('/')
-		cy.get('[data-cy="showTasks"] .card .task')
-			.each(([task], index) => {
-				expect(task.innerText).to.contain(tasks[index].title)
-			})
-	})
-
-	it('Should show a new task with a very soon due date at the top', () => {
-		const {tasks} = seedTasks()
-		const newTaskTitle = 'New Task'
-		
-		cy.visit('/')
-		
-		TaskFactory.create(1, {
-			id: 999,
-			title: newTaskTitle,
-			due_date: formatISO(new Date()),
-		}, false)
-		
-		cy.visit(`/lists/${tasks[0].list_id}/list`)
-		cy.get('.tasks .task')
-			.first()
-			.should('contain.text', newTaskTitle)
-		cy.visit('/')
-		cy.get('[data-cy="showTasks"] .card .task')
-			.first()
-			.should('contain.text', newTaskTitle)
-	})
-	
-	it('Should not show a new task without a date at the bottom when there are > 50 tasks', () => {
-		// We're not using the api here to create the task in order to verify the flow
-		const {tasks} = seedTasks()
-		const newTaskTitle = 'New Task'
-
-		cy.visit('/')
-
-		cy.visit(`/lists/${tasks[0].list_id}/list`)
-		cy.get('.task-add textarea')
-			.type(newTaskTitle+'{enter}')
-		cy.visit('/')
-		cy.get('[data-cy="showTasks"] .card .task')
-			.last()
-			.should('not.contain.text', newTaskTitle)
-	})
-	
-	it('Should show a new task without a date at the bottom when there are < 50 tasks', () => {
-		seedTasks(40)
-		const newTaskTitle = 'New Task'
-		TaskFactory.create(1, {
-			id: 999,
-			title: newTaskTitle,
-		}, false)
-
-		cy.visit('/')
-		cy.get('[data-cy="showTasks"] .card .task')
-			.last()
-			.should('contain.text', newTaskTitle)
-	})
-	
-	it('Should show a task without a due date added via default list at the bottom', () => {
-		const {list} = seedTasks(40)
-		updateUserSettings({
-			default_list_id: list.id,
-			overdue_tasks_reminders_time: '9:00',
-		})
-		
-		const newTaskTitle = 'New Task'
-		cy.visit('/')
-		
-		cy.get('.add-task-textarea')
-			.type(`${newTaskTitle}{enter}`)
-		
-		cy.get('[data-cy="showTasks"] .card .task')
-			.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/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/bucket.js

@@ -1,4 +1,4 @@
-import {faker} from '@faker-js/faker'
+import faker from 'faker'
 import {Factory} from '../support/factory'
 import {formatISO} from 'date-fns'
 

cypress/factories/labels.js

@@ -1,4 +1,4 @@
-import {faker} from '@faker-js/faker'
+import faker from 'faker'
 
 import {Factory} from '../support/factory'
 import {formatISO} from 'date-fns'

cypress/factories/link_sharing.js

@@ -1,6 +1,6 @@
 import {Factory} from '../support/factory'
 import {formatISO} from "date-fns"
-import {faker} from '@faker-js/faker'
+import faker from 'faker'
 
 export class LinkShareFactory extends Factory {
 	static table = 'link_shares'

cypress/factories/list.js

@@ -1,6 +1,6 @@
 import {Factory} from '../support/factory'
 import {formatISO} from "date-fns"
-import {faker} from '@faker-js/faker'
+import faker from 'faker'
 
 export class ListFactory extends Factory {
 	static table = 'lists'

cypress/factories/namespace.js

@@ -1,4 +1,4 @@
-import {faker} from '@faker-js/faker'
+import faker from 'faker'
 import {Factory} from '../support/factory'
 import {formatISO} from 'date-fns'
 

cypress/factories/task.js

@@ -1,4 +1,4 @@
-import {faker} from '@faker-js/faker'
+import faker from 'faker'
 import {Factory} from '../support/factory'
 import {formatISO} from 'date-fns'
 
@@ -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/task_comment.js

@@ -1,4 +1,4 @@
-import {faker} from '@faker-js/faker'
+import faker from 'faker'
 
 import {Factory} from '../support/factory'
 import {formatISO} from "date-fns"

cypress/factories/team.js

@@ -1,4 +1,4 @@
-import {faker} from '@faker-js/faker'
+import faker from 'faker'
 import {Factory} from '../support/factory'
 import {formatISO} from 'date-fns'
 

cypress/factories/user.js

@@ -1,4 +1,4 @@
-import {faker} from '@faker-js/faker'
+import faker from 'faker'
 
 import {Factory} from '../support/factory'
 import {formatISO} from "date-fns"
@@ -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/integration/list/list.spec.js

@@ -0,0 +1,540 @@
+import {formatISO, format} from 'date-fns'
+
+import {TaskFactory} from '../../factories/task'
+import {ListFactory} from '../../factories/list'
+import {UserListFactory} from '../../factories/users_list'
+import {UserFactory} from '../../factories/user'
+import {NamespaceFactory} from '../../factories/namespace'
+import {BucketFactory} from '../../factories/bucket'
+
+import '../../support/authenticateUser'
+
+describe('Lists', () => {
+	let lists
+
+	beforeEach(() => {
+		UserFactory.create(1)
+		NamespaceFactory.create(1)
+		lists = ListFactory.create(1, {
+			title: 'First List'
+		})
+		TaskFactory.truncate()
+	})
+
+	it('Should create a new list', () => {
+		cy.visit('/')
+		cy.get('.namespace-title .dropdown-trigger')
+			.click()
+		cy.get('.namespace-title .dropdown .dropdown-item')
+			.contains('New list')
+			.click()
+		cy.url()
+			.should('contain', '/namespaces/1/list')
+		cy.get('.card-header-title')
+			.contains('New list')
+		cy.get('input.input')
+			.type('New List')
+		cy.get('.button')
+			.contains('Create')
+			.click()
+
+		cy.get('.global-notification', { timeout: 1000 }) // Waiting until the request to create the new list is done
+			.should('contain', 'Success')
+		cy.url()
+			.should('contain', '/lists/')
+		cy.get('.list-title h1')
+			.should('contain', 'New List')
+	})
+
+	it('Should redirect to a specific list view after visited', () => {
+		cy.visit('/lists/1/kanban')
+		cy.url()
+			.should('contain', '/lists/1/kanban')
+		cy.visit('/lists/1')
+		cy.url()
+			.should('contain', '/lists/1/kanban')
+	})
+
+	it('Should rename the list in all places', () => {
+		const tasks = TaskFactory.create(5, {
+			id: '{increment}',
+			list_id: 1,
+		})
+		const newListName = 'New list name'
+
+		cy.visit('/lists/1')
+		cy.get('.list-title h1')
+			.should('contain', 'First List')
+
+		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 .more-container .menu-list li:first-child .dropdown .dropdown-content')
+			.contains('Edit')
+			.click()
+		cy.get('#title')
+			.type(`{selectall}${newListName}`)
+		cy.get('footer.modal-card-foot .button')
+			.contains('Save')
+			.click()
+
+		cy.get('.global-notification')
+			.should('contain', 'Success')
+		cy.get('.list-title h1')
+			.should('contain', newListName)
+			.should('not.contain', lists[0].title)
+		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('/')
+		cy.get('.card-content .tasks')
+			.should('contain', newListName)
+			.should('not.contain', lists[0].title)
+	})
+
+	it('Should remove a list', () => {
+		cy.visit(`/lists/${lists[0].id}`)
+
+		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 .more-container .menu-list li:first-child .dropdown .dropdown-content')
+			.contains('Delete')
+			.click()
+		cy.url()
+			.should('contain', '/settings/delete')
+		cy.get('[data-cy="modalPrimary"]')
+			.contains('Do it')
+			.click()
+
+		cy.get('.global-notification')
+			.should('contain', 'Success')
+		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list')
+			.should('not.contain', lists[0].title)
+		cy.location('pathname')
+			.should('equal', '/')
+	})
+
+	describe('List View', () => {
+		it('Should be an empty list', () => {
+			cy.visit('/lists/1')
+			cy.url()
+				.should('contain', '/lists/1/list')
+			cy.get('.list-title h1')
+				.should('contain', 'First List')
+			cy.get('.list-title .dropdown')
+				.should('exist')
+			cy.get('p')
+				.contains('This list is currently empty.')
+				.should('exist')
+		})
+
+		it('Should navigate to the task when the title is clicked', () => {
+			const tasks = TaskFactory.create(5, {
+				id: '{increment}',
+				list_id: 1,
+			})
+			cy.visit('/lists/1/list')
+
+			cy.get('.tasks .task .tasktext')
+				.contains(tasks[0].title)
+				.first()
+				.click()
+
+			cy.url()
+				.should('contain', `/tasks/${tasks[0].id}`)
+		})
+
+		it('Should not see any elements for a list which is shared read only', () => {
+			UserFactory.create(2)
+			UserListFactory.create(1, {
+				list_id: 2,
+				user_id: 1,
+				right: 0,
+			})
+			const lists = ListFactory.create(2, {
+				owner_id: '{increment}',
+				namespace_id: '{increment}',
+			})
+			cy.visit(`/lists/${lists[1].id}/`)
+
+			cy.get('.list-title a.icon')
+				.should('not.exist')
+			cy.get('input.input[placeholder="Add a new task..."')
+				.should('not.exist')
+		})
+
+		it('Should only show the color of a list in the navigation and not in the list view', () => {
+			const lists = ListFactory.create(1, {
+				hex_color: '00db60',
+			})
+			TaskFactory.create(10, {
+				list_id: lists[0].id,
+			})
+			cy.visit(`/lists/${lists[0].id}/`)
+
+			cy.get('.menu-list li .list-menu-link .color-bubble')
+				.should('have.css', 'background-color', 'rgb(0, 219, 96)')
+			cy.get('.tasks-container .tasks .color-bubble')
+				.should('not.exist')
+		})
+
+		it('Should paginate for > 50 tasks', () => {
+			const tasks = TaskFactory.create(100, {
+				id: '{increment}',
+				title: i => `task${i}`,
+				list_id: 1,
+			})
+			cy.visit('/lists/1/list')
+
+			cy.get('.tasks-container .tasks')
+				.should('contain', tasks[99].title)
+
+			cy.get('.card-content .pagination .pagination-link')
+				.contains('2')
+				.click()
+
+			cy.url()
+				.should('contain', '?page=2')
+			cy.get('.tasks-container .tasks')
+				.should('contain', tasks[1].title)
+			cy.get('.tasks-container .tasks')
+				.should('not.contain', tasks[99].title)
+		})
+	})
+
+	describe('Table View', () => {
+		it('Should show a table with tasks', () => {
+			const tasks = TaskFactory.create(1)
+			cy.visit('/lists/1/table')
+
+			cy.get('.table-view table.table')
+				.should('exist')
+			cy.get('.table-view table.table')
+				.should('contain', tasks[0].title)
+		})
+
+		it('Should have working column switches', () => {
+			TaskFactory.create(1)
+			cy.visit('/lists/1/table')
+
+			cy.get('.table-view .filter-container .items .button')
+				.contains('Columns')
+				.click()
+			cy.get('.table-view .filter-container .card.columns-filter .card-content .fancycheckbox .check')
+				.contains('Priority')
+				.click()
+			cy.get('.table-view .filter-container .card.columns-filter .card-content .fancycheckbox .check')
+				.contains('Done')
+				.click()
+
+			cy.get('.table-view table.table th')
+				.contains('Priority')
+				.should('exist')
+			cy.get('.table-view table.table th')
+				.contains('Done')
+				.should('not.exist')
+		})
+
+		it('Should navigate to the task when the title is clicked', () => {
+			const tasks = TaskFactory.create(5, {
+				id: '{increment}',
+				list_id: 1,
+			})
+			cy.visit('/lists/1/table')
+
+			cy.get('.table-view table.table')
+				.contains(tasks[0].title)
+				.click()
+
+			cy.url()
+				.should('contain', `/tasks/${tasks[0].id}`)
+		})
+	})
+
+	describe('Gantt View', () => {
+		it('Hides tasks with no dates', () => {
+			const tasks = TaskFactory.create(1)
+			cy.visit('/lists/1/gantt')
+
+			cy.get('.gantt-chart-container .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-container .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-container .gantt-chart .tasks')
+				.should('not.be.empty')
+			cy.get('.gantt-chart-container .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-chart-container .gantt-options .fancycheckbox')
+				.contains('Show tasks which don\'t have dates set')
+				.click()
+
+			cy.get('.gantt-chart-container .gantt-chart .tasks')
+				.should('not.be.empty')
+			cy.get('.gantt-chart-container .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-container .gantt-chart .tasks .task')
+				.first()
+				.trigger('mousedown', {which: 1})
+				.trigger('mousemove', {clientX: 500, clientY: 0})
+				.trigger('mouseup', {force: true})
+		})
+	})
+
+	describe('Kanban', () => {
+		let buckets
+
+		beforeEach(() => {
+			buckets = BucketFactory.create(2)
+		})
+
+		it('Shows all buckets with their tasks', () => {
+			const data = TaskFactory.create(10, {
+				list_id: 1,
+				bucket_id: 1,
+			})
+			cy.visit('/lists/1/kanban')
+
+			cy.get('.kanban .bucket .title')
+				.contains(buckets[0].title)
+				.should('exist')
+			cy.get('.kanban .bucket .title')
+				.contains(buckets[1].title)
+				.should('exist')
+			cy.get('.kanban .bucket')
+				.first()
+				.should('contain', data[0].title)
+		})
+
+		it('Can add a new task to a bucket', () => {
+			const data = TaskFactory.create(2, {
+				list_id: 1,
+				bucket_id: 1,
+			})
+			cy.visit('/lists/1/kanban')
+
+			cy.get('.kanban .bucket')
+				.contains(buckets[0].title)
+				.get('.bucket-footer .button')
+				.contains('Add another task')
+				.click()
+			cy.get('.kanban .bucket')
+				.contains(buckets[0].title)
+				.get('.bucket-footer .field .control input.input')
+				.type('New Task{enter}')
+
+			cy.get('.kanban .bucket')
+				.first()
+				.should('contain', 'New Task')
+		})
+
+		it('Can create a new bucket', () => {
+			cy.visit('/lists/1/kanban')
+
+			cy.get('.kanban .bucket.new-bucket .button')
+				.click()
+			cy.get('.kanban .bucket.new-bucket input.input')
+				.type('New Bucket{enter}')
+
+			cy.wait(1000) // Wait for the request to finish
+			cy.get('.kanban .bucket .title')
+				.contains('New Bucket')
+				.should('exist')
+		})
+
+		it('Can set a bucket limit', () => {
+			cy.visit('/lists/1/kanban')
+
+			cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-trigger')
+				.first()
+				.click()
+			cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item')
+				.contains('Limit: Not Set')
+				.click()
+			cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item .field input.input')
+				.first()
+				.type(3)
+			cy.get('[data-cy="setBucketLimit"]')
+				.first()
+				.click()
+
+			cy.get('.kanban .bucket .bucket-header span.limit')
+				.contains('0/3')
+				.should('exist')
+		})
+
+		it('Can rename a bucket', () => {
+			cy.visit('/lists/1/kanban')
+
+			cy.get('.kanban .bucket .bucket-header .title')
+				.first()
+				.type('{selectall}New Bucket Title{enter}')
+			cy.get('.kanban .bucket .bucket-header .title')
+				.first()
+				.should('contain', 'New Bucket Title')
+		})
+
+		it('Can delete a bucket', () => {
+			cy.visit('/lists/1/kanban')
+
+			cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-trigger')
+				.first()
+				.click()
+			cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item')
+				.contains('Delete')
+				.click()
+			cy.get('.modal-mask .modal-container .modal-content .header')
+				.should('contain', 'Delete the bucket')
+			cy.get('.modal-mask .modal-container .modal-content .actions .button')
+				.contains('Do it!')
+				.click()
+
+			cy.get('.kanban .bucket .title')
+				.contains(buckets[0].title)
+				.should('not.exist')
+			cy.get('.kanban .bucket .title')
+				.contains(buckets[1].title)
+				.should('exist')
+		})
+
+		it('Can drag tasks around', () => {
+			const tasks = TaskFactory.create(2, {
+				list_id: 1,
+				bucket_id: 1,
+			})
+			cy.visit('/lists/1/kanban')
+
+			cy.get('.kanban .bucket .tasks .task')
+				.contains(tasks[0].title)
+				.first()
+				.drag('.kanban .bucket:nth-child(2) .tasks .dropper')
+			
+			cy.get('.kanban .bucket:nth-child(2) .tasks')
+				.should('contain', tasks[0].title)
+			cy.get('.kanban .bucket:nth-child(1) .tasks')
+				.should('not.contain', tasks[0].title)
+		})
+
+		it('Should navigate to the task when the task card is clicked', () => {
+			const tasks = TaskFactory.create(5, {
+				id: '{increment}',
+				list_id: 1,
+				bucket_id: 1,
+			})
+			cy.visit('/lists/1/kanban')
+
+			cy.getSettled('.kanban .bucket .tasks .task')
+				.contains(tasks[0].title)
+				.should('be.visible')
+				.click()
+
+			cy.url()
+				.should('contain', `/tasks/${tasks[0].id}`)
+		})
+
+		it('Should remove a task from the kanban board when moving it to another list', () => {
+			const lists = ListFactory.create(2)
+			BucketFactory.create(2, {
+				list_id: '{increment}',
+			})
+			const tasks = TaskFactory.create(5, {
+				id: '{increment}',
+				list_id: 1,
+				bucket_id: 1,
+			})
+			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')
+				.contains('Move task')
+				.click()
+			cy.get('.task-view .content.details .field .multiselect.control .input-wrapper input')
+				.type(`${lists[1].title}{enter}`)
+			// The requests happen with a 200ms timeout. Because of that, the results are not yet there when cypress
+			// presses enter and we can't simulate pressing on enter to select the item.
+			cy.get('.task-view .content.details .field .multiselect.control .search-results')
+				.children()
+				.first()
+				.click()
+
+			cy.get('.global-notification', { timeout: 1000 })
+				.should('contain', 'Success')
+			cy.go('back')
+			cy.get('.kanban .bucket')
+				.should('not.contain', task.title)
+		})
+	})
+
+	describe('List history', () => {
+		it('should show a list history on the home page', () => {
+			const lists = ListFactory.create(6)
+
+			cy.visit('/')
+			cy.get('h3')
+				.contains('Last viewed')
+				.should('not.exist')
+
+			cy.visit(`/lists/${lists[0].id}`)
+			cy.visit(`/lists/${lists[1].id}`)
+			cy.visit(`/lists/${lists[2].id}`)
+			cy.visit(`/lists/${lists[3].id}`)
+			cy.visit(`/lists/${lists[4].id}`)
+			cy.visit(`/lists/${lists[5].id}`)
+
+			cy.visit('/')
+			cy.get('h3')
+				.contains('Last viewed')
+				.should('exist')
+			cy.get('.list-cards-wrapper-2-rows')
+				.should('not.contain', lists[0].title)
+				.should('contain', lists[1].title)
+				.should('contain', lists[2].title)
+				.should('contain', lists[3].title)
+				.should('contain', lists[4].title)
+				.should('contain', lists[5].title)
+		})
+	})
+})

cypress/integration/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/integration/task/task.spec.js

@@ -6,57 +6,21 @@ import {TaskCommentFactory} from '../../factories/task_comment'
 import {UserFactory} from '../../factories/user'
 import {NamespaceFactory} from '../../factories/namespace'
 import {UserListFactory} from '../../factories/users_list'
+
+import '../../support/authenticateUser'
 import {TaskAssigneeFactory} from '../../factories/task_assignee'
 import {LabelFactory} from '../../factories/labels'
 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', () => {
@@ -153,7 +116,6 @@ describe('Task', () => {
 				.should('be.visible')
 				.should('contain', 'Done')
 			cy.get('.task-view .action-buttons p.created')
-				.scrollIntoView()
 				.should('be.visible')
 				.should('contain', 'Done')
 		})
@@ -166,7 +128,7 @@ describe('Task', () => {
 			cy.visit(`/tasks/${tasks[0].id}`)
 
 			cy.get('.task-view .action-buttons .button')
-				.contains('Mark task done!')
+				.contains('Done!')
 				.click()
 
 			cy.get('.task-view .heading .is-done')
@@ -202,7 +164,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')
@@ -247,7 +209,7 @@ describe('Task', () => {
 			cy.visit(`/tasks/${tasks[0].id}`)
 
 			cy.get('.task-view .action-buttons .button')
-				.contains('Move')
+				.contains('Move task')
 				.click()
 			cy.get('.task-view .content.details .field .multiselect.control .input-wrapper input')
 				.type(`${lists[1].title}{enter}`)
@@ -274,7 +236,7 @@ describe('Task', () => {
 
 			cy.get('.task-view .action-buttons .button')
 				.should('be.visible')
-				.contains('Delete')
+				.contains('Delete task')
 				.click()
 			cy.get('.modal-mask .modal-container .modal-content .header')
 				.should('contain', 'Delete this task')
@@ -334,7 +296,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')
@@ -354,7 +316,7 @@ describe('Task', () => {
 			cy.visit(`/tasks/${tasks[0].id}`)
 
 			cy.get('.task-view .action-buttons .button')
-				.contains('Add Labels')
+				.contains('Add labels')
 				.should('be.visible')
 				.click()
 			cy.get('.task-view .details.labels-list .multiselect input')
@@ -377,35 +339,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', () => {
@@ -421,13 +372,13 @@ describe('Task', () => {
 
 			cy.visit(`/tasks/${tasks[0].id}`)
 
-			cy.getSettled('.task-view .details.labels-list .multiselect .input-wrapper')
+			cy.get('.task-view .details.labels-list .multiselect .input-wrapper')
 				.should('be.visible')
 				.should('contain', labels[0].title)
-			cy.getSettled('.task-view .details.labels-list .multiselect .input-wrapper')
+			cy.get('.task-view .details.labels-list .multiselect .input-wrapper')
 				.children()
 				.first()
-				.get('[data-cy="taskDetail.removeLabel"]')
+				.get('a.delete')
 				.click()
 
 			cy.get('.global-notification')
@@ -450,7 +401,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 +415,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/integration/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/integration/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 a.dropdown-item')
+			.contains('Logout')
+			.click()
+
+		cy.url()
+			.should('contain', '/login')
+	})
+})

cypress/integration/user/registration.spec.js

@@ -25,6 +25,7 @@ context('Registration', () => {
 		cy.get('#username').type(fixture.username)
 		cy.get('#email').type(fixture.email)
 		cy.get('#password').type(fixture.password)
+		cy.get('#passwordValidation').type(fixture.password)
 		cy.get('#register-submit').click()
 		cy.url().should('include', '/')
 		cy.clock(1625656161057) // 13:00
@@ -42,6 +43,7 @@ context('Registration', () => {
 		cy.get('#username').type(fixture.username)
 		cy.get('#email').type(fixture.email)
 		cy.get('#password').type(fixture.password)
+		cy.get('#passwordValidation').type(fixture.password)
 		cy.get('#register-submit').click()
 		cy.get('div.message.danger').contains('A user with this username already exists.')
 	})

cypress/integration/user/settings.spec.js

@@ -8,14 +8,12 @@ describe('User Settings', () => {
 	})
 
 	it('Changes the user avatar', () => {
-		cy.intercept(`${Cypress.env('API_URL')}/user/settings/avatar/upload`).as('uploadAvatar')
-		
 		cy.visit('/user/settings/avatar')
 
 		cy.get('input[name=avatarProvider][value=upload]')
 			.click()
-		cy.get('input[type=file]', {timeout: 1000})
-			.selectFile('cypress/fixtures/image.jpg', {force: true}) // The input is not visible, but on purpose
+		cy.get('input[type=file]', { timeout: 1000 })
+			.attachFile('image.jpg')
 		cy.get('.vue-handler-wrapper.vue-handler-wrapper--south .vue-simple-handler.vue-simple-handler--south')
 			.trigger('mousedown', {which: 1})
 			.trigger('mousemove', {clientY: 100})
@@ -24,7 +22,7 @@ describe('User Settings', () => {
 			.contains('Upload Avatar')
 			.click()
 
-		cy.wait('@uploadAvatar')
+		cy.wait(3000) // Wait for the request to finish
 		cy.get('.global-notification')
 			.should('contain', 'Success')
 	})

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/support/index.js

@@ -1,5 +1,6 @@
 
 import './commands'
+import 'cypress-file-upload'
 import '@4tw/cypress-drag-drop'
 
 // see https://github.com/cypress-io/cypress/issues/702#issuecomment-587127275

cypress/support/updateUserSettings.js

@@ -1,26 +0,0 @@
-
-export function updateUserSettings(settings) {
-	const token = `Bearer ${window.localStorage.getItem('token')}`
-	
-	return cy.request({
-		method: 'GET',
-		url: `${Cypress.env('API_URL')}/user`,
-		headers: {
-			'Authorization': token,
-		},
-	})
-		.its('body')
-		.then(oldSettings => {
-			return cy.request({
-				method: 'POST',
-				url: `${Cypress.env('API_URL')}/user/settings/general`,
-				headers: {
-					'Authorization': token,
-				},
-				body: {
-					...oldSettings,
-					...settings,
-				},
-			})
-		})
-}

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,6 +1,6 @@
 [build]
-  command = "pnpm run build"
-  publish = "dist-preview"
+  command = "yarn build"
+  publish = "dist"
 
 [[redirects]]
   from = "/*"

nginx.conf

@@ -6,110 +6,79 @@ pid        /var/run/nginx.pid;
 
 
 events {
-	worker_connections  1024;
+    worker_connections  1024;
 }
 
 
 http {
-	include       /etc/nginx/mime.types;
-	default_type  application/octet-stream;
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
 
-	types {
-		application/manifest+json webmanifest;
-	}
+    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                      '$status $body_bytes_sent "$http_referer" '
+                      '"$http_user_agent" "$http_x_forwarded_for"';
 
-	log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
-					  '$status $body_bytes_sent "$http_referer" '
-					  '"$http_user_agent" "$http_x_forwarded_for"';
+    access_log  /var/log/nginx/access.log  main;
 
-	access_log  /var/log/nginx/access.log  main;
+    sendfile        on;
+    #tcp_nopush     on;
 
-	sendfile        on;
-	#tcp_nopush     on;
+    keepalive_timeout  65;
 
-	keepalive_timeout  65;
+    gzip  on;
+    gzip_disable "msie6";
 
-	gzip  on;
+    gzip_vary on;
+    gzip_proxied any;
+    gzip_comp_level 6;
+    gzip_buffers 16 8k;
+    gzip_http_version 1.1;
+    gzip_min_length 256;
+    gzip_types text/plain text/css application/json application/x-javascript application/javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon audio/wav;
 
-	gzip_vary on;
-	gzip_proxied any;
-	gzip_comp_level 6;
-	gzip_buffers 16 8k;
-	gzip_http_version 1.1;
-	gzip_min_length 256;
-	gzip_types
-		text/plain
-		text/css
-		application/json
-		application/x-javascript
-		application/javascript
-		text/xml
-		application/xml
-		application/xml+rss
-		text/javascript
-		application/vnd.ms-fontobject
-		application/x-font-ttf
-		font/opentype
-		image/svg+xml
-		image/x-icon
-		audio/wav;
+    map_hash_max_size 128;
+    map_hash_bucket_size 128;
 
-	map_hash_max_size 128;
-	map_hash_bucket_size 128;
+    # Expires map
+    map $sent_http_content_type $expires {
+        default                       off;
+        text/html                     max;
+        text/css                      max;
+        application/javascript        max;
+        text/javascript               max;
+        application/vnd.ms-fontobject max;
+        application/x-font-ttf        max;
+        font/opentype                 max;
+        font/woff2                    max;
+        image/svg+xml                 max;
+        image/x-icon                  max;
+        audio/wav                     max;
+        ~image/                       max;
+        ~font/                        max;
+    }
 
-	# Expires map
-	map $sent_http_content_type $expires {
-		default                       off;
-		text/css                      max;
-		application/javascript        max;
-		text/javascript               max;
-		application/vnd.ms-fontobject max;
-		application/x-font-ttf        max;
-		font/opentype                 max;
-		font/woff2                    max;
-		image/svg+xml                 max;
-		image/x-icon                  max;
-		audio/wav                     max;
-		~images/                      max;
-		~font/                        max;
-	}
+    server {
+        listen 80;
+        listen 81  default_server http2 proxy_protocol; ## Needed when behind HAProxy with SSL termination + HTTP/2 support
 
-	server {
-		listen 80;
-		listen 81  default_server http2 proxy_protocol; ## Needed when behind HAProxy with SSL termination + HTTP/2 support
+        server_name  _;
 
-		server_name  _;
+        expires $expires;
 
-		expires $expires;
+        location ~* .(txt|webmanifest|css|js|mjs|map|svg|jpg|jpeg|png|ico|ttf|woff|woff2|wav)$ {
+            root   /usr/share/nginx/html;
+            try_files $uri $uri/ =404;
+        }
 
-		root   /usr/share/nginx/html;
+        location / {
+            root   /usr/share/nginx/html;
+            try_files $uri $uri/ /index.html;
+            index  index.html;
+        }
 
-		# all assets contain hash in filename, cache forever
-		location ^~ /assets/ {
-			add_header Cache-Control "public, max-age=31536000, s-maxage=31536000, immutable";
-			try_files $uri =404;
-		}
-
-		# all workbox scripts are compiled with hash in filename, cache forever3
-		location ^~ /workbox- {
-			add_header Cache-Control "public, max-age=31536000, s-maxage=31536000, immutable";
-			try_files $uri =404;
-		}
-
-		# assume that everything else is handled by the application router, by injecting the index.html.
-		location / {
-			autoindex off;
-			expires off;
-			add_header Cache-Control "public, max-age=0, s-maxage=0, must-revalidate" always;
-			try_files $uri /index.html =404;
-		}
-
-		location ~* .(txt|webmanifest|css|js|mjs|map|svg|jpg|jpeg|png|ico|ttf|woff|woff2|wav)$ {
-			try_files $uri $uri/ =404;
-		}
-
-		error_page   500 502 503 504  /50x.html;
-		location = /50x.html {
-		}
-	}
+        error_page   500 502 503 504  /50x.html;
+        location = /50x.html {
+            root   /usr/share/nginx/html;
+        }
+    }
 }

package.json

@@ -5,110 +5,144 @@
   "scripts": {
     "serve": "vite",
     "serve:dist-dev": "node scripts/serve-dist.js",
-    "serve:dist": "vite preview --port 4173",
+    "serve:dist": "vite preview",
     "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/",
     "lint": "eslint --ignore-pattern '*.test.*' ./src --ext .vue,.js,.ts",
+    "lint:markup": "vue-tsc --noEmit",
     "cypress:open": "cypress open",
-    "test:unit": "vitest --run",
-    "test:unit-watch": "vitest watch",
+    "test:unit": "vitest run",
     "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",
-    "@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",
+    "@github/hotkey": "1.6.1",
+    "@kyvg/vue3-notification": "2.3.4",
+    "@sentry/tracing": "6.16.1",
+    "@sentry/vue": "6.16.1",
+    "@vue/compat": "3.2.26",
+    "@vueuse/core": "7.5.2",
+    "@vueuse/router": "7.5.2",
     "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",
-    "flatpickr": "4.6.13",
+    "codemirror": "5.65.0",
+    "copy-to-clipboard": "3.3.1",
+    "date-fns": "2.28.0",
+    "dompurify": "2.3.4",
+    "easymde": "2.15.0",
+    "flatpickr": "4.6.9",
     "flexsearch": "0.7.21",
-    "floating-vue": "2.0.0-beta.20",
-    "highlight.js": "11.7.0",
+    "highlight.js": "11.3.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.8",
     "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",
-    "zhyswan-vuedraggable": "4.1.3"
+    "ufo": "0.7.9",
+    "v-tooltip": "4.0.0-beta.6",
+    "vue": "3.2.26",
+    "vue-advanced-cropper": "2.7.0",
+    "vue-drag-resize": "2.0.3",
+    "vue-flatpickr-component": "9.0.5",
+    "vue-i18n": "9.2.0-beta.26",
+    "vue-router": "4.0.12",
+    "vuedraggable": "4.1.0",
+    "vuex": "4.0.2",
+    "workbox-precaching": "6.4.2"
   },
   "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",
-    "@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",
-    "wait-on": "6.0.1",
-    "workbox-cli": "6.5.4"
+    "@4tw/cypress-drag-drop": "2.1.0",
+    "@fortawesome/fontawesome-svg-core": "1.2.36",
+    "@fortawesome/free-regular-svg-icons": "5.15.4",
+    "@fortawesome/free-solid-svg-icons": "5.15.4",
+    "@fortawesome/vue-fontawesome": "3.0.0-5",
+    "@types/flexsearch": "0.7.2",
+    "@typescript-eslint/eslint-plugin": "5.9.0",
+    "@typescript-eslint/parser": "5.9.0",
+    "@vitejs/plugin-legacy": "1.6.4",
+    "@vitejs/plugin-vue": "2.0.1",
+    "@vue/eslint-config-typescript": "10.0.0",
+    "autoprefixer": "10.4.1",
+    "axios": "0.24.0",
+    "browserslist": "4.19.1",
+    "caniuse-lite": "1.0.30001296",
+    "cypress": "9.2.0",
+    "cypress-file-upload": "5.0.8",
+    "esbuild": "0.14.10",
+    "eslint": "8.6.0",
+    "eslint-plugin-vue": "8.2.0",
+    "express": "4.17.2",
+    "faker": "5.5.3",
+    "netlify-cli": "8.6.4",
+    "happy-dom": "2.25.1",
+    "postcss": "8.4.5",
+    "postcss-preset-env": "7.2.0",
+    "rollup": "2.63.0",
+    "rollup-plugin-visualizer": "5.5.2",
+    "sass": "1.45.2",
+    "slugify": "1.6.5",
+    "typescript": "4.5.4",
+    "vite": "2.7.10",
+    "vite-plugin-pwa": "0.11.12",
+    "vite-svg-loader": "3.1.1",
+    "vitest": "0.0.132",
+    "vue-tsc": "0.30.2",
+    "wait-on": "6.0.0",
+    "workbox-cli": "6.4.2"
+  },
+  "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": 2021
+    },
+    "ignorePatterns": [
+      "*.test.*",
+      "cypress/*"
+    ],
+    "globals": {
+      "defineProps": "readonly"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
   },
   "license": "AGPL-3.0-or-later",
-  "packageManager": "pnpm@7.18.1"
+  "packageManager": "yarn@1.22.17"
 }

renovate.json

@@ -3,28 +3,5 @@
   "labels": ["dependencies"],
   "extends": [
     "config:base"
-  ],
-  "packageRules": [
-    {
-      "matchPackageNames": ["netlify-cli", "happy-dom"],
-      "extends": ["schedule:weekly"]
-    },
-    {
-      "groupName": "caniuse-and-related",
-      "matchPackageNames": ["caniuse-lite", "browserslist"],
-      "extends": ["schedule:weekly"]
-    },
-    {
-      "groupName": "vueuse",
-      "matchPackagePrefixes": [
-        "@vueuse/"
-      ]
-    },
-    {
-      "matchDepTypes": ["devDependencies"],
-      "automerge": true,
-      "automergeStrategy": "squash",
-      "automergeType": "pr"
-    }
   ]
 }

run.sh

@@ -16,7 +16,7 @@ VIKUNJA_API_URL=$(echo $VIKUNJA_API_URL |sed 's/\//\\\//g')
 sed -i "s/http\:\/\/localhost\:3456//g" /usr/share/nginx/html/index.html # replacing in two steps to make sure api urls from releases are properly replaced as well
 sed -i "s/'\/api\/v1/'$VIKUNJA_API_URL/g" /usr/share/nginx/html/index.html
 sed -i "s/\.SENTRY_ENABLED = false/\.SENTRY_ENABLED = $VIKUNJA_SENTRY_ENABLED/g" /usr/share/nginx/html/index.html
-sed -i "s|\.SENTRY_DSN = '.*'|\.SENTRY_DSN = '$VIKUNJA_SENTRY_DSN'|g" /usr/share/nginx/html/index.html
+sed -i "s/\.SENTRY_DSN = '.*'/\.SENTRY_DSN = '$VIKUNJA_SENTRY_DSN'/g" /usr/share/nginx/html/index.html
 
 sed -i "s/listen 80/listen $VIKUNJA_HTTP_PORT/g" /etc/nginx/nginx.conf
 sed -i "s/listen 443/listen $VIKUNJA_HTTPS_PORT/g" /etc/nginx/nginx.conf

scripts/deploy-preview-netlify.js

@@ -1,23 +1,20 @@
-const { exec } = require('child_process')
+const slugify = require('slugify')
+const {exec} = require('child_process')
+const axios = require('axios')
 
 const BOT_USER_ID = 513
 const giteaToken = process.env.GITEA_TOKEN
 const siteId = process.env.NETLIFY_SITE_ID
-const branchSlug = String(process.env.DRONE_SOURCE_BRANCH)
-						.trim()
-						.normalize('NFKD')
-						.toLowerCase()
-						.replace(/[.\s/]/g, '-')
-						.replace(/[^A-Za-z\d-]/g, '')
+const branchSlug = slugify(process.env.DRONE_SOURCE_BRANCH)
 const prNumber = process.env.DRONE_PULL_REQUEST
 
 const prIssueCommentsUrl = `https://kolaente.dev/api/v1/repos/vikunja/frontend/issues/${prNumber}/comments`
-const alias = `${prNumber}-${branchSlug}`.substring(0,37)
+const alias = `${prNumber}-${branchSlug}`
 const fullPreviewUrl = `https://${alias}--vikunja-frontend-preview.netlify.app`
 
 const promiseExec = cmd => {
 	return new Promise((resolve, reject) => {
-		exec(cmd, (error, stdout) => {
+		exec(cmd, (error, stdout, stderr) => {
 			if (error) {
 				reject(error)
 				return
@@ -34,7 +31,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 +39,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 +53,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
+55ce0faaa2c1919341617ccfaeccbb6029ac12107964ff488985cff13dd952f1a991df3ab0d4b0705deb761e508e6434  ./scripts/deploy-preview-netlify.js

scripts/serve-dist.js

@@ -3,7 +3,7 @@ const express = require('express')
 const app = express()
 
 const p = path.join(__dirname, '..', 'dist-dev')
-const port = 4173
+const port = 5000
 
 app.use(express.static(p))
 // Handle urls set by the frontend

src/App.vue

@@ -1,7 +1,7 @@
 <template>
 	<ready>
 		<template v-if="authUser">
-			<TheNavigation/>
+			<top-navigation/>
 			<content-auth/>
 		</template>
 		<content-link-share v-else-if="authLinkShare"/>
@@ -10,20 +10,24 @@
 		</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'
 
 import Notification from '@/components/misc/notification.vue'
 import KeyboardShortcuts from './components/misc/keyboard-shortcuts/index.vue'
-import TheNavigation from '@/components/home/TheNavigation.vue'
+import TopNavigation from './components/home/topNavigation.vue'
 import ContentAuth from './components/home/contentAuth.vue'
 import ContentLinkShare from './components/home/contentLinkShare.vue'
 import NoAuthWrapper from '@/components/misc/no-auth-wrapper.vue'
@@ -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)
+useBodyClass('is-touch', isTouchDevice)
+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'})
+const {t} = useI18n()
 
 // 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))
+// setup passwort reset redirect
+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,20 @@
-<!-- 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
-
-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 {
+  inheritAttrs: false,
+}
 </script>
 
 <script lang="ts" setup>
@@ -55,41 +22,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 the attribute rel to "noopener" but make it possible to overwrite this by the user.
+	if ('href' in attrs) {
+		nodeName = 'a'
+		bindings = {rel: 'noopener'}
+	}
+
+	componentNodeName.value = nodeName
+	elementBindings.value = {
+		...bindings,
+		...attrs,
+	}
+})
+
+const isButton = computed(() => componentNodeName.value === 'button')
 </script>
 
 <style lang="scss">
@@ -108,13 +101,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/dateRanges.ts

@@ -1,21 +0,0 @@
-export const DATE_RANGES = {
-	// Format: 
-	// Key is the title, as a translation string, the first entry of the value array 
-	// is the "from" date, the second one is the "to" date.
-	'today': ['now/d', 'now/d+1d'],
-
-	'lastWeek': ['now/w-1w', 'now/w-2w'],
-	'thisWeek': ['now/w', 'now/w+1w'],
-	'restOfThisWeek': ['now', 'now/w+1w'],
-	'nextWeek': ['now/w+1w', 'now/w+2w'],
-	'next7Days': ['now', 'now+7d'],
-
-	'lastMonth': ['now/M-1M', 'now/M-2M'],
-	'thisMonth': ['now/M', 'now/M+1M'],
-	'restOfThisMonth': ['now', 'now/M+1M'],
-	'nextMonth': ['now/M+1M', 'now/M+2M'],
-	'next30Days': ['now', 'now+30d'],
-	
-	'thisYear': ['now/y', 'now/y+1y'],
-	'restOfThisYear': ['now', 'now/y+1y'],
-}

src/components/date/datemathHelp.vue

@@ -1,131 +0,0 @@
-<template>
-	<card
-		class="has-no-shadow how-it-works-modal"
-		:title="$t('input.datemathHelp.title')">
-		<p>
-			{{ $t('input.datemathHelp.intro') }}
-		</p>
-		<p>
-			<i18n-t keypath="input.datemathHelp.expression" scope="global">
-				<code>now</code>
-				<code>||</code>
-			</i18n-t>
-		</p>
-		<p>
-			<i18n-t keypath="input.datemathHelp.similar" scope="global">
-				<BaseButton
-					href="https://grafana.com/docs/grafana/latest/dashboards/time-range-controls/"
-					target="_blank">
-					Grafana
-				</BaseButton>
-				<BaseButton
-					href="https://www.elastic.co/guide/en/elasticsearch/reference/7.3/common-options.html#date-math"
-					target="_blank">
-					Elasticsearch
-				</BaseButton>
-			</i18n-t>
-		</p>
-		<p>{{ $t('misc.forExample') }}</p>
-		<ul>
-			<li><code>+1d</code>{{ $t('input.datemathHelp.add1Day') }}</li>
-			<li><code>-1d</code>{{ $t('input.datemathHelp.minus1Day') }}</li>
-			<li><code>/d</code>{{ $t('input.datemathHelp.roundDay') }}</li>
-		</ul>
-		<p>{{ $t('input.datemathHelp.supportedUnits') }}</p>
-		<table class="table">
-			<tbody>
-			<tr>
-				<td><code>s</code></td>
-				<td>{{ $t('input.datemathHelp.units.seconds') }}</td>
-			</tr>
-			<tr>
-				<td><code>m</code></td>
-				<td>{{ $t('input.datemathHelp.units.minutes') }}</td>
-			</tr>
-			<tr>
-				<td><code>h</code></td>
-				<td>{{ $t('input.datemathHelp.units.hours') }}</td>
-			</tr>
-			<tr>
-				<td><code>H</code></td>
-				<td>{{ $t('input.datemathHelp.units.hours') }}</td>
-			</tr>
-			<tr>
-				<td><code>d</code></td>
-				<td>{{ $t('input.datemathHelp.units.days') }}</td>
-			</tr>
-			<tr>
-				<td><code>w</code></td>
-				<td>{{ $t('input.datemathHelp.units.weeks') }}</td>
-			</tr>
-			<tr>
-				<td><code>M</code></td>
-				<td>{{ $t('input.datemathHelp.units.months') }}</td>
-			</tr>
-			<tr>
-				<td><code>y</code></td>
-				<td>{{ $t('input.datemathHelp.units.years') }}</td>
-			</tr>
-			</tbody>
-		</table>
-
-		<p>{{ $t('input.datemathHelp.someExamples') }}</p>
-		<table class="table">
-			<tbody>
-			<tr>
-				<td><code>now</code></td>
-				<td>{{ $t('input.datemathHelp.examples.now') }}</td>
-			</tr>
-			<tr>
-				<td><code>now+24h</code></td>
-				<td>{{ $t('input.datemathHelp.examples.in24h') }}</td>
-			</tr>
-			<tr>
-				<td><code>now/d</code></td>
-				<td>{{ $t('input.datemathHelp.examples.today') }}</td>
-			</tr>
-			<tr>
-				<td><code>now/w</code></td>
-				<td>{{ $t('input.datemathHelp.examples.beginningOfThisWeek') }}</td>
-			</tr>
-			<tr>
-				<td><code>now/w+1w</code></td>
-				<td>{{ $t('input.datemathHelp.examples.endOfThisWeek') }}</td>
-			</tr>
-			<tr>
-				<td><code>now+30d</code></td>
-				<td>{{ $t('input.datemathHelp.examples.in30Days') }}</td>
-			</tr>
-			<tr>
-				<td><code>{{ exampleDate }}||+1M/d</code></td>
-				<td>
-					<i18n-t keypath="input.datemathHelp.examples.datePlusMonth" scope="global">
-						<code>{{ exampleDate }}</code>
-					</i18n-t>
-				</td>
-			</tr>
-			</tbody>
-		</table>
-	</card>
-</template>
-
-<script lang="ts" setup>
-import {formatDate} from '@/helpers/time/formatDate'
-import BaseButton from '@/components/base/BaseButton.vue'
-
-const exampleDate = formatDate(new Date(), 'yyyy-MM-dd')
-</script>
-
-<style scoped lang="scss">
-.how-it-works-modal {
-	font-size: 1rem;
-}
-
-p {
-	display: inline-block !important;
-}
-
-.base-button {
-	display: inline;
-}
-</style>

src/components/date/datepickerWithRange.vue

@@ -1,275 +0,0 @@
-<template>
-	<div class="datepicker-with-range-container">
-		<popup>
-			<template #trigger="{toggle}">
-				<slot name="trigger" :toggle="toggle" :buttonText="buttonText"></slot>
-			</template>
-			<template #content="{isOpen}">
-				<div class="datepicker-with-range" :class="{'is-open': isOpen}">
-					<div class="selections">
-						<BaseButton @click="setDateRange(null)" :class="{'is-active': customRangeActive}">
-							{{ $t('misc.custom') }}
-						</BaseButton>
-						<BaseButton
-							v-for="(value, text) in DATE_RANGES"
-							:key="text"
-							@click="setDateRange(value)"
-							:class="{'is-active': from === value[0] && to === value[1]}">
-							{{ $t(`input.datepickerRange.ranges.${text}`) }}
-						</BaseButton>
-					</div>
-					<div class="flatpickr-container input-group">
-						<label class="label">
-							{{ $t('input.datepickerRange.from') }}
-							<div class="field has-addons">
-								<div class="control is-fullwidth">
-									<input class="input" type="text" v-model="from"/>
-								</div>
-								<div class="control">
-									<x-button icon="calendar" variant="secondary" data-toggle/>
-								</div>
-							</div>
-						</label>
-						<label class="label">
-							{{ $t('input.datepickerRange.to') }}
-							<div class="field has-addons">
-								<div class="control is-fullwidth">
-									<input class="input" type="text" v-model="to"/>
-								</div>
-								<div class="control">
-									<x-button icon="calendar" variant="secondary" data-toggle/>
-								</div>
-							</div>
-						</label>
-						<flat-pickr
-							:config="flatPickerConfig"
-							v-model="flatpickrRange"
-						/>
-
-						<p>
-							{{ $t('input.datemathHelp.canuse') }}
-							<BaseButton class="has-text-primary" @click="showHowItWorks = true">
-								{{ $t('input.datemathHelp.learnhow') }}
-							</BaseButton>
-						</p>
-
-						<modal
-							:enabled="showHowItWorks"
-							@close="() => showHowItWorks = false"
-							transition-name="fade"
-							:overflow="true"
-							variant="hint-modal"
-						>
-							<DatemathHelp/>
-						</modal>
-					</div>
-				</div>
-			</template>
-		</popup>
-	</div>
-</template>
-
-<script lang="ts" setup>
-import {computed, ref, watch} from 'vue'
-import {useI18n} from 'vue-i18n'
-
-import flatPickr from 'vue-flatpickr-component'
-import 'flatpickr/dist/flatpickr.css'
-
-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 {t} = useI18n({useScope: 'global'})
-
-const emit = defineEmits(['update:modelValue'])
-const props = defineProps({
-	modelValue: {
-		required: false,
-	},
-})
-
-// FIXME: This seems to always contain the default value - that breaks the picker
-const weekStart = computed(() => authStore.settings.weekStart ?? 0)
-const flatPickerConfig = computed(() => ({
-	altFormat: t('date.altFormatLong'),
-	altInput: true,
-	dateFormat: 'Y-m-d H:i',
-	enableTime: false,
-	wrap: true,
-	mode: 'range',
-	locale: {
-		firstDayOf7Days: weekStart.value,
-	},
-}))
-
-const showHowItWorks = ref(false)
-
-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 = {
-		dateFrom: from.value === '' ? null : from.value,
-		dateTo: to.value === '' ? null : to.value,
-	}
-	emit('update:modelValue', args)
-}
-
-watch(
-	() => flatpickrRange.value,
-	(newVal: string | null) => {
-		if (newVal === null) {
-			return
-		}
-
-		const [fromDate, toDate] = newVal.split(' to ')
-
-		if (typeof fromDate === 'undefined' || typeof toDate === 'undefined') {
-			return
-		}
-
-		from.value = fromDate
-		to.value = toDate
-
-		emitChanged()
-	},
-)
-watch(() => from.value, emitChanged)
-watch(() => to.value, emitChanged)
-
-function setDateRange(range: string[] | null) {
-	if (range === null) {
-		from.value = ''
-		to.value = ''
-
-		return
-	}
-
-	from.value = range[0]
-	to.value = range[1]
-}
-
-const customRangeActive = computed<boolean>(() => {
-	return !Object.values(DATE_RANGES).some(range => from.value === range[0] && to.value === range[1])
-})
-
-const buttonText = computed<string>(() => {
-	if (from.value !== '' && to.value !== '') {
-		return t('input.datepickerRange.fromto', {
-			from: from.value,
-			to: to.value,
-		})
-	}
-
-	return t('task.show.select')
-})
-</script>
-
-<style lang="scss" scoped>
-.datepicker-with-range-container {
-	position: relative;
-}
-
-:deep(.popup) {
-	z-index: 10;
-	margin-top: 1rem;
-	border-radius: $radius;
-	border: 1px solid var(--grey-200);
-	background-color: var(--white);
-	box-shadow: $shadow;
-
-	&.is-open {
-		width: 500px;
-		height: 320px;
-	}
-}
-
-.datepicker-with-range {
-	display: flex;
-	width: 100%;
-	height: 100%;
-	position: absolute;
-}
-
-:deep(.flatpickr-calendar) {
-	margin: 0 auto 8px;
-	box-shadow: none;
-}
-
-.flatpickr-container {
-	width: 70%;
-	border-left: 1px solid var(--grey-200);
-	padding: 1rem;
-	font-size: .9rem;
-
-	// Flatpickr has no option to use it without an input field so we're hiding it instead
-	:deep(input.form-control.input) {
-		height: 0;
-		padding: 0;
-		border: 0;
-	}
-
-	.field .control :deep(.button) {
-		border: 1px solid var(--input-border-color);
-		height: 2.25rem;
-
-		&:hover {
-			border: 1px solid var(--input-hover-border-color);
-		}
-	}
-
-	.label, .input, :deep(.button) {
-		font-size: .9rem;
-	}
-}
-
-.selections {
-	width: 30%;
-	display: flex;
-	flex-direction: column;
-	padding-top: .5rem;
-	overflow-y: scroll;
-
-	button {
-		display: block;
-		width: 100%;
-		text-align: left;
-		padding: .5rem 1rem;
-		transition: $transition;
-		font-size: .9rem;
-		color: var(--text);
-		background: transparent;
-		border: 0;
-		cursor: pointer;
-
-		&.is-active {
-			color: var(--primary);
-		}
-
-		&:hover, &.is-active {
-			background-color: var(--grey-100);
-		}
-	}
-}
-</style>

src/components/home/Logo.vue

@@ -1,12 +1,9 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useNow } from '@vueuse/core'
-
 import LogoFull from '@/assets/logo-full.svg?component'
 import LogoFullPride from '@/assets/logo-full-pride.svg?component'
 
-const now = useNow()
-const Logo = computed(() => now.value.getMonth() === 5 ? LogoFullPride : LogoFull)
+const Logo = computed(() => new Date().getMonth() === 5 ? LogoFullPride : LogoFull)
 </script>
 
 <template>

src/components/home/MenuButton.vue

@@ -1,22 +1,20 @@
 <template>
-	<BaseButton
+	<button
+		type="button"
+		@click="$store.commit('toggleMenu')"
 		class="menu-show-button"
-		@click="baseStore.toggleMenu()"
-		@shortkey="() => baseStore.toggleMenu()"
+		@shortkey="() => $store.commit('toggleMenu')"
 		v-shortcut="'Control+e'"
 		:title="$t('keyboardShortcuts.toggleMenu')"
 		:aria-label="menuActive ? $t('misc.hideMenu') : $t('misc.showMenu')"
 	/>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import {computed} from 'vue'
-import {useBaseStore} from '@/stores/base'
+import {store} from '@/store'
 
-import BaseButton from '@/components/base/BaseButton.vue'
-
-const baseStore = useBaseStore()
-const menuActive = computed(() => baseStore.menuActive)
+const menuActive = computed(() => store.menuActive)
 </script>
 
 <style lang="scss" scoped>
@@ -24,6 +22,11 @@ $lineWidth: 2rem;
 $size: $lineWidth + 1rem;
 
 .menu-show-button {
+	// FIXME: create general button component
+	appearance: none;
+	background-color: transparent;
+	border: 0;
+
 	min-height: $size;
 	width: $size;
 

src/components/home/PoweredByLink.vue

@@ -1,11 +1,10 @@
 <template>
-    <BaseButton class="menu-bottom-link" :href="poweredByUrl" target="_blank">
+    <a class="menu-bottom-link" :href="poweredByUrl" target="_blank" rel="noreferrer noopener nofollow">
         {{ $t('misc.poweredBy') }}
-    </BaseButton>
+    </a>
 </template>
 
 <script setup lang="ts">
-import BaseButton from '@/components/base/BaseButton.vue'
 import {POWERED_BY as poweredByUrl} from '@/urls'
 </script>
 

src/components/home/contentAuth.vue

@@ -1,93 +1,68 @@
 <template>
-	<div class="content-auth">
-		<BaseButton
-			v-if="menuActive"
-			@click="baseStore.setMenuActive(false)"
-			class="menu-hide-button d-print-none"
-		>
-			<icon icon="times"/>
-		</BaseButton>
+	<div>
+		<a @click="$store.commit('menuActive', false)" class="menu-hide-button" v-if="menuActive">
+			<icon icon="times" />
+		</a>
 		<div
-			:class="{'has-background': background || blurHash}"
-			:style="{'background-image': blurHash && `url(${blurHash})`}"
+			:class="{'has-background': background}"
+			:style="{'background-image': background && `url(${background})`}"
 			class="app-container"
 		>
+			<navigation/>
 			<div
-				:class="{'is-visible': background}"
-				class="app-container-background background-fade-in d-print-none"
-				:style="{'background-image': background && `url(${background})`}"></div>
-			<navigation class="d-print-none"/>
-			<main
 				:class="[
 					{ 'is-menu-enabled': menuActive },
 					$route.name,
 				]"
 				class="app-content"
 			>
-				<BaseButton
-					v-if="menuActive"
-					@click="baseStore.setMenuActive(false)"
-					class="mobile-overlay d-print-none"
-				/>
+				<a @click="$store.commit('menuActive', false)" class="mobile-overlay" v-if="menuActive"></a>
 
 				<quick-actions/>
 
-				<router-view :route="routeWithModal" v-slot="{ Component }">
-					<keep-alive :include="['list.list', 'list.gantt', 'list.table', 'list.kanban']">
-						<component :is="Component"/>
-					</keep-alive>
+				<router-view/>
+
+				<router-view name="popup" v-slot="{ Component }">
+					<transition name="modal">
+						<component :is="Component" />
+					</transition>
 				</router-view>
 
-				<modal
-					:enabled="Boolean(currentModal)"
-					@close="closeModal()"
-					variant="scrolling"
-					class="task-detail-view-modal"
-				>
-					<component :is="currentModal"/>
-				</modal>
-
-				<BaseButton
-					class="keyboard-shortcuts-button d-print-none"
+				<a
+					class="keyboard-shortcuts-button"
 					@click="showKeyboardShortcuts()"
 					v-shortcut="'?'"
 				>
 					<icon icon="keyboard"/>
-				</BaseButton>
-			</main>
+				</a>
+			</div>
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
 import {watch, computed} from 'vue'
-import {useRoute} from 'vue-router'
+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'
+const store = useStore()
 
-import {useRouteWithModal} from '@/composables/useRouteWithModal'
-import {useRenewTokenOnFocus} from '@/composables/useRenewTokenOnFocus'
-
-const {routeWithModal, currentModal, closeModal} = useRouteWithModal()
-
-const baseStore = useBaseStore()
-const background = computed(() => baseStore.background)
-const blurHash = computed(() => baseStore.blurHash)
-const menuActive = computed(() => baseStore.menuActive)
+const background = computed(() => store.state.background)
+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.
@@ -105,20 +80,52 @@ watch(() => route.name as string, (routeName) => {
 				'migrate.start',
 				'migrate.wunderlist',
 				'namespaces.index',
-			].includes(routeName) ||
+			].includes(routeName) || 
 			routeName.startsWith('user.settings')
 		)
 	) {
-		baseStore.handleSetCurrentList({list: null})
+		store.dispatch(CURRENT_LIST, null)
 	}
 })
 
 // TODO: Reset the title if the page component does not set one itself
 
-useRenewTokenOnFocus()
+function useRenewTokenOnFocus() {
+	const router = useRouter()
+	
+	const userInfo = computed(() => store.state.auth.info)
+	const authenticated = computed(() => store.state.auth.authenticated)
 
-const labelStore = useLabelStore()
-labelStore.loadAllLabels()
+	// 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>
@@ -149,42 +156,40 @@ labelStore.loadAllLabels()
 }
 
 .app-container {
-	min-height: calc(100vh - 65px);
+  min-height: calc(100vh - 65px);
 
-	@media screen and (max-width: $tablet) {
-		padding-top: $navbar-height;
-	}
-}
+  @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 {
+    padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
+    z-index: 2;
 
-	@media screen and (max-width: $tablet) {
-		margin-left: 0;
-		min-height: calc(100vh - 4rem);
+    @media screen and (max-width: $tablet) {
+      margin-left: 0;
+      padding-top: 1.5rem;
+      min-height: calc(100vh - 4rem);
+    }
+
+    &.is-menu-enabled {
+      margin-left: $navbar-width;
+
+      @media screen and (max-width: $tablet) {
+        min-width: 100%;
+        margin-left: 0;
+      }
+    }
+
+	&.task\.detail {
+		padding-left: 0;
+		padding-right: 0;
 	}
 
-	@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;
-		}
-	}
-
-	// 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);
-	}
+    .card {
+      background: var(--white);
+    }
+  }
 }
 
 .mobile-overlay {
@@ -194,9 +199,7 @@ labelStore.loadAllLabels()
 	bottom: 0;
 	left: 0;
 	right: 0;
-	height: 100vh;
-	width: 100vw;
-	background: hsla(var(--grey-100-hsl), 0.8);
+	background: rgba(250, 250, 250, 0.8);
 	z-index: 5;
 	opacity: 0;
 	transition: all $transition;
@@ -215,19 +218,9 @@ labelStore.loadAllLabels()
 
 	color: var(--grey-500);
 	transition: color $transition;
-
+	
 	@media screen and (max-width: $tablet) {
 		display: none;
 	}
 }
-
-.content-auth {
-	position: relative;
-	z-index: 1;
-}
-
-.is-touch .content-auth,
-.content-auth.z-unset {
-	z-index: unset;
-}
 </style>

src/components/home/contentLinkShare.vue

@@ -1,21 +1,20 @@
 <template>
 	<div
-		:class="[background ? 'has-background' : '', $route.name as string +'-view']"
+		:class="[background ? 'has-background' : '', $route.name+'-view']"
 		:style="{'background-image': `url(${background})`}"
 		class="link-share-container"
 	>
 		<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

@@ -1,99 +1,101 @@
 <template>
-	<aside :class="{'is-active': menuActive}" class="namespace-container">
-		<nav class="menu top-menu">
+	<div :class="{'is-active': menuActive}" class="namespace-container">
+		<div class="menu top-menu">
 			<router-link :to="{name: 'home'}" class="logo">
-				<Logo width="164" height="48"/>
+				<Logo width="164" height="48" />
 			</router-link>
 			<ul class="menu-list">
 				<li>
-					<router-link :to="{ name: 'home'}" v-shortcut="'g o'">
-						<span class="menu-item-icon icon">
+					<router-link :to="{ name: 'home'}">
+						<span class="icon">
 							<icon icon="calendar"/>
 						</span>
 						{{ $t('navigation.overview') }}
 					</router-link>
 				</li>
 				<li>
-					<router-link :to="{ name: 'tasks.range'}" v-shortcut="'g u'">
-						<span class="menu-item-icon icon">
+					<router-link :to="{ name: 'tasks.range'}">
+						<span class="icon">
 							<icon :icon="['far', 'calendar-alt']"/>
 						</span>
 						{{ $t('navigation.upcoming') }}
 					</router-link>
 				</li>
 				<li>
-					<router-link :to="{ name: 'namespaces.index'}" v-shortcut="'g n'">
-						<span class="menu-item-icon icon">
+					<router-link :to="{ name: 'namespaces.index'}">
+						<span class="icon">
 							<icon icon="layer-group"/>
 						</span>
 						{{ $t('namespace.title') }}
 					</router-link>
 				</li>
 				<li>
-					<router-link :to="{ name: 'labels.index'}" v-shortcut="'g a'">
-						<span class="menu-item-icon icon">
+					<router-link :to="{ name: 'labels.index'}">
+						<span class="icon">
 							<icon icon="tags"/>
 						</span>
 						{{ $t('label.title') }}
 					</router-link>
 				</li>
 				<li>
-					<router-link :to="{ name: 'teams.index'}" v-shortcut="'g m'">
-						<span class="menu-item-icon icon">
+					<router-link :to="{ name: 'teams.index'}">
+						<span class="icon">
 							<icon icon="users"/>
 						</span>
 						{{ $t('team.title') }}
 					</router-link>
 				</li>
 			</ul>
-		</nav>
+		</div>
 
-		<nav class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}">
-			<template v-for="(n, nk) in namespaces" :key="n.id">
+		<aside 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
-							v-if="n.hexColor !== ''"
-							:color="n.hexColor"
-							class="mr-1"
-						/>
-						<span class="name">{{ namespaceTitles[nk] }}</span>
-						<div
-							class="icon menu-item-icon is-small toggle-lists-icon pl-2"
-							:class="{'active': typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true}"
-						>
-							<icon icon="chevron-down"/>
-						</div>
-						<span class="count" :class="{'ml-2 mr-0': n.id > 0}">
-							({{ namespaceListsCount[nk] }})
+						v-tooltip="namespaceTitles[nk]">
+						<span class="name">
+							<span
+								:style="{ backgroundColor: n.hexColor }"
+								class="color-bubble"
+								v-if="n.hexColor !== ''">
+							</span>
+							{{ namespaceTitles[nk] }}
 						</span>
-					</BaseButton>
-					<namespace-settings-dropdown class="menu-list-dropdown" :namespace="n" v-if="n.id > 0"/>
+					</span>
+					<a
+						class="icon is-small toggle-lists-icon"
+						:class="{'active': typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true}"
+						@click="toggleLists(n.id)"
+					>
+						<icon icon="chevron-down"/>
+					</a>
+					<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)"
-						group="namespace-lists"
+						:group="`namespace-${n.id}-lists`"
 						@start="() => drag = true"
-						@end="saveListPosition"
+						@end="e => saveListPosition(e, nk)"
 						handle=".handle"
-						:disabled="n.id < 0 || undefined"
-						tag="ul"
+						:disabled="n.id < 0 || null"
+						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,180 +105,176 @@
 					>
 						<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/>
-	</aside>
+		</aside>
+		<PoweredByLink />
+	</div>
 </template>
 
-<script setup lang="ts">
-import {ref, computed, onMounted, onBeforeMount} from 'vue'
-import draggable from 'zhyswan-vuedraggable'
-import type {SortableEvent} from 'sortablejs'
+<script>
+import {mapState} from 'vuex'
+import draggable from 'vuedraggable'
 
-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 {CURRENT_LIST, MENU_ACTIVE, LOADING, LOADING_MODULE} 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'
-
-const drag = ref(false)
-const dragOptions = {
-	animation: 100,
-	ghostClass: 'ghost',
-}
-
-const baseStore = useBaseStore()
-const namespaceStore = useNamespaceStore()
-const currentList = computed(() => baseStore.currentList)
-const menuActive = computed(() => baseStore.menuActive)
-const loading = computed(() => namespaceStore.isLoading)
 
 
-const namespaces = computed(() => {
-	return namespaceStore.namespaces.filter(n => !n.isArchived)
-})
-const activeLists = computed(() => {
-	return namespaces.value.map(({lists}) => {
-		return lists?.filter(item => {
-			return typeof item !== 'undefined' && !item.isArchived
-		})
-	})
-})
+export default {
+	name: 'navigation',
 
-const namespaceTitles = computed(() => {
-	return namespaces.value.map((namespace) => getNamespaceTitle(namespace))
-})
+	components: {
+		ListSettingsDropdown,
+		NamespaceSettingsDropdown,
+		draggable,
+		Logo,
+		PoweredByLink,
+	},
 
-const namespaceListsCount = computed(() => {
-	return namespaces.value.map((_, index) => activeLists.value[index]?.length ?? 0)
-})
-
-
-useEventListener('resize', resize)
-onMounted(() => resize())
-
-const listStore = useListStore()
-
-function resize() {
-	// Hide the menu by default on mobile
-	baseStore.setMenuActive(window.innerWidth >= 770)
-}
-
-function toggleLists(namespaceId: INamespace['id']) {
-	listsVisible.value[namespaceId] = !listsVisible.value[namespaceId]
-}
-
-const listsVisible = ref<{ [id: INamespace['id']]: boolean }>({})
-// FIXME: async action will be unfinished when component mounts
-onBeforeMount(async () => {
-	const namespaces = await namespaceStore.loadNamespaces()
-	namespaces.forEach(n => {
-		if (typeof listsVisible.value[n.id] === 'undefined') {
-			listsVisible.value[n.id] = true
+	data() {
+		return {
+			listsVisible: {},
+			drag: false,
+			dragOptions: {
+				animation: 100,
+				ghostClass: 'ghost',
+			},
+			listUpdating: {},
 		}
-	})
-})
+	},
+	computed: {
+		...mapState({
+			namespaces: state => state.namespaces.namespaces.filter(n => !n.isArchived),
+			currentList: CURRENT_LIST,
+			background: 'background',
+			menuActive: MENU_ACTIVE,
+			loading: state => state[LOADING] && state[LOADING_MODULE] === 'namespaces',
+		}),
+		activeLists() {
+			return this.namespaces.map(({lists}) => lists?.filter(item => !item.isArchived))
+		},
+		namespaceTitles() {
+			return this.namespaces.map((namespace, index) => {
+				const title = this.getNamespaceTitle(namespace)
+				return `${title} (${this.activeLists[index]?.length ?? 0})`
+			})
+		},
+	},
+	beforeCreate() {
+		// FIXME: async action in beforeCreate, might be unfinished when component mounts
+		this.$store.dispatch('namespaces/loadNamespaces')
+			.then(namespaces => {
+				namespaces.forEach(n => {
+					if (typeof this.listsVisible[n.id] === 'undefined') {
+						this.listsVisible[n.id] = true
+					}
+				})
+			})
+	},
+	created() {
+		window.addEventListener('resize', this.resize)
+	},
+	mounted() {
+		this.resize()
+	},
+	methods: {
+		toggleFavoriteList(list) {
+			// The favorites pseudo list is always favorite
+			// Archived lists cannot be marked favorite
+			if (list.id === -1 || list.isArchived) {
+				return
+			}
+			this.$store.dispatch('lists/toggleListFavorite', list)
+		},
+		resize() {
+			// Hide the menu by default on mobile
+			this.$store.commit(MENU_ACTIVE, window.innerWidth >= 770)
+		},
+		toggleLists(namespaceId) {
+			this.listsVisible[namespaceId] = !this.listsVisible[namespaceId]
+		},
+		updateActiveLists(namespace, activeLists) {
+			// 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.
+			// instead we iterate over the non archived items in the old list and replace them with the ones in their new order
+			const lists = namespace.lists.map((item) => {
+				if (item.isArchived) {
+					return item
+				}
+				return activeLists.shift()
+			})
 
-function updateActiveLists(namespace: INamespace, activeLists: IList[]) {
-	// This is a bit hacky: since we do have to filter out the archived items from the list
-	// for vue draggable updating it is not as simple as replacing it.
-	// To work around this, we merge the active lists with the archived ones. Doing so breaks the order
-	// because now all archived lists are sorted after the active ones. This is fine because they are sorted 
-	// later when showing them anyway, and it makes the merging happening here a lot easier.
-	const lists = [
-		...activeLists,
-		...namespace.lists.filter(l => l.isArchived),
-	]
+			const newNamespace = {
+				...namespace,
+				lists,
+			}
 
-	namespaceStore.setNamespaceById({
-		...namespace,
-		lists,
-	})
-}
+			this.$store.commit('namespaces/setNamespaceById', newNamespace)
+		},
 
-const listUpdating = ref<{ [id: INamespace['id']]: boolean }>({})
+		async saveListPosition(e, namespaceIndex) {
+			const listsActive = this.activeLists[namespaceIndex]
+			const list = listsActive[e.newIndex]
+			const listBefore = listsActive[e.newIndex - 1] ?? null
+			const listAfter = listsActive[e.newIndex + 1] ?? null
+			this.listUpdating[list.id] = true
 
-async function saveListPosition(e: SortableEvent) {
-	if (!e.newIndex && e.newIndex !== 0) return
+			const position = calculateItemPosition(listBefore !== null ? listBefore.position : null, listAfter !== null ? listAfter.position : null)
 
-	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
-	listUpdating.value[list.id] = true
-
-	const position = calculateItemPosition(
-		listBefore !== null ? listBefore.position : null,
-		listAfter !== null ? listAfter.position : null,
-	)
-
-	try {
-		// create a copy of the list in order to not violate pinia manipulation
-		await listStore.updateList({
-			...list,
-			position,
-			namespaceId,
-		})
-	} finally {
-		listUpdating.value[list.id] = false
-	}
+			try {
+				// create a copy of the list in order to not violate vuex mutations
+				await this.$store.dispatch('lists/updateList', {
+					...list,
+					position,
+				})
+			} finally {
+				this.listUpdating[list.id] = false
+			}
+		},
+	},
 }
 </script>
 
@@ -286,19 +284,8 @@ $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 {
+	z-index: 6;
 	background: $vikunja-nav-background;
 	color: $vikunja-nav-color;
 	padding: 0 0 1rem;
@@ -311,241 +298,261 @@ $vikunja-nav-selected-width: 0.4rem;
 	overflow-x: auto;
 	width: $navbar-width;
 
+
 	@media screen and (max-width: $tablet) {
 		top: 0;
 		width: 70vw;
-		z-index: 20;
 	}
 
 	&.is-active {
 		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;
 			}
 		}
 
-		.menu-item-icon {
-			color: var(--grey-400);
+		.menu-label {
+			.color-bubble {
+				width: 14px !important;
+				height: 14px !important;
+			}
+
+			.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);
-
-			* {
-				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);
+				.name {
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
 			}
 
-			&.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;
+				}
+			}
+
+			a:hover {
+				background: transparent;
+			}
+
+			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: 2rem;
+			margin-right: 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 {
-	width: 2.5rem;
+	width: 32px;
 	flex-shrink: 0;
 }
 

src/components/home/topNavigation.vue

@@ -1,8 +1,9 @@
 <template>
-	<header
-		:class="{'has-background': background, 'menu-active': menuActive}"
+	<nav
+		:class="{'has-background': background}"
 		aria-label="main navigation"
-		class="navbar main-theme is-fixed-top d-print-none"
+		class="navbar main-theme is-fixed-top"
+		role="navigation"
 	>
 		<router-link :to="{name: 'home'}" class="logo-link">
 			<Logo width="164" height="48"/>
@@ -16,126 +17,121 @@
 					{{ 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">
+				<img :src="userAvatar" alt="" class="avatar" width="40" height="40"/>
 				<dropdown class="is-right" ref="usernameDropdown">
-					<template #trigger="{toggleOpen}">
+					<template #trigger>
 						<x-button
-							class="username-dropdown-trigger"
-							@click="toggleOpen()"
 							variant="secondary"
-							:shadow="false"
-						>
-							<img :src="authStore.avatarUrl" alt="" class="avatar" width="40" height="40"/>
-							<span class="username">{{ authStore.userDisplayName }}</span>
+							:shadow="false">
+							<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
-						:to="{name: 'user.settings'}"
-					>
+					<router-link :to="{name: 'user.settings'}" class="dropdown-item">
 						{{ $t('user.settings.title') }}
-					</dropdown-item>
-					<dropdown-item
-						v-if="imprintUrl"
+					</router-link>
+					<a
 						:href="imprintUrl"
-					>
+						class="dropdown-item"
+						target="_blank"
+						rel="noreferrer noopener nofollow"
+						v-if="imprintUrl">
 						{{ $t('navigation.imprint') }}
-					</dropdown-item>
-					<dropdown-item
-						v-if="privacyPolicyUrl"
+					</a>
+					<a
 						:href="privacyPolicyUrl"
-					>
+						class="dropdown-item"
+						target="_blank"
+						rel="noreferrer noopener nofollow"
+						v-if="privacyPolicyUrl">
 						{{ $t('navigation.privacy') }}
-					</dropdown-item>
-					<dropdown-item
-						@click="baseStore.setKeyboardShortcutsActive(true)"
-					>
+					</a>
+					<a @click="$store.commit('keyboardShortcutsActive', true)" class="dropdown-item">
 						{{ $t('keyboardShortcuts.title') }}
-					</dropdown-item>
-					<dropdown-item
-						:to="{name: 'about'}"
-					>
+					</a>
+					<router-link :to="{name: 'about'}" class="dropdown-item">
 						{{ $t('about.title') }}
-					</dropdown-item>
-					<dropdown-item
-						@click="authStore.logout()"
-					>
+					</router-link>
+					<a @click="logout()" class="dropdown-item">
 						{{ $t('user.auth.logout') }}
-					</dropdown-item>
+					</a>
 				</dropdown>
 			</div>
 		</div>
-	</header>
+	</nav>
 </template>
 
-<script setup lang="ts">
-import {ref, computed, onMounted, nextTick} from 'vue'
-
-import {RIGHTS as Rights} from '@/constants/rights'
-
+<script>
+import {mapState} from 'vuex'
+import {CURRENT_LIST, 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'
+export default {
+	name: 'topNavigation',
+	components: {
+		Notifications,
+		Dropdown,
+		ListSettingsDropdown,
+		Update,
+		Logo,
+		MenuButton,
+	},
+	computed: {
+		...mapState({
+			userInfo: state => state.auth.info,
+			userAvatar: state => state.auth.avatarUrl,
+			userAuthenticated: state => state.auth.authenticated,
+			currentList: CURRENT_LIST,
+			background: 'background',
+			imprintUrl: state => state.config.legal.imprintUrl,
+			privacyPolicyUrl: state => state.config.legal.privacyPolicyUrl,
+			canWriteCurrentList: state => state.currentList.maxRight > Rights.READ,
+		}),
+	},
+	mounted() {
+		this.$nextTick(() => {
+			if (typeof this.$refs.usernameDropdown === 'undefined' || typeof this.$refs.listTitle === 'undefined') {
+				return
+			}
 
-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 usernameDropdown = ref()
-const listTitle = ref()
-onMounted(async () => {
-	await nextTick()
-	if (typeof usernameDropdown.value === 'undefined' || typeof listTitle.value === 'undefined') {
-		return
-	}
-
-	const usernameWidth = usernameDropdown.value.$el.clientWidth
-	listTitle.value.style.setProperty('--nav-username-width', `${usernameWidth}px`)
-})
-
-function openQuickActions() {
-	baseStore.setQuickActionsActive(true)
+			const usernameWidth = this.$refs.usernameDropdown.$el.clientWidth
+			this.$refs.listTitle.style.setProperty('--nav-username-width', `${usernameWidth}px`)
+		})
+	},
+	methods: {
+		logout() {
+			this.$store.dispatch('auth/logout')
+			this.$router.push({name: 'user.login'})
+		},
+		openQuickActions() {
+			this.$store.commit(QUICK_ACTIONS_ACTIVE, true)
+		},
+	},
 }
 </script>
 
@@ -146,6 +142,10 @@ $user-dropdown-width-mobile: 5rem;
 $hamburger-menu-icon-spacing: 1rem;
 $hamburger-menu-icon-width: 28px;
 
+.navbar {
+	z-index: 4 !important;
+}
+
 .logo-link {
 	display: none;
 	padding: 0.5rem 0.75rem;
@@ -170,6 +170,7 @@ $hamburger-menu-icon-width: 28px;
 
 .navbar.main-theme {
 	background: var(--site-background);
+	z-index: 5 !important;
 	justify-content: space-between;
 	align-items: center;
 
@@ -193,20 +194,21 @@ $hamburger-menu-icon-width: 28px;
 	}
 
 	@media screen and (max-width: $tablet) {
-		&.menu-active {
-			z-index: 0;
-		}
-
 		.user {
 			width: $user-dropdown-width-mobile;
+			display: flex;
+			align-items: center;
 
-			.username-dropdown-trigger {
+			:deep(.dropdown-trigger) {
 				line-height: 1;
-				padding: 0 0.25rem;
-				height: 1rem;
 
-				.icon {
-					width: .5rem;
+				.button {
+					padding: 0 0.25rem;
+					height: 1rem;
+
+					.icon {
+						width: .5rem;
+					}
 				}
 			}
 
@@ -245,10 +247,9 @@ $hamburger-menu-icon-width: 28px;
 			border-radius: 100%;
 			vertical-align: middle;
 			height: 40px;
-			margin-right: .5rem;
 		}
 
-		.username-dropdown-trigger {
+		:deep(.dropdown-trigger .button) {
 			background: none;
 
 			&:focus:not(:active), &:active {
@@ -283,21 +284,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/update.vue

@@ -1,61 +1,72 @@
 <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>
 </template>
 
-<script lang="ts" setup>
-import {ref} from 'vue'
+<script>
+export default {
+	name: 'update',
+	data() {
+		return {
+			updateAvailable: false,
+			registration: null,
+			refreshing: false,
+		}
+	},
+	created() {
+		document.addEventListener('swUpdated', this.showRefreshUI, {once: true})
 
-const updateAvailable = ref(false)
-const registration = ref(null)
-const refreshing = ref(false)
-
-document.addEventListener('swUpdated', showRefreshUI, {once: true})
-
-if (navigator && navigator.serviceWorker) {
-	navigator.serviceWorker.addEventListener(
-		'controllerchange', () => {
-			if (refreshing.value) return
-			refreshing.value = true
-			window.location.reload()
+		if (navigator && navigator.serviceWorker) {
+			navigator.serviceWorker.addEventListener(
+				'controllerchange', () => {
+					if (this.refreshing) return
+					this.refreshing = true
+					window.location.reload()
+				},
+			)
+		}
+	},
+	methods: {
+		showRefreshUI(e) {
+			console.log('recieved refresh event', e)
+			this.registration = e.detail
+			this.updateAvailable = true
 		},
-	)
-}
-
-function showRefreshUI(e: Event) {
-	console.log('recieved refresh event', e)
-	registration.value = e.detail
-	updateAvailable.value = true
-}
-
-function refreshApp() {
-	if (!registration.value || !registration.value.waiting) {
-		return
-	}
-	// Notify the service worker to actually do the update
-	registration.value.waiting.postMessage('skipWaiting')
+		refreshApp() {
+			this.updateExists = false
+			if (!this.registration || !this.registration.waiting) {
+				return
+			}
+			// Notify the service worker to actually do the update
+			this.registration.waiting.postMessage('skipWaiting')
+		},
+	},
 }
 </script>
 
 <style lang="scss" scoped>
 .update-notification {
+	margin: 1rem;
 	display: flex;
 	align-items: center;
 	background: $warning;
-	padding: .5rem;
+	padding: 0 0 0 .5rem;
 	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);
+	}
 
 	@media screen and (max-width: $tablet) {
 		position: fixed;
@@ -74,8 +85,4 @@ function refreshApp() {
 		margin-left: .5rem;
 	}
 }
-
-.dark .update-notification {
-	color: var(--grey-200);
-}
 </style>

src/components/input/AsyncEditor.js

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

src/components/input/AsyncEditor.ts

@@ -1,3 +0,0 @@
-import {createAsyncComponent} from '@/helpers/createAsyncComponent'
-
-export default createAsyncComponent(() => import('@/components/input/editor.vue'))

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,54 @@
 			}
 		]"
 	>
-		<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
-
-export type ButtonTypes = keyof typeof BUTTON_TYPES_MAP
-
-export default { name: 'x-button' }
+export default {
+	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: {
+		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 +66,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;
+  height: $button-height;
   box-shadow: var(--shadow-sm);
   display: inline-flex;
-  white-space: break-spaces;
 
   &:hover {
     box-shadow: var(--shadow-md);