feat: add zod schemas

Resolves #3172

.drone.yml

@@ -1,5 +1,6 @@
 ---
 kind: pipeline
+type: docker
 name: build
 
 trigger:
@@ -22,36 +23,100 @@ steps:
 # Disabled until we figure out why it is so slow
 #  - name: restore-cache
 #    image: meltwater/drone-cache:dev
-#    pull: true
+#    pull: always
 #    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 "yarn.lock" }}_{{ arch }}_{{ os }}'
+#      cache_key: '{{ .Repo.Name }}_{{ checksum "pnpm-lock.yaml" }}_{{ arch }}_{{ os }}'
 #      mount:
-#        - '.cache'
+#        - .cache
 
   - name: dependencies
-    image: node:18
-    pull: true
+    image: node:18-alpine
+    pull: always
     environment:
-      YARN_CACHE_FOLDER: .cache/yarn/
-      CYPRESS_CACHE_FOLDER: .cache/cypress/
+      PNPM_CACHE_FOLDER: .cache/pnpm
+      CYPRESS_CACHE_FOLDER: .cache/cypress
     commands:
-      - yarn --frozen-lockfile --network-timeout 100000
+      - corepack enable && pnpm config set store-dir .cache/pnpm
+      - pnpm install --fetch-timeout 100000
 #    depends_on:
 #      - restore-cache
 
+  - name: lint
+    image: node:18-alpine
+    pull: 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-chrome107
+    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 test:e2e-record
+    depends_on:
+      - build-prod
+
 #  - name: rebuild-cache
 #    image: meltwater/drone-cache:dev
-#    pull: true
+#    pull: always
 #    environment:
 #      AWS_ACCESS_KEY_ID:
 #        from_secret: cache_aws_access_key_id
@@ -63,71 +128,15 @@ steps:
 #      endpoint: https://s3.fr-par.scw.cloud
 #      region: fr-par
 #      path_style: true
-#      cache_key: '{{ .Repo.Name }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
+#      cache_key: '{{ .Repo.Name }}_{{ checksum "pnpm-lock.yaml" }}_{{ arch }}_{{ os }}'
 #      mount:
-#        - '.cache'
+#        - .cache
 #    depends_on:
 #      - dependencies
 
-  - name: lint
-    image: node:18
-    pull: true
-    environment:
-      YARN_CACHE_FOLDER: .cache/yarn/
-      CYPRESS_CACHE_FOLDER: .cache/cypress/
-    commands:
-      - yarn run lint
-    depends_on:
-      - dependencies
-
-  - name: build-prod
-    image: node:18
-    pull: true
-    environment:
-      YARN_CACHE_FOLDER: .cache/yarn/
-    commands:
-      - yarn build
-    depends_on:
-      - dependencies
-
-  - name: test-unit
-    image: node:18
-    pull: true
-    commands:
-      - yarn test:unit
-    depends_on:
-      - dependencies
-
-  - name: typecheck
-    failure: ignore
-    image: node:18
-    pull: true
-    commands:
-      - yarn typecheck
-    depends_on:
-      - dependencies
-
-  - name: test-frontend
-    image: cypress/browsers:node16.14.0-chrome99-ff97
-    pull: true
-    environment:
-      CYPRESS_API_URL: http://api:3456/api/v1
-      CYPRESS_TEST_SECRET: averyLongSecretToSe33dtheDB
-      YARN_CACHE_FOLDER: .cache/yarn/
-      CYPRESS_CACHE_FOLDER: .cache/cypress/
-      CYPRESS_DEFAULT_COMMAND_TIMEOUT: 60000
-      CYPRESS_RECORD_KEY:
-        from_secret: cypress_project_key
-    commands:
-      - sed -i 's/localhost/api/g' dist/index.html
-      - yarn serve:dist & npx wait-on http://localhost:4173
-      - yarn test:frontend --browser chrome --record
-    depends_on:
-      - build-prod
-
   - name: deploy-preview
-    image: node:18
-    pull: true
+    image: node:18-alpine
+    pull: always
     environment:
       NETLIFY_AUTH_TOKEN:
         from_secret: netlify_auth_token
@@ -138,9 +147,12 @@ steps:
     commands:
       - cp -r dist dist-preview
       # Override the default api url used for preview
-      - sed -i 's|localhost:3456|try.vikunja.io|g' dist-preview/index.html
-      - shasum -a 384 -c ./scripts/deploy-preview-netlify.js.sha384
-      - node ./scripts/deploy-preview-netlify.js
+      - sed -i 's|http://localhost:3456|https://try.vikunja.io|g' dist-preview/index.html
+      - apk add --no-cache perl-utils
+      # create via:
+      # `shasum -a 384 ./scripts/deploy-preview-netlify.mjs > ./scripts/deploy-preview-netlify.mjs.sha384`
+      - shasum -a 384 -c ./scripts/deploy-preview-netlify.mjs.sha384
+      - node ./scripts/deploy-preview-netlify.mjs
     depends_on:
       - build-prod
     when:
@@ -150,6 +162,7 @@ steps:
 
 ---
 kind: pipeline
+type: docker
 name: release-latest
 
 depends_on:
@@ -169,7 +182,7 @@ steps:
 
 #  - name: restore-cache
 #    image: meltwater/drone-cache:dev
-#    pull: true
+#    pull: always
 #    environment:
 #      AWS_ACCESS_KEY_ID:
 #        from_secret: cache_aws_access_key_id
@@ -181,28 +194,29 @@ steps:
 #      endpoint: https://s3.fr-par.scw.cloud
 #      region: fr-par
 #      path_style: true
-#      cache_key: '{{ .Repo.Name }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
+#      cache_key: '{{ .Repo.Name }}_{{ checksum "pnpm-lock.yaml" }}_{{ arch }}_{{ os }}'
 #      mount:
-#        - '.cache'
+#        - .cache
 
   - name: build
-    image: node:18
-    pull: true
-    group: build-static
+    image: node:18-alpine
+    pull: always
     environment:
-      YARN_CACHE_FOLDER: .cache/yarn/
+      PNPM_CACHE_FOLDER: .cache/pnpm
     commands:
-      - yarn --frozen-lockfile --network-timeout 100000
-      - yarn run lint
+      - apk add git
+      - corepack enable && pnpm config set store-dir .cache/pnpm
+      - pnpm install --fetch-timeout 100000 --frozen-lockfile
+      - pnpm run lint
       - "echo '{\"VERSION\": \"'$(git describe --tags --always --abbrev=10 | sed 's/-/+/' | sed 's/^v//' | sed 's/-g/-/')'\"}' > src/version.json"
-      - yarn run build
+      - pnpm run build
       - sed -i 's/http\:\\/\\/localhost\\:3456\\/api\\/v1/\\/api\\/v1/g' dist/index.html # Override the default api url used for developing
 #    depends_on:
 #      - restore-cache
 
   - name: static
     image: kolaente/zip
-    pull: true
+    pull: always
     commands:
       - cd dist
       - zip -r ../vikunja-frontend-unstable.zip *
@@ -211,7 +225,7 @@ steps:
 
   - name: release
     image: plugins/s3
-    pull: true
+    pull: always
     settings:
       bucket: vikunja-releases
       access_key:
@@ -227,6 +241,7 @@ steps:
 
 ---
 kind: pipeline
+type: docker
 name: release-version
 
 depends_on:
@@ -244,7 +259,7 @@ steps:
 
 #  - name: restore-cache
 #    image: meltwater/drone-cache:dev
-#    pull: true
+#    pull: always
 #    environment:
 #      AWS_ACCESS_KEY_ID:
 #        from_secret: cache_aws_access_key_id
@@ -256,28 +271,29 @@ steps:
 #      endpoint: https://s3.fr-par.scw.cloud
 #      region: fr-par
 #      path_style: true
-#      cache_key: '{{ .Repo.Name }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
+#      cache_key: '{{ .Repo.Name }}_{{ checksum "pnpm-lock.yaml" }}_{{ arch }}_{{ os }}'
 #      mount:
-#        - '.cache'
+#        - .cache
 
   - name: build
-    image: node:18
-    pull: true
-    group: build-static
+    image: node:18-alpine
+    pull: always
     environment:
-      YARN_CACHE_FOLDER: .cache/yarn/
+      PNPM_CACHE_FOLDER: .cache/pnpm
     commands:
-      - yarn --frozen-lockfile --network-timeout 100000
-      - yarn run lint
+      - apk add git
+      - corepack enable && pnpm config set store-dir .cache/pnpm
+      - pnpm install --fetch-timeout 100000 --frozen-lockfile
+      - pnpm run lint
       - "echo '{\"VERSION\": \"'$(git describe --tags --always --abbrev=10 | sed 's/-/+/' | sed 's/^v//' | sed 's/-g/-/')'\"}' > src/version.json"
-      - yarn run build
+      - pnpm run build
       - sed -i 's/http\:\\/\\/localhost\\:3456\\/api\\/v1/\\/api\\/v1/g' dist/index.html # Override the default api url used for developing
 #    depends_on:
 #      - restore-cache
 
   - name: static
     image: kolaente/zip
-    pull: true
+    pull: always
     commands:
       - cd dist
       - zip -r ../vikunja-frontend-${DRONE_TAG##v}.zip *
@@ -286,7 +302,7 @@ steps:
 
   - name: release
     image: plugins/s3
-    pull: true
+    pull: always
     settings:
       bucket: vikunja-releases
       access_key:
@@ -302,6 +318,7 @@ steps:
 
 ---
 kind: pipeline
+type: docker
 name: trigger-desktop-update
 
 trigger:
@@ -326,111 +343,7 @@ steps:
 ---
 kind: pipeline
 type: docker
-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
+name: docker-release
 
 depends_on:
   - release-latest
@@ -445,101 +358,67 @@ trigger:
       - cron
 
 steps:
+  - name: fetch-tags
+    image: docker:git
+    commands:
+      - git fetch --tags
+
   - name: docker-unstable
-    image: plugins/docker:linux-amd64
-    pull: true
-    settings:
-      username:
-        from_secret: docker_username
-      password:
-        from_secret: docker_password
-      repo: vikunja/frontend
-      tags: unstable-linux-amd64
-      build_args:
-        - USE_RELEASE=true
-        - RELEASE_VERSION=unstable
-    when:
-      ref:
-        - refs/heads/main
-
-  - name: docker-version
-    image: plugins/docker:linux-amd64
-    pull: true
-    settings:
-      username:
-        from_secret: docker_username
-      password:
-        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}
-    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
+    image: thegeeklab/drone-docker-buildx
+    privileged: true
     pull: always
-    image: plugins/manifest
     settings:
+      username:
+        from_secret: docker_username
+      password:
+        from_secret: docker_password
+      repo: vikunja/frontend
       tags: unstable
-      spec: docker-manifest-unstable.tmpl
-      password:
-        from_secret: docker_password
-      username:
-        from_secret: docker_username
+      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: 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
+  - name: generate-tags
+    image: thegeeklab/docker-autotag
+    environment:
+      DOCKER_AUTOTAG_VERSION: ${DRONE_TAG}
+      DOCKER_AUTOTAG_EXTRA_TAGS: latest
+      DOCKER_AUTOTAG_OUTPUT_FILE: .tags
+    depends_on: [ fetch-tags ]
     when:
       ref:
         - "refs/tags/**"
-  
-  - name: manifest-release-latest
+
+  - name: docker-release
+    image: thegeeklab/drone-docker-buildx
+    privileged: true
     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
+      password:
+        from_secret: docker_password
+      repo: vikunja/frontend
+      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: [ generate-tags ]
     when:
       ref:
         - "refs/tags/**"
@@ -562,9 +441,7 @@ depends_on:
   - release-version
   - release-latest
   - trigger-desktop-update
-  - docker-arm-release
-  - docker-amd64-release
-  - docker-manifest
+  - docker-release
 
 steps:
   - name: notify
@@ -585,9 +462,6 @@ kind: pipeline
 type: docker
 name: update-translations
 
-depends_on:
-  - build
-
 trigger:
   branch:
     - main
@@ -647,6 +521,6 @@ steps:
         from_secret: crowdin_key
 ---
 kind: signature
-hmac: 997e1badebe484ac29557c4af356e63db4d3d57f3d32e92d482f117f8cec64da
+hmac: 971875b90c7bb1649d1b00d022d0b594ba9b68f927bf8f0dbe840190816d676b
 
 ...

.env.local.example

@@ -0,0 +1,13 @@
+# (1) Duplicate this file and remove the '.example' suffix.
+# Naming this file '.env.local' is a Vite convention to prevent accidentally
+# submitting to git.
+# For more info see: https://vitejs.dev/guide/env-and-mode.html#env-files
+
+# (2) Comment in and adjust the values as needed.
+
+# VITE_IS_ONLINE=true
+# VITE_WORKBOX_DEBUG=false
+# SENTRY_AUTH_TOKEN=YOUR_TOKEN
+# SENTRY_ORG=vikunja
+# SENTRY_PROJECT=frontend-oss
+# VIKUNJA_FRONTEND_BASE=/custom-subpath

.envrc

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

.eslintrc.cjs

@@ -1,15 +1,18 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution")
+
 module.exports = {
 	'root': true,
 	'env': {
 		'browser': true,
-		'es2021': true,
+		'es2022': true,
 		'node': true,
 		'vue/setup-compiler-macros': true,
 	},
 	'extends': [
 		'eslint:recommended',
 		'plugin:vue/vue3-essential',
-		'@vue/typescript',
+		'@vue/eslint-config-typescript/recommended',
 	],
 	'rules': {
 		'vue/html-quotes': [
@@ -28,18 +31,22 @@ module.exports = {
 			'error',
 			'never',
 		],
-		'vue/script-setup-uses-vars': 'error',
 
 		// see https://segmentfault.com/q/1010000040813116/a-1020000041134455 (original in chinese)
 		'no-unused-vars': 'off',
 		'@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.*',

.github/FUNDING.yml

@@ -1,2 +1,3 @@
 github: kolaente
-custom: https://www.buymeacoffee.com/kolaente
+open_collective: vikunja
+custom: ["https://vikunja.cloud", "https://www.buymeacoffee.com/kolaente"]

.github/ISSUE_TEMPLATE/bug-report.yml

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

.github/ISSUE_TEMPLATE/config.yml

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

.gitignore

@@ -1,21 +1,31 @@
-.DS_Store
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+stats.html
+
 node_modules
+.DS_Store
 /dist*
+coverage
 *.zip
+.direnv/
+
+# Test files
+cypress/screenshots
+cypress/videos
 
 # local env files
 .env.local
 .env.*.local
 
-# Log files
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-stats.html
-
 # Editor directories and files
-.idea
 .vscode
+.idea
 *.suo
 *.ntvs*
 *.njsproj
@@ -23,9 +33,9 @@ stats.html
 *.sw*
 !rollup.sw.js
 
-# Test files
-cypress/screenshots
-cypress/videos
 
 # Local Netlify folder
 .netlify
+
+# histoire
+.histoire

.npmrc

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

.nvmrc

@@ -1 +1 @@
-v18
+18.14.2

.vscode.example/settings.json

@@ -1,5 +1,5 @@
 {
-  "eslint.packageManager": "yarn",
+  "eslint.packageManager": "pnpm",
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
     "source.fixAll": true
@@ -18,6 +18,12 @@
     "javascriptreact",
     "vue"
   ],
+
+  "volar.completion.preferredTagNameCase": "pascal",
+
+  // disable vetur in case it is installed
+  "vetur.validation.template": false,
+
   // i18n ally
   "i18n-ally.localesPaths": [
     "src/i18n/lang"

Dockerfile

@@ -1,39 +1,70 @@
-# Stage 1: Build application
-FROM node:18 AS compile-image
+# syntax=docker/dockerfile:1
+#  ┬─┐┬ ┐o┬  ┬─┐
+#  │─││ │││  │ │
+#  ┘─┘┘─┘┘┘─┘┘─┘
+
+FROM --platform=$BUILDPLATFORM node:18-alpine AS builder
 
 WORKDIR /build
 
 ARG USE_RELEASE=false
 ARG RELEASE_VERSION=main
+ENV PNPM_CACHE_FOLDER .cache/pnpm/
 
-ENV YARN_CACHE_FOLDER .cache/yarn/
-COPY .  ./
+COPY package.json ./
+COPY pnpm-lock.yaml ./
 
-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 && \
-  # Build the frontend
-  yarn install --frozen-lockfile --network-timeout 100000 && \
-  echo '{"VERSION": "'$(git describe --tags --always --abbrev=10 | sed 's/-/+/' | sed 's/^v//' | sed 's/-g/-/')'"}' > src/version.json && \
-  yarn run build
+RUN if [ "$USE_RELEASE" != true ]; then \
+      # https://pnpm.io/installation#using-corepack
+      corepack enable && \
+      pnpm install; \
+    fi
 
-# Stage 2: copy 
-FROM nginx
+COPY . ./
 
-COPY nginx.conf /etc/nginx/nginx.conf
-COPY run.sh /run.sh
+RUN if [ "$USE_RELEASE" != true ]; then \
+      apk add --no-cache --virtual .build-deps git jq && \
+      git describe --tags --always --abbrev=10 | sed 's/-/+/; s/^v//; s/-g/-/' | \
+      xargs -0 -I{} jq -Mcnr --arg version {} '{VERSION:$version}' | \
+      tee src/version.json && \
+      apk del .build-deps; \
+    fi
 
-# copy compiled files from stage 1
-COPY --from=compile-image /build/dist /usr/share/nginx/html
+RUN if [ "$USE_RELEASE" = true ]; then \
+      wget "https://dl.vikunja.io/frontend/vikunja-frontend-${RELEASE_VERSION}.zip" -O frontend-release.zip && \
+      unzip frontend-release.zip -d dist/; \
+    else \
+      # we don't use corepack prepare here by intend since
+      # we have renovate to keep our dependencies up to date
+      # Build the frontend
+      pnpm run build; \
+  fi
 
-# Unprivileged user
-ENV PUID 1000
-ENV PGID 1000
+#  ┌┐┐┌─┐o┌┐┐┐ │
+#  ││││ ┬││││┌┼┘
+#  ┘└┘┘─┘┘┘└┘┘ └
 
+FROM nginx:stable-alpine AS runner
+WORKDIR /usr/share/nginx/html
 LABEL maintainer="maintainers@vikunja.io"
 
-CMD "/run.sh"
+ENV VIKUNJA_HTTP_PORT 80
+ENV VIKUNJA_HTTP2_PORT 81
+ENV VIKUNJA_LOG_FORMAT main
+ENV VIKUNJA_API_URL /api/v1
+ENV VIKUNJA_SENTRY_ENABLED false
+ENV VIKUNJA_SENTRY_DSN https://85694a2d757547cbbc90cd4b55c5a18d@o1047380.ingest.sentry.io/6024480
+
+COPY docker/injector.sh /docker-entrypoint.d/50-injector.sh
+COPY docker/ipv6-disable.sh /docker-entrypoint.d/60-ipv6-disable.sh
+COPY docker/nginx.conf /etc/nginx/nginx.conf
+COPY docker/templates/. /etc/nginx/templates/
+# copy compiled files from stage 1
+COPY --from=builder /build/dist ./
+# manage permissions
+RUN chmod 0755 /docker-entrypoint.d/*.sh /etc/nginx/templates && \
+    chmod -R 0644 /etc/nginx/nginx.conf && \
+    chown -R nginx:nginx ./ /etc/nginx/conf.d /etc/nginx/templates && \
+    rm -f /docker-entrypoint.d/10-listen-on-ipv6-by-default.sh
+# unprivileged user
+USER nginx

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.19.1-brightgreen.svg)](https://dl.vikunja.io)
+[![Download](https://img.shields.io/badge/download-v0.20.3-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.
@@ -18,31 +18,36 @@ If you find any security-related issues you don't want to disclose publicly, ple
 ## Docker
 
 There is a [docker image available](https://hub.docker.com/r/vikunja/api) with support for http/2 and aggressive caching enabled.
+In order to build it from sources run the command below. (Docker >= v19.03)
+
+```shell
+export DOCKER_BUILDKIT=1
+docker build -t vikunja/frontend .
+```
+
+Refer to Refer [to multi-platform documentation](https://docs.docker.com/build/building/multi-platform/) in order to build for the different platform.
 
 ## Project setup
 
 ```shell
-yarn install
+pnpm install
 ```
 
 ### Compiles and hot-reloads for development
 
 ```shell
-yarn run serve
+pnpm run serve
 ```
 
 ### Compiles and minifies for production
 
 ```shell
-yarn run build
+pnpm run build
 ```
 
 ### Lints and fixes files
 
 ```shell
-yarn run lint
+pnpm run lint
 ```
 
-## Sponsors
-
-[![Relm](https://vikunja.io/images/sponsors/relm.png)](https://relm.us)

cypress.config.ts

@@ -11,8 +11,10 @@ export default defineConfig({
 	},
 	projectId: '181c7x',
 	e2e: {
-		baseUrl: 'http://localhost:4173',
-		specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+		specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
+		baseUrl: 'http://127.0.0.1:4173',
+		experimentalRunAllSpecs: true,
+		// testIsolation: false,
 	},
 	component: {
 		devServer: {

cypress/README.md

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

cypress/docker-compose.yml

@@ -9,7 +9,7 @@ services:
     ports:
       - 3456:3456
   cypress:
-    image: cypress/browsers:node16.14.0-chrome99-ff97
+    image: cypress/browsers:node18.12.0-chrome107
     volumes:
     - ..:/project
     - $HOME/.cache:/home/node/.cache/

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

@@ -1,9 +1,10 @@
-import {ListFactory} from '../../factories/list'
+import {createFakeUserAndLogin} from '../../support/authenticateUser'
 
-import '../../support/authenticateUser'
+import {ListFactory} from '../../factories/list'
 import {prepareLists} from './prepareLists'
 
 describe('List History', () => {
+	createFakeUserAndLogin()
 	prepareLists()
 	
 	it('should show a list history on the home page', () => {
@@ -45,7 +46,7 @@ describe('List History', () => {
 		
 		cy.get('body')
 			.should('contain', 'Last viewed')
-		cy.get('.list-cards-wrapper-2-rows')
+		cy.get('[data-cy="listCardGrid"]')
 			.should('not.contain', lists[0].title)
 			.should('contain', lists[1].title)
 			.should('contain', lists[2].title)

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

@@ -1,29 +1,33 @@
 import {formatISO, format} from 'date-fns'
+
+import {createFakeUserAndLogin} from '../../support/authenticateUser'
+
 import {TaskFactory} from '../../factories/task'
 import {prepareLists} from './prepareLists'
 
-import '../../support/authenticateUser'
-
 describe('List View Gantt', () => {
+	createFakeUserAndLogin()
 	prepareLists()
-	
+
 	it('Hides tasks with no dates', () => {
 		const tasks = TaskFactory.create(1)
 		cy.visit('/lists/1/gantt')
 
-		cy.get('.gantt-chart .tasks')
+		cy.get('.g-gantt-rows-container')
 			.should('not.contain', tasks[0].title)
 	})
 
 	it('Shows tasks from the current and next month', () => {
-		const now = new Date()
-		const nextMonth = now
+		const now = Date.UTC(2022, 8, 25)
+		cy.clock(now, ['Date'])
+
+		const nextMonth = new Date(now)
 		nextMonth.setDate(1)
-		nextMonth.setMonth(now.getMonth() + 1)
+		nextMonth.setMonth(9)
 
 		cy.visit('/lists/1/gantt')
 
-		cy.get('.gantt-chart .months')
+		cy.get('.g-timeunits-container')
 			.should('contain', format(now, 'MMMM'))
 			.should('contain', format(nextMonth, 'MMMM'))
 	})
@@ -31,19 +35,18 @@ describe('List View Gantt', () => {
 	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))
+			start_date: now.toISOString(),
+			end_date: new Date(new Date(now).setDate(now.getDate() + 4)).toISOString(),
 		})
 		cy.visit('/lists/1/gantt')
 
-		cy.get('.gantt-chart .tasks')
+		cy.get('.g-gantt-rows-container')
 			.should('not.be.empty')
-		cy.get('.gantt-chart .tasks')
 			.should('contain', tasks[0].title)
 	})
 
 	it('Shows tasks with no dates after enabling them', () => {
-		TaskFactory.create(1, {
+		const tasks = TaskFactory.create(1, {
 			start_date: null,
 			end_date: null,
 		})
@@ -53,24 +56,71 @@ describe('List View Gantt', () => {
 			.contains('Show tasks which don\'t have dates set')
 			.click()
 
-		cy.get('.gantt-chart .tasks')
+		cy.get('.g-gantt-rows-container')
 			.should('not.be.empty')
-		cy.get('.gantt-chart .tasks .task.nodate')
-			.should('exist')
+			.should('contain', tasks[0].title)
 	})
 
 	it('Drags a task around', () => {
+		cy.intercept(Cypress.env('API_URL') + '/tasks/*').as('taskUpdate')
+
 		const now = new Date()
 		TaskFactory.create(1, {
-			start_date: formatISO(now),
-			end_date: formatISO(now.setDate(now.getDate() + 4))
+			start_date: now.toISOString(),
+			end_date: new Date(new Date(now).setDate(now.getDate() + 4)).toISOString(),
 		})
 		cy.visit('/lists/1/gantt')
 
-		cy.get('.gantt-chart .tasks .task')
+		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,14 +1,15 @@
+import {createFakeUserAndLogin} from '../../support/authenticateUser'
+
 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
+	createFakeUserAndLogin()
 	prepareLists()
-
+	
+	let buckets
 	beforeEach(() => {
 		buckets = BucketFactory.create(2)
 	})
@@ -38,7 +39,7 @@ describe('List View Kanban', () => {
 		})
 		cy.visit('/lists/1/kanban')
 
-		cy.getSettled('.kanban .bucket')
+		cy.get('.kanban .bucket')
 			.contains(buckets[0].title)
 			.get('.bucket-footer .button')
 			.contains('Add another task')
@@ -70,7 +71,7 @@ describe('List View Kanban', () => {
 	it('Can set a bucket limit', () => {
 		cy.visit('/lists/1/kanban')
 
-		cy.getSettled('.kanban .bucket .bucket-header .dropdown.options .dropdown-trigger')
+		cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-trigger')
 			.first()
 			.click()
 		cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item')
@@ -91,7 +92,7 @@ describe('List View Kanban', () => {
 	it('Can rename a bucket', () => {
 		cy.visit('/lists/1/kanban')
 
-		cy.getSettled('.kanban .bucket .bucket-header .title')
+		cy.get('.kanban .bucket .bucket-header .title')
 			.first()
 			.type('{selectall}New Bucket Title{enter}')
 		cy.get('.kanban .bucket .bucket-header .title')
@@ -102,7 +103,7 @@ describe('List View Kanban', () => {
 	it('Can delete a bucket', () => {
 		cy.visit('/lists/1/kanban')
 
-		cy.getSettled('.kanban .bucket .bucket-header .dropdown.options .dropdown-trigger')
+		cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-trigger')
 			.first()
 			.click()
 		cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item')
@@ -129,7 +130,7 @@ describe('List View Kanban', () => {
 		})
 		cy.visit('/lists/1/kanban')
 
-		cy.getSettled('.kanban .bucket .tasks .task')
+		cy.get('.kanban .bucket .tasks .task')
 			.contains(tasks[0].title)
 			.first()
 			.drag('.kanban .bucket:nth-child(2) .tasks')
@@ -148,7 +149,7 @@ describe('List View Kanban', () => {
 		})
 		cy.visit('/lists/1/kanban')
 
-		cy.getSettled('.kanban .bucket .tasks .task')
+		cy.get('.kanban .bucket .tasks .task')
 			.contains(tasks[0].title)
 			.should('be.visible')
 			.click()
@@ -170,7 +171,7 @@ describe('List View Kanban', () => {
 		const task = tasks[0]
 		cy.visit('/lists/1/kanban')
 
-		cy.getSettled('.kanban .bucket .tasks .task')
+		cy.get('.kanban .bucket .tasks .task')
 			.contains(task.title)
 			.should('be.visible')
 			.click()
@@ -193,4 +194,48 @@ describe('List View Kanban', () => {
 		cy.get('.kanban .bucket')
 			.should('not.contain', task.title)
 	})
+	
+	it('Shows a button to filter the kanban board', () => {
+		const data = TaskFactory.create(10, {
+			list_id: 1,
+			bucket_id: 1,
+		})
+		cy.visit('/lists/1/kanban')
+		
+		cy.get('.list-kanban .filter-container .base-button')
+			.should('exist')
+	})
+	
+	it('Should remove a task from the board when deleting it', () => {
+		const lists = ListFactory.create(1)
+		const buckets = BucketFactory.create(2, {
+			list_id: lists[0].id,
+		})
+		const tasks = TaskFactory.create(5, {
+			list_id: 1,
+			bucket_id: buckets[0].id,
+		})
+		const task = tasks[0]
+		cy.visit('/lists/1/kanban')
+
+		cy.get('.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.get('.kanban .bucket .tasks')
+			.should('not.contain', task.title)
+	})
 })

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

@@ -1,21 +1,22 @@
+import {createFakeUserAndLogin} from '../../support/authenticateUser'
+
 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', () => {
+	createFakeUserAndLogin()
 	prepareLists()
 
 	it('Should be an empty list', () => {
 		cy.visit('/lists/1')
 		cy.url()
 			.should('contain', '/lists/1/list')
-		cy.get('.list-title h1')
+		cy.get('.list-title')
 			.should('contain', 'First List')
-		cy.get('.list-title .dropdown')
+		cy.get('.list-title-dropdown')
 			.should('exist')
 		cy.get('p')
 			.contains('This list is currently empty.')
@@ -61,7 +62,7 @@ describe('List View List', () => {
 		})
 		cy.visit(`/lists/${lists[1].id}/`)
 
-		cy.get('.list-title .icon')
+		cy.get('.list-title-wrapper .icon')
 			.should('not.exist')
 		cy.get('input.input[placeholder="Add a new task..."')
 			.should('not.exist')
@@ -78,7 +79,7 @@ describe('List View List', () => {
 
 		cy.get('.menu-list li .list-menu-link .color-bubble')
 			.should('have.css', 'background-color', 'rgb(0, 219, 96)')
-		cy.get('.tasks-container .tasks .color-bubble')
+		cy.get('.tasks .color-bubble')
 			.should('not.exist')
 	})
 
@@ -90,9 +91,9 @@ describe('List View List', () => {
 		})
 		cy.visit('/lists/1/list')
 
-		cy.get('.tasks-container .tasks')
+		cy.get('.tasks')
 			.should('contain', tasks[1].title)
-		cy.get('.tasks-container .tasks')
+		cy.get('.tasks')
 			.should('not.contain', tasks[99].title)
 
 		cy.get('.card-content .pagination .pagination-link')
@@ -101,9 +102,9 @@ describe('List View List', () => {
 
 		cy.url()
 			.should('contain', '?page=2')
-		cy.get('.tasks-container .tasks')
+		cy.get('.tasks')
 			.should('contain', tasks[99].title)
-		cy.get('.tasks-container .tasks')
+		cy.get('.tasks')
 			.should('not.contain', tasks[1].title)
 	})
 })

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

@@ -1,8 +1,10 @@
+import {createFakeUserAndLogin} from '../../support/authenticateUser'
+
 import {TaskFactory} from '../../factories/task'
 
-import '../../support/authenticateUser'
-
 describe('List View Table', () => {
+	createFakeUserAndLogin()
+
 	it('Should show a table with tasks', () => {
 		const tasks = TaskFactory.create(1)
 		cy.visit('/lists/1/table')

cypress/e2e/list/list.spec.ts

@@ -1,9 +1,11 @@
+import {createFakeUserAndLogin} from '../../support/authenticateUser'
+
 import {TaskFactory} from '../../factories/task'
 import {prepareLists} from './prepareLists'
 
-import '../../support/authenticateUser'
-
 describe('Lists', () => {
+	createFakeUserAndLogin()
+
 	let lists
 	prepareLists((newLists) => (lists = newLists))
 
@@ -28,7 +30,7 @@ describe('Lists', () => {
 			.should('contain', 'Success')
 		cy.url()
 			.should('contain', '/lists/')
-		cy.get('.list-title h1')
+		cy.get('.list-title')
 			.should('contain', 'New List')
 	})
 
@@ -49,10 +51,10 @@ describe('Lists', () => {
 		const newListName = 'New list name'
 
 		cy.visit('/lists/1')
-		cy.get('.list-title h1')
+		cy.get('.list-title')
 			.should('contain', 'First List')
 
-		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-trigger')
+		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')
@@ -65,7 +67,7 @@ describe('Lists', () => {
 
 		cy.get('.global-notification')
 			.should('contain', 'Success')
-		cy.get('.list-title h1')
+		cy.get('.list-title')
 			.should('contain', newListName)
 			.should('not.contain', lists[0].title)
 		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child')
@@ -80,7 +82,7 @@ describe('Lists', () => {
 	it('Should remove a list', () => {
 		cy.visit(`/lists/${lists[0].id}`)
 
-		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-trigger')
+		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')
@@ -102,9 +104,9 @@ describe('Lists', () => {
 	it('Should archive a list', () => {
 		cy.visit(`/lists/${lists[0].id}`)
 		
-		cy.get('.list-title .dropdown')
+		cy.get('.list-title-dropdown')
 			.click()
-		cy.get('.list-title .dropdown .dropdown-menu .dropdown-item')
+		cy.get('.list-title-dropdown .dropdown-menu .dropdown-item')
 			.contains('Archive')
 			.click()
 		cy.get('.modal-content')

cypress/e2e/list/namespaces.spec.ts

@@ -1,14 +1,14 @@
-import {UserFactory} from '../../factories/user'
+import {createFakeUserAndLogin} from '../../support/authenticateUser'
 
-import '../../support/authenticateUser'
 import {ListFactory} from '../../factories/list'
 import {NamespaceFactory} from '../../factories/namespace'
 
 describe('Namepaces', () => {
+	createFakeUserAndLogin()
+
 	let namespaces
 
 	beforeEach(() => {
-		UserFactory.create(1)
 		namespaces = NamespaceFactory.create(1)
 		ListFactory.create(1)
 	})

cypress/e2e/list/prepareLists.ts

@@ -1,10 +1,8 @@
 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'
@@ -13,7 +11,7 @@ export function createLists() {
 	return lists
 }
 
-export function prepareLists(setLists = () => {}) {
+export function prepareLists(setLists = (...args: any[]) => {}) {
 	beforeEach(() => {
 		const lists = createLists()
 		setLists(lists)

cypress/e2e/misc/editor.spec.ts

@@ -1,14 +1,16 @@
+import {createFakeUserAndLogin} from '../../support/authenticateUser'
+
 import {TaskFactory} from '../../factories/task'
 import {ListFactory} from '../../factories/list'
 import {NamespaceFactory} from '../../factories/namespace'
 import {UserListFactory} from '../../factories/users_list'
 
-import '../../support/authenticateUser'
-
 describe('Editor', () => {
+	createFakeUserAndLogin()
+	
 	beforeEach(() => {
 		NamespaceFactory.create(1)
-		const lists = ListFactory.create(1)
+		ListFactory.create(1)
 		TaskFactory.truncate()
 		UserListFactory.truncate()
 	})

cypress/e2e/misc/menu.spec.ts

@@ -1,6 +1,12 @@
-import '../../support/authenticateUser'
+import {createFakeUserAndLogin} from '../../support/authenticateUser'
 
 describe('The Menu', () => {
+	createFakeUserAndLogin()
+
+	beforeEach(() => {
+		cy.visit('/')
+	})
+
 	it('Is visible by default on desktop', () => {
 		cy.get('.namespace-container')
 			.should('have.class', 'is-active')

cypress/e2e/sharing/team.spec.ts

@@ -1,9 +1,12 @@
+import {createFakeUserAndLogin} from '../../support/authenticateUser'
+
 import {TeamFactory} from '../../factories/team'
 import {TeamMemberFactory} from '../../factories/team_member'
 import {UserFactory} from '../../factories/user'
-import '../../support/authenticateUser'
 
 describe('Team', () => {
+	createFakeUserAndLogin()
+
     it('Creates a new team', () => {
         TeamFactory.truncate()
         cy.visit('/teams')

cypress/e2e/task/overview.spec.ts

@@ -1,16 +1,13 @@
+import {createFakeUserAndLogin} from '../../support/authenticateUser'
+
 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)
+function seedTasks(numberOfTasks = 50, startDueDate = new Date()) {
 	NamespaceFactory.create(1)
 	const list = ListFactory.create()[0]
 	BucketFactory.create(1, {
@@ -20,7 +17,7 @@ function seedTasks(numberOfTasks = 100, startDueDate = new Date()) {
 	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)
+		dueDate = new Date(new Date(dueDate).setDate(dueDate.getDate() + 2))
 		tasks.push({
 			id: i + 1,
 			list_id: list.id,
@@ -28,9 +25,9 @@ function seedTasks(numberOfTasks = 100, startDueDate = new Date()) {
 			created_by_id: 1,
 			title: 'Test Task ' + i,
 			index: i + 1,
-			due_date: formatISO(dueDate),
-			created: formatISO(now),
-			updated: formatISO(now),
+			due_date: dueDate.toISOString(),
+			created: now.toISOString(),
+			updated: now.toISOString(),
 		})
 	}
 	seed(TaskFactory.table, tasks)
@@ -38,8 +35,11 @@ function seedTasks(numberOfTasks = 100, startDueDate = new Date()) {
 }
 
 describe('Home Page Task Overview', () => {
+	createFakeUserAndLogin()
+
 	it('Should show tasks with a near due date first on the home page overview', () => {
-		const {tasks} = seedTasks()
+		const taskCount = 50
+		const {tasks} = seedTasks(taskCount)
 
 		cy.visit('/')
 		cy.get('[data-cy="showTasks"] .card .task')
@@ -49,8 +49,10 @@ describe('Home Page Task Overview', () => {
 	})
 
 	it('Should show overdue tasks first, then show other tasks', () => {
-		const oldDate = (new Date()).setDate((new Date()).getDate() - 14)
-		const {tasks} = seedTasks(100, oldDate)
+		const now = new Date()
+		const oldDate = new Date(new Date(now).setDate(now.getDate() - 14))
+		const taskCount = 50
+		const {tasks} = seedTasks(taskCount, oldDate)
 
 		cy.visit('/')
 		cy.get('[data-cy="showTasks"] .card .task')
@@ -68,7 +70,7 @@ describe('Home Page Task Overview', () => {
 		TaskFactory.create(1, {
 			id: 999,
 			title: newTaskTitle,
-			due_date: formatISO(new Date()),
+			due_date: new Date().toISOString(),
 		}, false)
 		
 		cy.visit(`/lists/${tasks[0].list_id}/list`)
@@ -83,7 +85,7 @@ describe('Home Page Task Overview', () => {
 	
 	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 {tasks} = seedTasks(100)
 		const newTaskTitle = 'New Task'
 
 		cy.visit('/')
@@ -128,4 +130,24 @@ describe('Home Page Task Overview', () => {
 			.last()
 			.should('contain.text', newTaskTitle)
 	})
+	
+	it('Should show the cta buttons for new list when there are no tasks', () => {
+		TaskFactory.truncate()
+		
+		cy.visit('/')
+		
+		cy.get('.home.app-content .content')
+			.should('contain.text', 'You can create a new list for your new tasks:')
+			.should('contain.text', 'Or import your lists and tasks from other services into Vikunja:')
+	})
+	
+	it('Should not show the cta buttons for new list when there are tasks', () => {
+		seedTasks()
+
+		cy.visit('/')
+
+		cy.get('.home.app-content .content')
+			.should('not.contain.text', 'You can create a new list for your new tasks:')
+			.should('not.contain.text', 'Or import your lists and tasks from other services into Vikunja:')
+	})
 })

cypress/e2e/task/task.spec.ts

@@ -1,4 +1,4 @@
-import {formatISO} from 'date-fns'
+import {createFakeUserAndLogin} from '../../support/authenticateUser'
 
 import {TaskFactory} from '../../factories/task'
 import {ListFactory} from '../../factories/list'
@@ -11,16 +11,53 @@ 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', () => {
+	createFakeUserAndLogin()
+
 	let namespaces
 	let lists
+	let buckets
 
 	beforeEach(() => {
-		UserFactory.create(1)
+		// UserFactory.create(1)
 		namespaces = NamespaceFactory.create(1)
 		lists = ListFactory.create(1)
+		buckets = BucketFactory.create(1, {
+			list_id: lists[0].id,
+		})
 		TaskFactory.truncate()
 		UserListFactory.truncate()
 	})
@@ -80,6 +117,7 @@ describe('Task', () => {
 	describe('Task Detail View', () => {
 		beforeEach(() => {
 			TaskCommentFactory.truncate()
+			LabelTaskFactory.truncate()
 		})
 
 		it('Shows all task details', () => {
@@ -108,7 +146,7 @@ describe('Task', () => {
 				id: 1,
 				index: 1,
 				done: true,
-				done_at: formatISO(new Date())
+				done_at: new Date().toISOString()
 			})
 			cy.visit(`/tasks/${tasks[0].id}`)
 
@@ -344,21 +382,31 @@ describe('Task', () => {
 
 			cy.visit(`/tasks/${tasks[0].id}`)
 
-			cy.get('.task-view .action-buttons .button')
-				.contains('Add Labels')
+			addLabelToTaskAndVerify(labels[0].title)
+		})
+		
+		it('Can add a label to a task and it shows up on the kanban board afterwards', () => {
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+				list_id: lists[0].id,
+				bucket_id: buckets[0].id,
+			})
+			const labels = LabelFactory.create(1)
+			LabelTaskFactory.truncate()
+			
+			cy.visit(`/lists/${lists[0].id}/kanban`)
+			
+			cy.get('.bucket .task')
+				.contains(tasks[0].title)
 				.click()
-			cy.get('.task-view .details.labels-list .multiselect input')
-				.type(labels[0].title)
-			cy.get('.task-view .details.labels-list .multiselect .search-results')
-				.children()
-				.first()
+			
+			addLabelToTaskAndVerify(labels[0].title)
+			
+			cy.get('.modal-content .close')
 				.click()
-
-			cy.get('.global-notification', { timeout: 4000 })
-				.should('contain', 'Success')
-			cy.get('.task-view .details.labels-list .multiselect .input-wrapper span.tag')
-				.should('exist')
-				.should('contain', labels[0].title)
+			
+			cy.get('.bucket .task')
+				.should('contain.text', labels[0].title)
 		})
 
 		it('Can remove a label from a task', () => {
@@ -374,10 +422,10 @@ 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"]')
@@ -417,5 +465,117 @@ describe('Task', () => {
 			cy.get('.global-notification')
 				.should('contain', 'Success')
 		})
+		
+		it('Can set a priority for a task', () => {
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+			})
+			cy.visit(`/tasks/${tasks[0].id}`)
+
+			cy.get('.task-view .action-buttons .button')
+				.contains('Set Priority')
+				.click()
+			cy.get('.task-view .columns.details .column')
+				.contains('Priority')
+				.get('.select select')
+				.select('Urgent')
+			cy.get('.global-notification')
+				.should('contain', 'Success')
+
+			cy.get('.task-view .columns.details .column')
+				.contains('Priority')
+				.get('.select select')
+				.should('have.value', '4')
+		})
+
+		it('Can set the progress for a task', () => {
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+			})
+			cy.visit(`/tasks/${tasks[0].id}`)
+
+			cy.get('.task-view .action-buttons .button')
+				.contains('Set Progress')
+				.click()
+			cy.get('.task-view .columns.details .column')
+				.contains('Progress')
+				.get('.select select')
+				.select('50%')
+			cy.get('.global-notification')
+				.should('contain', 'Success')
+			
+			cy.wait(200)
+
+			cy.get('.task-view .columns.details .column')
+				.contains('Progress')
+				.get('.select select')
+				.should('be.visible')
+				.should('have.value', '0.5')
+		})
+		
+		it('Can add an attachment to a task', () => {
+			TaskAttachmentFactory.truncate()
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+			})
+			cy.visit(`/tasks/${tasks[0].id}`)
+
+			uploadAttachmentAndVerify(tasks[0].id)
+		})
+
+		it('Can add an attachment to a task and see it appearing on kanban', () => {
+			TaskAttachmentFactory.truncate()
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+				list_id: lists[0].id,
+				bucket_id: buckets[0].id,
+			})
+			const labels = LabelFactory.create(1)
+			LabelTaskFactory.truncate()
+
+			cy.visit(`/lists/${lists[0].id}/kanban`)
+
+			cy.get('.bucket .task')
+				.contains(tasks[0].title)
+				.click()
+
+			uploadAttachmentAndVerify(tasks[0].id)
+
+			cy.get('.modal-content .close')
+				.click()
+
+			cy.get('.bucket .task .footer .icon svg.fa-paperclip')
+				.should('exist')
+		})
+		
+		it('Can check items off a checklist', () => {
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+				description: `
+This is a checklist:
+
+* [ ] one item
+* [ ] another item
+* [ ] third item
+* [ ] fourth item
+* [x] and this one is already done
+`,
+			})
+			cy.visit(`/tasks/${tasks[0].id}`)
+			
+			cy.get('.task-view .checklist-summary')
+				.should('contain.text', '1 of 5 tasks')
+			cy.get('.editor .content ul > li input[type=checkbox]')
+				.eq(2)
+				.click()
+			
+			cy.get('.editor .content ul > li input[type=checkbox]')
+				.eq(2)
+				.should('be.checked')
+			cy.get('.editor .content input[type=checkbox]')
+				.should('have.length', 5)
+			cy.get('.task-view .checklist-summary')
+				.should('contain.text', '2 of 5 tasks')
+		})
 	})
 })

cypress/e2e/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "include": ["./**/*", "../support/**/*", "../factories/**/*"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "isolatedModules": false,
+    "target": "ES2015",
+    "lib": ["ESNext", "dom"],
+    "types": ["cypress"]
+  }
+}

cypress/e2e/user/login.spec.ts

@@ -11,16 +11,11 @@ const testAndAssertFailed = fixture => {
 	cy.get('div.message.danger').contains('Wrong username or password.')
 }
 
+const username = 'test'
+
 context('Login', () => {
 	beforeEach(() => {
-		UserFactory.create(1, {
-			username: 'test',
-		})
-		cy.visit('/', {
-			onBeforeLoad(win) {
-				win.localStorage.removeItem('token')
-			},
-		})
+		UserFactory.create(1, {username})
 	})
 
 	it('Should log in with the right credentials', () => {
@@ -55,4 +50,9 @@ context('Login', () => {
 
 		testAndAssertFailed(fixture)
 	})
+	
+	it('Should redirect to /login when no user is logged in', () => {
+		cy.visit('/')
+		cy.url().should('include', '/login')
+	})
 })

cypress/e2e/user/logout.spec.ts

@@ -1,15 +1,17 @@
-import '../../support/authenticateUser'
+import {createFakeUserAndLogin} from '../../support/authenticateUser'
 import {createLists} from '../list/prepareLists'
 
 function logout() {
-	cy.get('.navbar .user .username')
+	cy.get('.navbar .username-dropdown-trigger')
 		.click()
-	cy.get('.navbar .user .dropdown-menu .dropdown-item')
+	cy.get('.navbar .dropdown-item')
 		.contains('Logout')
 		.click()
 }
 
 describe('Log out', () => {
+	createFakeUserAndLogin()
+
 	it('Logs the user out', () => {
 		cy.visit('/')
 

cypress/e2e/user/settings.spec.ts

@@ -1,11 +1,7 @@
-import {UserFactory} from '../../factories/user'
-
-import '../../support/authenticateUser'
+import {createFakeUserAndLogin} from '../../support/authenticateUser'
 
 describe('User Settings', () => {
-	beforeEach(() => {
-		UserFactory.create(1)
-	})
+	createFakeUserAndLogin()
 
 	it('Changes the user avatar', () => {
 		cy.intercept(`${Cypress.env('API_URL')}/user/settings/avatar/upload`).as('uploadAvatar')
@@ -41,7 +37,7 @@ describe('User Settings', () => {
 
 		cy.get('.global-notification')
 			.should('contain', 'Success')
-		cy.get('.navbar .user .username')
+		cy.get('.navbar .username-dropdown-trigger .username')
 			.should('contain', 'Lorem Ipsum')
 	})
 })

cypress/factories/bucket.ts

@@ -1,6 +1,5 @@
 import {faker} from '@faker-js/faker'
 import {Factory} from '../support/factory'
-import {formatISO} from 'date-fns'
 
 export class BucketFactory extends Factory {
 	static table = 'buckets'
@@ -13,8 +12,8 @@ export class BucketFactory extends Factory {
 			title: faker.lorem.words(3),
 			list_id: 1,
 			created_by_id: 1,
-			created: formatISO(now),
-			updated: formatISO(now)
+			created: now.toISOString(),
+			updated: now.toISOString(),
 		}
 	}
 }

cypress/factories/label_task.ts

@@ -1,5 +1,4 @@
 import {Factory} from '../support/factory'
-import {formatISO} from 'date-fns'
 
 export class LabelTaskFactory extends Factory {
 	static table = 'label_tasks'
@@ -11,7 +10,7 @@ export class LabelTaskFactory extends Factory {
 			id: '{increment}',
 			task_id: 1,
 			label_id: 1,
-			created: formatISO(now),
+			created: now.toISOString(),
 		}
 	}
 }

cypress/factories/labels.ts

@@ -1,7 +1,6 @@
 import {faker} from '@faker-js/faker'
 
 import {Factory} from '../support/factory'
-import {formatISO} from 'date-fns'
 
 export class LabelFactory extends Factory {
 	static table = 'labels'
@@ -15,8 +14,8 @@ export class LabelFactory extends Factory {
 			description: faker.lorem.text(10),
 			hex_color: (Math.random()*0xFFFFFF<<0).toString(16), // random 6-digit hex number
 			created_by_id: 1,
-			created: formatISO(now),
-			updated: formatISO(now),
+			created: now.toISOString(),
+			updated: now.toISOString(),
 		}
 	}
 }

cypress/factories/link_sharing.ts

@@ -1,5 +1,4 @@
 import {Factory} from '../support/factory'
-import {formatISO} from "date-fns"
 import {faker} from '@faker-js/faker'
 
 export class LinkShareFactory extends Factory {
@@ -15,8 +14,8 @@ export class LinkShareFactory extends Factory {
 			right: 0,
 			sharing_type: 0,
 			shared_by_id: 1,
-			created: formatISO(now),
-			updated: formatISO(now)
+			created: now.toISOString(),
+			updated: now.toISOString(),
 		}
 	}
 }

cypress/factories/list.ts

@@ -1,5 +1,4 @@
 import {Factory} from '../support/factory'
-import {formatISO} from "date-fns"
 import {faker} from '@faker-js/faker'
 
 export class ListFactory extends Factory {
@@ -13,8 +12,8 @@ export class ListFactory extends Factory {
 			title: faker.lorem.words(3),
 			owner_id: 1,
 			namespace_id: 1,
-			created: formatISO(now),
-			updated: formatISO(now)
+			created: now.toISOString(),
+			updated: now.toISOString(),
 		}
 	}
 }

cypress/factories/namespace.ts

@@ -1,6 +1,5 @@
 import {faker} from '@faker-js/faker'
 import {Factory} from '../support/factory'
-import {formatISO} from 'date-fns'
 
 export class NamespaceFactory extends Factory {
 	static table = 'namespaces'
@@ -12,8 +11,8 @@ export class NamespaceFactory extends Factory {
 			id: '{increment}',
 			title: faker.lorem.words(3),
 			owner_id: 1,
-			created: formatISO(now),
-			updated: formatISO(now)
+			created: now.toISOString(),
+			updated: now.toISOString(),
 		}
 	}
 }

cypress/factories/task.ts

@@ -1,6 +1,5 @@
 import {faker} from '@faker-js/faker'
 import {Factory} from '../support/factory'
-import {formatISO} from 'date-fns'
 
 export class TaskFactory extends Factory {
 	static table = 'tasks'
@@ -16,8 +15,8 @@ export class TaskFactory extends Factory {
 			created_by_id: 1,
 			index: '{increment}',
 			position: '{increment}',
-			created: formatISO(now),
-			updated: formatISO(now)
+			created: now.toISOString(),
+			updated: now.toISOString()
 		}
 	}
 }

cypress/factories/task_assignee.ts

@@ -1,5 +1,4 @@
 import {Factory} from '../support/factory'
-import {formatISO} from 'date-fns'
 
 export class TaskAssigneeFactory extends Factory {
 	static table = 'task_assignees'
@@ -11,7 +10,7 @@ export class TaskAssigneeFactory extends Factory {
 			id: '{increment}',
 			task_id: 1,
 			user_id: 1,
-			created: formatISO(now),
+			created: now.toISOString(),
 		}
 	}
 }

cypress/factories/task_attachments.ts

@@ -0,0 +1,16 @@
+import {Factory} from '../support/factory'
+
+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: now.toISOString(),
+		}
+	}
+}

cypress/factories/task_comment.ts

@@ -1,7 +1,6 @@
 import {faker} from '@faker-js/faker'
 
 import {Factory} from '../support/factory'
-import {formatISO} from "date-fns"
 
 export class TaskCommentFactory extends Factory {
 	static table = 'task_comments'
@@ -14,8 +13,8 @@ export class TaskCommentFactory extends Factory {
 			comment: faker.lorem.text(3),
 			author_id: 1,
 			task_id: 1,
-			created: formatISO(now),
-			updated: formatISO(now)
+			created: now.toISOString(),
+			updated: now.toISOString()
 		}
 	}
 }

cypress/factories/team.ts

@@ -1,6 +1,5 @@
 import {faker} from '@faker-js/faker'
 import {Factory} from '../support/factory'
-import {formatISO} from 'date-fns'
 
 export class TeamFactory extends Factory {
     static table = 'teams'
@@ -11,8 +10,8 @@ export class TeamFactory extends Factory {
         return {
             name: faker.lorem.words(3),
             created_by_id: 1,
-			created: formatISO(now),
-			updated: formatISO(now)
+			created: now.toISOString(),
+			updated: now.toISOString(),
         }
     }
 }

cypress/factories/team_member.ts

@@ -1,5 +1,4 @@
 import {Factory} from '../support/factory'
-import {formatISO} from 'date-fns'
 
 export class TeamMemberFactory extends Factory {
     static table = 'team_members'
@@ -9,7 +8,7 @@ export class TeamMemberFactory extends Factory {
             team_id: 1,
             user_id: 1,
             admin: false,
-            created: formatISO(new Date()),
+            created: new Date().toISOString(),
         }
     }
 }

cypress/factories/user.ts

@@ -1,7 +1,6 @@
 import {faker} from '@faker-js/faker'
 
 import {Factory} from '../support/factory'
-import {formatISO} from "date-fns"
 
 export class UserFactory extends Factory {
 	static table = 'users'
@@ -15,8 +14,8 @@ export class UserFactory extends Factory {
             password: '$2a$14$dcadBoMBL9jQoOcZK8Fju.cy0Ptx2oZECkKLnaa8ekRoTFe1w7To.', // 1234
 			status: 0,
 			issuer: 'local',
-			created: formatISO(now),
-			updated: formatISO(now)
+			created: now.toISOString(),
+			updated: now.toISOString(),
 		}
 	}
 }

cypress/factories/users_list.ts

@@ -1,5 +1,4 @@
 import {Factory} from '../support/factory'
-import {formatISO} from "date-fns"
 
 export class UserListFactory extends Factory {
 	static table = 'users_lists'
@@ -12,8 +11,8 @@ export class UserListFactory extends Factory {
 			list_id: 1,
 			user_id: 1,
 			right: 0,
-			created: formatISO(now),
-			updated: formatISO(now)
+			created: now.toISOString(),
+			updated: now.toISOString(),
 		}
 	}
 }

cypress/support/authenticateUser.ts

@@ -4,26 +4,32 @@
 
 import {UserFactory} from '../factories/user'
 
-let token
-
-before(() => {
-	const users = UserFactory.create(1)
-
-	cy.request('POST', `${Cypress.env('API_URL')}/login`, {
-		username: users[0].username,
-		password: '1234',
-	})
-		.its('body')
-		.then(r => {
-			token = r.token
+export function login(user, cacheAcrossSpecs = false) {
+	if (!user) {
+		throw new Error('Needs user')
+	}
+	// Caching session when logging in via page visit
+	cy.session(`user__${user.username}`, () => {
+		cy.request('POST', `${Cypress.env('API_URL')}/login`, {
+			username: user.username,
+			password: '1234',
+		}).then(({ body }) => {
+			window.localStorage.setItem('token', body.token)
 		})
-})
+	}, {
+    cacheAcrossSpecs,
+  })
+}
 
-beforeEach(() => {
-	cy.log(`Using token ${token} to make authenticated requests`)
-	cy.visit('/', {
-		onBeforeLoad(win) {
-			win.localStorage.setItem('token', token)
-		},
+export function createFakeUserAndLogin() {
+	let user
+	before(() => {
+		user = UserFactory.create(1)[0]
 	})
-})
+
+	beforeEach(() => {
+		login(user, true)
+	})
+
+	return user
+}

cypress/support/commands.ts

@@ -34,38 +34,4 @@
 //       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/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

@@ -1,17 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

docker/injector.sh

@@ -0,0 +1,15 @@
+#!/usr/bin/env sh
+set -e
+
+echo "info: API URL is $VIKUNJA_API_URL"
+echo "info: Sentry enabled: $VIKUNJA_SENTRY_ENABLED"
+
+# Escape the variable to prevent sed from complaining
+VIKUNJA_API_URL="$(echo "$VIKUNJA_API_URL" | sed -r 's/([:;])/\\\1/g')"
+VIKUNJA_SENTRY_DSN="$(echo "$VIKUNJA_SENTRY_DSN" | sed -r 's/([:;])/\\\1/g')"
+
+sed -ri "s:^(\s*window.API_URL\s*=)\s*.+:\1 '${VIKUNJA_API_URL}':g" /usr/share/nginx/html/index.html
+sed -ri "s:^(\s*window.SENTRY_ENABLED\s*=)\s*.+:\1 ${VIKUNJA_SENTRY_ENABLED}:g" /usr/share/nginx/html/index.html
+sed -ri "s:^(\s*window.SENTRY_DSN\s*=)\s*.+:\1 '${VIKUNJA_SENTRY_DSN}':g" /usr/share/nginx/html/index.html
+
+date -uIseconds | xargs echo 'info: started at'

docker/ipv6-disable.sh

@@ -0,0 +1,19 @@
+#!/usr/bin/env sh
+set -e
+
+if [ ! -f "/proc/net/if_inet6" ]; then
+  echo "info: IPv6 is not available! Removing IPv6 listen configuration"
+  find /etc/nginx/conf.d -name '*.conf' -type f | \
+  while IFS= read -r CONFIG; do
+    sed -r '/^\s*listen\s*\[::\]:.+$/d' "$CONFIG" > "$CONFIG.temp"
+    if ! diff -U 5 "$CONFIG" "$CONFIG.temp" > "$CONFIG.diff"; then
+      echo "info: Removing IPv6 lines from $CONFIG" | \
+      cat - "$CONFIG.diff"
+      echo "# IPv6 is disabled because /proc/net/if_inet6 was not found" | \
+      cat - "$CONFIG.temp" > "$CONFIG"
+    else
+      echo "info: Skipping $CONFIG because it does not have IPv6 listen"
+    fi
+    rm -f "$CONFIG.temp" "$CONFIG.diff"
+  done
+fi

docker/nginx.conf

@@ -0,0 +1,112 @@
+# Generated by nginxconfig.io
+# https://www.digitalocean.com/community/tools/nginx?domains.0.server.domain=localhost&domains.0.server.documentRoot=%2Fusr%2Fshare%2Fnginx%2Fhtml&domains.0.server.cdnSubdomain=true&domains.0.https.https=false&domains.0.php.php=false&domains.0.routing.index=index.html&domains.0.routing.fallbackHtml=true&domains.0.routing.fallbackPhp=false&global.performance.assetsExpiration=1d&global.performance.mediaExpiration=1d&global.performance.svgExpiration=1d&global.performance.fontsExpiration=1d&global.logging.accessLog=%2Fdev%2Fstdout&global.logging.errorLog=%2Fdev%2Fstderr%20warn&global.logging.logNotFound=true&global.nginx.user=nginx&global.nginx.pid=%2Fvar%2Frun%2Fnginx.pid&global.nginx.clientMaxBodySize=50&global.docker.dockerfile=true&global.tools.modularizedStructure=false&global.tools.symlinkVhost=false
+# and then edited manually ;)
+
+pid                  /tmp/nginx.pid;
+worker_processes     auto;
+worker_rlimit_nofile 65535;
+
+events {
+  multi_accept       on;
+  worker_connections  1024;
+}
+
+http {
+  charset                utf-8;
+  sendfile               on;
+  tcp_nopush             on;
+  tcp_nodelay            on;
+  server_tokens          off;
+  types_hash_max_size    2048;
+  types_hash_bucket_size 64;
+
+  # rootless
+  client_body_temp_path /tmp/client_temp;
+  proxy_temp_path       /tmp/proxy_temp_path;
+  fastcgi_temp_path     /tmp/fastcgi_temp;
+  uwsgi_temp_path       /tmp/uwsgi_temp;
+  scgi_temp_path        /tmp/scgi_temp;
+
+  # MIME
+  include                mime.types;
+  default_type           application/octet-stream;
+  types {
+    application/manifest+json webmanifest;
+  }
+
+  # Logging
+  log_format json escape=json
+    '{'
+      '"bytes_sent": "$bytes_sent",'
+      '"http_user_agent": "$http_user_agent",'
+      '"nginx_version": "$nginx_version",'
+      '"query_string": "$query_string",'
+      '"realip_remote_addr": "$realip_remote_addr",'
+      '"remote_addr": "$remote_addr",'
+      '"remote_user": "$remote_user",'
+      '"request_length": "$request_length",'
+      '"request_method": "$request_method",'
+      '"request_time": "$request_time",'
+      '"server_addr": "$server_addr",'
+      '"server_port": "$server_port",'
+      '"server_protocol": "$server_protocol",'
+      '"status": "$status",'
+      '"time_local": "$time_local",'
+      '"uri": "$uri"' 
+    '}';
+
+  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             /dev/stdout main;
+  error_log              /dev/stderr warn;
+
+  keepalive_timeout  65;
+
+  # compression
+  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;
+
+  map_hash_max_size 128;
+  map_hash_bucket_size 128;
+
+  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;
+  }
+
+  include /etc/nginx/conf.d/*.conf;
+}

docker/templates/default.conf.template

@@ -0,0 +1,85 @@
+server {
+  listen      ${VIKUNJA_HTTP_PORT};
+  listen      [::]:${VIKUNJA_HTTP_PORT};
+  ## Needed when behind HAProxy with SSL termination + HTTP/2 support
+  listen      ${VIKUNJA_HTTP2_PORT}  default_server http2 proxy_protocol;
+  listen      [::]:${VIKUNJA_HTTP2_PORT} default_server http2 proxy_protocol;
+
+  server_name _;
+  expires     $expires;
+  root        /usr/share/nginx/html;
+  access_log  /dev/stdout ${VIKUNJA_LOG_FORMAT};
+  # security headers
+  add_header X-XSS-Protection        "1; mode=block" always;
+  add_header X-Content-Type-Options  "nosniff" always;
+  add_header Referrer-Policy         "no-referrer-when-downgrade" always;
+  add_header Content-Security-Policy "default-src 'self' http: https: ws: wss: data: blob: 'unsafe-inline'; frame-ancestors 'self';" always;
+  add_header Permissions-Policy      "interest-cohort=()" always;
+
+  # . files
+  location ~ /\.(?!well-known) {
+    deny all;
+  }
+
+  # 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;
+  }
+  
+  # Disable caching for sw
+  location = /sw.js {
+    autoindex off;
+    expires off;
+    add_header Cache-Control "public, max-age=0, s-maxage=0, must-revalidate" always;
+  }
+
+  # Disable caching for webmanifest
+  location = /manifest.webmanifest {
+    autoindex off;
+    expires off;
+    add_header Cache-Control "public, max-age=0, s-maxage=0, must-revalidate" always;
+  }
+
+  # favicon.ico
+  location = /favicon.ico {
+    log_not_found off;
+    access_log    off;
+  }
+
+  # robots.txt
+  location = /robots.txt {
+    log_not_found off;
+    access_log    off;
+    expires -1; # no-cache
+  }
+
+  location = /ready {
+    return 200 "";
+    access_log off;
+    expires -1; # no-cache
+  }
+
+  # 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;
+  }
+
+  # assets, media
+  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 { }
+
+}

env.config.d.ts

@@ -0,0 +1,9 @@
+declare module 'postcss-easings' {
+  import postcssEasings from 'postcss-easings'
+  export default postcssEasings
+}
+
+declare module 'postcss-easing-gradients' {
+  import postcssEasingGradients from 'postcss-easing-gradients'
+  export default postcssEasingGradients
+}

env.d.ts

@@ -1,3 +1,12 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-svg-loader" />
-/// <reference types="cypress" />
+/// <reference types="cypress" />
+/// <reference types="@histoire/plugin-vue/components" />
+
+interface ImportMetaEnv {
+  readonly VITE_IS_ONLINE: boolean
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

flake.lock

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

flake.nix

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

histoire.config.ts

@@ -0,0 +1,34 @@
+import {defineConfig, defaultColors} from 'histoire'
+import {HstVue} from '@histoire/plugin-vue'
+import {HstScreenshot} from '@histoire/plugin-screenshot'
+
+export default defineConfig({
+	setupFile: './src/histoire.setup.ts',
+	storyIgnored: [
+		'**/node_modules/**',
+		'**/dist/**',
+		// see https://kolaente.dev/vikunja/frontend/pulls/2724#issuecomment-42012
+		'**/.direnv/**',
+	],
+	plugins: [
+		HstVue(),
+		HstScreenshot({
+			// Options here
+		}),
+	],
+	theme: {
+		title: 'Vikunja',
+		colors: {
+			// https://histoire.dev/guide/config.html#builtin-colors
+			gray: defaultColors.zinc,
+			primary: defaultColors.cyan,
+		},
+		// logo: {
+		// 	square: './img/square.png',
+		// 	light: './img/light.png',
+		// 	dark: './img/dark.png',
+		// },
+		// logoHref: 'https://acme.com',
+		// favicon: './favicon.ico',
+	},
+})

index.html

@@ -1,22 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<title>Vikunja</title>
 	<meta charset="utf-8">
-	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width,initial-scale=1.0">
+	<title>Vikunja</title>
 	<meta name="description" content="Vikunja (/vɪˈkuːnjə/) - The to-do app to organize your life.">
 	<meta name="theme-color" content="#1973ff"/>
 
 	<link rel="icon" href="/favicon.ico">
 	<link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-180x180.png"/>
-	<link rel="preload" crossorigin="anonymous" href="/fonts/open-sans-v15-latin-700italic.woff2" as="font">
-	<link rel="preload" crossorigin="anonymous" href="/fonts/open-sans-v15-latin-italic.woff2" as="font">
-	<link rel="preload" crossorigin="anonymous" href="/fonts/quicksand-v7-latin-500.woff2" as="font">
-	<link rel="preload" crossorigin="anonymous" href="/fonts/quicksand-v7-latin-700.woff2" as="font">
-	<link rel="preload" crossorigin="anonymous" href="/fonts/open-sans-v15-latin-regular.woff2" as="font">
-	<link rel="preload" crossorigin="anonymous" href="/fonts/open-sans-v15-latin-700.woff2" as="font">
-	<link rel="preload" crossorigin="anonymous" href="/fonts/quicksand-v7-latin-regular.woff2" as="font">
+	<!--__vite-plugin-inject-preload__-->
 </head>
 <body>
 <noscript>

netlify.toml

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

nginx.conf

@@ -1,115 +0,0 @@
-user  nginx;
-worker_processes  1;
-
-error_log  /var/log/nginx/error.log warn;
-pid        /var/run/nginx.pid;
-
-
-events {
-	worker_connections  1024;
-}
-
-
-http {
-	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"';
-
-	access_log  /var/log/nginx/access.log  main;
-
-	sendfile        on;
-	#tcp_nopush     on;
-
-	keepalive_timeout  65;
-
-	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;
-
-	map_hash_max_size 128;
-	map_hash_bucket_size 128;
-
-	# 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_name  _;
-
-		expires $expires;
-
-		root   /usr/share/nginx/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 {
-		}
-	}
-}

package.json

@@ -1,110 +1,149 @@
 {
   "name": "vikunja-frontend",
-  "version": "0.10.0",
+  "description": "The todo app to organize your life.",
   "private": true,
+  "version": "0.10.0",
+  "license": "AGPL-3.0-or-later",
+  "repository": {
+    "type": "git",
+    "url": "https://kolaente.dev/vikunja/frontend"
+  },
+  "bugs": {
+    "url": "https://kolaente.dev/vikunja/frontend/issues"
+  },
+  "homepage": "https://vikunja.io/",
+  "funding": "https://opencollective.com/vikunja",
+  "packageManager": "pnpm@7.28.0",
+  "keywords": [
+    "todo",
+    "productivity",
+    "task management",
+    "organisation",
+    "gantt",
+    "kanban"
+  ],
   "scripts": {
     "serve": "vite",
-    "serve:dist-dev": "node scripts/serve-dist.js",
-    "serve:dist": "vite preview --port 4173",
+    "preview": "vite preview --port 4173",
+    "preview:dev": "vite preview --outDir dist-dev --mode development --port 4173",
     "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/",
+    "build:dev": "vite build --mode development --outDir dist-dev/",
     "lint": "eslint --ignore-pattern '*.test.*' ./src --ext .vue,.js,.ts",
-    "cypress:open": "cypress open",
-    "test:unit": "vitest",
-    "test:unit-watch": "vitest watch",
-    "test:frontend": "cypress run",
+    "test:e2e": "start-server-and-test preview http://127.0.0.1:4173 'cypress run --e2e --browser chrome'",
+    "test:e2e-record": "start-server-and-test preview http://127.0.0.1:4173 'cypress run --e2e --browser chrome --record'",
+    "test:e2e-dev-dev": "start-server-and-test preview:dev http://127.0.0.1:4173 'cypress open --e2e'",
+    "test:e2e-dev": "start-server-and-test preview http://127.0.0.1:4173 'cypress open --e2e'",
+    "test:unit": "vitest --dir ./src",
     "typecheck": "vue-tsc --noEmit && vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
-    "browserslist:update": "npx browserslist@latest --update-db"
+    "browserslist:update": "pnpm dlx browserslist@latest --update-db",
+    "fonts:update": "pnpm fonts:download && pnpm fonts:subset",
+    "fonts:download": "./scripts/fonts-download.sh",
+    "fonts:subset": "./scripts/fonts-subset.sh",
+    "story:dev": "histoire dev",
+    "story:build": "histoire build",
+    "story:preview": "histoire preview"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.2.0",
-    "@fortawesome/free-regular-svg-icons": "6.2.0",
-    "@fortawesome/free-solid-svg-icons": "6.2.0",
-    "@fortawesome/vue-fontawesome": "3.0.1",
+    "@fortawesome/fontawesome-svg-core": "6.3.0",
+    "@fortawesome/free-regular-svg-icons": "6.3.0",
+    "@fortawesome/free-solid-svg-icons": "6.3.0",
+    "@fortawesome/vue-fontawesome": "3.0.3",
     "@github/hotkey": "2.0.1",
-    "@kyvg/vue3-notification": "2.4.1",
-    "@sentry/tracing": "7.12.1",
-    "@sentry/vue": "7.12.1",
+    "@infectoone/vue-ganttastic": "2.1.4",
+    "@intlify/unplugin-vue-i18n": "0.8.2",
+    "@kyvg/vue3-notification": "2.9.0",
+    "@sentry/tracing": "7.39.0",
+    "@sentry/vue": "7.39.0",
     "@types/is-touch-device": "1.0.0",
     "@types/lodash.clonedeep": "4.5.7",
-    "@types/sortablejs": "1.13.0",
-    "@vueuse/core": "9.2.0",
-    "@vueuse/router": "9.2.0",
-    "axios": "0.27.2",
-    "blurhash": "2.0.0",
+    "@types/sortablejs": "1.15.0",
+    "@vueuse/core": "9.13.0",
+    "axios": "1.3.4",
+    "blurhash": "2.0.5",
     "bulma-css-variables": "0.9.33",
     "camel-case": "4.1.2",
+    "codemirror": "5.65.12",
     "date-fns": "2.29.3",
-    "dompurify": "2.4.0",
-    "easymde": "2.17.0",
+    "dayjs": "1.11.7",
+    "dompurify": "3.0.0",
+    "easymde": "2.18.0",
+    "fast-deep-equal": "3.1.3",
     "flatpickr": "4.6.13",
     "flexsearch": "0.7.21",
-    "highlight.js": "11.6.0",
+    "floating-vue": "2.0.0-beta.20",
+    "focus-within": "3.0.2",
+    "highlight.js": "11.7.0",
     "is-touch-device": "1.0.1",
-    "lodash.clonedeep": "4.5.0",
+    "klona": "2.0.6",
     "lodash.debounce": "4.0.8",
-    "marked": "4.1.0",
-    "minimist": "1.2.6",
+    "marked": "4.2.12",
+    "pinia": "2.0.32",
     "register-service-worker": "1.7.2",
     "snake-case": "3.0.4",
-    "ufo": "0.8.5",
-    "v-tooltip": "4.0.0-beta.17",
-    "validator": "^13.7.0",
-    "vue": "3.2.39",
-    "vue-advanced-cropper": "2.8.3",
-    "vue-drag-resize": "2.0.3",
-    "vue-flatpickr-component": "9.0.6",
+    "sortablejs": "1.15.0",
+    "ufo": "1.1.1",
+    "validator": "13.9.0",
+    "vue": "3.2.47",
+    "vue-advanced-cropper": "2.8.8",
+    "vue-flatpickr-component": "11.0.2",
     "vue-i18n": "9.2.2",
-    "vue-router": "4.1.5",
-    "vuex": "4.0.2",
+    "vue-router": "4.1.6",
     "workbox-precaching": "6.5.4",
-    "zhyswan-vuedraggable": "4.1.3"
+    "zhyswan-vuedraggable": "4.1.3",
+    "zod": "3.20.6"
   },
   "devDependencies": {
-    "@4tw/cypress-drag-drop": "2.2.1",
-    "@cypress/vite-dev-server": "3.1.1",
-    "@cypress/vue": "4.2.0",
-    "@faker-js/faker": "7.5.0",
+    "@4tw/cypress-drag-drop": "2.2.3",
+    "@cypress/vite-dev-server": "5.0.4",
+    "@cypress/vue": "5.0.4",
+    "@faker-js/faker": "7.6.0",
+    "@histoire/plugin-screenshot": "0.15.8",
+    "@histoire/plugin-vue": "0.15.8",
+    "@rushstack/eslint-patch": "1.2.0",
+    "@types/codemirror": "5.60.7",
+    "@types/dompurify": "2.4.0",
     "@types/flexsearch": "0.7.3",
-    "@types/validator": "^13.7.5",
-    "@typescript-eslint/eslint-plugin": "5.37.0",
-    "@typescript-eslint/parser": "5.37.0",
-    "@vitejs/plugin-legacy": "2.1.0",
-    "@vitejs/plugin-vue": "3.1.0",
-    "@vue/eslint-config-typescript": "11.0.1",
-    "@vue/test-utils": "2.0.2",
+    "@types/focus-within": "1.0.1",
+    "@types/lodash.debounce": "4.0.7",
+    "@types/marked": "4.0.8",
+    "@types/node": "18.14.2",
+    "@types/postcss-preset-env": "7.7.0",
+    "@types/validator": "13.7.12",
+    "@typescript-eslint/eslint-plugin": "5.54.0",
+    "@typescript-eslint/parser": "5.54.0",
+    "@vitejs/plugin-legacy": "4.0.1",
+    "@vitejs/plugin-vue": "4.0.0",
+    "@vue/eslint-config-typescript": "11.0.2",
+    "@vue/test-utils": "2.3.0",
     "@vue/tsconfig": "0.1.3",
-    "autoprefixer": "10.4.9",
-    "browserslist": "4.21.3",
-    "caniuse-lite": "1.0.30001397",
-    "cypress": "10.7.0",
-    "esbuild": "0.15.7",
-    "eslint": "8.23.1",
-    "eslint-plugin-vue": "9.4.0",
-    "express": "4.18.1",
-    "happy-dom": "6.0.4",
-    "netlify-cli": "11.7.1",
-    "postcss": "8.4.16",
-    "postcss-preset-env": "7.8.1",
-    "rollup": "2.79.0",
-    "rollup-plugin-visualizer": "5.8.1",
-    "sass": "1.54.9",
-    "typescript": "4.8.3",
-    "vite": "3.1.0",
-    "vite-plugin-pwa": "0.12.7",
-    "vite-svg-loader": "3.6.0",
-    "vitest": "0.23.2",
-    "vue-tsc": "0.40.13",
-    "wait-on": "6.0.1",
-    "workbox-cli": "6.5.4",
-    "zod": "3.18.0"
-  },
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
-  },
-  "license": "AGPL-3.0-or-later",
-  "packageManager": "yarn@1.22.19"
+    "autoprefixer": "10.4.13",
+    "browserslist": "4.21.5",
+    "caniuse-lite": "1.0.30001458",
+    "csstype": "3.1.1",
+    "cypress": "12.7.0",
+    "esbuild": "0.17.10",
+    "eslint": "8.35.0",
+    "eslint-plugin-vue": "9.9.0",
+    "happy-dom": "8.9.0",
+    "histoire": "0.15.8",
+    "netlify-cli": "13.0.0",
+    "postcss": "8.4.21",
+    "postcss-easing-gradients": "3.0.1",
+    "postcss-easings": "3.0.1",
+    "postcss-preset-env": "8.0.1",
+    "rollup": "3.17.3",
+    "rollup-plugin-visualizer": "5.9.0",
+    "sass": "1.58.3",
+    "start-server-and-test": "2.0.0",
+    "typescript": "4.9.5",
+    "vite": "4.1.4",
+    "vite-plugin-inject-preload": "1.3.0",
+    "vite-plugin-pwa": "0.14.4",
+    "vite-svg-loader": "4.0.0",
+    "vitest": "0.29.1",
+    "vue-tsc": "1.2.0",
+    "wait-on": "7.0.1",
+    "workbox-cli": "6.5.4"
+  }
 }

renovate.json

@@ -2,11 +2,11 @@
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
   "labels": ["dependencies"],
   "extends": [
-    "config:base"
+    "config:js-app"
   ],
   "packageRules": [
     {
-      "matchPackageNames": ["netlify-cli"],
+      "matchPackageNames": ["netlify-cli", "happy-dom"],
       "extends": ["schedule:weekly"]
     },
     {
@@ -20,6 +20,13 @@
         "@vueuse/"
       ]
     },
+    {
+      "groupName": "histoire",
+      "matchPackagePrefixes": [
+        "@histoire/",
+        "histoire"
+      ]
+    },
     {
       "matchDepTypes": ["devDependencies"],
       "automerge": true,

run.sh

@@ -1,28 +0,0 @@
-#!/bin/bash
-
-# This shell script sets the api url based on an environment variable and starts nginx in foreground.
-
-VIKUNJA_API_URL="${VIKUNJA_API_URL:-"/api/v1"}"
-VIKUNJA_SENTRY_ENABLED="${VIKUNJA_SENTRY_ENABLED:-"false"}"
-VIKUNJA_SENTRY_DSN="${VIKUNJA_SENTRY_DSN:-"https://85694a2d757547cbbc90cd4b55c5a18d@o1047380.ingest.sentry.io/6024480"}"
-VIKUNJA_HTTP_PORT="${VIKUNJA_HTTP_PORT:-80}"
-VIKUNJA_HTTPS_PORT="${VIKUNJA_HTTPS_PORT:-443}"
-
-echo "Using $VIKUNJA_API_URL as default api url"
-
-# Escape the variable to prevent sed from complaining
-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/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
-
-# Set the uid and gid of the nginx run user
-usermod --non-unique --uid ${PUID} nginx
-groupmod --non-unique --gid ${PGID} nginx
-
-nginx -g "daemon off;"

scripts/deploy-preview-netlify.js.sha384

@@ -1 +0,0 @@
-bb46342a0a08105b340ba7976cff9d80ef89901120ec0639669caa70bb7d2dbc43e78b1f635a7654ab2456e8358c98a4  ./scripts/deploy-preview-netlify.js

scripts/deploy-preview-netlify.mjs

@@ -1,15 +1,18 @@
-const {exec} = require('child_process')
-const axios = require('axios')
+import { exec } from 'node:child_process'
+
+function createSlug(string) {
+	return String(string)
+		.trim()
+		.normalize('NFKD')
+		.toLowerCase()
+		.replace(/[.\s/]/g, '-')
+		.replace(/[^A-Za-z\d-]/g, '')
+}
 
 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 = createSlug(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`
@@ -35,7 +38,7 @@ const promiseExec = cmd => {
 	stdout = await promiseExec(`./node_modules/.bin/netlify deploy --alias ${alias}`)
 	console.log(stdout)
 
-	const {data} = await axios.get(prIssueCommentsUrl)
+	const data = await fetch(prIssueCommentsUrl).then(response => response.json())
 	const hasComment = data.some(c => c.user.id === BOT_USER_ID)
 
 	if (hasComment) {
@@ -43,8 +46,7 @@ const promiseExec = cmd => {
 		return
 	}
 
-	await axios.post(prIssueCommentsUrl, {
-		body: `
+	const message = `
 Hi ${process.env.DRONE_COMMIT_AUTHOR}!
 
 Thank you for creating a PR!
@@ -57,14 +59,25 @@ 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}`,
-		},
-	})
+`
 
-	console.log(`Preview comment sent successfully to PR #${prNumber}!`)
+	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}`)
+	}
 })()

scripts/deploy-preview-netlify.mjs.sha384

@@ -0,0 +1 @@
+57af69409e66bc87f4f2fc5822dd8d3c2eb47c601f81af1ac4a56f3e2d80837b1a2de06f4ff57695ec379b7c15b881e3  ./scripts/deploy-preview-netlify.mjs

scripts/fonts-download.sh

@@ -0,0 +1,56 @@
+#!/bin/sh
+set -e
+
+#
+# This script downloads our original font files from their source repos
+# and puts them in our originalMedia folder.
+#
+
+err_report() {
+  echo "Error on line $(caller)" >&2
+}
+
+trap err_report ERR
+
+ORIGINAL_FONTS_DIR="./originalMedia/fonts"
+
+# update these if there is a new version
+FONT_URLS=(
+"https://github.com/googlefonts/opensans/blob/27d060e1aad6886daeda67629ee28189f795f534/fonts/variable/OpenSans%5Bwdth%2Cwght%5D.ttf?raw=true"
+"https://github.com/googlefonts/opensans/blob/27d060e1aad6886daeda67629ee28189f795f534/fonts/variable/OpenSans-Italic%5Bwdth%2Cwght%5D.ttf?raw=true"
+"https://github.com/andrew-paglinawan/QuicksandFamily/blob/db6de44878582966f45a0debaef10d57108d93a7/fonts/Quicksand%5Bwght%5D.ttf?raw=true"
+)
+
+
+echo ""
+echo "###################################################"
+echo "# Download font files"
+echo "###################################################"
+echo ""
+
+mkdir -p $ORIGINAL_FONTS_DIR
+
+for URL in ${FONT_URLS[@]}; do
+	wget -L $URL \
+		--directory-prefix=$ORIGINAL_FONTS_DIR \
+		--quiet \
+		--timestamping \
+		--show-progress
+done
+
+echo ""
+echo "###################################################"
+echo "# Remove '?raw=true' filename suffix"
+echo "###################################################"
+echo ""
+
+# Iterate over all files in directory with filetype ending in "?raw=true"
+for file in $ORIGINAL_FONTS_DIR/*?raw=true; do
+	# Remove "?raw=true" from file name and store in variable
+	new_name=$(echo $file | sed 's/?raw=true//')
+
+	# Overwrite existing file with new name
+	mv -v $file $new_name
+done
+
+echo "Renaming files complete"

scripts/fonts-subset.sh

@@ -0,0 +1,161 @@
+#!/bin/sh
+set -e
+
+#
+# This script subsets our variable fonts,
+# converts them to woff2 files and puts them in the
+# fonts folder.
+#
+# We do have to update the font paths in the @font-face
+# definitions manually since we use a checksum to make
+#
+# We use fonttools to create a partial instance of the
+# variable font where we keep only our needed features.
+# See more at:
+# https://fonttools.readthedocs.io/en/latest/varLib/instancer.html
+#
+# fonttools requires python > 3.7. For up-to-date
+# instructions see https://github.com/fonttools/fonttools#installation 
+#
+# Lot's of info was gathered from:
+# https://markoskon.com/creating-font-subsets/ 
+# https://barrd.dev/article/create-a-variable-font-subset-for-smaller-file-size/
+#
+
+ORIGINAL_FONTS="./originalMedia/fonts"
+TEMP_FOLDER="./.subset-fonts-temp"
+FONT_FOLDER="./src/assets/fonts"
+
+err_report() {
+	echo "Error on line $(caller)" >&2
+}
+
+trap err_report ERR
+
+mkdir -p $TEMP_FOLDER
+
+# the latin subset that google uses on GoogleFonts
+# this is the same as the latin subset range that google uses on GoogleFonts
+# see for examle the unicode-range definition here:
+# https://fonts.googleapis.com/css2?family=Open+Sans
+UNICODE_LATIN_SUBSET="U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,\
+U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,\
+U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD"
+
+get_filename_without_type() {
+	filename=$1
+	dirname=$(dirname $filename)
+	# Extract the file type using parameter expansion
+	filetype=${filename##*.}
+	basename=$(basename $filename .$filetype)
+	echo $basename
+}
+
+# This function takes a font file and creates a subset of it using a specified set of unicode characters.
+instance_and_subset () {
+	# Define default arguments for the subsetter.
+	DEFAULT_SUBSETTER_ARGS="--layout-features=* --unicodes=${UNICODE_LATIN_SUBSET}"
+
+	# Assign function arguments to variables with more descriptive names.
+	INPUT_FONT_FILE=$1
+	INSTANCER_ARGS=$2
+	OUTPUT_FONT_BASENAME=$3
+	OUTPUT_FOLDER=$FONT_FOLDER
+
+	# If the output font basename is not provided, use the input font file's basename as the output font basename.
+	if [ -z "$OUTPUT_FONT_BASENAME" ]; then
+		INPUT_FONT_BASENAME=$(get_filename_without_type $INPUT_FONT_FILE)
+		OUTPUT_FONT_BASENAME=$INPUT_FONT_BASENAME
+	fi
+
+	# Use the default subsetter arguments if no custom arguments are provided.
+	SUBSETTER_ARGS="${4:-$DEFAULT_SUBSETTER_ARGS}"
+
+	CHECKSUM=$(
+		# Concatenate the contents of the input font file, the instancer arguments, and the subsetter arguments
+		printf "%s%s" "$(cat $INPUT_FONT_FILE)" "$INSTANCER_ARGS" "$SUBSETTER_ARGS" |
+		# Calculate the Blake2b checksum of the concatenated string
+		b2sum |
+		# Extract the checksum from the output of b2sum (it's the first field)
+		awk '{print $1}'
+	)
+	
+	# Limit the checksum to 8 characters.
+	CHECKSUM=$(echo "${CHECKSUM:0:8}")
+
+	# Construct the output font's filename
+	OUTPUT_FONT_BASENAME="${OUTPUT_FONT_BASENAME}_${CHECKSUM}"
+	OUTPUT_FONT_FILE="${OUTPUT_FOLDER}/${OUTPUT_FONT_BASENAME}.woff2"
+
+	# Check if the output font file already exists
+	if test -f $OUTPUT_FONT_FILE; then
+		echo "${OUTPUT_FONT_FILE} exists"
+		return 0
+	fi
+
+	FONT_INSTANCE="${TEMP_FOLDER}/${OUTPUT_FONT_BASENAME}.ttf"
+
+	if [ -n "$INSTANCER_ARGS" ]; then
+		# If the INSTANCER_ARGS variable is set, use fonttools to create a font instance
+		fonttools varLib.instancer --output $FONT_INSTANCE $INPUT_FONT_FILE $INSTANCER_ARGS
+	else
+		# Otherwise, just copy the input font file to the font instance file
+		cp $INPUT_FONT_FILE $FONT_INSTANCE
+	fi
+
+	# Use pyftsubset to create a subset of the font instance and save it to the output font file
+	pyftsubset $FONT_INSTANCE --output-file=$OUTPUT_FONT_FILE --flavor=woff2 $SUBSETTER_ARGS
+
+	echo "${OUTPUT_FONT_BASENAME} subsetted."
+}
+
+echo ""
+echo "###################################################"
+echo "# Install required libs"
+echo "###################################################"
+echo ""
+
+pip install fonttools brotli
+
+echo ""
+echo "###################################################"
+echo "# Create a partial instance of the variable font"
+echo "# where we keep only our needed features and then"
+echo "# subset fonts with latin unicode range and export"
+echo "# as woff2 file"
+echo "###################################################"
+echo ""
+
+mkdir -p $TEMP_FOLDER
+
+echo "\nOpen Sans"
+# we drop the wdth axis for all
+
+instance_and_subset "${ORIGINAL_FONTS}/OpenSans[wdth,wght].ttf" "wdth=drop wght=400:700" "OpenSans[wght]"
+
+# we restrict the wght range
+instance_and_subset "${ORIGINAL_FONTS}/OpenSans[wdth,wght].ttf" "wdth=drop wght=400" "OpenSans-Regular"
+instance_and_subset "${ORIGINAL_FONTS}/OpenSans[wdth,wght].ttf" "wdth=drop wght=700" "OpenSans-Bold"
+
+echo "\nOpen Sans Italic"
+# we drop the wdth axis for all
+
+instance_and_subset "${ORIGINAL_FONTS}/OpenSans-Italic[wdth,wght].ttf" "wdth=drop wght=400:700" "OpenSans-Italic[wght]"
+
+# we restrict the wght range
+instance_and_subset "${ORIGINAL_FONTS}/OpenSans-Italic[wdth,wght].ttf" "wdth=drop wght=400" "OpenSans-RegularItalic"
+instance_and_subset "${ORIGINAL_FONTS}/OpenSans-Italic[wdth,wght].ttf" "wdth=drop wght=700" "OpenSans-BoldItalic"
+
+echo "\nQuicksand"
+
+instance_and_subset "${ORIGINAL_FONTS}/Quicksand[wght].ttf" "wght=400:700"
+
+# we restrict the wght range
+instance_and_subset "${ORIGINAL_FONTS}/Quicksand[wght].ttf" "wght=400" "Quicksand-Regular"
+instance_and_subset "${ORIGINAL_FONTS}/Quicksand[wght].ttf" "wght=600" "Quicksand-SemiBold"
+instance_and_subset "${ORIGINAL_FONTS}/Quicksand[wght].ttf" "wght=700" "Quicksand-Bold"
+
+echo "\nSubsetting files complete"
+
+# remove temp folder
+rm -r $TEMP_FOLDER

scripts/serve-dist.js

@@ -1,16 +0,0 @@
-const path = require('path')
-const express = require('express')
-const app = express()
-
-const p = path.join(__dirname, '..', 'dist-dev')
-const port = 4173
-
-app.use(express.static(p))
-// Handle urls set by the frontend
-app.get('*', (request, response, next) => {
-	response.sendFile(`${p}/index.html`)
-})
-app.listen(port, '127.0.0.1', () => {
-	console.log(`Serving files from ${p}`)
-	console.log(`Server started on port ${port}`)
-})

src/App.vue

@@ -8,63 +8,72 @@
 		<no-auth-wrapper v-else>
 			<router-view/>
 		</no-auth-wrapper>
-		<Notification/>
-
+		
 		<keyboard-shortcuts v-if="keyboardShortcutsActive"/>
+		
+		<Teleport to="body">
+			<UpdateNotification/>
+			<Notification/>
+		</Teleport>
 	</ready>
 </template>
 
 <script lang="ts" setup>
-import {computed, watch, type Ref} from 'vue'
-import {useRouter} from 'vue-router'
-import {useRouteQuery} from '@vueuse/router'
-import {useStore} from '@/store'
+import {computed, watch} from 'vue'
+import {useRoute, useRouter} from 'vue-router'
 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 UpdateNotification from '@/components/home/UpdateNotification.vue'
+import KeyboardShortcuts from '@/components/misc/keyboard-shortcuts/index.vue'
+
 import TheNavigation from '@/components/home/TheNavigation.vue'
-import ContentAuth from './components/home/contentAuth.vue'
-import ContentLinkShare from './components/home/contentLinkShare.vue'
+import ContentAuth from '@/components/home/contentAuth.vue'
+import ContentLinkShare from '@/components/home/contentLinkShare.vue'
 import NoAuthWrapper from '@/components/misc/no-auth-wrapper.vue'
 import Ready from '@/components/misc/ready.vue'
 
-import {setLanguage} from './i18n'
+import {setLanguage} from '@/i18n'
 import AccountDeleteService from '@/services/accountDelete'
+import {success} from '@/message'
+
+import {useAuthStore} from '@/stores/auth'
+import {useBaseStore} from '@/stores/base'
 
 import {useColorScheme} from '@/composables/useColorScheme'
 import {useBodyClass} from '@/composables/useBodyClass'
 
-const store = useStore()
+const baseStore = useBaseStore()
+const authStore = useAuthStore()
 const router = useRouter()
+const route = useRoute()
 
 useBodyClass('is-touch', isTouchDevice())
-const keyboardShortcutsActive = computed(() => store.state.keyboardShortcutsActive)
+const keyboardShortcutsActive = computed(() => baseStore.keyboardShortcutsActive)
 
-const authUser = computed(() => store.getters['auth/authUser'])
-const authLinkShare = computed(() => store.getters['auth/authLinkShare'])
+const authUser = computed(() => authStore.authUser)
+const authLinkShare = computed(() => authStore.authLinkShare)
 
 const {t} = useI18n({useScope: 'global'})
 
 // setup account deletion verification
-const accountDeletionConfirm = useRouteQuery('accountDeletionConfirm') as Ref<null | string>
+const accountDeletionConfirm = computed(() => route.query?.accountDeletionConfirm as (string | undefined))
 watch(accountDeletionConfirm, async (accountDeletionConfirm) => {
-	if (accountDeletionConfirm === null) {
+	if (accountDeletionConfirm === undefined) {
 		return
 	}
 
 	const accountDeletionService = new AccountDeleteService()
 	await accountDeletionService.confirm(accountDeletionConfirm)
 	success({message: t('user.deletion.confirmSuccess')})
-	store.dispatch('auth/refreshUserInfo')
+	authStore.refreshUserInfo()
 }, { immediate: true })
 
 // setup password reset redirect
-const userPasswordReset = useRouteQuery('userPasswordReset') as Ref<null | string>
+const userPasswordReset = computed(() => route.query?.userPasswordReset as (string | undefined))
 watch(userPasswordReset, (userPasswordReset) => {
-	if (userPasswordReset === null) {
+	if (userPasswordReset === undefined) {
 		return
 	}
 
@@ -73,9 +82,9 @@ watch(userPasswordReset, (userPasswordReset) => {
 }, { immediate: true })
 
 // setup email verification redirect
-const userEmailConfirm = useRouteQuery('userEmailConfirm') as Ref<null | string>
+const userEmailConfirm = computed(() => route.query?.userEmailConfirm as (string | undefined))
 watch(userEmailConfirm, (userEmailConfirm) => {
-	if (userEmailConfirm === null) {
+	if (userEmailConfirm === undefined) {
 		return
 	}
 

src/components/base/BaseButton.story.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import {logEvent} from 'histoire/client'
+import {reactive} from 'vue'
+import {createRouter, createMemoryHistory} from 'vue-router'
+import BaseButton from './BaseButton.vue'
+
+function setupApp({ app }) {
+  // Router mock
+  app.use(createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: '/', name: 'home', component: { render: () => null } },
+    ],
+  }))
+}
+
+
+const state = reactive({
+	disabled: false,
+})
+</script>
+
+<template>
+	<Story :setup-app="setupApp" :layout="{ type: 'grid', width: '200px' }">
+		<Variant title="custom">
+			<template #controls>
+				<HstCheckbox v-model="state.disabled" title="Disabled" />
+			</template>
+			<BaseButton :disabled="state.disabled">
+				Hello!
+			</BaseButton>
+		</Variant>
+
+		<Variant title="disabled">
+			<BaseButton disabled>
+				Hello!
+			</BaseButton>
+		</Variant>
+
+		<Variant title="router link">
+			<BaseButton :to="'home'">
+				Hello!
+			</BaseButton>
+		</Variant>
+
+		<Variant title="external link">
+			<BaseButton href="https://vikunja.io">
+				Hello!
+			</BaseButton>
+		</Variant>
+
+		<Variant title="button">
+			<BaseButton @click="logEvent('Click', $event)">
+				Hello!
+			</BaseButton>
+		</Variant>
+	</Story>
+</template>

src/components/base/BaseButton.vue

@@ -1,18 +1,53 @@
+<!-- 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>
-	<component
-		:is="componentNodeName"
+	<div
+		v-if="disabled === true && (to !== undefined || href !== undefined)"
 		class="base-button"
-		:class="{ 'base-button--type-button': isButton }"
-		v-bind="elementBindings"
-		:disabled="disabled || undefined"
+		:aria-disabled="disabled || undefined"
 		ref="button"
 	>
 		<slot/>
-	</component>
+	</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"
+		:disabled="disabled || undefined"
+		ref="button"
+		@click="(event: MouseEvent) => emit('click', event)"
+	>
+		<slot/>
+	</button>
 </template>
 
 <script lang="ts">
-export default { inheritAttrs: false }
+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
 </script>
 
 <script lang="ts" setup>
@@ -20,77 +55,36 @@ export default { inheritAttrs: false }
 // 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 (see the
-// componentNodeName and elementBindings ref for this).
+// the component tries to heuristically determine what it should be checking the props 
 
 // NOTE: Do NOT use buttons with @click to push routes. => Use router-links instead!
 
-import { ref, watchEffect, computed, useAttrs, type PropType } from 'vue'
+import {unrefElement} from '@vueuse/core'
+import {ref, type HTMLAttributes} from 'vue'
+import type {RouteLocationRaw} from 'vue-router'
 
-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;
-	target?: string;
+export interface BaseButtonProps extends HTMLAttributes {
+	type?: BaseButtonTypes
+	disabled?: boolean
+	to?: RouteLocationRaw
+	href?: string
 }
 
-const elementBindings = ref({})
+export interface BaseButtonEmits {
+	(e: 'click', payload: MouseEvent): void
+}
 
-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}
+const {
+	type = BASE_BUTTON_TYPES_MAP.BUTTON,
+	disabled = false,
+} = defineProps<BaseButtonProps>()
 
-	// if we find a "to" prop we set it as router-link
-	if ('to' in attrs) {
-		nodeName = 'router-link'
-		bindings = {}
-	}
+const emit = defineEmits<BaseButtonEmits>()
 
-	// if there is a href we assume the user wants an external link via a link element
-	// we also set a predefined value for the attribute rel, but make it possible to overwrite this by the user.
-	if ('href' in attrs) {
-		nodeName = 'a'
-		bindings = {
-			rel: 'noreferrer noopener nofollow',
-			target: '_blank',
-		}
-	}
-
-	componentNodeName.value = nodeName
-	elementBindings.value = {
-		...bindings,
-		...attrs,
-	}
-})
-
-const isButton = computed(() => componentNodeName.value === 'button')
-
-const button = ref()
+const button = ref<HTMLElement | null>(null)
 
 function focus() {
-	button.value.focus()
+	unrefElement(button)?.focus()
 }
 
 defineExpose({

src/components/base/Expandable.vue

@@ -0,0 +1,179 @@
+<template>
+  <transition
+    name="expandable-slide"
+    @before-enter="beforeEnter"
+    @enter="enter"
+    @after-enter="afterEnter"
+    @enter-cancelled="enterCancelled"
+    @before-leave="beforeLeave"
+    @leave="leave"
+    @after-leave="afterLeave"
+    @leave-cancelled="leaveCancelled"
+  >
+    <div
+      v-if="initialHeight"
+      class="expandable-initial-height"
+      :style="{ maxHeight: `${initialHeight}px` }"
+      :class="{ 'expandable-initial-height--expanded': open }"
+    >
+      <slot />
+    </div>
+    <div v-else-if="open" class="expandable">
+      <slot />
+    </div>
+  </transition>
+</template>
+
+<script setup lang="ts">
+// the logic of this component is loosly based on this article
+// https://gomakethings.com/how-to-add-transition-animations-to-vanilla-javascript-show-and-hide-methods/#putting-it-all-together
+
+import {computed, ref} from 'vue'
+import {getInheritedBackgroundColor} from '@/helpers/getInheritedBackgroundColor'
+
+const props = defineProps({
+  /** Wheather the Expandable is open or not */
+  open: {
+    type: Boolean,
+    default: false,
+  },
+  /** If there is too much content, content will be cut of here. */
+  initialHeight: {
+    type: Number,
+    default: undefined,
+  },
+  /** The hidden content is indicated by a gradient. This is the color that the gradient fades to.
+   * Makes only sense if `initialHeight` is set. */
+  backgroundColor: {
+    type: String,
+  },
+})
+
+const wrapper = ref<HTMLElement | null>(null)
+
+const computedBackgroundColor = computed(() => {
+  if (wrapper.value === null) {
+    return props.backgroundColor || '#fff'
+  }
+  return props.backgroundColor || getInheritedBackgroundColor(wrapper.value)
+})
+
+/**
+ * Get the natural height of the element
+ */
+function getHeight(el: HTMLElement) {
+  const { display } = el.style // save display property
+  el.style.display = 'block' // Make it visible
+  const height = `${el.scrollHeight}px` // Get its height
+  el.style.display = display // revert to original display property
+  return height
+}
+
+/**
+ * force layout of element changes
+ * https://gist.github.com/paulirish/5d52fb081b3570c81e3a
+ */
+function forceLayout(el: HTMLElement) {
+  el.offsetTop
+}
+
+/* ######################################################################
+# The following functions are called by the js hooks of the transitions.
+# They follow the orignal hook order of the vue transition component
+# see: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks
+###################################################################### */
+
+function beforeEnter(el: HTMLElement) {
+  el.style.height = '0'
+  el.style.willChange = 'height'
+  el.style.backfaceVisibility = 'hidden'
+  forceLayout(el)
+}
+
+// the done callback is optional when
+// used in combination with CSS
+function enter(el: HTMLElement) {
+  const height = getHeight(el) // Get the natural height
+  el.style.height = height // Update the height
+}
+
+function afterEnter(el: HTMLElement) {
+  removeHeight(el)
+}
+
+function enterCancelled(el: HTMLElement) {
+  removeHeight(el)
+}
+
+function beforeLeave(el: HTMLElement) {
+  // Give the element a height to change from
+  el.style.height = `${el.scrollHeight}px`
+  forceLayout(el)
+}
+
+function leave(el: HTMLElement) {
+  // Set the height back to 0
+  el.style.height = '0'
+	el.style.willChange = ''
+	el.style.backfaceVisibility = ''
+}
+
+function afterLeave(el: HTMLElement) {
+  removeHeight(el)
+}
+
+function leaveCancelled(el: HTMLElement) {
+  removeHeight(el)
+}
+
+function removeHeight(el: HTMLElement) {
+  el.style.height = ''
+}
+</script>
+
+<style lang="scss" scoped>
+$transition-time: 300ms;
+
+.expandable-slide-enter-active,
+.expandable-slide-leave-active {
+  transition:
+    opacity $transition-time ease-in-quint,
+    height $transition-time ease-in-out-quint;
+  overflow: hidden;
+}
+
+.expandable-slide-enter,
+.expandable-slide-leave-to {
+  opacity: 0;
+}
+
+.expandable-initial-height {
+  padding: 5px;
+  margin: -5px;
+  overflow: hidden;
+  position: relative;
+
+  &::after {
+    content: "";
+    display: block;
+    background-image: linear-gradient(
+      to bottom,
+      transparent,
+      ease-in-out
+      v-bind(computedBackgroundColor)
+    );
+    position: absolute;
+    height: 40px;
+    width: 100%;
+    bottom: 0;
+  }
+}
+
+.expandable-initial-height--expanded {
+  height: 100% !important;
+
+  &::after {
+    display: none;
+  }
+}
+</style>