feat: inline dynamic component definitions in routes

Resolves
https://kolaente.dev/vikunja/vikunja/issues/2977

.drone.yml

@@ -40,7 +40,6 @@ volumes:
   - name: tmp-postgres-migration
     temp:
       medium: memory
-      
 
 services:
   - name: test-mysql-unit
@@ -139,7 +138,7 @@ steps:
       event: [ push, tag, pull_request ]
 
   - name: api-lint
-    image: golangci/golangci-lint:v1.59.1
+    image: golangci/golangci-lint:v1.61.0
     pull: always
     environment:
       GOPROXY: 'https://goproxy.kolaente.de'
@@ -161,7 +160,7 @@ steps:
   - name: test-migration-sqlite
     image: vikunja/golang-build:latest
     pull: always
-    depends_on: 
+    depends_on:
       - test-migration-prepare
       - api-build
     environment:
@@ -364,7 +363,7 @@ steps:
       - api-build
 
   - name: frontend-dependencies
-    image: node:20.14.0-alpine
+    image: node:22.13.0-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
@@ -378,7 +377,7 @@ steps:
   #      - restore-cache
 
   - name: frontend-lint
-    image: node:20.14.0-alpine
+    image: node:22.13.0-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
@@ -390,7 +389,7 @@ steps:
       - frontend-dependencies
 
   - name: frontend-build-prod
-    image: node:20.14.0-alpine
+    image: node:22.13.0-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
@@ -402,7 +401,7 @@ steps:
       - frontend-dependencies
 
   - name: frontend-test-unit
-    image: node:20.14.0-alpine
+    image: node:22.13.0-alpine
     pull: always
     commands:
       - cd frontend
@@ -413,7 +412,7 @@ steps:
 
   - name: frontend-typecheck
     failure: ignore
-    image: node:20.14.0-alpine
+    image: node:22.13.0-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
@@ -444,7 +443,7 @@ steps:
     depends_on:
       - frontend-build-prod
       - test-api-run
-  
+
   - name: frontend-deploy-preview
     image: williamjackson/netlify-cli
     pull: always
@@ -499,7 +498,7 @@ steps:
     environment:
       GOPROXY: 'https://goproxy.kolaente.de'
     commands:
-      - mage do-the-swag
+      - mage generate:swagger-docs
 
   - name: push
     pull: always
@@ -544,7 +543,7 @@ steps:
       - git fetch --tags
 
   - name: frontend-dependencies
-    image: node:20.14.0-alpine
+    image: node:22.13.0-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
@@ -556,7 +555,7 @@ steps:
       - pnpm install --fetch-timeout 100000
 
   - name: frontend-build
-    image: node:20.14.0-alpine
+    image: node:22.13.0-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
@@ -579,8 +578,55 @@ steps:
     when:
       event: [ push, tag, pull_request ]
 
+  - name: generate-config-yaml
+    image: vikunja/golang-build:latest
+    pull: always
+    commands:
+      - ./mage-static generate:config-yaml 1
+    depends_on: [ mage ]
+
+  - name: upload-config-yaml-unstable
+    image: plugins/s3
+    pull: always
+    settings:
+      bucket: vikunja
+      access_key:
+        from_secret: hetzner_access_key_id
+      secret_key:
+        from_secret: hetzner_secret_access_key
+      endpoint: https://fsn1.your-objectstorage.com
+      region: fsn1
+      path_style: true
+      source: config.yml.sample
+      target: /vikunja/unstable/
+    when:
+      branch:
+        - main
+      event:
+        - push
+    depends_on: [ generate-config-yaml ]
+
+  - name: upload-config-yaml-version
+    image: plugins/s3
+    pull: always
+    settings:
+      bucket: vikunja
+      access_key:
+        from_secret: hetzner_access_key_id
+      secret_key:
+        from_secret: hetzner_secret_access_key
+      endpoint: https://fsn1.your-objectstorage.com
+      region: fsn1
+      path_style: true
+      source: config.yml.sample
+      target: /vikunja/${DRONE_TAG##v}/
+    when:
+      event:
+        - tag
+    depends_on: [ generate-config-yaml ]
+
   - name: before-static-build
-    image: techknowlogick/xgo:latest
+    image: ghcr.io/techknowlogick/xgo:go-1.23.x
     pull: always
     commands:
       - export PATH=$PATH:$GOPATH/bin
@@ -589,7 +635,7 @@ steps:
     depends_on: [ fetch-tags, mage ]
 
   - name: static-build-windows
-    image: techknowlogick/xgo:latest
+    image: ghcr.io/techknowlogick/xgo:go-1.23.x
     pull: always
     environment:
       # This path does not exist. However, when we set the gopath to /go, the build fails. Not sure why.
@@ -605,7 +651,7 @@ steps:
       - frontend-build
 
   - name: static-build-linux
-    image: techknowlogick/xgo:latest
+    image: ghcr.io/techknowlogick/xgo:go-1.23.x
     pull: always
     environment:
       # This path does not exist. However, when we set the gopath to /go, the build fails. Not sure why.
@@ -621,7 +667,7 @@ steps:
       - frontend-build
 
   - name: static-build-darwin
-    image: techknowlogick/xgo:latest
+    image: ghcr.io/techknowlogick/xgo:go-1.23.x
     pull: always
     environment:
       # This path does not exist. However, when we set the gopath to /go, the build fails. Not sure why.
@@ -647,12 +693,13 @@ steps:
       - ./mage-static release:compress
 
   - name: after-build-static
-    image: techknowlogick/xgo:latest
+    image: ghcr.io/techknowlogick/xgo:go-1.23.x
     pull: always
     depends_on:
       - after-build-compress
     commands:
       - go install github.com/magefile/mage
+      - ./mage-static generate:config-yaml 1
       - ./mage-static release:copy
       - ./mage-static release:check
       - ./mage-static release:os-package
@@ -676,13 +723,13 @@ steps:
     image: plugins/s3
     pull: always
     settings:
-      bucket: vikunja-releases
+      bucket: vikunja
       access_key:
-        from_secret: aws_access_key_id
+        from_secret: hetzner_access_key_id
       secret_key:
-        from_secret: aws_secret_access_key
-      endpoint: https://s3.fr-par.scw.cloud
-      region: fr-par
+        from_secret: hetzner_secret_access_key
+      endpoint: https://fsn1.your-objectstorage.com
+      region: fsn1
       path_style: true
       strip_prefix: dist/zip/
       source: dist/zip/*
@@ -698,13 +745,13 @@ steps:
     image: plugins/s3
     pull: always
     settings:
-      bucket: vikunja-releases
+      bucket: vikunja
       access_key:
-        from_secret: aws_access_key_id
+        from_secret: hetzner_access_key_id
       secret_key:
-        from_secret: aws_secret_access_key
-      endpoint: https://s3.fr-par.scw.cloud
-      region: fr-par
+        from_secret: hetzner_secret_access_key
+      endpoint: https://fsn1.your-objectstorage.com
+      region: fsn1
       path_style: true
       strip_prefix: dist/zip/
       source: dist/zip/*
@@ -716,7 +763,7 @@ steps:
 
   # Build os packages and push it to our bucket
   - name: build-os-packages-unstable
-    image: goreleaser/nfpm:v2.38.0
+    image: goreleaser/nfpm:v2.41.2
     pull: always
     commands:
       - apk add git go
@@ -732,7 +779,7 @@ steps:
     depends_on: [ after-build-compress ]
 
   - name: build-os-packages-version
-    image: goreleaser/nfpm:v2.38.0
+    image: goreleaser/nfpm:v2.41.2
     pull: always
     commands:
       - apk add git go
@@ -750,13 +797,13 @@ steps:
     image: plugins/s3
     pull: always
     settings:
-      bucket: vikunja-releases
+      bucket: vikunja
       access_key:
-        from_secret: aws_access_key_id
+        from_secret: hetzner_access_key_id
       secret_key:
-        from_secret: aws_secret_access_key
-      endpoint: https://s3.fr-par.scw.cloud
-      region: fr-par
+        from_secret: hetzner_secret_access_key
+      endpoint: https://fsn1.your-objectstorage.com
+      region: fsn1
       path_style: true
       strip_prefix: dist/os-packages/
       source: dist/os-packages/*
@@ -772,13 +819,13 @@ steps:
     image: plugins/s3
     pull: always
     settings:
-      bucket: vikunja-releases
+      bucket: vikunja
       access_key:
-        from_secret: aws_access_key_id
+        from_secret: hetzner_access_key_id
       secret_key:
-        from_secret: aws_secret_access_key
-      endpoint: https://s3.fr-par.scw.cloud
-      region: fr-par
+        from_secret: hetzner_secret_access_key
+      endpoint: https://fsn1.your-objectstorage.com
+      region: fsn1
       path_style: true
       strip_prefix: dist/os-packages/
       source: dist/os-packages/*
@@ -797,7 +844,7 @@ steps:
       base_url: https://kolaente.dev
       files: dist/zip/*
       prerelease: true
-      title: ${DRONE_TAG##v} 
+      title: ${DRONE_TAG##v}
     when:
       event:
         - tag
@@ -837,7 +884,6 @@ steps:
       repo: vikunja/vikunja
       tags: unstable
       platforms:
-        - linux/386
         - linux/amd64
         - linux/arm/v6
         - linux/arm/v7
@@ -869,7 +915,6 @@ steps:
         from_secret: docker_password
       repo: vikunja/vikunja
       platforms:
-        - linux/386
         - linux/amd64
         - linux/arm/v6
         - linux/arm/v7
@@ -899,9 +944,9 @@ steps:
     image: docker:git
     commands:
       - git fetch --tags
-  
+
   - name: build
-    image: node:20.14.0-alpine
+    image: node:22.13.0-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
@@ -931,13 +976,13 @@ steps:
     image: plugins/s3
     pull: always
     settings:
-      bucket: vikunja-releases
+      bucket: vikunja
       access_key:
-        from_secret: aws_access_key_id
+        from_secret: hetzner_access_key_id
       secret_key:
-        from_secret: aws_secret_access_key
-      endpoint: https://s3.fr-par.scw.cloud
-      region: fr-par
+        from_secret: hetzner_secret_access_key
+      endpoint: https://fsn1.your-objectstorage.com
+      region: fsn1
       path_style: true
       source: frontend/vikunja-frontend-unstable.zip
       target: /
@@ -960,9 +1005,9 @@ steps:
     image: docker:git
     commands:
       - git fetch --tags
-  
+
   - name: build
-    image: node:20.14.0-alpine
+    image: node:22.13.0-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
@@ -990,13 +1035,13 @@ steps:
     image: plugins/s3
     pull: always
     settings:
-      bucket: vikunja-releases
+      bucket: vikunja
       access_key:
-        from_secret: aws_access_key_id
+        from_secret: hetzner_access_key_id
       secret_key:
-        from_secret: aws_secret_access_key
-      endpoint: https://s3.fr-par.scw.cloud
-      region: fr-par
+        from_secret: hetzner_secret_access_key
+      endpoint: https://fsn1.your-objectstorage.com
+      region: fsn1
       path_style: true
       source: frontend/vikunja-frontend-${DRONE_TAG##v}.zip
       target: /
@@ -1083,33 +1128,33 @@ steps:
     image: docker:git
     commands:
       - git fetch --tags
-#
-#  - name: restore-cache
-#    image: meltwater/drone-cache:dev
-#    pull: true
-#    environment:
-#      AWS_ACCESS_KEY_ID:
-#        from_secret: cache_aws_access_key_id
-#      AWS_SECRET_ACCESS_KEY:
-#        from_secret: cache_aws_secret_access_key
-#    settings:
-#      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 "desktop/yarn.lock" }}_{{ arch }}_{{ os }}'
-#      mount:
-#        - '.cache'
+  #
+  #  - name: restore-cache
+  #    image: meltwater/drone-cache:dev
+  #    pull: true
+  #    environment:
+  #      AWS_ACCESS_KEY_ID:
+  #        from_secret: cache_aws_access_key_id
+  #      AWS_SECRET_ACCESS_KEY:
+  #        from_secret: cache_aws_secret_access_key
+  #    settings:
+  #      restore: true
+  #      bucket: kolaente.dev-drone-dependency-cache
+  #      endpoint: https://fsn1.your-objectstorage.com
+  #      region: fsn1
+  #      path_style: true
+  #      cache_key: '{{ .Repo.Name }}_{{ checksum "desktop/yarn.lock" }}_{{ arch }}_{{ os }}'
+  #      mount:
+  #        - '.cache'
 
   - name: build
-    image: electronuserland/builder:wine-mono
+    image: electronuserland/builder:wine
     pull: true
     environment:
-      YARN_CACHE_FOLDER: .cache/yarn/
+      PNPM_CACHE_FOLDER: .cache/pnpm
     depends_on:
       - fetch-tags
-#      - restore-cache
+    #      - restore-cache
     commands:
       - cd desktop
       - export VERSION=${DRONE_TAG##v}
@@ -1119,8 +1164,9 @@ steps:
       - unzip vikunja-frontend-$$VERSION.zip -d frontend
       - sed -i 's/\\/api\\/v1//g' frontend/index.html
       - ./bumpp.sh
-      - yarn install
-      - yarn dist --linux zip
+      - corepack enable && pnpm config set store-dir .cache/pnpm
+      - pnpm install --fetch-timeout 100000
+      - pnpm dist --linux zip
 
 #  - name: rebuild-cache
 #    image: meltwater/drone-cache:dev
@@ -1133,8 +1179,8 @@ steps:
 #    settings:
 #      rebuild: true
 #      bucket: kolaente.dev-drone-dependency-cache
-#      endpoint: https://s3.fr-par.scw.cloud
-#      region: fr-par
+#      endpoint: https://fsn1.your-objectstorage.com
+#      region: fsn1
 #      path_style: true
 #      cache_key: '{{ .Repo.Name }}_{{ checksum "desktop/yarn.lock" }}_{{ arch }}_{{ os }}'
 #      mount:
@@ -1164,33 +1210,33 @@ steps:
     image: docker:git
     commands:
       - git fetch --tags
-
-#  - name: restore-cache
-#    image: meltwater/drone-cache:dev
-#    pull: true
-#    environment:
-#      AWS_ACCESS_KEY_ID:
-#        from_secret: cache_aws_access_key_id
-#      AWS_SECRET_ACCESS_KEY:
-#        from_secret: cache_aws_secret_access_key
-#    settings:
-#      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 "desktop/yarn.lock" }}_{{ arch }}_{{ os }}'
-#      mount:
-#        - '.cache'
+  
+  #  - name: restore-cache
+  #    image: meltwater/drone-cache:dev
+  #    pull: true
+  #    environment:
+  #      AWS_ACCESS_KEY_ID:
+  #        from_secret: cache_aws_access_key_id
+  #      AWS_SECRET_ACCESS_KEY:
+  #        from_secret: cache_aws_secret_access_key
+  #    settings:
+  #      restore: true
+  #      bucket: kolaente.dev-drone-dependency-cache
+  #      endpoint: https://fsn1.your-objectstorage.com
+  #      region: fsn1
+  #      path_style: true
+  #      cache_key: '{{ .Repo.Name }}_{{ checksum "desktop/yarn.lock" }}_{{ arch }}_{{ os }}'
+  #      mount:
+  #        - '.cache'
 
   - name: build
-    image: electronuserland/builder:wine-mono
+    image: electronuserland/builder:wine
     pull: true
     environment:
-      YARN_CACHE_FOLDER: .cache/yarn/
+      PNPM_CACHE_FOLDER: .cache/pnpm
     depends_on:
       - fetch-tags
-#      - restore-cache
+    #      - restore-cache
     commands:
       - cd desktop
       - export VERSION=${DRONE_TAG##v}
@@ -1200,30 +1246,30 @@ steps:
       - unzip vikunja-frontend-$$VERSION.zip -d frontend
       - sed -i 's/\\/api\\/v1//g' frontend/index.html
       - ./bumpp.sh
-      - yarn install
-      - cat package.json
-      - yarn dist --linux --windows
-
-#  - name: rebuild-cache
-#    image: meltwater/drone-cache:dev
-#    pull: true
-#    environment:
-#      AWS_ACCESS_KEY_ID:
-#        from_secret: cache_aws_access_key_id
-#      AWS_SECRET_ACCESS_KEY:
-#        from_secret: cache_aws_secret_access_key
-#    settings:
-#      rebuild: 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 "desktop/yarn.lock" }}_{{ arch }}_{{ os }}'
-#      mount:
-#        - '.cache'
-#    depends_on:
-#      - build
+      - corepack enable && pnpm config set store-dir .cache/pnpm
+      - pnpm install --fetch-timeout 100000
+      - pnpm dist --linux --windows
   
+  #  - name: rebuild-cache
+  #    image: meltwater/drone-cache:dev
+  #    pull: true
+  #    environment:
+  #      AWS_ACCESS_KEY_ID:
+  #        from_secret: cache_aws_access_key_id
+  #      AWS_SECRET_ACCESS_KEY:
+  #        from_secret: cache_aws_secret_access_key
+  #    settings:
+  #      rebuild: true
+  #      bucket: kolaente.dev-drone-dependency-cache
+  #      endpoint: https://fsn1.your-objectstorage.com
+  #      region: fsn1
+  #      path_style: true
+  #      cache_key: '{{ .Repo.Name }}_{{ checksum "desktop/yarn.lock" }}_{{ arch }}_{{ os }}'
+  #      mount:
+  #        - '.cache'
+  #    depends_on:
+  #      - build
+
   - name: rename-unstable
     image: bash
     pull: true
@@ -1241,13 +1287,13 @@ steps:
     image: plugins/s3
     pull: true
     settings:
-      bucket: vikunja-releases
+      bucket: vikunja
       access_key:
-        from_secret: aws_access_key_id
+        from_secret: hetzner_access_key_id
       secret_key:
-        from_secret: aws_secret_access_key
-      endpoint: https://s3.fr-par.scw.cloud
-      region: fr-par
+        from_secret: hetzner_secret_access_key
+      endpoint: https://fsn1.your-objectstorage.com
+      region: fsn1
       path_style: true
       strip_prefix: desktop/dist/
       source: desktop/dist/Vikunja-Desktop*
@@ -1263,13 +1309,13 @@ steps:
     image: plugins/s3
     pull: true
     settings:
-      bucket: vikunja-releases
+      bucket: vikunja
       access_key:
-        from_secret: aws_access_key_id
+        from_secret: hetzner_access_key_id
       secret_key:
-        from_secret: aws_secret_access_key
-      endpoint: https://s3.fr-par.scw.cloud
-      region: fr-par
+        from_secret: hetzner_secret_access_key
+      endpoint: https://fsn1.your-objectstorage.com
+      region: fsn1
       path_style: true
       strip_prefix: desktop/dist/
       source: desktop/dist/*
@@ -1298,9 +1344,9 @@ steps:
 #  - name: build
 #    environment:
 #      ACCESS_KEY:
-#        from_secret: aws_access_key_id
+#        from_secret: hetzner_access_key_id
 #      SECRET_KEY:
-#        from_secret: aws_secret_access_key
+#        from_secret: hetzner_secret_access_key
 #    commands:
 #      - git fetch --tags
 #      - export VERSION=${DRONE_TAG##v}
@@ -1313,9 +1359,9 @@ steps:
 #      - sed -i '' "s/\$${version}/$$VERSION/g" package.json
 #      - yarn install
 #      - yarn dist --mac
-#      - mc config host add scw-fr-par https://s3.fr-par.scw.cloud $ACCESS_KEY $SECRET_KEY --api S3v4
-#      - mc cp ./dist/*.dmg scw-fr-par/vikunja-releases/desktop/$VERSION/
-#      - mc cp ./dist/*.dmg.blockmap scw-fr-par/vikunja-releases/desktop/$VERSION/
+#      - mc config host add scw-fsn1 https://fsn1.your-objectstorage.com $ACCESS_KEY $SECRET_KEY --api S3v4
+#      - mc cp ./dist/*.dmg scw-fsn1/vikunja/desktop/$VERSION/
+#      - mc cp ./dist/*.dmg.blockmap scw-fsn1/vikunja/desktop/$VERSION/
 
 ---
 kind: pipeline
@@ -1352,6 +1398,6 @@ steps:
         - failure
 ---
 kind: signature
-hmac: 196e215a44cc1b6b5cb89e6ef09196166af17969f69e3e7e8c571a0e44285714
+hmac: 298674d9b9d8618eef47969038fd4d7516112ecbd8a4d899ec3751d997a34ce4
 
 ...

.envrc

@@ -1 +1,3 @@
-use flake
+source_url "https://raw.githubusercontent.com/cachix/devenv/95f329d49a8a5289d31e0982652f7058a189bfca/direnvrc" "sha256-d+8cBpDfDBj41inrADaJt+bDWhOktwslgoP5YiGJ1v0="
+
+use devenv

.gitignore

@@ -28,4 +28,14 @@ vendor/
 os-packages/
 mage_output_file.go
 mage-static
-.direnv/
+.DS_Store
+
+# Devenv
+.devenv*
+devenv.local.nix
+
+# direnv
+.direnv
+
+# pre-commit
+.pre-commit-config.yaml

.golangci.yml

@@ -109,3 +109,13 @@ issues:
       text: 'structtag: struct field Position repeats json tag "position" also at'
       linters:
         - govet
+    - path: pkg/cmd/user.go
+      text: 'G115: integer overflow conversion uintptr -> int'
+      linters:
+        - gosec
+    - text: 'G115: integer overflow conversion int64 -> uint64'
+      linters:
+        - gosec
+    - text: 'G115: integer overflow conversion int -> uint64'
+      linters:
+        - gosec

.vscode/extensions.json

@@ -1,13 +1,15 @@
 {
-  "recommendations": [
-    "codezombiech.gitignore",
-    "dbaeumer.vscode-eslint",
-    "editorconfig.editorconfig",
-    "vue.volar",
-    "lokalise.i18n-ally",
-    "mgmcdermott.vscode-language-babel",
-    "mikestead.dotenv",
-    "Syler.sass-indented",
-    "vitest.explorer"
-  ]
+    "recommendations": [
+        "codezombiech.gitignore",
+        "dbaeumer.vscode-eslint",
+        "editorconfig.editorconfig",
+        "vue.volar",
+        "lokalise.i18n-ally",
+        "mgmcdermott.vscode-language-babel",
+        "mikestead.dotenv",
+        "Syler.sass-indented",
+        "vitest.explorer",
+        "mkhl.direnv",
+        "golang.Go"
+    ]
 }

CHANGELOG.md

@@ -5,7 +5,309 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres
 to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-All releases can be found on https://code.vikunja.io/api/releases.
+All releases can be found on https://code.vikunja.io/vikunja/releases.
+
+## [0.24.6] - 2024-12-22
+
+### Bug Fixes
+
+* *(export)* Update only current user export file id
+
+## [0.24.5] - 2024-11-21
+
+### Bug Fixes
+
+* *(attachments)* Check permissions when accessing all attachments
+* *(saved filters)* Check permissions when accessing tasks of a filter
+* Pin xgo to 1.22.x ([87b2aac](87b2aaccb8cdcbe1ecb6092951a0bfe224ad7006))
+* Upgrade xgo ([19b63c8](19b63c86c51f67614b867c75a58cda1774685edd))
+* Upgrade xgo docker image everywhere ([04b40f8](04b40f8a7dcd01a86ddb8b27596073d1e50f9e97))
+* *(ci)* Do not build linux 368 docker images
+* Disable 368 releases ([73db10f](73db10fb02268e07d29842493df55f4d645ac503))
+  - **BREAKING**: disable 368 releases
+
+### Miscellaneous Tasks
+
+* Sign drone config ([17c4878](17c487875b5771c0971ee8bf030807171de2dddc))
+* Go mod tidy ([9639025](96390257e0911089ae33a9565e8be7fa954c772c))
+
+## [0.24.4] - 2024-09-29
+
+### Bug Fixes
+
+* *(attachment)* Do not use image previews
+* *(checkbox)* Use sibling css selector instead of has
+* *(files)* Only use service rootpath for files when the files path is not absolute
+* *(filters)* Explicitly search in json when using postgres
+* *(task)* Paginate task comments
+* *(task)* Do not show close button when the task was not opened via modal
+* *(task)* Improve task delete modal on mobile
+* *(test)* Use correct selector for modal header
+* Partial fix to allow list tasks in ios reminders app (#2717)
+* *(attachments)* Revert "chore(attachments): refactor building image preview"
+
+### Dependencies
+
+* *(deps)* Update desktop lockfile
+* *(deps)* Update dependency vue to v3.5.7
+* *(deps)* Update dev-dependencies
+* *(deps)* Update dependency vue-i18n to v10.0.2
+* *(deps)* Update dev-dependencies
+* *(deps)* Update dependency vue to v3.5.8
+* *(deps)* Update dependency @intlify/unplugin-vue-i18n to v5.1.0
+* *(deps)* Update dependency vue-i18n to v10.0.3
+* *(deps)* Update dependency @intlify/unplugin-vue-i18n to v5.2.0
+* *(deps)* Update dependency @sentry/vue to v8.31.0
+* *(deps)* Update dependency tailwindcss to v3.4.13
+* *(deps)* Update dev-dependencies
+* *(deps)* Update dev-dependencies
+* *(deps)* Update dependency @sentry/vue to v8.32.0
+* *(deps)* Update tiptap to v2.7.3
+* *(deps)* Update dev-dependencies
+* *(deps)* Update dependency vue to v3.5.9
+* *(deps)* Update dependency dompurify to v3.1.7
+* *(deps)* Update tiptap to v2.7.4
+* *(deps)* Update dependency vue to v3.5.10
+* *(deps)* Update dev-dependencies
+
+## [0.24.3] - 2024-09-20
+
+### Bug Fixes
+
+* *(a11y)* Hide unfocusable buttons
+* *(api)* Return 404 response when using a token and the route does not exist
+* *(auth)* Restrict max password length to 72 bytes
+* *(caldav)* Make sure colors are correctly saved and returned
+* *(caldav)* Reject invalid project id with error 400
+* *(editor)* Restore the current value, not the one from a previous task
+* *(files)* Use absolute path everywhere
+* *(filter)* Do not replace labels keyword when the value is 'label'
+* *(filter)* Make sure tasks are in a correct bucket and position when they are part of a date filter
+* *(filters)* Immediately propagate changes
+* *(filters)* Do not replace filter or project values when the id value resolves to undefined
+* *(filters)* Correctly transform and populate saved filter when creating and editing
+* *(home)* Explicitly use filter for tasks on home page when one is set
+* *(kanban)* Save updated position to store
+* *(kanban)* Make task creation loading spinner actually visible
+* *(kanban)* Make kanban full width on mobile
+* *(kanban)* Do not mark first bucked as done bucket in filter bucket mode
+* *(kanban)* Correctly paginate filtered kanban buckets
+* *(label)* Ignore existing ID during creation
+* *(labels)* Trigger task.updated event when removing a label from a task
+* *(labels)* Test error assertion
+* *(labels)* Remove input interactivity when label edit is disabled
+* *(labels)* Trigger task updated for bulk label task update
+* *(modal)* Make sure modal and its content scrolls properly on mobile
+* *(modal)* Do not prevent scrolling on mobile
+* *(modal)* Make scrolling on iOS Safari work
+* *(multiselect)* Make selectPlaceholder optional
+* *(notifications)* Only add project subscription as task subscription when the user is not already subscribed to the task
+* *(password)* Validate password before sending request to api
+* *(project)* Show description in title attribute without html
+* *(project)* Reset id before creating
+* *(projects)* Do not hide 6th project on project overview
+* *(projects)* Description not visible on mobile
+* *(reminders)* Notify subscribed users as well
+* *(service worker)* Use correct workbox version
+* *(subscription)* Always return task subscription when subscribed to task and project
+* *(subscriptions)* Ignore task subscription when the user is subscribed to the project
+* *(subscriptions)* Correctly inherit subscriptions
+* *(subscriptions)* Cleanup and simplify fetching subscribers for tasks and projects logic
+* *(subscriptions)* Do not panic when a task does not have a subscription
+* *(table)* Make sorting for two-word properties work
+* *(task)* Set done at date when moving a task to the done bucket
+* *(task)* Specify task index when creating multiple tasks at once
+* *(task)* Cyclomatic complexity
+* *(task)* Make print styles work when printing task detail view from kanban
+* *(task)* Multiple overlapping defer due date popups
+* *(task)* Align task title on mobile popup
+* *(task)* Dragging and dropping on mobile
+* *(task)* Add task to filter view after it was updated
+* *(task)* Cleanup old task positions and task buckets when adding an updated or created task to filter
+* *(task)* Mark related task as done from the task detail view
+* *(task)* Open focused task when pressing enter
+* *(test)* Cypress test selector
+* *(typesense)* Only fail silently when a project was not found during indexing
+* *(typesense)* Add new tasks to typesense properly
+* *(typesense)* Make sure task positions are recreated properly when updating them
+* *(typesense)* Use emplace instead of upsert to update documents
+* *(typesense)* Index tasks one by one
+* *(typesense)* Force position to always be float instead of auto-inferring
+* *(typesense)* Use typesense bulk insert, log all errors
+* *(user)* Do not create user with existing id
+* *(view)* Do not crash when saving a view
+* *(view)* Correctly resolve label for filtered views or buckets
+* *(view)* Correctly resolve bucket filter when paginating
+* *(view)* Correctly get paginated task results
+* *(views)* Add migration for filtered kanban buckets* Lint ([53d62d3](53d62d35f4488940a96d755de93ded64b8ac34a3))
+* Reset id before creating ([93f7dd6](93f7dd611ad288a149f5da5463867d224334815f))
+* Test selector ([063aa7a](063aa7afec717c3ed05be9d2ca73bde3d0bd8d35))
+
+### Dependencies
+
+* *(deps)* Update dependency @intlify/unplugin-vue-i18n to v5
+* *(deps)* Update dependency @kyvg/vue3-notification to v3.3.0
+* *(deps)* Update dependency @sentry/vue to v8.28.0
+* *(deps)* Update dependency @sentry/vue to v8.29.0
+* *(deps)* Update dependency @sentry/vue to v8.30.0
+* *(deps)* Update dependency axios to v1.7.7
+* *(deps)* Update dependency date-fns to v4
+* *(deps)* Update dependency dayjs to v1.11.13
+* *(deps)* Update dependency express to v4.20.0
+* *(deps)* Update dependency express to v4.21.0
+* *(deps)* Update dependency go to v1.23.1
+* *(deps)* Update dependency pinia to v2.2.2
+* *(deps)* Update dependency sortablejs to v1.15.3
+* *(deps)* Update dependency tailwindcss to v3.4.10
+* *(deps)* Update dependency tailwindcss to v3.4.11
+* *(deps)* Update dependency tailwindcss to v3.4.12
+* *(deps)* Update dependency vue to v3.5.3
+* *(deps)* Update dependency vue to v3.5.4
+* *(deps)* Update dependency vue to v3.5.5
+* *(deps)* Update dependency vue to v3.5.6
+* *(deps)* Update dependency vue-i18n to v10
+* *(deps)* Update dependency vue-i18n to v10.0.1
+* *(deps)* Update dependency vue-i18n to v9.14.0
+* *(deps)* Update dependency vue-router to v4.4.3
+* *(deps)* Update dependency vue-router to v4.4.4
+* *(deps)* Update dependency vue-router to v4.4.5
+* *(deps)* Update dependency vuemoji-picker to v0.3.1* Chore(deps): update goreleaser/nfpm docker tag to v2.40.0 (#2647)
+* *(deps)* Update dev-dependencies
+* *(deps)* Update dev-dependencies
+* *(deps)* Update dev-dependencies
+* *(deps)* Update dev-dependencies
+* *(deps)* Update dev-dependencies
+* *(deps)* Update dev-dependencies
+* *(deps)* Update github.com/wneessen/go-mail to v0.4.4
+* *(deps)* Update golangci
+* *(deps)* Update module dario.cat/mergo to v1.0.1
+* *(deps)* Update module github.com/gabriel-vasile/mimetype to v1.4.5
+* *(deps)* Update module github.com/getsentry/sentry-go to v0.29.0
+* *(deps)* Update module github.com/mattn/go-sqlite3 to v1.14.23
+* *(deps)* Update module github.com/prometheus/client_golang to v1.20.3
+* *(deps)* Update module github.com/prometheus/client_golang to v1.20.4
+* *(deps)* Update module github.com/redis/go-redis/v9 to v9.6.1
+* *(deps)* Update module github.com/threedotslabs/watermill to v1.3.7
+* *(deps)* Update module github.com/typesense/typesense-go to v2
+* *(deps)* Update module github.com/typesense/typesense-go to v2
+* *(deps)* Update module golang.org/x/crypto to v0.27.0
+* *(deps)* Update module golang.org/x/image to v0.20.0
+* *(deps)* Update module golang.org/x/oauth2 to v0.23.0
+* *(deps)* Update module golang.org/x/term to v0.24.0
+* *(deps)* Update module golang.org/x/text to v0.18.0
+* *(deps)* Update pnpm to v9.10.0
+* *(deps)* Update tiptap to 2.6.6
+* *(deps)* Update tiptap to v2.7.0
+* *(deps)* Update tiptap to v2.7.1
+* *(deps)* Update tiptap to v2.7.2
+* *(deps)* Update vueuse to v11
+* *(deps)* Update vueuse to v11.1.0
+* *(deps)*: update dependency flexsearch to v0.7.43 (#2095)
+* *(deps)*: update golangci/golangci-lint docker tag to v1.61.0 (#2678)
+
+### Documentation
+
+* *(api)* Use correct return type for the /user endpoint
+
+### Features
+
+* *(event)* Simplify dispatching task updated event from only a task id
+* *(navigation)* Use focus-visible for nav items
+* *(task)* Use focus-visible for task focus styles
+
+### Miscellaneous Tasks
+
+* *(attachments)* Refactor building image preview
+* *(devenv)* Do not install cypress on darwin
+* *(docker)* Use new env format
+* *(docs)* Clarify usage of related model creation
+* *(errors)* Always add internal error to echo error
+* *(files)* Use absolute file path to retrieve and save files
+* *(i18n)* Update translations via Crowdin
+* *(i18n)* Update translations via Crowdin
+* *(i18n)* Update translations via Crowdin
+* *(i18n)* Update translations via Crowdin
+* *(i18n)* Update translations via Crowdin
+* *(i18n)* Update translations via Crowdin
+* *(i18n)* Update translations via Crowdin
+* *(i18n)* Update translations via Crowdin
+* *(i18n)* Update translations via Crowdin
+* *(i18n)* Update translations via Crowdin
+* *(i18n)* Update translations via Crowdin
+* *(i18n)* Update translations via Crowdin
+* *(logging)* Simplify log template string
+* *(magefile)* Use tx.Sync instead of Sync2
+* *(subscription)* Return subscription entity type using json Marshaler
+* *(tasks)* Move drag options to direct attributes instead of v-bind
+* *(typesense)* Add more debug logging
+* *(web)* Move web handler package to Vikunja
+* *(web)* Remove unused echo context
+* *(web)* Use errors.As instead of type assertion
+* *(web)* Remove redundant use of fmt.Sprintf
+* *(web)* Directly use new db session
+* *(web)* Use config directly
+* *(web)* Use web auth factory directly
+* *(web)* Use logger directly
+* *(web)* Always set internal error* Remove console.log ([40105ee](40105ee4ced980f52565baec4c3219b0ddd4f6ec))
+* Fix comment ([1df4a4e](1df4a4ea2e2ca4332347468e8973a2dcbab06ed7))
+* Add go and direnv to recommended vscode extensions ([6ab12b9](6ab12b9dd133b52ed7267b6e9334081c2f9719ca))
+* Remove console.log ([1e7d9c9](1e7d9c982d3d472e9b4082991b41e6567556f2b2))
+* Rearrange cron registers ([4857bfb](4857bfbbdb8401b6ef02b1dc8de93f2a09e8bc3a))
+
+### Other
+
+* *(other)* [skip ci] Updated swagger docs
+
+## [0.24.2] - 2024-08-12
+
+### Bug Fixes
+
+* *(i18n)* Change casing of Ukrainian language in selector
+* *(kanban)* Always make cover image full width
+* *(mail)* Do not fail testmail command when the connection could not be closed.
+* *(migration)* Make sure tasks are associated to the correct view and bucket for data imported from Vikunja dump
+* *(migration)* Ensure project background gets exported and imported
+* *(projects)* Trigger only single mutation
+* *(task)* Do not allow moving a task to the project the task already belongs to
+* *(task)* Set current project after moving a task
+* *(task)* Move task into new kanban bucket when moving between projects
+* *(views)* Do not create task bucket and task position entries when duplicating a project* Emit for DatepickerWithValues ([3aaf363](3aaf3634134a6989337bad02ac99a9329d33b17f))
+* Textarea autosize for LanguageTool ([d9f5555](d9f555554e5ecfa9d1243c565e2f42c77f7a7597))
+* Remove console log ([0ca43dc](0ca43dc147acd04d9f9b566325ccde0a5782680f))
+
+### Dependencies
+
+* *(deps)* Update module github.com/coreos/go-oidc/v3 to v3.11.0
+* *(deps)* Update flake
+* *(deps)* Update go toolchain to 1.22.5
+* *(deps)* Update dependency node to v20.16.0
+
+### Documentation
+
+* Clarify Todoist redirect url ([7117303](7117303d5705199bb39fb6661b20deebea96959f))
+
+### Features
+
+* *(editor)* Support custom protocol for links* Use withDefaults for Reminders ([8729c24](8729c24e1d2bdc783e750dc1166a8ab31a716107))
+* Improve projects store ([d707e15](d707e1576a006baa73c529b432e694dee237db76))
+* Improve label store ([a0e3efe](a0e3efe2d12521e773334a19ac985a2011575c3c))
+* Improve priority visibility ([dddba4d](dddba4d64a9ddddd6f442c8180661d2d498de994))
+* Add tailwind with prefix (#2513) ([d7c5451](d7c54517297e750d92618376f52045b11da6e82c))
+* Improve ProjectSettingsViews ([811ccc1](811ccc1baa2fe1fb9fcc8b5515c8c3f3b591e96a))
+* Add missing peer dependency ([d586f69](d586f691b7a245bbffd5df4e7a4937f0527047e0))
+* Switch from nix flakes to devenv ([73f923b](73f923bc47d32a6a9a689e461901295b07646ebf))
+
+
+### Miscellaneous Tasks
+
+* *(i18n)* Update translations via Crowdin
+* Remove lodash.debounce ([fc780a9](fc780a90ae856038db73d3ad63fcdd5627211c36))
+* Improve error message ([6e38bcf](6e38bcf3498a15a1dc1f6fbef254c08513b408b3))
+* Use nixpkgs unstable for more recent packages ([f5040ad](f5040ad2f4996fe1ccf03172b1a1ee6007068ee7))
+
+### Other
+
+* *(other)* [skip ci] Updated swagger docs
 
 ## [0.24.1] - 2024-07-18
 

Dockerfile

@@ -1,11 +1,11 @@
 # syntax=docker/dockerfile:1
-FROM --platform=$BUILDPLATFORM node:20.14.0-alpine AS frontendbuilder
+FROM --platform=$BUILDPLATFORM node:22.13.0-alpine AS frontendbuilder
 
 WORKDIR /build
 
-ENV PNPM_CACHE_FOLDER .cache/pnpm/
-ENV PUPPETEER_SKIP_DOWNLOAD true
-ENV CYPRESS_INSTALL_BINARY 0
+ENV PNPM_CACHE_FOLDER=.cache/pnpm/
+ENV PUPPETEER_SKIP_DOWNLOAD=true
+ENV CYPRESS_INSTALL_BINARY=0
 
 COPY frontend/ ./
 
@@ -13,7 +13,7 @@ RUN corepack enable && \
       pnpm install && \
       pnpm run build
 
-FROM --platform=$BUILDPLATFORM techknowlogick/xgo:go-1.21.x AS apibuilder
+FROM --platform=$BUILDPLATFORM ghcr.io/techknowlogick/xgo:go-1.23.x AS apibuilder
 
 RUN go install github.com/magefile/mage@latest && \
     mv /go/bin/mage /usr/local/go/bin
@@ -24,7 +24,7 @@ COPY --from=frontendbuilder /build/dist ./frontend/dist
 
 ARG TARGETOS TARGETARCH TARGETVARIANT
 
-ENV GOPROXY https://goproxy.kolaente.de
+ENV GOPROXY=https://goproxy.kolaente.de
 RUN export PATH=$PATH:$GOPATH/bin && \
 	mage build:clean && \
     mage release:xgo "${TARGETOS}/${TARGETARCH}/${TARGETVARIANT}"
@@ -35,7 +35,14 @@ RUN export PATH=$PATH:$GOPATH/bin && \
 
 # The actual image
 FROM scratch
-LABEL maintainer="maintainers@vikunja.io"
+
+LABEL org.opencontainers.image.authors='maintainers@vikunja.io'
+LABEL org.opencontainers.image.url='https://vikunja.io'
+LABEL org.opencontainers.image.documentation='https://vikunja.io/docs'
+LABEL org.opencontainers.image.source='https://code.vikunja.io/vikunja'
+LABEL org.opencontainers.image.licenses='AGPLv3'
+LABEL org.opencontainers.image.title='Vikunja'
+
 WORKDIR /app/vikunja
 ENTRYPOINT [ "/app/vikunja/vikunja" ]
 EXPOSE 3456

README.md

@@ -2,7 +2,7 @@
 
 [![Build Status](https://drone.kolaente.de/api/badges/vikunja/vikunjaa/status.svg)](https://drone.kolaente.de/vikunja/vikunja)
 [![License: AGPL v3](https://img.shields.io/badge/License-AGPL%20v3-blue.svg)](LICENSE)
-[![Install](https://img.shields.io/badge/download-v0.24.1-brightgreen.svg)](https://vikunja.io/docs/installing)
+[![Install](https://img.shields.io/badge/download-v0.24.6-brightgreen.svg)](https://vikunja.io/docs/installing)
 [![Docker Pulls](https://img.shields.io/docker/pulls/vikunja/vikunja.svg)](https://hub.docker.com/r/vikunja/vikunja/)
 [![Swagger Docs](https://img.shields.io/badge/swagger-docs-brightgreen.svg)](https://try.vikunja.io/api/v1/docs)
 [![Go Report Card](https://goreportcard.com/badge/kolaente.dev/vikunja/vikunja)](https://goreportcard.com/report/kolaente.dev/vikunja/vikunja)

cliff.toml

@@ -17,6 +17,7 @@ body = """
         {% raw %}  {% endraw %}- **BREAKING**: {{commit.breaking_description}}
         {%- endif -%}
     {%- endfor -%}
+		{% raw %}\n{% endraw %}\
     {%- for commit in commits %}
         {%- if commit.scope -%}
         {% else -%}
@@ -56,4 +57,3 @@ commit_parsers = [
     { body = ".*security", group = "Security"},
     { message = ".*", group = "Other", default_scope = "other"}, # Everything that's not a conventional commit goes into the "Other" category
 ]
-

config-raw.json

@@ -0,0 +1,839 @@
+{
+    "children": [
+        {
+            "key": "service",
+            "children": [
+                {
+                    "key": "JWTSecret",
+                    "default_value": "\u003cjwt-secret\u003e",
+                    "comment": "This token is used to verify issued JWT tokens.\nDefault is a random token which will be generated at each startup of Vikunja.\n(This means all already issued tokens will be invalid once you restart Vikunja)"
+                },
+                {
+                    "key": "jwtttl",
+                    "default_value": "259200",
+                    "comment": "The duration of the issued JWT tokens in seconds.\nThe default is 259200 seconds (3 Days)."
+                },
+                {
+                    "key": "jwtttllong",
+                    "default_value": "2592000",
+                    "comment": "The duration of the \"remember me\" time in seconds. When the login request is made with\nthe long param set, the token returned will be valid for this period.\nThe default is 2592000 seconds (30 Days)."
+                },
+                {
+                    "key": "interface",
+                    "default_value": ":3456",
+                    "comment": "The interface on which to run the webserver"
+                },
+                {
+                    "key": "unixsocket",
+                    "default_value": "",
+                    "comment": "Path to Unix socket. If set, it will be created and used instead of tcp"
+                },
+                {
+                    "key": "unixsocketmode",
+                    "default_value": "",
+                    "comment": "Permission bits for the Unix socket. Note that octal values must be prefixed by \"0o\", e.g. 0o660"
+                },
+                {
+                    "key": "publicurl",
+                    "default_value": "",
+                    "comment": "The public facing URL where your users can reach Vikunja. Used in emails and for the communication between api and frontend."
+                },
+                {
+                    "key": "rootpath",
+                    "default_value": "\u003crootpath\u003e",
+                    "comment": "The base path on the file system where the binary and assets are.\nVikunja will also look in this path for a config file, so you could provide only this variable to point to a folder\nwith a config file which will then be used."
+                },
+                {
+                    "key": "maxitemsperpage",
+                    "default_value": "50",
+                    "comment": "The max number of items which can be returned per page"
+                },
+                {
+                    "key": "enablecaldav",
+                    "default_value": "true",
+                    "comment": "Enable the caldav endpoint, see the docs for more details"
+                },
+                {
+                    "key": "motd",
+                    "default_value": "",
+                    "comment": "Set the motd message, available from the /info endpoint"
+                },
+                {
+                    "key": "enablelinksharing",
+                    "default_value": "true",
+                    "comment": "Enable sharing of project via a link"
+                },
+                {
+                    "key": "enableregistration",
+                    "default_value": "true",
+                    "comment": "Whether to let new users registering themselves or not"
+                },
+                {
+                    "key": "enabletaskattachments",
+                    "default_value": "true",
+                    "comment": "Whether to enable task attachments or not"
+                },
+                {
+                    "key": "timezone",
+                    "default_value": "GMT",
+                    "comment": "The time zone all timestamps are in. Please note that time zones have to use [the official tz database names](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones). UTC or GMT offsets won't work."
+                },
+                {
+                    "key": "enabletaskcomments",
+                    "default_value": "true",
+                    "comment": "Whether task comments should be enabled or not"
+                },
+                {
+                    "key": "enabletotp",
+                    "default_value": "true",
+                    "comment": "Whether totp is enabled. In most cases you want to leave that enabled."
+                },
+                {
+                    "key": "testingtoken",
+                    "default_value": "",
+                    "comment": "If not empty, this will enable `/test/{table}` endpoints which allow to put any content in the database.\nUsed to reset the db before frontend tests. Because this is quite a dangerous feature allowing for lots of harm,\neach request made to this endpoint needs to provide an `Authorization: \u003ctoken\u003e` header with the token from below. \u003cbr/\u003e\n**You should never use this unless you know exactly what you're doing**"
+                },
+                {
+                    "key": "enableemailreminders",
+                    "default_value": "true",
+                    "comment": "If enabled, Vikunja will send an email to everyone who is either assigned to a task or created it when a task reminder\nis due."
+                },
+                {
+                    "key": "enableuserdeletion",
+                    "default_value": "true",
+                    "comment": "If true, will allow users to request the complete deletion of their account. When using external authentication methods\nit may be required to coordinate with them in order to delete the account. This setting will not affect the cli commands\nfor user deletion."
+                },
+                {
+                    "key": "maxavatarsize",
+                    "default_value": "1024",
+                    "comment": "The maximum size clients will be able to request for user avatars.\nIf clients request a size bigger than this, it will be changed on the fly."
+                },
+                {
+                    "key": "demomode",
+                    "default_value": "false",
+                    "comment": "If set to true, the frontend will show a big red warning not to use this instance for real data as it will be cleared out.\nYou probably don't need to set this value, it was created specifically for usage on [try](https://try.vikunja.io)."
+                },
+                {
+                    "key": "allowiconchanges",
+                    "default_value": "true",
+                    "comment": "Allow changing the logo and other icons based on various occasions throughout the year."
+                },
+                {
+                    "key": "customlogourl",
+                    "default_value": "",
+                    "comment": "Allow using a custom logo via external URL."
+                },
+                {
+                    "key": "enablepublicteams",
+                    "default_value": "false",
+                    "comment": "Enables the public team feature. If enabled, it is possible to configure teams to be public, which makes them\ndiscoverable when sharing a project, therefore not only showing teams the user is member of."
+                },
+                {
+                    "key": "bcryptrounds",
+                    "default_value": "11",
+                    "comment": "The number of bcrypt rounds to use during registration. Each increment of this number doubles the computational cost. You probably don't need to change this value."
+                },
+                {
+                    "key": "enableopenidteamusersearch",
+                    "default_value": "false",
+                    "comment": "If enabled, users will only find other users who are part of an existing team when they are searching for a user by their partial name. The other existing team may be created from openid. It is still possible to add users to teams with their exact email address even when this is enabled."
+                }
+            ]
+        },
+        {
+            "key": "sentry",
+            "children": [
+                {
+                    "key": "enabled",
+                    "default_value": "false",
+                    "comment": "If set to true, enables anonymous error tracking of api errors via Sentry. This allows us to gather more\ninformation about errors in order to debug and fix it."
+                },
+                {
+                    "key": "dsn",
+                    "default_value": "https://440eedc957d545a795c17bbaf477497c@o1047380.ingest.sentry.io/4504254983634944",
+                    "comment": "Configure the Sentry dsn used for api error tracking. Only used when Sentry is enabled for the api."
+                },
+                {
+                    "key": "frontendenabled",
+                    "default_value": "false",
+                    "comment": "If set to true, enables anonymous error tracking of frontend errors via Sentry. This allows us to gather more\ninformation about errors in order to debug and fix it."
+                },
+                {
+                    "key": "frontenddsn",
+                    "default_value": "https://85694a2d757547cbbc90cd4b55c5a18d@o1047380.ingest.sentry.io/6024480",
+                    "comment": "Configure the Sentry dsn used for frontend error tracking. Only used when Sentry is enabled for the frontend."
+                }
+            ]
+        },
+        {
+            "key": "database",
+            "children": [
+                {
+                    "key": "type",
+                    "default_value": "sqlite",
+                    "comment": "Database type to use. Supported values are mysql, postgres and sqlite. Vikunja is able to run with MySQL 8.0+, Mariadb 10.2+, PostgreSQL 12+, and sqlite."
+                },
+                {
+                    "key": "user",
+                    "default_value": "vikunja",
+                    "comment": "Database user which is used to connect to the database."
+                },
+                {
+                    "key": "password",
+                    "default_value": "",
+                    "comment": "Database password"
+                },
+                {
+                    "key": "host",
+                    "default_value": "localhost",
+                    "comment": "Database host"
+                },
+                {
+                    "key": "database",
+                    "default_value": "vikunja",
+                    "comment": "Database to use"
+                },
+                {
+                    "key": "path",
+                    "default_value": "./vikunja.db",
+                    "comment": "When using sqlite, this is the path where to store the data"
+                },
+                {
+                    "key": "maxopenconnections",
+                    "default_value": "100",
+                    "comment": "Sets the max open connections to the database. Only used when using mysql and postgres."
+                },
+                {
+                    "key": "maxidleconnections",
+                    "default_value": "50",
+                    "comment": "Sets the maximum number of idle connections to the db."
+                },
+                {
+                    "key": "maxconnectionlifetime",
+                    "default_value": "10000",
+                    "comment": "The maximum lifetime of a single db connection in milliseconds."
+                },
+                {
+                    "key": "sslmode",
+                    "default_value": "disable",
+                    "comment": "Secure connection mode. Only used with postgres.\n(see https://pkg.go.dev/github.com/lib/pq?tab=doc#hdr-Connection_String_Parameters)"
+                },
+                {
+                    "key": "sslcert",
+                    "default_value": "",
+                    "comment": "The path to the client cert. Only used with postgres."
+                },
+                {
+                    "key": "sslkey",
+                    "default_value": "",
+                    "comment": "The path to the client key. Only used with postgres."
+                },
+                {
+                    "key": "sslrootcert",
+                    "default_value": "",
+                    "comment": "The path to the ca cert. Only used with postgres."
+                },
+                {
+                    "key": "tls",
+                    "default_value": "false",
+                    "comment": "Enable SSL/TLS for mysql connections. Options: false, true, skip-verify, preferred"
+                }
+            ]
+        },
+        {
+            "key": "typesense",
+            "children": [
+                {
+                    "key": "enabled",
+                    "default_value": "false",
+                    "comment": "Whether to enable the Typesense integration. If true, all tasks will be synced to the configured Typesense\ninstance and all search and filtering will run through Typesense instead of only through the database.\nTypesense allows fast fulltext search including fuzzy matching support. It may return different results than\nwhat you'd get with a database-only search."
+                },
+                {
+                    "key": "url",
+                    "default_value": "",
+                    "comment": "The url to the Typesense instance you want to use. Can be hosted locally or in Typesense Cloud as long as Vikunja is able to reach it. Must be a http(s) url."
+                },
+                {
+                    "key": "apikey",
+                    "default_value": "",
+                    "comment": "The Typesense API key you want to use."
+                }
+            ]
+        },
+        {
+            "key": "redis",
+            "children": [
+                {
+                    "key": "enabled",
+                    "default_value": "false",
+                    "comment": "Whether to enable redis or not"
+                },
+                {
+                    "key": "host",
+                    "default_value": "localhost:6379",
+                    "comment": "The host of the redis server including its port."
+                },
+                {
+                    "key": "password",
+                    "default_value": "",
+                    "comment": "The password used to authenticate against the redis server"
+                },
+                {
+                    "key": "db",
+                    "default_value": "0",
+                    "comment": "0 means default database"
+                }
+            ]
+        },
+        {
+            "key": "cors",
+            "children": [
+                {
+                    "key": "enable",
+                    "default_value": "false",
+                    "comment": "Whether to enable or disable cors headers.\nNote: If you want to put the frontend and the api on separate domains or ports, you will need to enable this.\nOtherwise the frontend won't be able to make requests to the api through the browser."
+                },
+                {
+                    "key": "origins",
+                    "comment": "A list of origins which may access the api. These need to include the protocol (`http://` or `https://`) and port, if any.",
+                    "children": [
+                        {
+                            "default_value": "*"
+                        }
+                    ]
+                },
+                {
+                    "key": "maxage",
+                    "default_value": "0",
+                    "comment": "How long (in seconds) the results of a preflight request can be cached."
+                }
+            ]
+        },
+        {
+            "key": "mailer",
+            "children": [
+                {
+                    "key": "enabled",
+                    "default_value": "false",
+                    "comment": "Whether to enable the mailer or not. If it is disabled, all users are enabled right away and password reset is not possible."
+                },
+                {
+                    "key": "host",
+                    "default_value": "",
+                    "comment": "SMTP Host"
+                },
+                {
+                    "key": "port",
+                    "default_value": "587",
+                    "comment": "SMTP Host port.\n**NOTE:** If you're unable to send mail and the only error you see in the logs is an `EOF`, try setting the port to `25`."
+                },
+                {
+                    "key": "authtype",
+                    "default_value": "plain",
+                    "comment": "SMTP Auth Type. Can be either `plain`, `login` or `cram-md5`."
+                },
+                {
+                    "key": "username",
+                    "default_value": "user",
+                    "comment": "SMTP username"
+                },
+                {
+                    "key": "password",
+                    "default_value": "",
+                    "comment": "SMTP password"
+                },
+                {
+                    "key": "skiptlsverify",
+                    "default_value": "false",
+                    "comment": "Whether to skip verification of the tls certificate on the server"
+                },
+                {
+                    "key": "fromemail",
+                    "default_value": "mail@vikunja",
+                    "comment": "The default from address when sending emails"
+                },
+                {
+                    "key": "queuelength",
+                    "default_value": "100",
+                    "comment": "The length of the mail queue."
+                },
+                {
+                    "key": "queuetimeout",
+                    "default_value": "30",
+                    "comment": "The timeout in seconds after which the current open connection to the mailserver will be closed."
+                },
+                {
+                    "key": "forcessl",
+                    "default_value": "false",
+                    "comment": "By default, Vikunja will try to connect with starttls, use this option to force it to use ssl."
+                }
+            ]
+        },
+        {
+            "key": "log",
+            "children": [
+                {
+                    "key": "path",
+                    "default_value": "\u003crootpath\u003elogs",
+                    "comment": "A folder where all the logfiles should go."
+                },
+                {
+                    "key": "enabled",
+                    "default_value": "true",
+                    "comment": "Whether to show any logging at all or none"
+                },
+                {
+                    "key": "standard",
+                    "default_value": "stdout",
+                    "comment": "Where the normal log should go. Possible values are stdout, stderr, file or off to disable standard logging."
+                },
+                {
+                    "key": "level",
+                    "default_value": "INFO",
+                    "comment": "Change the log level. Possible values (case-insensitive) are CRITICAL, ERROR, WARNING, NOTICE, INFO, DEBUG."
+                },
+                {
+                    "key": "database",
+                    "default_value": "off",
+                    "comment": "Whether or not to log database queries. Useful for debugging. Possible values are stdout, stderr, file or off to disable database logging."
+                },
+                {
+                    "key": "databaselevel",
+                    "default_value": "WARNING",
+                    "comment": "The log level for database log messages. Possible values (case-insensitive) are CRITICAL, ERROR, WARNING, NOTICE, INFO, DEBUG."
+                },
+                {
+                    "key": "http",
+                    "default_value": "stdout",
+                    "comment": "Whether to log http requests or not. Possible values are stdout, stderr, file or off to disable http logging."
+                },
+                {
+                    "key": "echo",
+                    "default_value": "off",
+                    "comment": "Echo has its own logging which usually is unnecessary, which is why it is disabled by default. Possible values are stdout, stderr, file or off to disable standard logging."
+                },
+                {
+                    "key": "events",
+                    "default_value": "off",
+                    "comment": "Whether or not to log events. Useful for debugging. Possible values are stdout, stderr, file or off to disable events logging."
+                },
+                {
+                    "key": "eventslevel",
+                    "default_value": "info",
+                    "comment": "The log level for event log messages. Possible values (case-insensitive) are ERROR, INFO, DEBUG."
+                },
+                {
+                    "key": "mail",
+                    "default_value": "off",
+                    "comment": "Whether or not to log mail log messages. This will not log mail contents. Possible values are stdout, stderr, file or off to disable mail-related logging."
+                },
+                {
+                    "key": "maillevel",
+                    "default_value": "info",
+                    "comment": "The log level for mail log messages. Possible values (case-insensitive) are ERROR, WARNING, INFO, DEBUG."
+                }
+            ]
+        },
+        {
+            "key": "ratelimit",
+            "children": [
+                {
+                    "key": "enabled",
+                    "default_value": "false",
+                    "comment": "whether or not to enable the rate limit"
+                },
+                {
+                    "key": "kind",
+                    "default_value": "user",
+                    "comment": "The kind on which rates are based. Can be either \"user\" for a rate limit per user or \"ip\" for an ip-based rate limit."
+                },
+                {
+                    "key": "period",
+                    "default_value": "60",
+                    "comment": "The time period in seconds for the limit"
+                },
+                {
+                    "key": "limit",
+                    "default_value": "100",
+                    "comment": "The max number of requests a user is allowed to do in the configured time period"
+                },
+                {
+                    "key": "store",
+                    "default_value": "keyvalue",
+                    "comment": "The store where the limit counter for each user is stored.\nPossible values are \"keyvalue\", \"memory\" or \"redis\".\nWhen choosing \"keyvalue\" this setting follows the one configured in the \"keyvalue\" section."
+                },
+                {
+                    "key": "noauthlimit",
+                    "default_value": "10",
+                    "comment": "The number of requests a user can make from the same IP to all unauthenticated routes (login, register,\npassword confirmation, email verification, password reset request) per minute. This limit cannot be disabled.\nYou should only change this if you know what you're doing."
+                }
+            ]
+        },
+        {
+            "key": "files",
+            "children": [
+                {
+                    "key": "basepath",
+                    "default_value": "./files",
+                    "comment": "The path where files are stored"
+                },
+                {
+                    "key": "maxsize",
+                    "default_value": "20MB",
+                    "comment": "The maximum size of a file, as a human-readable string.\nWarning: The max size is limited 2^64-1 bytes due to the underlying datatype"
+                }
+            ]
+        },
+        {
+            "key": "migration",
+            "comment": "To use any of the available migrators, you usually need to configure credentials for the appropriate service and enable it. Find instructions below on how to do this for the provided migrators.",
+            "children": [
+                {
+                    "key": "todoist",
+                    "children": [
+                        {
+                            "key": "enable",
+                            "default_value": "false",
+                            "comment": "Wheter to enable the Todoist migrator."
+                        },
+                        {
+                            "key": "clientid",
+                            "default_value": "",
+                            "comment": "The client id, required for making requests to the Todoist api\nYou need to register your Vikunja instance at https://developer.todoist.com/appconsole.html to get this."
+                        },
+                        {
+                            "key": "clientsecret",
+                            "default_value": "",
+                            "comment": "The client secret, also required for making requests to the Todoist api. Obtain it at https://developer.todoist.com/appconsole.html after registering your Vikunja instance."
+                        },
+                        {
+                            "key": "redirecturl",
+                            "default_value": "\u003cservice.publicurl\u003e/migrate/todoist",
+                            "comment": "The url where clients are redirected after they authorized Vikunja to access their Todoist items.\nIn Todoist, this is called `OAuth redirect URL` and it needs to match the url you entered when registering\nyour Vikunja instance at the Todoist developer console.\nWhen using the official Vikunja frontend, set this to `\u003cservice.publicurl\u003e/migrate/todoist` (the default value).\nOtherwise, set this to an url which then makes a request to /api/v1/migration/todoist/migrate\nwith the code obtained from the Todoist api."
+                        }
+                    ]
+                },
+                {
+                    "key": "trello",
+                    "children": [
+                        {
+                            "key": "enable",
+                            "default_value": "false",
+                            "comment": "Whether to enable the Trello migrator."
+                        },
+                        {
+                            "key": "key",
+                            "default_value": "",
+                            "comment": "The client id, required for making requests to the trello api.\nYou need to register your Vikunja instance at https://trello.com/app-key (log in before you visit that link) to get one. Copy the `Personal Key` and set it as the client id. Add your Vikunja domain to the Allowed Origins list."
+                        },
+                        {
+                            "key": "redirecturl",
+                            "default_value": "\u003cfrontend url\u003e/migrate/trello",
+                            "comment": "The url where clients are redirected after they authorized Vikunja to access their trello cards.\nThis needs to match the url you entered when registering your Vikunja instance at trello.\nWhen using the official Vikunja frontend, set this to `\u003cservice.publicurl\u003e/migrate/trello` (the default value).\nOtherwise, set this to an url which then makes a request to /api/v1/migration/trello/migrate\nwith the code obtained from the Trello api."
+                        }
+                    ]
+                },
+                {
+                    "key": "microsofttodo",
+                    "children": [
+                        {
+                            "key": "enable",
+                            "default_value": "false",
+                            "comment": "Wheter to enable the Microsoft Todo migrator."
+                        },
+                        {
+                            "key": "clientid",
+                            "default_value": "",
+                            "comment": "The client id, required for making requests to the Microsoft graph api.\nSee https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-register-app#register-an-application\nfor information about how to register your Vikunja instance."
+                        },
+                        {
+                            "key": "clientsecret",
+                            "default_value": "",
+                            "comment": "The client secret, also required for making requests to the Microsoft graph api"
+                        },
+                        {
+                            "key": "redirecturl",
+                            "default_value": "\u003cfrontend url\u003e/migrate/microsoft-todo",
+                            "comment": "The url where clients are redirected after they authorized Vikunja to access their Microsoft todo tasks.\nThis needs to match the url you entered when registering your Vikunja instance at Microsoft.\nWhen using the official Vikunja frontend, set this to `\u003cservice.publicurl\u003e/migrate/microsoft-todo` (the default value).\nOtherwise, set this to an url which then makes a request to /api/v1/migration/microsoft-todo/migrate\nwith the code obtained from the Microsoft Todo api."
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "key": "avatar",
+            "children": [
+                {
+                    "key": "gravatarexpiration",
+                    "default_value": "3600",
+                    "comment": "When using gravatar, this is the duration in seconds until a cached gravatar user avatar expires"
+                }
+            ]
+        },
+        {
+            "key": "backgrounds",
+            "children": [
+                {
+                    "key": "enabled",
+                    "default_value": "true",
+                    "comment": "Whether to enable backgrounds for projects at all."
+                },
+                {
+                    "key": "providers",
+                    "children": [
+                        {
+                            "key": "upload",
+                            "children": [
+                                {
+                                    "key": "enabled",
+                                    "default_value": "true",
+                                    "comment": "Whether to enable uploaded project backgrounds"
+                                }
+                            ]
+                        },
+                        {
+                            "key": "unsplash",
+                            "children": [
+                                {
+                                    "key": "enabled",
+                                    "default_value": "false",
+                                    "comment": "Whether to enable setting backgrounds from unsplash as project backgrounds"
+                                },
+                                {
+                                    "key": "accesstoken",
+                                    "default_value": "",
+                                    "comment": "You need to create an application for your installation at https://unsplash.com/oauth/applications/new\nand set the access token below."
+                                },
+                                {
+                                    "key": "applicationid",
+                                    "default_value": "",
+                                    "comment": "The unsplash application id is only used for pingback and required as per their api guidelines.\nYou can find the Application ID in the dashboard for your API application. It should be a numeric ID.\nIt will only show in the UI if your application has been approved for Enterprise usage, therefore if\nyou’re in Demo mode, you can also find the ID in the URL at the end: https://unsplash.com/oauth/applications/:application_id"
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "key": "legal",
+            "comment": "Legal urls\nWill be shown in the frontend if configured here",
+            "children": [
+                {
+                    "key": "imprinturl",
+                    "default_value": ""
+                },
+                {
+                    "key": "privacyurl",
+                    "default_value": ""
+                }
+            ]
+        },
+        {
+            "key": "keyvalue",
+            "comment": "Key Value Storage settings\nThe Key Value Storage is used for different kinds of things like metrics and a few cache systems.",
+            "children": [
+                {
+                    "key": "type",
+                    "default_value": "memory",
+                    "comment": "The type of the storage backend. Can be either \"memory\" or \"redis\". If \"redis\" is chosen it needs to be configured separately."
+                }
+            ]
+        },
+        {
+            "key": "auth",
+            "children": [
+                {
+                    "key": "local",
+                    "comment": "Local authentication will let users log in and register (if enabled) through the db.\nThis is the default auth mechanism and does not require any additional configuration.",
+                    "children": [
+                        {
+                            "key": "enabled",
+                            "default_value": "true",
+                            "comment": "Enable or disable local authentication"
+                        }
+                    ]
+                },
+                {
+                    "key": "openid",
+                    "comment": "OpenID configuration will allow users to authenticate through a third-party OpenID Connect compatible provider.\u003cbr/\u003e\nThe provider needs to support the `openid`, `profile` and `email` scopes.\u003cbr/\u003e\n**Note:** Some openid providers (like Gitlab) only make the email of the user available through OpenID if they have set it to be publicly visible.\nIf the email is not public in those cases, authenticating will fail.\u003cbr/\u003e\n**Note 2:** The frontend expects the third party to redirect the user \u003cfrontend-url\u003e/auth/openid/\u003cauth key\u003e after authentication. Please make sure to configure the redirect url in your third party auth service accordingly if you're using the default Vikunja frontend.\nThe frontend will automatically provide the API with the redirect url, composed from the current url where it's hosted.\nIf you want to use the desktop client with OpenID, make sure to allow redirects to `127.0.0.1`.",
+                    "children": [
+                        {
+                            "key": "enabled",
+                            "default_value": "false",
+                            "comment": "Enable or disable OpenID Connect authentication"
+                        },
+                        {
+                            "key": "providers",
+                            "comment": "A list of enabled providers. You can freely choose the `<provider key>`. Note that you must add at least one key to a config file if you want to read values from an environment variable as the provider won't be known to Vikunja otherwise.",
+                            "children": [
+                                {
+                                    "key": "<provider key>",
+                                    "children": [
+                                        {
+                                            "key": "name",
+                                            "default_value": "",
+                                            "comment": "The name of the provider as it will appear in the frontend."
+                                        },
+                                        {
+                                            "key": "authurl",
+                                            "default_value": "",
+                                            "comment": "The auth url to send users to if they want to authenticate using OpenID Connect."
+                                        },
+                                        {
+                                            "key": "logouturl",
+                                            "default_value": "",
+                                            "comment": "The oidc logouturl that users will be redirected to on logout.\nLeave empty or delete key, if you do not want to be redirected."
+                                        },
+                                        {
+                                            "key": "clientid",
+                                            "default_value": "",
+                                            "comment": "The client ID used to authenticate Vikunja at the OpenID Connect provider."
+                                        },
+                                        {
+                                            "key": "clientsecret",
+                                            "default_value": "",
+                                            "comment": "The client secret used to authenticate Vikunja at the OpenID Connect provider."
+                                        },
+                                        {
+                                            "key": "scope",
+                                            "default_value": "openid email profile",
+                                            "comment": "The scope necessary to use oidc.\nIf you want to use the Feature to create and assign to Vikunja teams via oidc, you have to add the custom \"vikunja_scope\" and check [openid.md](https://vikunja.io/docs/openid/).\ne.g. scope: openid email profile vikunja_scope"
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "key": "metrics",
+            "comment": "Prometheus metrics endpoint",
+            "children": [
+                {
+                    "key": "enabled",
+                    "default_value": "false",
+                    "comment": "If set to true, enables a /metrics endpoint for prometheus to collect metrics about Vikunja. You can query it from `/api/v1/metrics`."
+                },
+                {
+                    "key": "username",
+                    "default_value": "",
+                    "comment": "If set to a non-empty value the /metrics endpoint will require this as a username via basic auth in combination with the password below."
+                },
+                {
+                    "key": "password",
+                    "default_value": "",
+                    "comment": "If set to a non-empty value the /metrics endpoint will require this as a password via basic auth in combination with the username below."
+                }
+            ]
+        },
+        {
+            "key": "defaultsettings",
+            "comment": "Provide default settings for new users. When a new user is created, these settings will automatically be set for the user. If you change them in the config file afterwards they will not be changed back for existing users.",
+            "children": [
+                {
+                    "key": "avatar_provider",
+                    "default_value": "initials",
+                    "comment": "The avatar source for the user. Can be `gravatar`, `initials`, `upload` or `marble`. If you set this to `upload` you'll also need to specify `defaultsettings.avatar_file_id`."
+                },
+                {
+                    "key": "avatar_file_id",
+                    "default_value": "0",
+                    "comment": "The id of the file used as avatar."
+                },
+                {
+                    "key": "email_reminders_enabled",
+                    "default_value": "false",
+                    "comment": "If set to true users will get task reminders via email."
+                },
+                {
+                    "key": "discoverable_by_name",
+                    "default_value": "false",
+                    "comment": "If set to true will allow other users to find this user when searching for parts of their name."
+                },
+                {
+                    "key": "discoverable_by_email",
+                    "default_value": "false",
+                    "comment": "If set to true will allow other users to find this user when searching for their exact email."
+                },
+                {
+                    "key": "overdue_tasks_reminders_enabled",
+                    "default_value": "true",
+                    "comment": "If set to true will send an email every day with all overdue tasks at a configured time."
+                },
+                {
+                    "key": "overdue_tasks_reminders_time",
+                    "default_value": "9:00",
+                    "comment": "When to send the overdue task reminder email."
+                },
+                {
+                    "key": "default_project_id",
+                    "default_value": "0",
+                    "comment": "The id of the default project. Make sure users actually have access to this project when setting this value."
+                },
+                {
+                    "key": "week_start",
+                    "default_value": "0",
+                    "comment": "Start of the week for the user. `0` is sunday, `1` is monday and so on."
+                },
+                {
+                    "key": "language",
+                    "default_value": "\u003cunset\u003e",
+                    "comment": "The language of the user interface. Must be an ISO 639-1 language code followed by an ISO 3166-1 alpha-2 country code. Check https://kolaente.dev/vikunja/vikunja/frontend/src/branch/main/src/i18n/lang for a list of possible languages. Will default to the browser language the user uses when signing up."
+                },
+                {
+                    "key": "timezone",
+                    "default_value": "\u003ctime zone set at service.timezone\u003e",
+                    "comment": "The time zone of each individual user. This will affect when users get reminders and overdue task emails."
+                }
+            ]
+        },
+        {
+            "key": "webhooks",
+            "children": [
+                {
+                    "key": "enabled",
+                    "default_value": "true",
+                    "comment": "Whether to enable support for webhooks"
+                },
+                {
+                    "key": "timeoutseconds",
+                    "default_value": "30",
+                    "comment": "The timeout in seconds until a webhook request fails when no response has been received."
+                },
+                {
+                    "key": "proxyurl",
+                    "default_value": "",
+                    "comment": "The URL of [a mole instance](https://github.com/frain-dev/mole) to use to proxy outgoing webhook requests. You should use this and configure appropriately if you're not the only one using your Vikunja instance. More info about why: https://webhooks.fyi/best-practices/webhook-providers#implement-security-on-egress-communication. Must be used in combination with `webhooks.password` (see below)."
+                },
+                {
+                    "key": "proxypassword",
+                    "default_value": "",
+                    "comment": "The proxy password to use when authenticating against the proxy."
+                }
+            ]
+        },
+        {
+            "key": "autotls",
+            "children": [
+                {
+                    "key": "enabled",
+                    "default_value": "false",
+                    "comment": "If set to true, Vikunja will automatically request a TLS certificate from Let's Encrypt and use it to serve Vikunja over TLS. By enabling this option, you agree to Let's Encrypt's TOS.\nYou must configure a `service.publicurl` with a valid TLD where Vikunja is reachable to make this work. Furthermore, it is reccomened to set `service.interface` to `:443` if you're using this."
+                },
+                {
+                    "key": "email",
+                    "default_value": "",
+                    "comment": "A valid email address which will be used to register certificates with Let's Encrypt. You must provide this value in order to use autotls."
+                },
+                {
+                    "key": "renewbefore",
+                    "default_value": "30d",
+                    "comment": "A duration when certificates should be renewed before they expire. Valid time units are `ns`, `us` (or `µs`), `ms`, `s`, `m`, `h`."
+                }
+            ]
+        }
+    ]
+}

config.yml.sample

@@ -1,376 +0,0 @@
-service:
-  # This token is used to verify issued JWT tokens.
-  # Default is a random token which will be generated at each startup of Vikunja.
-  # (This means all already issued tokens will be invalid once you restart Vikunja)
-  JWTSecret: "<jwt-secret>"
-  # The duration of the issued JWT tokens in seconds.
-  # The default is 259200 seconds (3 Days).
-  jwtttl: 259200
-  # The duration of the "remember me" time in seconds. When the login request is made with
-  # the long param set, the token returned will be valid for this period.
-  # The default is 2592000 seconds (30 Days).
-  jwtttllong: 2592000
-  # The interface on which to run the webserver
-  interface: ":3456"
-  # Path to Unix socket. If set, it will be created and used instead of tcp
-  unixsocket:
-  # Permission bits for the Unix socket. Note that octal values must be prefixed by "0o", e.g. 0o660
-  unixsocketmode:
-  # The public facing URL where your users can reach Vikunja. Used in emails and for the communication between api and frontend.
-  publicurl: ""
-  # The base path on the file system where the binary and assets are.
-  # Vikunja will also look in this path for a config file, so you could provide only this variable to point to a folder
-  # with a config file which will then be used.
-  rootpath: <rootpath>
-  # The max number of items which can be returned per page
-  maxitemsperpage: 50
-  # Enable the caldav endpoint, see the docs for more details
-  enablecaldav: true
-  # Set the motd message, available from the /info endpoint
-  motd: ""
-  # Enable sharing of project via a link
-  enablelinksharing: true
-  # Whether to let new users registering themselves or not
-  enableregistration: true
-  # Whether to enable task attachments or not
-  enabletaskattachments: true
-  # The time zone all timestamps are in. Please note that time zones have to use [the official tz database names](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones). UTC or GMT offsets won't work.
-  timezone: GMT
-  # Whether task comments should be enabled or not
-  enabletaskcomments: true
-  # Whether totp is enabled. In most cases you want to leave that enabled.
-  enabletotp: true
-  # If not empty, this will enable `/test/{table}` endpoints which allow to put any content in the database.
-  # Used to reset the db before frontend tests. Because this is quite a dangerous feature allowing for lots of harm,
-  # each request made to this endpoint needs to provide an `Authorization: <token>` header with the token from below. <br/>
-  # **You should never use this unless you know exactly what you're doing**
-  testingtoken: ''
-  # If enabled, Vikunja will send an email to everyone who is either assigned to a task or created it when a task reminder
-  # is due.
-  enableemailreminders: true
-  # If true, will allow users to request the complete deletion of their account. When using external authentication methods
-  # it may be required to coordinate with them in order to delete the account. This setting will not affect the cli commands
-  # for user deletion.
-  enableuserdeletion: true
-  # The maximum size clients will be able to request for user avatars.
-  # If clients request a size bigger than this, it will be changed on the fly.
-  maxavatarsize: 1024
-  # If set to true, the frontend will show a big red warning not to use this instance for real data as it will be cleared out.
-  # You probably don't need to set this value, it was created specifically for usage on [try](https://try.vikunja.io).
-  demomode: false
-  # Allow changing the logo and other icons based on various occasions throughout the year.
-  allowiconchanges: true
-  # Allow using a custom logo via external URL.
-  customlogourl: ''
-  # Enables the public team feature. If enabled, it is possible to configure teams to be public, which makes them
-  # discoverable when sharing a project, therefore not only showing teams the user is member of.
-  enablepublicteams: false
-
-sentry:
-  # If set to true, enables anonymous error tracking of api errors via Sentry. This allows us to gather more 
-  # information about errors in order to debug and fix it.
-  enabled: false
-  # Configure the Sentry dsn used for api error tracking. Only used when Sentry is enabled for the api.
-  dsn: "https://440eedc957d545a795c17bbaf477497c@o1047380.ingest.sentry.io/4504254983634944"
-  # If set to true, enables anonymous error tracking of frontend errors via Sentry. This allows us to gather more 
-  # information about errors in order to debug and fix it.
-  frontendenabled: false
-  # Configure the Sentry dsn used for frontend error tracking. Only used when Sentry is enabled for the frontend.
-  frontenddsn: "https://85694a2d757547cbbc90cd4b55c5a18d@o1047380.ingest.sentry.io/6024480"
-
-database:
-  # Database type to use. Supported values are mysql, postgres and sqlite. Vikunja is able to run with MySQL 8.0+, Mariadb 10.2+, PostgreSQL 12+, and sqlite.
-  type: "sqlite"
-  # Database user which is used to connect to the database.
-  user: "vikunja"
-  # Database password
-  password: ""
-  # Database host
-  host: "localhost"
-  # Database to use
-  database: "vikunja"
-  # When using sqlite, this is the path where to store the data
-  path: "./vikunja.db"
-  # Sets the max open connections to the database. Only used when using mysql and postgres.
-  maxopenconnections: 100
-  # Sets the maximum number of idle connections to the db.
-  maxidleconnections: 50
-  # The maximum lifetime of a single db connection in milliseconds.
-  maxconnectionlifetime: 10000
-  # Secure connection mode. Only used with postgres.
-  # (see https://pkg.go.dev/github.com/lib/pq?tab=doc#hdr-Connection_String_Parameters)
-  sslmode: disable
-  # The path to the client cert. Only used with postgres.
-  sslcert: ""
-  # The path to the client key. Only used with postgres.
-  sslkey: ""
-  # The path to the ca cert. Only used with postgres.
-  sslrootcert: ""
-  # Enable SSL/TLS for mysql connections. Options: false, true, skip-verify, preferred
-  tls: false
-
-typesense:
-  # Whether to enable the Typesense integration. If true, all tasks will be synced to the configured Typesense
-  # instance and all search and filtering will run through Typesense instead of only through the database.
-  # Typesense allows fast fulltext search including fuzzy matching support. It may return different results than
-  # what you'd get with a database-only search.
-  enabled: false
-  # The url to the Typesense instance you want to use. Can be hosted locally or in Typesense Cloud as long
-  # as Vikunja is able to reach it.
-  url: ''
-  # The Typesense API key you want to use.
-  apikey: ''
-
-redis:
-  # Whether to enable redis or not
-  enabled: false
-  # The host of the redis server including its port.
-  host: 'localhost:6379'
-  # The password used to authenticate against the redis server
-  password: ''
-  # 0 means default database
-  db: 0
-
-cors:
-  # Whether to enable or disable cors headers.
-  # Note: If you want to put the frontend and the api on separate domains or ports, you will need to enable this.
-  #       Otherwise the frontend won't be able to make requests to the api through the browser.
-  enable: false
-  # A list of origins which may access the api. These need to include the protocol (`http://` or `https://`) and port, if any.
-  origins:
-    - "*"
-  # How long (in seconds) the results of a preflight request can be cached.
-  maxage: 0
-
-mailer:
-  # Whether to enable the mailer or not. If it is disabled, all users are enabled right away and password reset is not possible.
-  enabled: false
-  # SMTP Host
-  host: ""
-  # SMTP Host port.
-  # **NOTE:** If you're unable to send mail and the only error you see in the logs is an `EOF`, try setting the port to `25`.
-  port: 587
-  # SMTP Auth Type. Can be either `plain`, `login` or `cram-md5`.
-  authtype: "plain"
-  # SMTP username
-  username: "user"
-  # SMTP password
-  password: ""
-  # Whether to skip verification of the tls certificate on the server
-  skiptlsverify: false
-  # The default from address when sending emails
-  fromemail: "mail@vikunja"
-  # The length of the mail queue.
-  queuelength: 100
-  # The timeout in seconds after which the current open connection to the mailserver will be closed.
-  queuetimeout: 30
-  # By default, Vikunja will try to connect with starttls, use this option to force it to use ssl.
-  forcessl: false
-
-log:
-  # A folder where all the logfiles should go.
-  path: <rootpath>logs
-  # Whether to show any logging at all or none
-  enabled: true
-  # Where the normal log should go. Possible values are stdout, stderr, file or off to disable standard logging.
-  standard: "stdout"
-  # Change the log level. Possible values (case-insensitive) are CRITICAL, ERROR, WARNING, NOTICE, INFO, DEBUG.
-  level: "INFO"
-  # Whether or not to log database queries. Useful for debugging. Possible values are stdout, stderr, file or off to disable database logging.
-  database: "off"
-  # The log level for database log messages. Possible values (case-insensitive) are CRITICAL, ERROR, WARNING, NOTICE, INFO, DEBUG.
-  databaselevel: "WARNING"
-  # Whether to log http requests or not. Possible values are stdout, stderr, file or off to disable http logging.
-  http: "stdout"
-  # Echo has its own logging which usually is unnecessary, which is why it is disabled by default. Possible values are stdout, stderr, file or off to disable standard logging.
-  echo: "off"
-  # Whether or not to log events. Useful for debugging. Possible values are stdout, stderr, file or off to disable events logging.
-  events: "off"
-  # The log level for event log messages. Possible values (case-insensitive) are ERROR, INFO, DEBUG.
-  eventslevel: "info"
-  # Whether or not to log mail log messages. This will not log mail contents. Possible values are stdout, stderr, file or off to disable mail-related logging.
-  mail: "off"
-  # The log level for mail log messages. Possible values (case-insensitive) are ERROR, WARNING, INFO, DEBUG.
-  maillevel: "info"
-
-ratelimit:
-  # whether or not to enable the rate limit
-  enabled: false
-  # The kind on which rates are based. Can be either "user" for a rate limit per user or "ip" for an ip-based rate limit.
-  kind: user
-  # The time period in seconds for the limit
-  period: 60
-  # The max number of requests a user is allowed to do in the configured time period
-  limit: 100
-  # The store where the limit counter for each user is stored.
-  # Possible values are "keyvalue", "memory" or "redis".
-  # When choosing "keyvalue" this setting follows the one configured in the "keyvalue" section.
-  store: keyvalue
-  # The number of requests a user can make from the same IP to all unauthenticated routes (login, register,
-  # password confirmation, email verification, password reset request) per minute. This limit cannot be disabled.
-  # You should only change this if you know what you're doing.
-  noauthlimit: 10
-
-files:
-  # The path where files are stored
-  basepath: ./files # relative to the binary
-  # The maximum size of a file, as a human-readable string.
-  # Warning: The max size is limited 2^64-1 bytes due to the underlying datatype
-  maxsize: 20MB
-
-migration:
-  todoist:
-    # Wheter to enable the todoist migrator or not
-    enable: false
-    # The client id, required for making requests to the todoist api
-    # You need to register your Vikunja instance at https://developer.todoist.com/appconsole.html to get this
-    clientid:
-    # The client secret, also required for making requests to the todoist api
-    clientsecret:
-    # The url where clients are redirected after they authorized Vikunja to access their todoist items.
-    # This needs to match the url you entered when registering your Vikunja instance at todoist.
-    # This is usually the frontend url where the frontend then makes a request to /migration/todoist/migrate
-    # with the code obtained from the todoist api.
-    # Note that the Vikunja frontend expects this to be /migrate/todoist
-    redirecturl: <frontend url>/migrate/todoist
-  trello:
-    # Whether to enable the trello migrator or not
-    enable: false
-    # The client id, required for making requests to the trello api
-    # You need to register your Vikunja instance at https://trello.com/app-key (log in before you visit that link) to get this
-    key:
-    # The url where clients are redirected after they authorized Vikunja to access their trello cards.
-    # This needs to match the url you entered when registering your Vikunja instance at trello.
-    # This is usually the frontend url where the frontend then makes a request to /migration/trello/migrate
-    # with the code obtained from the trello api.
-    # Note that the Vikunja frontend expects this to end on /migrate/trello.
-    redirecturl: <frontend url>/migrate/trello
-  microsofttodo:
-    # Wheter to enable the microsoft todo migrator or not
-    enable: false
-    # The client id, required for making requests to the microsoft graph api
-    # See https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-register-app#register-an-application
-    # for information about how to register your Vikunja instance.
-    clientid:
-    # The client secret, also required for making requests to the microsoft graph api
-    clientsecret:
-    # The url where clients are redirected after they authorized Vikunja to access their microsoft todo tasks.
-    # This needs to match the url you entered when registering your Vikunja instance at microsoft.
-    # This is usually the frontend url where the frontend then makes a request to /migration/microsoft-todo/migrate
-    # with the code obtained from the microsoft graph api.
-    # Note that the Vikunja frontend expects this to be /migrate/microsoft-todo
-    redirecturl: <frontend url>/migrate/microsoft-todo
-
-avatar:
-  # When using gravatar, this is the duration in seconds until a cached gravatar user avatar expires
-  gravatarexpiration: 3600
-
-backgrounds:
-  # Whether to enable backgrounds for projects at all.
-  enabled: true
-  providers:
-    upload:
-      # Whether to enable uploaded project backgrounds
-      enabled: true
-    unsplash:
-      # Whether to enable setting backgrounds from unsplash as project backgrounds
-      enabled: false
-      # You need to create an application for your installation at https://unsplash.com/oauth/applications/new
-      # and set the access token below.
-      accesstoken:
-      # The unsplash application id is only used for pingback and required as per their api guidelines.
-      # You can find the Application ID in the dashboard for your API application. It should be a numeric ID.
-      # It will only show in the UI if your application has been approved for Enterprise usage, therefore if
-      # you’re in Demo mode, you can also find the ID in the URL at the end: https://unsplash.com/oauth/applications/:application_id
-      applicationid:
-
-# Legal urls
-# Will be shown in the frontend if configured here
-legal:
-  imprinturl:
-  privacyurl:
-
-# Key Value Storage settings
-# The Key Value Storage is used for different kinds of things like metrics and a few cache systems.
-keyvalue:
-  # The type of the storage backend. Can be either "memory" or "redis". If "redis" is chosen it needs to be configured separately.
-  type: "memory"
-
-auth:
-  # Local authentication will let users log in and register (if enabled) through the db.
-  # This is the default auth mechanism and does not require any additional configuration.
-  local:
-    # Enable or disable local authentication
-    enabled: true
-  # OpenID configuration will allow users to authenticate through a third-party OpenID Connect compatible provider.<br/>
-  # The provider needs to support the `openid`, `profile` and `email` scopes.<br/>
-  # **Note:** Some openid providers (like Gitlab) only make the email of the user available through OpenID if they have set it to be publicly visible.
-  # If the email is not public in those cases, authenticating will fail.
-  # +**Note 2:** The frontend expects the third party to redirect the user <frontend-url>/auth/openid/<auth key> after authentication. Please make sure to configure the redirect url in your third party auth service accordingly if you're using the default Vikunja frontend.    
-  # The frontend will automatically provide the API with the redirect url, composed from the current url where it's hosted.
-  # If you want to use the desktop client with OpenID, make sure to allow redirects to `127.0.0.1`.
-  # Take a look at the [default config file](https://kolaente.dev/vikunja/vikunja/src/branch/main/config.yml.sample) for more information about how to configure openid authentication.
-  openid:
-    # Enable or disable OpenID Connect authentication
-    enabled: false
-    # A list of enabled providers
-    providers:
-      # The name of the provider as it will appear in the frontend.
-      - name:
-        # The auth url to send users to if they want to authenticate using OpenID Connect.
-        authurl:
-        # The oidc logouturl that users will be redirected to on logout.
-        # Leave empty or delete key, if you do not want to be redirected.
-        logouturl:
-        # The client ID used to authenticate Vikunja at the OpenID Connect provider.
-        clientid:
-        # The client secret used to authenticate Vikunja at the OpenID Connect provider.
-        clientsecret:
-        # The scope necessary to use oidc.
-        # If you want to use the Feature to create and assign to Vikunja teams via oidc, you have to add the custom "vikunja_scope" and check [openid.md](https://vikunja.io/docs/openid/).
-        # e.g. scope: openid email profile vikunja_scope
-        scope: openid email profile
-
-# Prometheus metrics endpoint
-metrics:
-  # If set to true, enables a /metrics endpoint for prometheus to collect metrics about Vikunja. You can query it from `/api/v1/metrics`.
-  enabled: false
-  # If set to a non-empty value the /metrics endpoint will require this as a username via basic auth in combination with the password below.
-  username:
-  # If set to a non-empty value the /metrics endpoint will require this as a password via basic auth in combination with the username below.
-  password:
-
-# Provide default settings for new users. When a new user is created, these settings will automatically be set for the user. If you change them in the config file afterwards they will not be changed back for existing users.
-defaultsettings:
-  # The avatar source for the user. Can be `gravatar`, `initials`, `upload` or `marble`. If you set this to `upload` you'll also need to specify `defaultsettings.avatar_file_id`.
-  avatar_provider: initials
-  # The id of the file used as avatar.
-  avatar_file_id: 0
-  # If set to true users will get task reminders via email.
-  email_reminders_enabled: false
-  # If set to true will allow other users to find this user when searching for parts of their name.
-  discoverable_by_name: false
-  # If set to true will allow other users to find this user when searching for their exact email.
-  discoverable_by_email: false
-  # If set to true will send an email every day with all overdue tasks at a configured time.
-  overdue_tasks_reminders_enabled: true
-  # When to send the overdue task reminder email.
-  overdue_tasks_reminders_time: 9:00
-  # The id of the default project. Make sure users actually have access to this project when setting this value.
-  default_project_id: 0
-  # Start of the week for the user. `0` is sunday, `1` is monday and so on.
-  week_start: 0
-  # The language of the user interface. Must be an ISO 639-1 language code followed by an ISO 3166-1 alpha-2 country code. Check https://kolaente.dev/vikunja/vikunja/frontend/src/branch/main/src/i18n/lang for a list of possible languages. Will default to the browser language the user uses when signing up.
-  language: <unset>
-  # The time zone of each individual user. This will affect when users get reminders and overdue task emails.
-  timezone: <time zone set at service.timezone>
-
-webhooks:
-  # Whether to enable support for webhooks
-  enabled: true
-  # The timeout in seconds until a webhook request fails when no response has been received.
-  timeoutseconds: 30
-  # The URL of [a mole instance](https://github.com/frain-dev/mole) to use to proxy outgoing webhook requests. You should use this and configure appropriately if you're not the only one using your Vikunja instance. More info about why: https://webhooks.fyi/best-practices/webhook-providers#implement-security-on-egress-communication. Must be used in combination with `webhooks.password` (see below).
-  proxyurl:
-  # The proxy password to use when authenticating against the proxy.
-  proxypassword:

desktop/package.json

@@ -51,11 +51,11 @@
     }
   },
   "devDependencies": {
-    "electron": "29.4.5",
-    "electron-builder": "24.13.3"
+    "electron": "34.0.0",
+    "electron-builder": "25.1.8"
   },
   "dependencies": {
     "connect-history-api-fallback": "2.0.0",
-    "express": "4.19.2"
+    "express": "4.21.2"
   }
 }

devenv.lock

@@ -0,0 +1,132 @@
+{
+  "nodes": {
+    "devenv": {
+      "locked": {
+        "dir": "src/modules",
+        "lastModified": 1730028891,
+        "owner": "cachix",
+        "repo": "devenv",
+        "rev": "a337f8862efa9bde348c48a48b5b943f710604dd",
+        "type": "github"
+      },
+      "original": {
+        "dir": "src/modules",
+        "owner": "cachix",
+        "repo": "devenv",
+        "type": "github"
+      }
+    },
+    "flake-compat": {
+      "flake": false,
+      "locked": {
+        "lastModified": 1696426674,
+        "owner": "edolstra",
+        "repo": "flake-compat",
+        "rev": "0f9255e01c2351cc7d116c072cb317785dd33b33",
+        "type": "github"
+      },
+      "original": {
+        "owner": "edolstra",
+        "repo": "flake-compat",
+        "type": "github"
+      }
+    },
+    "gitignore": {
+      "inputs": {
+        "nixpkgs": [
+          "pre-commit-hooks",
+          "nixpkgs"
+        ]
+      },
+      "locked": {
+        "lastModified": 1709087332,
+        "owner": "hercules-ci",
+        "repo": "gitignore.nix",
+        "rev": "637db329424fd7e46cf4185293b9cc8c88c95394",
+        "type": "github"
+      },
+      "original": {
+        "owner": "hercules-ci",
+        "repo": "gitignore.nix",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1716977621,
+        "owner": "cachix",
+        "repo": "devenv-nixpkgs",
+        "rev": "4267e705586473d3e5c8d50299e71503f16a6fb6",
+        "type": "github"
+      },
+      "original": {
+        "owner": "cachix",
+        "ref": "rolling",
+        "repo": "devenv-nixpkgs",
+        "type": "github"
+      }
+    },
+    "nixpkgs-stable": {
+      "locked": {
+        "lastModified": 1729973466,
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "cd3e8833d70618c4eea8df06f95b364b016d4950",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixos-24.05",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "nixpkgs-unstable": {
+      "locked": {
+        "lastModified": 1729880355,
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "18536bf04cd71abd345f9579158841376fdd0c5a",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixos-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "pre-commit-hooks": {
+      "inputs": {
+        "flake-compat": "flake-compat",
+        "gitignore": "gitignore",
+        "nixpkgs": [
+          "nixpkgs"
+        ],
+        "nixpkgs-stable": "nixpkgs-stable"
+      },
+      "locked": {
+        "lastModified": 1729104314,
+        "owner": "cachix",
+        "repo": "pre-commit-hooks.nix",
+        "rev": "3c3e88f0f544d6bb54329832616af7eb971b6be6",
+        "type": "github"
+      },
+      "original": {
+        "owner": "cachix",
+        "repo": "pre-commit-hooks.nix",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "devenv": "devenv",
+        "nixpkgs": "nixpkgs",
+        "nixpkgs-unstable": "nixpkgs-unstable",
+        "pre-commit-hooks": "pre-commit-hooks"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

devenv.nix

@@ -0,0 +1,41 @@
+{ pkgs, lib, config, inputs, ... }:
+
+let
+  pkgs-unstable = import inputs.nixpkgs-unstable { system = pkgs.stdenv.system; };
+in {
+  scripts.patch-sass-embedded.exec = ''
+  find node_modules/.pnpm/sass-embedded-linux-*/node_modules/sass-embedded-linux-*/dart-sass/src -name dart -print0 | xargs -I {} -0 patchelf --set-interpreter "$(<$NIX_CC/nix-support/dynamic-linker)" {}
+  '';
+
+  packages = with pkgs-unstable; [
+    # General tools
+    git-cliff 
+    # API tools
+    golangci-lint mage
+    # Desktop
+    electron
+  ] ++ lib.optionals (!pkgs.stdenv.isDarwin) [
+    # Frontend tools (exclude on Darwin)
+    cypress
+  ];
+  
+  languages = {
+    javascript = {
+      enable = true;
+      package = pkgs-unstable.nodejs-slim;
+      pnpm = {
+        enable = true;
+        package = pkgs-unstable.pnpm;
+      };
+    };
+    
+    go = {
+      enable = true;
+    };
+  };
+  
+  services.mailpit = {
+    enable = true;
+    package = pkgs-unstable.mailpit;
+  };
+}

devenv.yaml

@@ -0,0 +1,17 @@
+# yaml-language-server: $schema=https://devenv.sh/devenv.schema.json
+inputs:
+  nixpkgs:
+    url: github:cachix/devenv-nixpkgs/rolling
+  nixpkgs-unstable:
+    url: github:NixOS/nixpkgs/nixos-unstable
+
+# If you're using non-OSS software, you can set allowUnfree to true.
+allowUnfree: true
+
+# If you're willing to use a package that's vulnerable
+# permittedInsecurePackages:
+#  - "openssl-1.1.1w"
+
+# If you have more than one devenv you can merge them
+#imports:
+# - ./backend

flake.lock

@@ -1,25 +0,0 @@
-{
-  "nodes": {
-    "nixpkgs": {
-      "locked": {
-        "lastModified": 1721116560,
-        "narHash": "sha256-++TYlGMAJM1Q+0nMVaWBSEvEUjRs7ZGiNQOpqbQApCU=",
-        "owner": "NixOS",
-        "repo": "nixpkgs",
-        "rev": "9355fa86e6f27422963132c2c9aeedb0fb963d93",
-        "type": "github"
-      },
-      "original": {
-        "id": "nixpkgs",
-        "type": "indirect"
-      }
-    },
-    "root": {
-      "inputs": {
-        "nixpkgs": "nixpkgs"
-      }
-    }
-  },
-  "root": "root",
-  "version": 7
-}

flake.nix

@@ -1,20 +0,0 @@
-{
-  description = "Vikunja dev environment";
-
-  outputs = { self, nixpkgs }:
-    let pkgs = nixpkgs.legacyPackages.x86_64-linux;
-    in {
-      defaultPackage.x86_64-linux =
-        pkgs.mkShell { buildInputs = with pkgs; [
-          # General tools
-          git-cliff 
-          # Frontend tools
-          pnpm cypress 
-          # API tools
-          go golangci-lint mage
-          # Desktop
-          electron
-        ]; 
-      };
-    };
-}

frontend/.eslintrc.cjs

@@ -1,63 +0,0 @@
-/* eslint-env node */
-require('@rushstack/eslint-patch/modern-module-resolution')
-
-module.exports = {
-	'root': true,
-	'env': {
-		'browser': true,
-		'es2022': true,
-		'node': true,
-	},
-	'extends': [
-		'eslint:recommended',
-		'plugin:vue/vue3-recommended',
-		'@vue/eslint-config-typescript/recommended',
-	],
-	'rules': {
-		'quotes': ['error', 'single'],
-		'comma-dangle': ['error', 'always-multiline'],
-		'semi': ['error', 'never'],
-
-		'vue/v-on-event-hyphenation': ['warn', 'never', { 'autofix': true }],
-		'vue/multi-word-component-names': 'off',
-
-		// uncategorized rules:
-		'vue/component-api-style': ['error', ['script-setup']],
-		'vue/component-name-in-template-casing': ['error', 'PascalCase', {
-			'globals': ['RouterView', 'RouterLink', 'Icon', 'Notifications', 'Modal', 'Card'],
-		}],
-		'vue/custom-event-name-casing': ['error', 'camelCase'],
-		'vue/define-macros-order': 'error',
-		'vue/match-component-file-name': ['error', {
-			'extensions': ['.js', '.jsx', '.ts', '.tsx', '.vue'],
-			'shouldMatchCase': true,
-		}],
-		'vue/no-boolean-default': ['warn', 'default-false'],
-		'vue/match-component-import-name': 'error',
-		'vue/prefer-separate-static-class': 'warn',
-
-		'vue/padding-line-between-blocks': 'error',
-		'vue/next-tick-style': ['error', 'promise'],
-		'vue/block-lang': [
-			'error',
-			{ 'script': { 'lang': 'ts' } },
-		],
-		'vue/no-duplicate-attr-inheritance': 'error',
-		'vue/no-empty-component-block': 'error',
-		'vue/html-indent': ['error', 'tab'],
-
-		// vue3
-		'vue/no-ref-object-reactivity-loss': 'error',
-		'vue/no-setup-props-reactivity-loss': 'warn', // TODO: switch to error after vite `propsDestructure` is removed
-	},
-	'parser': 'vue-eslint-parser',
-	'parserOptions': {
-		'parser': '@typescript-eslint/parser',
-		'ecmaVersion': 'latest',
-		'tsconfigRootDir': __dirname,
-	},
-	'ignorePatterns': [
-		'*.test.*',
-		'cypress/*',
-	],
-}

frontend/.gitignore

@@ -11,8 +11,11 @@ stats.html
 node_modules
 .DS_Store
 dist
+dist-dev
+dist-test
 coverage
 *.zip
+.vite/
 
 # Test files
 cypress/screenshots

frontend/.nvmrc

@@ -1 +1 @@
-20.15.0
+22.13.0

frontend/README.md

@@ -2,30 +2,14 @@
 
 > The todo app to organize your life.
 
-[![Build Status](https://drone.kolaente.de/api/badges/vikunja/vikunja/status.svg)](https://drone.kolaente.de/vikunja/vikunja)
 [![License: AGPL v3](https://img.shields.io/badge/License-AGPL%20v3-blue.svg)](LICENSE)
-[![Download](https://img.shields.io/badge/download-v0.22.1-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.
 
 Take a look at [our roadmap](https://my.vikunja.cloud/share/UrdhKPqumxDXUbYpEGJLSIyNTwAnbBzVlwdDpRbv/auth) (hosted on Vikunja!) for a list of things we're currently working on!
 
-## Security Reports
-
-If you find any security-related issues you don't want to disclose publicly, please use [the contact information on our website](https://vikunja.io/contact/#security).
-
-## Docker
-
-There is a [docker image available](https://hub.docker.com/r/vikunja/vikunja) 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 [multi-platform documentation](https://docs.docker.com/build/building/multi-platform/) in order to build for different platforms.
+For general information about the project, refer to the top-level readme of this repo.
 
 ## Project setup
 
@@ -36,7 +20,7 @@ pnpm install
 ### Compiles and hot-reloads for development
 
 ```shell
-pnpm run serve
+pnpm run dev
 ```
 
 ### Compiles and minifies for production

frontend/cypress/e2e/project/project-view-kanban.spec.ts

@@ -148,7 +148,7 @@ describe('Project View Kanban', () => {
 		cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item')
 			.contains('Delete')
 			.click()
-		cy.get('.modal-mask .modal-container .modal-content .header')
+		cy.get('.modal-mask .modal-container .modal-content .modal-header')
 			.should('contain', 'Delete the bucket')
 		cy.get('.modal-mask .modal-container .modal-content .actions .button')
 			.contains('Do it!')
@@ -251,7 +251,7 @@ describe('Project View Kanban', () => {
 			.should('be.visible')
 			.contains('Delete')
 			.click()
-		cy.get('.modal-mask .modal-container .modal-content .header')
+		cy.get('.modal-mask .modal-container .modal-content .modal-header')
 			.should('contain', 'Delete this task')
 		cy.get('.modal-mask .modal-container .modal-content .actions .button')
 			.contains('Do it!')

frontend/cypress/e2e/project/project.spec.ts

@@ -59,7 +59,7 @@ describe('Projects', () => {
 		cy.get('.menu-container .menu-list li:first-child .dropdown .dropdown-content')
 			.contains('Edit')
 			.click()
-		cy.get('#title')
+		cy.get('#title:not(:disabled)')
 			.type(`{selectall}${newProjectName}`)
 		cy.get('footer.card-footer .button')
 			.contains('Save')

frontend/cypress/e2e/task/task.spec.ts

@@ -356,7 +356,7 @@ describe('Task', () => {
 				.should('be.visible')
 				.contains('Delete')
 				.click()
-			cy.get('.modal-mask .modal-container .modal-content .header')
+			cy.get('.modal-mask .modal-container .modal-content .modal-header')
 				.should('contain', 'Delete this task')
 			cy.get('.modal-mask .modal-container .modal-content .actions .button')
 				.contains('Do it!')
@@ -484,7 +484,7 @@ describe('Task', () => {
 
 			addLabelToTaskAndVerify(labels[0].title)
 
-			cy.get('.modal-content .close')
+			cy.get('.modal-container > .close')
 				.click()
 
 			cy.get('.bucket .task')
@@ -850,7 +850,7 @@ describe('Task', () => {
 
 			uploadAttachmentAndVerify(tasks[0].id)
 
-			cy.get('.modal-content .close')
+			cy.get('.modal-container > .close')
 				.click()
 
 			cy.get('.bucket .task .footer .icon svg.fa-paperclip')

frontend/cypress/factories/link_sharing.ts

@@ -9,7 +9,7 @@ export class LinkShareFactory extends Factory {
 
 		return {
 			id: '{increment}',
-			hash: faker.random.word(32),
+			hash: faker.lorem.word(32),
 			project_id: 1,
 			right: 0,
 			sharing_type: 0,

frontend/cypress/factories/user.ts

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

frontend/env.config.d.ts

@@ -1,8 +1,3 @@
-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

frontend/env.d.ts

@@ -16,6 +16,8 @@ interface ImportMetaEnv {
 	readonly SENTRY_PROJECT?: string
 
 	readonly VITE_IS_ONLINE: boolean
+
+	readonly VUE_DEVTOOLS_LAUNCH_EDITOR: VitePluginVueDevToolsOptions.launchEditor
 }
 
 interface ImportMeta {

frontend/eslint.config.js

@@ -0,0 +1,88 @@
+import pluginVue from 'eslint-plugin-vue'
+import js from '@eslint/js'
+import vueTsEslintConfig from '@vue/eslint-config-typescript'
+
+export default [
+	js.configs.recommended,
+	...pluginVue.configs['flat/recommended'],
+	...vueTsEslintConfig(),
+	{
+		ignores: [
+			'**/*.test.ts',
+			'./cypress',
+		],
+	},
+	{
+		rules: {
+			'quotes': ['error', 'single'],
+			'comma-dangle': ['error', 'always-multiline'],
+			'semi': ['error', 'never'],
+
+			'vue/v-on-event-hyphenation': ['warn', 'never', {'autofix': true}],
+			'vue/multi-word-component-names': 'off',
+
+			// uncategorized rules:
+			'vue/component-api-style': ['error', ['script-setup']],
+			'vue/component-name-in-template-casing': ['error', 'PascalCase', {
+				'globals': ['RouterView', 'RouterLink', 'Icon', 'Notifications', 'Modal', 'Card'],
+			}],
+			'vue/custom-event-name-casing': ['error', 'camelCase'],
+			'vue/define-macros-order': 'error',
+			'vue/match-component-file-name': ['error', {
+				'extensions': ['.js', '.jsx', '.ts', '.tsx', '.vue'],
+				'shouldMatchCase': true,
+			}],
+			'vue/no-boolean-default': ['warn', 'default-false'],
+			'vue/match-component-import-name': 'error',
+			'vue/prefer-separate-static-class': 'warn',
+
+			'vue/padding-line-between-blocks': 'error',
+			'vue/next-tick-style': ['error', 'promise'],
+			'vue/block-lang': [
+				'error',
+				{'script': {'lang': 'ts'}},
+			],
+			'vue/no-duplicate-attr-inheritance': 'error',
+			'vue/no-empty-component-block': 'error',
+			'vue/html-indent': ['error', 'tab'],
+
+			// vue3
+			'vue/no-ref-object-reactivity-loss': 'error',
+			'vue/no-setup-props-reactivity-loss': 'warn', // TODO: switch to error after vite `propsDestructure` is removed
+
+			'@typescript-eslint/no-unused-vars': [
+				'error',
+				{
+					// 'args': 'all',
+					// 'argsIgnorePattern': '^_',
+					'caughtErrors': 'all',
+					'caughtErrorsIgnorePattern': '^_',
+					// 'destructuredArrayIgnorePattern': '^_',
+					'varsIgnorePattern': '^_',
+					'ignoreRestSiblings': true,
+				},
+			],
+		},
+
+		// files: ['*.vue', '**/*.vue'],
+		languageOptions: {
+			parserOptions: {
+				parser: '@typescript-eslint/parser',
+				ecmaVersion: 'latest',
+				tsconfigRootDir: '.',
+			},
+		},
+
+
+		// 'parser': 'vue-eslint-parser',
+		// 'parserOptions': {
+		// 	'parser': '@typescript-eslint/parser',
+		// 	'ecmaVersion': 'latest',
+		// 	'tsconfigRootDir': __dirname,
+		// },
+		// 'ignorePatterns': [
+		// 	'cypress/*',
+		// ],
+	},
+
+]

frontend/package.json

@@ -13,7 +13,7 @@
   },
   "homepage": "https://vikunja.io/",
   "funding": "https://opencollective.com/vikunja",
-  "packageManager": "pnpm@9.5.0",
+  "packageManager": "pnpm@9.15.4",
   "keywords": [
     "todo",
     "productivity",
@@ -30,8 +30,7 @@
     "preview:dev": "vite preview --outDir dist-dev --mode development --port 4173",
     "preview:test": "vite preview --port 4173 --outDir dist-test",
     "build": "vite build && workbox copyLibraries dist/",
-    "build:test": "vite build --outDir dist-test && workbox copyLibraries dist-dev/",
-    "build:modern-only": "BUILD_MODERN_ONLY=true vite build && workbox copyLibraries dist/",
+    "build:test": "vite build --outDir dist-test && workbox copyLibraries dist-test/",
     "build:dev": "vite build --mode development --outDir dist-dev/",
     "lint": "eslint 'src/**/*.{js,ts,vue}'",
     "lint:fix": "pnpm run lint --fix",
@@ -50,137 +49,118 @@
     "story:preview": "histoire preview"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.6.0",
-    "@fortawesome/free-regular-svg-icons": "6.6.0",
-    "@fortawesome/free-solid-svg-icons": "6.6.0",
+    "@fortawesome/fontawesome-svg-core": "6.7.2",
+    "@fortawesome/free-regular-svg-icons": "6.7.2",
+    "@fortawesome/free-solid-svg-icons": "6.7.2",
     "@fortawesome/vue-fontawesome": "3.0.8",
     "@github/hotkey": "3.1.1",
     "@infectoone/vue-ganttastic": "2.3.2",
-    "@intlify/unplugin-vue-i18n": "4.0.0",
-    "@kyvg/vue3-notification": "3.2.1",
-    "@sentry/tracing": "7.114.0",
-    "@sentry/vue": "8.18.0",
-    "@tiptap/core": "2.5.4",
-    "@tiptap/extension-blockquote": "2.5.4",
-    "@tiptap/extension-bold": "2.5.4",
-    "@tiptap/extension-bullet-list": "2.5.4",
-    "@tiptap/extension-code": "2.5.4",
-    "@tiptap/extension-code-block-lowlight": "2.5.4",
-    "@tiptap/extension-document": "2.5.4",
-    "@tiptap/extension-dropcursor": "2.5.4",
-    "@tiptap/extension-gapcursor": "2.5.4",
-    "@tiptap/extension-hard-break": "2.5.4",
-    "@tiptap/extension-heading": "2.5.4",
-    "@tiptap/extension-history": "2.5.4",
-    "@tiptap/extension-horizontal-rule": "2.5.4",
-    "@tiptap/extension-image": "2.5.4",
-    "@tiptap/extension-italic": "2.5.4",
-    "@tiptap/extension-link": "2.5.4",
-    "@tiptap/extension-list-item": "2.5.4",
-    "@tiptap/extension-ordered-list": "2.5.4",
-    "@tiptap/extension-paragraph": "2.5.4",
-    "@tiptap/extension-placeholder": "2.5.4",
-    "@tiptap/extension-strike": "2.5.4",
-    "@tiptap/extension-table": "2.5.4",
-    "@tiptap/extension-table-cell": "2.5.4",
-    "@tiptap/extension-table-header": "2.5.4",
-    "@tiptap/extension-table-row": "2.5.4",
-    "@tiptap/extension-task-item": "2.5.4",
-    "@tiptap/extension-task-list": "2.5.4",
-    "@tiptap/extension-text": "2.5.4",
-    "@tiptap/extension-typography": "2.5.4",
-    "@tiptap/extension-underline": "2.5.4",
-    "@tiptap/pm": "2.5.4",
-    "@tiptap/suggestion": "2.5.4",
-    "@tiptap/vue-3": "2.5.4",
-    "@vueuse/core": "10.11.0",
-    "@vueuse/router": "10.11.0",
-    "axios": "1.7.2",
+    "@intlify/unplugin-vue-i18n": "6.0.3",
+    "@kyvg/vue3-notification": "3.4.1",
+    "@sentry/tracing": "7.120.3",
+    "@sentry/vue": "8.50.0",
+    "@tiptap/core": "2.11.2",
+    "@tiptap/extension-code-block": "2.11.2",
+    "@tiptap/extension-code-block-lowlight": "2.11.2",
+    "@tiptap/extension-hard-break": "2.11.2",
+    "@tiptap/extension-image": "2.11.2",
+    "@tiptap/extension-link": "2.11.2",
+    "@tiptap/extension-placeholder": "2.11.2",
+    "@tiptap/extension-table": "2.11.2",
+    "@tiptap/extension-table-cell": "2.11.2",
+    "@tiptap/extension-table-header": "2.11.2",
+    "@tiptap/extension-table-row": "2.11.2",
+    "@tiptap/extension-task-item": "2.11.2",
+    "@tiptap/extension-task-list": "2.11.2",
+    "@tiptap/extension-typography": "2.11.2",
+    "@tiptap/extension-underline": "2.11.2",
+    "@tiptap/pm": "2.11.2",
+    "@tiptap/starter-kit": "2.11.2",
+    "@tiptap/suggestion": "2.11.2",
+    "@tiptap/vue-3": "2.11.2",
+    "@vueuse/core": "12.4.0",
+    "@vueuse/router": "12.4.0",
+    "axios": "1.7.9",
     "blurhash": "2.0.5",
     "bulma-css-variables": "0.9.33",
     "change-case": "5.4.4",
-    "date-fns": "3.6.0",
-    "dayjs": "1.11.12",
-    "dompurify": "3.1.6",
+    "date-fns": "4.1.0",
+    "dayjs": "1.11.13",
+    "dompurify": "3.2.3",
     "fast-deep-equal": "3.1.3",
     "flatpickr": "4.6.13",
-    "flexsearch": "0.7.31",
+    "flexsearch": "0.7.43",
     "floating-vue": "5.2.2",
     "is-touch-device": "1.0.1",
     "klona": "2.0.6",
-    "lodash.debounce": "4.0.8",
-    "lowlight": "2.9.0",
-    "pinia": "2.1.7",
+    "lowlight": "3.3.0",
+    "pinia": "2.3.0",
     "register-service-worker": "1.7.2",
-    "sortablejs": "1.15.2",
+    "sortablejs": "1.15.6",
+    "tailwindcss": "3.4.17",
     "tippy.js": "6.3.7",
     "ufo": "1.5.4",
-    "vue": "3.4.32",
+    "vue": "3.5.13",
     "vue-advanced-cropper": "2.8.9",
     "vue-flatpickr-component": "11.0.5",
-    "vue-i18n": "9.13.1",
-    "vue-router": "4.4.0",
-    "vuemoji-picker": "0.2.1",
-    "workbox-precaching": "7.1.0",
+    "vue-i18n": "11.0.1",
+    "vue-router": "4.5.0",
+    "vuemoji-picker": "0.3.2",
+    "workbox-precaching": "7.3.0",
     "zhyswan-vuedraggable": "4.1.3"
   },
   "devDependencies": {
     "@4tw/cypress-drag-drop": "2.2.5",
-    "@cypress/vite-dev-server": "5.1.1",
-    "@cypress/vue": "6.0.1",
-    "@faker-js/faker": "8.4.1",
+    "@cypress/vite-dev-server": "6.0.1",
+    "@cypress/vue": "6.0.2",
+    "@faker-js/faker": "9.4.0",
     "@histoire/plugin-screenshot": "0.17.17",
     "@histoire/plugin-vue": "0.17.17",
-    "@rushstack/eslint-patch": "1.10.3",
-    "@tsconfig/node20": "20.1.4",
+    "@tsconfig/node22": "22.0.0",
     "@types/codemirror": "5.60.15",
-    "@types/dompurify": "3.0.5",
     "@types/flexsearch": "0.7.6",
-    "@types/is-touch-device": "1.0.2",
-    "@types/lodash.clonedeep": "4.5.9",
-    "@types/lodash.debounce": "4.0.9",
-    "@types/node": "20.14.11",
+    "@types/is-touch-device": "1.0.3",
+    "@types/node": "22.10.7",
     "@types/sortablejs": "1.15.8",
-    "@typescript-eslint/eslint-plugin": "7.16.1",
-    "@typescript-eslint/parser": "7.16.1",
-    "@vitejs/plugin-legacy": "5.4.1",
-    "@vitejs/plugin-vue": "5.0.5",
-    "@vue/eslint-config-typescript": "13.0.0",
+    "@typescript-eslint/eslint-plugin": "8.20.0",
+    "@typescript-eslint/parser": "8.20.0",
+    "@vitejs/plugin-vue": "5.2.1",
+    "@vue/eslint-config-typescript": "14.3.0",
     "@vue/test-utils": "2.4.6",
-    "@vue/tsconfig": "0.5.1",
-    "autoprefixer": "10.4.19",
-    "browserslist": "4.23.2",
-    "caniuse-lite": "1.0.30001642",
+    "@vue/tsconfig": "0.7.0",
+    "autoprefixer": "10.4.20",
+    "browserslist": "4.24.4",
+    "caniuse-lite": "1.0.30001692",
     "csstype": "3.1.3",
-    "cypress": "13.13.1",
-    "esbuild": "0.23.0",
-    "eslint": "8.57.0",
-    "eslint-plugin-vue": "9.27.0",
-    "happy-dom": "14.12.3",
+    "cypress": "14.0.0",
+    "esbuild": "0.24.2",
+    "eslint": "9.18.0",
+    "eslint-plugin-vue": "9.32.0",
+    "happy-dom": "16.6.0",
     "histoire": "0.17.17",
-    "postcss": "8.4.39",
+    "postcss": "8.5.1",
     "postcss-easing-gradients": "3.0.1",
-    "postcss-easings": "4.0.0",
-    "postcss-preset-env": "9.6.0",
-    "rollup": "4.18.1",
-    "rollup-plugin-visualizer": "5.12.0",
-    "sass": "1.77.8",
-    "start-server-and-test": "2.0.4",
-    "typescript": "5.5.3",
-    "unplugin-inject-preload": "2.0.4",
-    "vite": "5.3.4",
-    "vite-plugin-pwa": "0.20.0",
+    "postcss-preset-env": "10.1.3",
+    "rollup": "4.30.1",
+    "rollup-plugin-visualizer": "5.14.0",
+    "sass-embedded": "1.83.4",
+    "start-server-and-test": "2.0.10",
+    "typescript": "5.7.3",
+    "unplugin-inject-preload": "3.0.0",
+    "vite": "6.0.7",
+    "vite-plugin-pwa": "0.21.1",
     "vite-plugin-sentry": "1.4.0",
+    "vite-plugin-vue-devtools": "7.7.0",
     "vite-svg-loader": "5.1.0",
-    "vitest": "1.6.0",
-    "vue-tsc": "2.0.26",
-    "wait-on": "7.2.0",
-    "workbox-cli": "7.1.0"
+    "vitest": "3.0.1",
+    "vue-tsc": "2.2.0",
+    "wait-on": "8.0.2",
+    "workbox-cli": "7.3.0"
   },
   "pnpm": {
     "patchedDependencies": {
-      "flexsearch@0.7.31": "patches/flexsearch@0.7.31.patch",
-      "@github/hotkey@3.1.1": "patches/@github__hotkey@3.1.1.patch"
+      "@github/hotkey@3.1.1": "patches/@github__hotkey@3.1.1.patch",
+      "flexsearch@0.7.43": "patches/flexsearch@0.7.43.patch"
     }
   }
 }

frontend/patches/flexsearch@0.7.31.patch

@@ -1,16 +0,0 @@
-diff --git a/index.d.ts b/index.d.ts
-deleted file mode 100644
-index 9f39f41073864b83968bdaa242ac4e3c3149685a..0000000000000000000000000000000000000000
-diff --git a/package.json b/package.json
-index 8968f5bf8010ff194240591c8b83299f7328e79d..6d84b6f590a841b129ed8b3860cb786df5a185c0 100644
---- a/package.json
-+++ b/package.json
-@@ -22,8 +22,6 @@
-   },
-   "main": "dist/flexsearch.bundle.js",
-   "browser": "dist/flexsearch.bundle.js",
--  "module": "dist/module/index.js",
--  "types": "./index.d.ts",
-   "preferGlobal": false,
-   "repository": {
-     "type": "git",

frontend/patches/flexsearch@0.7.43.patch

@@ -0,0 +1,18 @@
+diff --git a/package.json b/package.json
+index c154e54029c94be444916fb2249941e7182d80ed..54a65c42a42c4627506e016132becc43b47a517c 100644
+--- a/package.json
++++ b/package.json
+@@ -28,13 +28,11 @@
+     "email": "info@nextapps.de"
+   },
+   "main": "dist/flexsearch.bundle.min.js",
+-  "module": "dist/flexsearch.bundle.module.min.js",
+   "browser": {
+     "dist/flexsearch.bundle.min.js": "./dist/flexsearch.bundle.min.js",
+     "dist/flexsearch.bundle.module.min.js": "./dist/flexsearch.bundle.module.min.js",
+     "worker_threads": false
+   },
+-  "types": "./index.d.ts",
+   "scripts": {
+     "build": "npm run copy && npm run build:bundle",
+     "build:bundle": "node task/build RELEASE=bundle DEBUG=false SUPPORT_WORKER=true SUPPORT_ENCODER=true SUPPORT_CACHE=true SUPPORT_ASYNC=true SUPPORT_STORE=true SUPPORT_TAGS=true SUPPORT_SUGGESTION=true SUPPORT_SERIALIZE=true SUPPORT_DOCUMENT=true POLYFILL=false",

frontend/src/App.vue

@@ -1,10 +1,10 @@
 <template>
 	<Ready>
-		<template v-if="authUser">
+		<template v-if="authStore.authUser">
 			<AppHeader />
 			<ContentAuth />
 		</template>
-		<ContentLinkShare v-else-if="authLinkShare" />
+		<ContentLinkShare v-else-if="authStore.authLinkShare" />
 		<NoAuthWrapper v-else>
 			<RouterView />
 		</NoAuthWrapper>
@@ -49,17 +49,15 @@ import DemoMode from '@/components/home/DemoMode.vue'
 const importAccountDeleteService = () => import('@/services/accountDelete')
 import {success} from '@/message'
 
-const baseStore = useBaseStore()
 const authStore = useAuthStore()
+const baseStore = useBaseStore()
+
 const router = useRouter()
 const route = useRoute()
 
 useBodyClass('is-touch', isTouchDevice())
 const keyboardShortcutsActive = computed(() => baseStore.keyboardShortcutsActive)
 
-const authUser = computed(() => authStore.authUser)
-const authLinkShare = computed(() => authStore.authLinkShare)
-
 const {t} = useI18n({useScope: 'global'})
 
 // setup account deletion verification
@@ -102,6 +100,4 @@ setLanguage(authStore.settings.language)
 useColorScheme()
 </script>
 
-<style lang="scss">
-@import '@/styles/global.scss';
-</style>
+<style lang="scss" src="@/styles/global.scss" />

frontend/src/components/base/BaseCheckbox.vue

@@ -3,33 +3,22 @@
 		v-cy="'checkbox'"
 		class="base-checkbox"
 	>
-		<input
-			:id="checkboxId"
-			type="checkbox"
-			class="is-sr-only"
-			:checked="modelValue"
-			:disabled="disabled || undefined"
-			@change="(event) => emit('update:modelValue', (event.target as HTMLInputElement).checked)"
+		<label
+			class="base-checkbox__label"
 		>
-
-		<slot
-			name="label"
-			:checkbox-id="checkboxId"
-		>
-			<label
-				:for="checkboxId"
-				class="base-checkbox__label"
+			<input
+				type="checkbox"
+				class="is-sr-only"
+				:checked="modelValue"
+				:disabled="disabled || undefined"
+				@change="(event) => emit('update:modelValue', (event.target as HTMLInputElement).checked)"
 			>
-				<slot />
-			</label>
-		</slot>
+			<slot />
+		</label>
 	</div>
 </template>
 
 <script setup lang="ts">
-import {ref} from 'vue'
-import {createRandomID} from '@/helpers/randomId'
-
 withDefaults(defineProps<{
 	modelValue?: boolean,
 	disabled: boolean,
@@ -38,10 +27,8 @@ withDefaults(defineProps<{
 })
 
 const emit = defineEmits<{
-  (event: 'update:modelValue', value: boolean): void
+	(event: 'update:modelValue', value: boolean): void
 }>()
-
-const checkboxId = ref(`checkbox_${createRandomID()}`)
 </script>
 
 <style lang="scss" scoped>
@@ -53,7 +40,7 @@ const checkboxId = ref(`checkbox_${createRandomID()}`)
 }
 
 .base-checkbox:has(input:disabled) .base-checkbox__label {
-	cursor:not-allowed;
+	cursor: not-allowed;
 	pointer-events: none;
 }
 </style>

frontend/src/components/base/BasePagination.vue

@@ -0,0 +1,97 @@
+<template>
+	<nav
+		v-if="totalPages > 1"
+		aria-label="pagination"
+		class="pagination is-centered p-4"
+		role="navigation"
+	>
+		<slot
+			name="previous"
+			:disabled="currentPage === 1"
+		>
+			{{ $t('misc.previous') }}
+		</slot>
+		<slot
+			name="next"
+			:disabled="currentPage === totalPages"
+		>
+			{{ $t('misc.next') }}
+		</slot>
+		<ul class="pagination-list">
+			<li
+				v-for="(p, i) in pages"
+				:key="`page-${i}`"
+			>
+				<span
+					v-if="p.isEllipsis"
+					class="pagination-ellipsis"
+				>&hellip;</span>
+				<slot
+					v-else
+					name="page-link"
+					:page="p"
+					:is-current="p.number === currentPage"
+				>
+					{{ p.number }}
+				</slot>
+			</li>
+		</ul>
+	</nav>
+</template>
+
+<script lang="ts" setup>
+import {computed} from 'vue'
+
+const props = defineProps<{
+	totalPages: number,
+	currentPage: number
+}>()
+
+function createPagination(totalPages: number, currentPage: number) {
+	const pages = []
+	for (let i = 0; i < totalPages; i++) {
+		if (
+			i > 0 &&
+			(i + 1) < totalPages &&
+			((i + 1) > currentPage + 1 || (i + 1) < currentPage - 1)
+		) {
+			if (pages[i - 1] && !pages[i - 1].isEllipsis) {
+				pages.push({
+					number: 0,
+					isEllipsis: true,
+				})
+			}
+			continue
+		}
+
+		pages.push({
+			number: i + 1,
+			isEllipsis: false,
+		})
+	}
+	return pages
+}
+
+const pages = computed(() => createPagination(props.totalPages, props.currentPage))
+</script>
+
+<style lang="scss" scoped>
+.pagination {
+	padding-bottom: 1rem;
+}
+
+.pagination-previous,
+.pagination-next {
+	&:not(:disabled):hover {
+		background: $scheme-main;
+		cursor: pointer;
+	}
+}
+
+.pagination-list {
+	&, & li {
+		margin-top: 0;
+	}
+}
+</style>
+  

frontend/src/components/base/Expandable.vue

@@ -73,6 +73,7 @@ function getHeight(el: HTMLElement) {
  * https://gist.github.com/paulirish/5d52fb081b3570c81e3a
  */
 function forceLayout(el: HTMLElement) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
   el.offsetTop
 }
 
@@ -133,11 +134,16 @@ function removeHeight(el: HTMLElement) {
 <style lang="scss" scoped>
 $transition-time: 300ms;
 
+// https://easings.net/#easeInQuint
+$ease-in-quint: cubic-bezier(0.64, 0, 0.78, 0);
+// https://easings.net/#easeInOutQuint
+$ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
+
 .expandable-slide-enter-active,
 .expandable-slide-leave-active {
   transition:
-    opacity $transition-time ease-in-quint,
-    height $transition-time ease-in-out-quint;
+    opacity $transition-time $ease-in-quint,
+    height $transition-time $ease-in-out-quint;
   overflow: hidden;
 }
 

frontend/src/components/date/DatemathHelp.vue

@@ -36,9 +36,9 @@
 		</p>
 		<p>{{ $t('misc.forExample') }}</p>
 		<ul>
-			<li><code>+1d</code> {{ $t('input.datemathHelp.add1Day') }}</li>
-			<li><code>-1d</code> {{ $t('input.datemathHelp.minus1Day') }}</li>
-			<li><code>/d</code> {{ $t('input.datemathHelp.roundDay') }}</li>
+			<li><code>+1d</code>: {{ $t('input.datemathHelp.add1Day') }}</li>
+			<li><code>-1d</code>: {{ $t('input.datemathHelp.minus1Day') }}</li>
+			<li><code>/d</code>: {{ $t('input.datemathHelp.roundDay') }}</li>
 		</ul>
 		<h3>{{ $t('input.datemathHelp.supportedUnits') }}</h3>
 		<table class="table">

frontend/src/components/date/DatepickerWithRange.vue

@@ -112,7 +112,7 @@ import Popup from '@/components/misc/Popup.vue'
 import {DATE_RANGES} from '@/components/date/dateRanges'
 import BaseButton from '@/components/base/BaseButton.vue'
 import DatemathHelp from '@/components/date/DatemathHelp.vue'
-import {getFlatpickrLanguage} from '@/helpers/flatpickrLanguage'
+import {useFlatpickrLanguage} from '@/helpers/useFlatpickrLanguage'
 
 const props = defineProps<{
 	modelValue: {
@@ -137,7 +137,7 @@ const flatPickerConfig = computed(() => ({
 	enableTime: false,
 	wrap: true,
 	mode: 'range',
-	locale: getFlatpickrLanguage(),
+	locale: useFlatpickrLanguage().value,
 }))
 
 const showHowItWorks = ref(false)

frontend/src/components/date/DatepickerWithValues.vue

@@ -2,7 +2,7 @@
 	<div class="datepicker-with-range-container">
 		<Popup
 			:open="open"
-			@update:open="(open) => !open && emit('close')"
+			@update:open="(open) => !open && $emit('update:open', false)"
 		>
 			<template #content="{isOpen}">
 				<div
@@ -89,7 +89,7 @@ import Popup from '@/components/misc/Popup.vue'
 import {DATE_VALUES} from '@/components/date/dateRanges'
 import BaseButton from '@/components/base/BaseButton.vue'
 import DatemathHelp from '@/components/date/DatemathHelp.vue'
-import {getFlatpickrLanguage} from '@/helpers/flatpickrLanguage'
+import {useFlatpickrLanguage} from '@/helpers/useFlatpickrLanguage'
 
 const props = withDefaults(defineProps<{
 	modelValue: string | Date | null,
@@ -112,7 +112,7 @@ const flatPickerConfig = computed(() => ({
 	dateFormat: 'Y-m-d H:i',
 	enableTime: false,
 	wrap: true,
-	locale: getFlatpickrLanguage(),
+	locale: useFlatpickrLanguage().value,
 }))
 
 const showHowItWorks = ref(false)

frontend/src/components/home/AddToHomeScreen.vue

@@ -69,6 +69,10 @@ const shouldShowMessage = computed(() => {
 	@media screen and (min-width: $tablet) {
 		display: none;
 	}
+
+	@media print {
+		display: none;
+	}
 	
 	&.has-update-available {
 		bottom: 5rem;

frontend/src/components/home/AppHeader.vue

@@ -25,6 +25,7 @@
 			</h1>
 
 			<BaseButton
+				v-if="!isEditorContentEmpty(currentProject.description)"
 				:to="{ name: 'project.info', params: { projectId: currentProject.id } }"
 				class="project-title-button"
 			>
@@ -124,6 +125,7 @@ import MenuButton from '@/components/home/MenuButton.vue'
 import OpenQuickActions from '@/components/misc/OpenQuickActions.vue'
 
 import { getProjectTitle } from '@/helpers/getProjectTitle'
+import { isEditorContentEmpty } from '@/helpers/editorContentEmpty'
 
 import { useBaseStore } from '@/stores/base'
 import { useConfigStore } from '@/stores/config'

frontend/src/components/home/ContentAuth.vue

@@ -48,7 +48,10 @@
 					class="task-detail-view-modal"
 					@close="closeModal()"
 				>
-					<component :is="currentModal" />
+					<component
+						:is="currentModal"
+						@close="closeModal()"
+					/>
 				</Modal>
 
 				<BaseButton

frontend/src/components/home/ContentLinkShare.vue

@@ -21,7 +21,7 @@
 			</h1>
 			<div class="box has-text-left view">
 				<RouterView />
-				<PoweredByLink />
+				<PoweredByLink utm-medium="link_share" />
 			</div>
 		</div>
 	</div>

frontend/src/components/home/DemoMode.vue

@@ -30,8 +30,7 @@ const enabled = computed(() => configStore.demoModeEnabled && !hide.value)
 .demo-mode-banner {
 	position: fixed;
 	bottom: 0;
-	left: 0;
-	right: 0;
+	inset-inline: 0;
 	background: var(--danger);
 	z-index: 100;
 	padding: .5rem;

frontend/src/components/home/Navigation.vue

@@ -109,7 +109,10 @@
 			</nav>
 		</template>
 
-		<PoweredByLink class="mt-auto" />
+		<PoweredByLink
+			class="mt-auto"
+			utm-medium="navigation"
+		/>
 	</aside>
 </template>
 

frontend/src/components/home/PoweredByLink.vue

@@ -1,7 +1,7 @@
 <template>
 	<BaseButton
 		class="menu-bottom-link"
-		:href="poweredByUrl"
+		:href="computedUrl"
 		target="_blank"
 	>
 		{{ $t('misc.poweredBy') }}
@@ -9,8 +9,15 @@
 </template>
 
 <script setup lang="ts">
+import {computed} from 'vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 import {POWERED_BY as poweredByUrl} from '@/urls'
+
+const props = defineProps<{
+	utmMedium: string;
+}>()
+
+const computedUrl = computed(() => `${poweredByUrl}&utm_medium=${props.utmMedium}`)
 </script>
 
 <style lang="scss">

frontend/src/components/home/ProjectsNavigationItem.vue

@@ -3,7 +3,7 @@
 		class="list-menu loader-container is-loading-small"
 		:class="{'is-loading': isLoading}"
 	>
-		<div>
+		<div class="navigation-item">
 			<BaseButton
 				v-if="canCollapse && childProjects?.length > 0"
 				class="collapse-project-button"
@@ -25,7 +25,7 @@
 				/>
 				<div
 					class="color-bubble-handle-wrapper"
-					:class="{'is-draggable': project.id > 0}"
+					:class="{'is-draggable': project.id > 0 && project.maxRight > RIGHTS.READ}"
 				>
 					<ColorBubble
 						v-if="project.hexColor !== ''"
@@ -38,7 +38,7 @@
 						<Icon icon="filter" />
 					</span>
 					<span
-						v-if="project.id > 0"
+						v-if="project.id > 0 && project.maxRight > RIGHTS.READ"
 						class="icon menu-item-icon handle"
 						:class="{'has-color-bubble': project.hexColor !== ''}"
 					>
@@ -48,7 +48,7 @@
 				<span class="project-menu-title">{{ getProjectTitle(project) }}</span>
 			</BaseButton>
 			<BaseButton
-				v-if="project.id > 0"
+				v-if="project.id > 0 && project.maxRight > RIGHTS.READ"
 				class="favorite"
 				:class="{'is-favorite': project.isFavorite}"
 				@click="projectStore.toggleProjectFavorite(project)"
@@ -56,6 +56,7 @@
 				<Icon :icon="project.isFavorite ? 'star' : ['far', 'star']" />
 			</BaseButton>
 			<ProjectSettingsDropdown
+				v-if="project.maxRight > RIGHTS.READ"
 				class="menu-list-dropdown"
 				:project="project"
 			>
@@ -94,6 +95,7 @@ import ProjectSettingsDropdown from '@/components/project/ProjectSettingsDropdow
 import {getProjectTitle} from '@/helpers/getProjectTitle'
 import ColorBubble from '@/components/misc/ColorBubble.vue'
 import ProjectsNavigation from '@/components/home/ProjectsNavigation.vue'
+import {RIGHTS} from '@/constants/rights'
 
 const props = defineProps<{
 	project: IProject,
@@ -193,4 +195,18 @@ const childProjects = computed(() => {
 .is-touch .handle.has-color-bubble {
 	display: none !important;
 }
+
+.navigation-item:has(*:focus-visible) {
+	box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
+	background-color: var(--white);
+
+	.favorite, .menu-list-dropdown {
+		opacity: 1;
+	}
+}
+
+.navigation-item a:focus-visible {
+	// The focus ring is already added to the navigation-item, so we don't need to add it again.
+	box-shadow: none;
+}
 </style>

frontend/src/components/input/DatepickerInline.vue

@@ -82,7 +82,7 @@ import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
 import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
 import {createDateFromString} from '@/helpers/time/createDateFromString'
 import {useI18n} from 'vue-i18n'
-import {getFlatpickrLanguage} from '@/helpers/flatpickrLanguage'
+import {useFlatpickrLanguage} from '@/helpers/useFlatpickrLanguage'
 
 const props = withDefaults(defineProps<{
 	modelValue: Date | null | string
@@ -114,7 +114,7 @@ const flatPickerConfig = computed(() => ({
 	enableTime: true,
 	time_24hr: true,
 	inline: true,
-	locale: getFlatpickrLanguage(),
+	locale: useFlatpickrLanguage().value,
 }))
 
 // Since flatpickr dates are strings, we need to convert them to native date objects.

frontend/src/components/input/FancyCheckbox.vue

@@ -38,7 +38,6 @@ const emit = defineEmits<{
 }>()
 </script>
 
-
 <style lang="scss" scoped>
 .fancy-checkbox {
   display: inline-block;
@@ -70,8 +69,8 @@ const emit = defineEmits<{
 	}
 }
 
-.fancy-checkbox:not(:has(input:disabled)):hover .fancy-checkbox__icon,
-.fancy-checkbox:has(input:checked) .fancy-checkbox__icon {
+.fancy-checkbox:hover input:not(:disabled) + .fancy-checkbox__icon,
+.fancy-checkbox input:checked + .fancy-checkbox__icon {
 	--stroke-color: var(--primary);
 }
 </style>
@@ -80,13 +79,13 @@ const emit = defineEmits<{
 // Since css-has-pseudo doesn't work with deep classes,
 // the following rules can't be scoped
 
-.fancy-checkbox:has(:not(input:checked)) .fancy-checkbox__icon {
+.fancy-checkbox :not(input:checked) + .fancy-checkbox__icon {
 	path {
 		transition-delay: 0.05s;
 	}
 }
 
-.fancy-checkbox:has(input:checked) .fancy-checkbox__icon {
+.fancy-checkbox input:checked + .fancy-checkbox__icon {
 	path {
 		stroke-dashoffset: 60;
 	}

frontend/src/components/input/Multiselect.vue

@@ -2,8 +2,9 @@
 	<div
 		ref="multiselectRoot"
 		class="multiselect"
-		:class="{'has-search-results': searchResultsVisible}"
+		:class="{'has-search-results': searchResultsVisible, 'is-disabled': disabled}"
 		tabindex="-1"
+		:aria-disabled="disabled"
 		@focus="focus"
 	>
 		<div
@@ -12,7 +13,7 @@
 		>
 			<div
 				class="input-wrapper input"
-				:class="{'has-multiple': hasMultiple, 'has-removal-button': removalAvailable}"
+				:class="{'has-multiple': hasMultiple, 'has-removal-button': removalAvailable && !disabled}"
 			>
 				<slot
 					v-if="Array.isArray(internalValue)"
@@ -31,6 +32,7 @@
 							>
 								{{ label !== '' ? item[label] : item }}
 								<BaseButton
+									v-if="!disabled"
 									class="delete is-small"
 									@click="() => remove(item)"
 								/>
@@ -40,6 +42,7 @@
 				</slot>
 				
 				<input
+					v-if="!disabled"
 					:id="id"
 					ref="searchInput"
 					v-model="query"
@@ -55,7 +58,7 @@
 					@focus="handleFocus"
 				>
 				<BaseButton 
-					v-if="removalAvailable"
+					v-if="removalAvailable && !disabled"
 					class="removal-button"
 					@click="resetSelectedValue"
 				>
@@ -120,7 +123,7 @@
 	</div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends { [id: string]: any }">
 import {computed, onBeforeUnmount, onMounted, ref, toRefs, watch, type ComponentPublicInstance} from 'vue'
 import {useI18n} from 'vue-i18n'
 
@@ -131,15 +134,13 @@ import CustomTransition from '@/components/misc/CustomTransition.vue'
 
 const props = withDefaults(defineProps<{
 	/** The object with the value, updated every time an entry is selected */
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	modelValue: { [id: string]: any } | null
+	modelValue: T | T[] | null,
 	/** When true, shows a loading spinner */
 	loading?: boolean
 	/** The placeholder of the search input */
 	placeholder?: string
 	/** The search results where the @search listener needs to put the results into */
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	searchResults?: { [id: string]: any }[]
+	searchResults?: T[]
 	/** The name of the property of the searched object to show the user. If empty the component will show all raw data of an entry */
 	label?: string
 	/** The id attribute of the input element */
@@ -151,7 +152,7 @@ const props = withDefaults(defineProps<{
 	/** The text shown next to the new value option. */
 	createPlaceholder?: string
 	/** The text shown next to an option. */
-	selectPlaceholder: string
+	selectPlaceholder?: string
 	/** If true, allows for selecting multiple items. v-model will be an array with all selected values in that case. */
 	multiple?: boolean
 	/** If true, displays the search results inline instead of using a dropdown. */
@@ -164,6 +165,8 @@ const props = withDefaults(defineProps<{
 	closeAfterSelect?: boolean
 	/** If false, the search input will get the autocomplete="off" attributes attached to it. */
 	autocompleteEnabled?: boolean
+	/** If true, disables the multiselect input */
+	disabled?: boolean
 }>(), {
 	modelValue: null,
 	loading: false,
@@ -179,11 +182,11 @@ const props = withDefaults(defineProps<{
 	searchDelay: 200,
 	closeAfterSelect: true,
 	autocompleteEnabled: true,
+	disabled: false,
 })
 
 const emit = defineEmits<{
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	'update:modelValue': [value: { [key: string]: any }[] | null],
+	'update:modelValue': [value: T | T[] | null],
 	/**
 	 * Triggered every time the search query input changes
 	 */
@@ -191,8 +194,7 @@ const emit = defineEmits<{
 	/**
 	 * Triggered every time an option from the search results is selected. Also triggers a change in v-model.
 	 */
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	'select': [value: { [key: string]: any }],
+	'select': [value: T],
 	/**
 	 * If nothing or no exact match was found and `creatable` is true, this event is triggered with the current value of the search query.
 	 */
@@ -200,8 +202,7 @@ const emit = defineEmits<{
 	/**
 	 * If `multiple` is enabled, this will be fired every time an item is removed from the array of selected items.
 	 */
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	'remove': [value: { [key: string]: any }],
+	'remove': [value: T],
 }>()
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -214,13 +215,12 @@ function elementInResults(elem: string | any, label: string, query: string): boo
 	return elem === query
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const query = ref<string | { [key: string]: any }>('')
+const query = ref<string | T>('')
 const searchTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
 const localLoading = ref(false)
 const showSearchResults = ref(false)
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const internalValue = ref<string | { [key: string]: any } | any[] | null>(null)
+
+const internalValue = ref<string | T | T[] | null>(null)
 
 onMounted(() => document.addEventListener('click', hideSearchResultsHandler))
 onBeforeUnmount(() => document.removeEventListener('click', hideSearchResultsHandler))
@@ -319,15 +319,13 @@ function handleFocus() {
 	}, 10)
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function select(object: { [key: string]: any } | null) {
+function select(object: T | null) {
 	if (props.multiple) {
 		if (internalValue.value === null) {
 			internalValue.value = []
 		}
 
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		(internalValue.value as any[]).push(object)
+		internalValue.value.push(object)
 	} else {
 		internalValue.value = object
 	}
@@ -340,8 +338,7 @@ function select(object: { [key: string]: any } | null) {
 	}
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function setSelectedObject(object: string | { [id: string]: any } | null, resetOnly = false) {
+function setSelectedObject(object: string | T | null, resetOnly = false) {
 	internalValue.value = object
 
 	// We assume we're getting an array when multiple is enabled and can therefore leave the query
@@ -448,6 +445,18 @@ function focus() {
 	.control.is-loading::after {
 		top: .75rem;
 	}
+
+	&.is-disabled {
+		.input-wrapper, .input, & {
+			cursor: default !important;
+
+			&:focus-within,&:focus-visible, &:hover, &:focus {
+				border-color: transparent !important;
+				background: transparent !important;
+				box-shadow: none;
+			}
+		}
+	}
 }
 
 .input-wrapper {

frontend/src/components/input/Password.vue

@@ -36,6 +36,7 @@ import {ref, watchEffect} from 'vue'
 import {useDebounceFn} from '@vueuse/core'
 import {useI18n} from 'vue-i18n'
 import BaseButton from '@/components/base/BaseButton.vue'
+import {validatePassword} from '@/helpers/validatePasswort'
 
 const props = withDefaults(defineProps<{
 	modelValue: string,
@@ -60,22 +61,8 @@ const validateAfterFirst = ref(false)
 watchEffect(() => props.validateInitially && validate())
 
 const validate = useDebounceFn(() => {
-	if (password.value === '') {
-		isValid.value = t('user.auth.passwordRequired')
-		return
-	}
-
-	if (props.validateMinLength && password.value.length < 8) {
-		isValid.value = t('user.auth.passwordNotMin')
-		return
-	}
-	
-	if (props.validateMinLength && password.value.length > 250) {
-		isValid.value = t('user.auth.passwordNotMax')
-		return
-	}
-	
-	isValid.value = true
+	const valid = validatePassword(password.value, props.validateMinLength)
+	isValid.value = valid === true ? true : t(valid)
 }, 100)
 
 function togglePasswordFieldType() {

frontend/src/components/input/editor/TipTap.vue

@@ -17,7 +17,7 @@
 				v-tooltip="$t('input.editor.bold')"
 				class="editor-bubble__button"
 				:class="{ 'is-active': editor.isActive('bold') }"
-				@click="editor.chain().focus().toggleBold().run()"
+				@click="() => editor?.chain().focus().toggleBold().run()"
 			>
 				<Icon :icon="['fa', 'fa-bold']" />
 			</BaseButton>
@@ -25,7 +25,7 @@
 				v-tooltip="$t('input.editor.italic')"
 				class="editor-bubble__button"
 				:class="{ 'is-active': editor.isActive('italic') }"
-				@click="editor.chain().focus().toggleItalic().run()"
+				@click="() => editor?.chain().focus().toggleItalic().run()"
 			>
 				<Icon :icon="['fa', 'fa-italic']" />
 			</BaseButton>
@@ -33,7 +33,7 @@
 				v-tooltip="$t('input.editor.underline')"
 				class="editor-bubble__button"
 				:class="{ 'is-active': editor.isActive('underline') }"
-				@click="editor.chain().focus().toggleUnderline().run()"
+				@click="() => editor?.chain().focus().toggleUnderline().run()"
 			>
 				<Icon :icon="['fa', 'fa-underline']" />
 			</BaseButton>
@@ -41,7 +41,7 @@
 				v-tooltip="$t('input.editor.strikethrough')"
 				class="editor-bubble__button"
 				:class="{ 'is-active': editor.isActive('strike') }"
-				@click="editor.chain().focus().toggleStrike().run()"
+				@click="() => editor?.chain().focus().toggleStrike().run()"
 			>
 				<Icon :icon="['fa', 'fa-strikethrough']" />
 			</BaseButton>
@@ -49,7 +49,7 @@
 				v-tooltip="$t('input.editor.code')"
 				class="editor-bubble__button"
 				:class="{ 'is-active': editor.isActive('code') }"
-				@click="editor.chain().focus().toggleCode().run()"
+				@click="() => editor?.chain().focus().toggleCode().run()"
 			>
 				<Icon :icon="['fa', 'fa-code']" />
 			</BaseButton>
@@ -87,7 +87,7 @@
 			<li>
 				<BaseButton
 					class="done-edit"
-					@click="setEdit"
+					@click="() => setEdit()"
 				>
 					{{ $t('input.editor.edit') }}
 				</BaseButton>
@@ -108,7 +108,7 @@
 			<li v-if="!isEditing">
 				<BaseButton
 					class="done-edit"
-					@click="setEdit"
+					@click="() => setEdit()"
 				>
 					{{ $t('input.editor.edit') }}
 				</BaseButton>
@@ -138,11 +138,16 @@
 
 <script setup lang="ts">
 import {computed, nextTick, onBeforeUnmount, onMounted, ref, watch} from 'vue'
+import {useI18n} from 'vue-i18n'
+import {eventToHotkeyString} from '@github/hotkey'
 
 import EditorToolbar from './EditorToolbar.vue'
 
-import Link from '@tiptap/extension-link'
+import StarterKit from '@tiptap/starter-kit'
+import {Extension, mergeAttributes} from '@tiptap/core'
+import {BubbleMenu, EditorContent, type Extensions, useEditor} from '@tiptap/vue-3'
 
+import Link from '@tiptap/extension-link'
 import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
 import Table from '@tiptap/extension-table'
 import TableCell from '@tiptap/extension-table-cell'
@@ -151,46 +156,27 @@ import TableRow from '@tiptap/extension-table-row'
 import Typography from '@tiptap/extension-typography'
 import Image from '@tiptap/extension-image'
 import Underline from '@tiptap/extension-underline'
+import {Placeholder} from '@tiptap/extension-placeholder'
 
 import TaskItem from '@tiptap/extension-task-item'
 import TaskList from '@tiptap/extension-task-list'
+import HardBreak from '@tiptap/extension-hard-break'
 
-import {Blockquote} from '@tiptap/extension-blockquote'
-import {Bold} from '@tiptap/extension-bold'
-import {BulletList} from '@tiptap/extension-bullet-list'
-import {Code} from '@tiptap/extension-code'
-import {Document} from '@tiptap/extension-document'
-import {Dropcursor} from '@tiptap/extension-dropcursor'
-import {Gapcursor} from '@tiptap/extension-gapcursor'
-import {HardBreak} from '@tiptap/extension-hard-break'
-import {Heading} from '@tiptap/extension-heading'
-import {History} from '@tiptap/extension-history'
-import {HorizontalRule} from '@tiptap/extension-horizontal-rule'
-import {Italic} from '@tiptap/extension-italic'
-import {ListItem} from '@tiptap/extension-list-item'
-import {OrderedList} from '@tiptap/extension-ordered-list'
-import {Paragraph} from '@tiptap/extension-paragraph'
-import {Strike} from '@tiptap/extension-strike'
-import {Text} from '@tiptap/extension-text'
-import {BubbleMenu, EditorContent, type Extensions, useEditor} from '@tiptap/vue-3'
 import {Node} from '@tiptap/pm/model'
 
 import Commands from './commands'
 import suggestionSetup from './suggestion'
 
-import {lowlight} from 'lowlight'
+import {common, createLowlight} from 'lowlight'
 
 import type {BottomAction, UploadCallback} from './types'
 import type {ITask} from '@/modelTypes/ITask'
 import type {IAttachment} from '@/modelTypes/IAttachment'
 import AttachmentModel from '@/models/attachment'
 import AttachmentService from '@/services/attachment'
-import {useI18n} from 'vue-i18n'
 import BaseButton from '@/components/base/BaseButton.vue'
 import XButton from '@/components/input/Button.vue'
-import {Placeholder} from '@tiptap/extension-placeholder'
-import {eventToHotkeyString} from '@github/hotkey'
-import {Extension, mergeAttributes} from '@tiptap/core'
+
 import {isEditorContentEmpty} from '@/helpers/editorContentEmpty'
 import inputPrompt from '@/helpers/inputPrompt'
 import {setLinkInEditor} from '@/components/input/editor/setLinkInEditor'
@@ -198,13 +184,13 @@ import {setLinkInEditor} from '@/components/input/editor/setLinkInEditor'
 const {
 	modelValue,
 	uploadCallback,
-	isEditEnabled = true,
-	bottomActions = [],
-	showSave = false,
-	placeholder = '',
-	editShortcut = '',
-	enableDiscardShortcut = false,
-} = defineProps<{
+	isEditEnabled,
+	bottomActions,
+	showSave,
+	placeholder,
+	editShortcut,
+	enableDiscardShortcut,
+} = withDefaults(defineProps<{
 	modelValue: string,
 	uploadCallback?: UploadCallback,
 	isEditEnabled?: boolean,
@@ -213,7 +199,14 @@ const {
 	placeholder?: string,
 	editShortcut?: string,
 	enableDiscardShortcut?: boolean,
-}>()
+}>(), {
+	isEditEnabled: true,
+	bottomActions: () => [],
+	showSave: false,
+	placeholder: '',
+	editShortcut: '',
+	enableDiscardShortcut: false,
+})
 
 const emit = defineEmits(['update:modelValue', 'save'])
 
@@ -314,7 +307,17 @@ const internalMode = ref<Mode>('preview')
 const isEditing = computed(() => internalMode.value === 'edit' && isEditEnabled)
 const contentHasChanged = ref<boolean>(false)
 
-let lastSavedState = modelValue
+let lastSavedState = ''
+
+watch(
+	() => modelValue,
+	(newValue) => {
+		if (!contentHasChanged.value) {
+			lastSavedState = newValue
+		}
+	},
+	{ immediate: true },
+)
 
 watch(
 	() => internalMode.value,
@@ -325,18 +328,23 @@ watch(
 	},
 )
 
+const additionalLinkProtocols = [
+	'ftp',
+	'git',
+	'obsidian',
+	'notion',
+]
+
 const extensions : Extensions = [
 	// Starterkit:
-	Blockquote,
-	Bold,
-	BulletList,
-	Code,
+	StarterKit.configure({
+		codeBlock: false,
+		hardBreak: false,
+	}),
+
 	CodeBlockLowlight.configure({
-		lowlight,
+		lowlight: createLowlight(common),
 	}),
-	Document,
-	Dropcursor,
-	Gapcursor,
 	HardBreak.extend({
 		addKeyboardShortcuts() {
 			return {
@@ -350,15 +358,6 @@ const extensions : Extensions = [
 			}
 		},
 	}),
-	Heading,
-	History,
-	HorizontalRule,
-	Italic,
-	ListItem,
-	OrderedList,
-	Paragraph,
-	Strike,
-	Text,
 
 	Placeholder.configure({
 		placeholder: ({editor}) => {
@@ -379,7 +378,11 @@ const extensions : Extensions = [
 	Underline,
 	Link.configure({
 		openOnClick: false,
-		validate: (href: string) => /^https?:\/\//.test(href),
+		validate: (href: string) => (new RegExp(
+			`^(https?|${additionalLinkProtocols.join('|')}):\\/\\/`,
+			'i',
+		)).test(href),
+		protocols: additionalLinkProtocols,
 	}),
 	Table.configure({
 		resizable: true,
@@ -423,7 +426,6 @@ const extensions : Extensions = [
 	Commands.configure({
 		suggestion: suggestionSetup(t),
 	}),
-	BubbleMenu,
 ]
 
 // Add a custom extension for the Escape key
@@ -474,7 +476,8 @@ watch(
 )
 
 function bubbleNow() {
-	if (editor.value?.getHTML() === modelValue) {
+	if (editor.value?.getHTML() === modelValue ||
+		(editor.value?.getHTML() === '<p></p>') && modelValue === '') {
 		return
 	}
 

frontend/src/components/misc/ApiConfig.vue

@@ -117,6 +117,7 @@ async function setApiUrl() {
 		success({message: t('apiConfig.success', {domain: apiDomain.value})})
 		configureApi.value = false
 		emit('foundApi', apiUrl.value)
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	} catch (e) {
 		// Still not found, url is still invalid
 		errorMsg.value = t('apiConfig.error', {domain: apiDomain.value})

frontend/src/components/misc/Icon.ts

@@ -28,7 +28,7 @@ import {
 	faDownload,
 	faEllipsisH,
 	faEllipsisV,
-	faExclamation,
+	faExclamationCircle,
 	faEye,
 	faEyeSlash,
 	faFile,
@@ -138,7 +138,7 @@ library.add(faCopy)
 library.add(faDownload)
 library.add(faEllipsisH)
 library.add(faEllipsisV)
-library.add(faExclamation)
+library.add(faExclamationCircle)
 library.add(faEye)
 library.add(faEyeSlash)
 library.add(faFillDrip)

frontend/src/components/misc/Modal.vue

@@ -20,6 +20,12 @@
 					class="modal-container"
 					@mousedown.self.prevent.stop="$emit('close')"
 				>
+					<BaseButton
+						class="close"
+						@click="$emit('close')"
+					>
+						<Icon icon="times" />
+					</BaseButton>
 					<div
 						class="modal-content"
 						:class="{
@@ -27,15 +33,8 @@
 							'is-wide': wide
 						}"
 					>
-						<BaseButton
-							class="close"
-							@click="$emit('close')"
-						>
-							<Icon icon="times" />
-						</BaseButton>
-
 						<slot>
-							<div class="header">
+							<div class="modal-header">
 								<slot name="header" />
 							</div>
 							<div class="content">
@@ -137,11 +136,11 @@ $modal-width: 1024px;
 
 	@media screen and (max-width: $tablet) {
 		margin: 0;
-		top: 25%;
-		transform: translate(-50%, -25%);
+		position: static;
+		transform: none;
 	}
 
-	.header {
+	.modal-header {
 		font-size: 2rem;
 		font-weight: 700;
 	}
@@ -154,12 +153,15 @@ $modal-width: 1024px;
 // scrolling-content
 // used e.g. for <TaskDetailViewModal>
 .scrolling .modal-content {
-	max-width: $modal-width;
 	width: 100%;
 	margin: $modal-margin auto;
 
 	max-height: none; // reset bulma
 	overflow: visible; // reset bulma
+	
+	@media not print {
+		max-width: $modal-width;
+	}
 
 	@media screen and (min-width: $tablet) {
 		max-height: none; // reset bulma
@@ -167,7 +169,7 @@ $modal-width: 1024px;
 		width: 100%;
 	}
 
-	@media screen and (max-width: $desktop) {
+	@media screen and (max-width: $desktop), print {
 		margin: 0;
 	}
 }
@@ -194,7 +196,7 @@ $modal-width: 1024px;
 	position: fixed;
 	top: .5rem;
 	right: $close-button-padding;
-	color: var(--grey-900);
+	color: var(--white);
 	font-size: 2rem;
 
 	@media screen and (min-width: $desktop) and (max-width: calc(#{$desktop	} + #{$close-button-min-space})) {
@@ -203,15 +205,50 @@ $modal-width: 1024px;
 		// we align the close button to the modal until there is enough space outside for it
 		transform: translateX(calc((#{$modal-width} / 2) - #{$close-button-padding}));
 	}
-	// we can only use light color when there is enough space for the close button next to the modal
-	@media screen and (min-width: calc(#{$desktop	} + #{$close-button-min-space})) {
-		color: var(--white);
-	}
 
 	@media screen and (min-width: $tablet) and (max-width: #{$desktop + $close-button-min-space}) {
 		top: .75rem;
 	}
 }
+
+@media print, screen and (max-width: $tablet) {
+  .modal-mask {
+    position: static;
+    overflow: visible !important;
+  }
+
+  .modal-container {
+    height: auto;
+	min-height: 100vh;
+  }
+
+  .modal-content {
+    position: static;
+	max-height: none;
+  }
+
+  .close {
+    display: none;
+  }
+
+  :deep(.card) {
+	border: none !important; 
+	border-radius: 0 !important;
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	margin-bottom: 0 !important;
+  }
+}
+
+.modal-content:has(.modal-header) {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	padding: 0 1rem;
+	min-height: 100vh
+}
 </style>
 
 <style lang="scss">
@@ -219,4 +256,10 @@ $modal-width: 1024px;
 .dark .close {
 	color: var(--grey-900);
 }
-</style>
+
+@media print, screen and (max-width: $tablet) {
+  body:has(.modal-mask) #app {
+	display: none;
+  }
+}
+</style>

frontend/src/components/misc/Pagination.vue

@@ -1,89 +1,49 @@
 <template>
-	<nav
-		v-if="totalPages > 1"
-		aria-label="pagination"
-		class="pagination is-centered p-4"
-		role="navigation"
+	<BasePagination
+		:total-pages="totalPages"
+		:current-page="currentPage"
 	>
-		<RouterLink
-			:disabled="currentPage === 1 || undefined"
-			:to="getRouteForPagination(currentPage - 1)"
-			class="pagination-previous"
-		>
-			{{ $t('misc.previous') }}
-		</RouterLink>
-		<RouterLink
-			:disabled="currentPage === totalPages || undefined"
-			:to="getRouteForPagination(currentPage + 1)"
-			class="pagination-next"
-		>
-			{{ $t('misc.next') }}
-		</RouterLink>
-		<ul class="pagination-list">
-			<li
-				v-for="(p, i) in pages"
-				:key="`page-${i}`"
+		<template #previous="{ disabled }">
+			<RouterLink
+				:disabled="disabled || undefined"
+				:to="getRouteForPagination(currentPage - 1)"
+				class="pagination-previous"
 			>
-				<span
-					v-if="p.isEllipsis"
-					class="pagination-ellipsis"
-				>&hellip;</span>
-				<RouterLink
-					v-else
-					class="pagination-link"
-					:aria-label="'Goto page ' + p.number"
-					:class="{ 'is-current': p.number === currentPage }"
-					:to="getRouteForPagination(p.number)"
-				>
-					{{ p.number }}
-				</RouterLink>
-			</li>
-		</ul>
-	</nav>
+				{{ $t('misc.previous') }}
+			</RouterLink>
+		</template>
+		<template #next="{ disabled }">
+			<RouterLink
+				:disabled="disabled || undefined"
+				:to="getRouteForPagination(currentPage + 1)"
+				class="pagination-next"
+			>
+				{{ $t('misc.next') }}
+			</RouterLink>
+		</template>
+		<template #page-link="{ page, isCurrent }">
+			<RouterLink
+				class="pagination-link"
+				:aria-label="'Goto page ' + page.number"
+				:class="{ 'is-current': isCurrent }"
+				:to="getRouteForPagination(page.number)"
+			>
+				{{ page.number }}
+			</RouterLink>
+		</template>
+	</BasePagination>
 </template>
 
 <script lang="ts" setup>
-import {computed} from 'vue'
+import BasePagination from '@/components/base/BasePagination.vue'
 
-const props = withDefaults(defineProps<{
+withDefaults(defineProps<{
 	totalPages: number,
 	currentPage?: number
 }>(), {
 	currentPage: 0,
 })
 
-function createPagination(totalPages: number, currentPage: number) {
-	const pages = []
-	for (let i = 0; i < totalPages; i++) {
-
-		// Show ellipsis instead of all pages
-		if (
-			i > 0 && // Always at least the first page
-			(i + 1) < totalPages && // And the last page
-			(
-				// And the current with current + 1 and current - 1
-				(i + 1) > currentPage + 1 ||
-				(i + 1) < currentPage - 1
-			)
-		) {
-			// Only add an ellipsis if the last page isn't already one
-			if (pages[i - 1] && !pages[i - 1].isEllipsis) {
-				pages.push({
-					number: 0,
-					isEllipsis: true,
-				})
-			}
-			continue
-		}
-
-		pages.push({
-			number: i + 1,
-			isEllipsis: false,
-		})
-	}
-	return pages
-}
-
 function getRouteForPagination(page = 1, type = null) {
 	return {
 		name: type,
@@ -95,20 +55,4 @@ function getRouteForPagination(page = 1, type = null) {
 		},
 	}
 }
-
-const pages = computed(() => createPagination(props.totalPages, props.currentPage))
-</script>
-
-<style lang="scss" scoped>
-.pagination {
-	padding-bottom: 1rem;
-}
-
-.pagination-previous,
-.pagination-next {
-	&:not(:disabled):hover {
-		background: $scheme-main;
-		cursor: pointer;
-	}
-}
-</style>
+</script>

frontend/src/components/misc/PaginationEmit.vue

@@ -0,0 +1,55 @@
+<template>
+	<BasePagination
+		:total-pages="totalPages"
+		:current-page="currentPage"
+	>
+		<template #previous="{ disabled }">
+			<BaseButton
+				:disabled="disabled"
+				class="pagination-previous"
+				@click="changePage(currentPage - 1)"
+			>
+				{{ $t('misc.previous') }}
+			</BaseButton>
+		</template>
+		<template #next="{ disabled }">
+			<BaseButton
+				:disabled="disabled"
+				class="pagination-next"
+				@click="changePage(currentPage + 1)"
+			>
+				{{ $t('misc.next') }}
+			</BaseButton>
+		</template>
+		<template #page-link="{ page, isCurrent }">
+			<BaseButton
+				class="pagination-link"
+				:aria-label="'Goto page ' + page.number"
+				:class="{ 'is-current': isCurrent }"
+				@click="changePage(page.number)"
+			>
+				{{ page.number }}
+			</BaseButton>
+		</template>
+	</BasePagination>
+</template>
+
+<script lang="ts" setup>
+import BasePagination from '@/components/base/BasePagination.vue'
+import BaseButton from '@/components/base/BaseButton.vue'
+
+const props = withDefaults(defineProps<{
+	totalPages: number,
+	currentPage: number
+}>(), {
+	currentPage: 1,
+})
+
+const emit = defineEmits(['pageChanged'])
+
+function changePage(page: number) {
+	if (page >= 1 && page <= props.totalPages) {
+		emit('pageChanged', page)
+	}
+}
+</script>

frontend/src/components/misc/Ready.vue

@@ -15,12 +15,12 @@
 			<p>{{ $t('offline.text') }}</p>
 		</div>
 	</div>
-	<template v-else-if="ready">
+	<template v-else-if="baseStore.ready">
 		<slot />
 	</template>
-	<section v-else-if="error !== ''">
+	<section v-else-if="baseStore.error !== ''">
 		<NoAuthWrapper :show-api-config="false">
-			<p v-if="error === ERROR_NO_API_URL">
+			<p v-if="baseStore.error === ERROR_NO_API_URL">
 				{{ $t('ready.noApiUrlConfigured') }}
 			</p>
 			<Message
@@ -30,7 +30,7 @@
 			>
 				<p>
 					{{ $t('ready.errorOccured') }}<br>
-					{{ error }}
+					{{ baseStore.error }}
 				</p>
 				<p>
 					{{ $t('ready.checkApiUrl') }}
@@ -38,13 +38,13 @@
 			</Message>
 			<ApiConfig
 				:configure-open="true"
-				@foundApi="load"
+				@foundApi="baseStore.loadApp()"
 			/>
 		</NoAuthWrapper>
 	</section>
 	<CustomTransition name="fade">
 		<section
-			v-if="showLoading"
+			v-if="baseStore.loading"
 			class="vikunja-loading"
 		>
 			<Logo class="logo" />
@@ -57,60 +57,19 @@
 </template>
 
 <script lang="ts" setup>
-import {ref, computed} from 'vue'
-import {useRouter, useRoute} from 'vue-router'
-
 import Logo from '@/assets/logo.svg?component'
 import ApiConfig from '@/components/misc/ApiConfig.vue'
 import Message from '@/components/misc/Message.vue'
 import CustomTransition from '@/components/misc/CustomTransition.vue'
 import NoAuthWrapper from '@/components/misc/NoAuthWrapper.vue'
 
-import {ERROR_NO_API_URL, InvalidApiUrlProvidedError, NoApiUrlProvidedError} from '@/helpers/checkAndSetApiUrl'
+import {ERROR_NO_API_URL} from '@/helpers/checkAndSetApiUrl'
+
 import {useOnline} from '@/composables/useOnline'
-
-import {getAuthForRoute} from '@/router'
-
 import {useBaseStore} from '@/stores/base'
-import {useAuthStore} from '@/stores/auth'
-import {useI18n} from 'vue-i18n'
 
-const router = useRouter()
-const route = useRoute()
-
-const baseStore = useBaseStore()
-const authStore = useAuthStore()
-
-const ready = computed(() => baseStore.ready)
 const online = useOnline()
-
-const error = ref('')
-const showLoading = computed(() => !ready.value && error.value === '')
-
-const {t} = useI18n()
-
-async function load() {
-	try {
-		await baseStore.loadApp()
-		baseStore.setReady(true)
-		const redirectTo = await getAuthForRoute(route, authStore)
-		if (typeof redirectTo !== 'undefined') {
-			await router.push(redirectTo)
-		}
-	} catch (e: unknown) {
-		if (e instanceof NoApiUrlProvidedError) {
-			error.value = ERROR_NO_API_URL
-			return
-		}
-		if (e instanceof InvalidApiUrlProvidedError) {
-			error.value = t('apiConfig.error')
-			return
-		}
-		error.value = String(e.message)
-	}
-}
-
-load()
+const baseStore = useBaseStore()
 </script>
 
 <style lang="scss" scoped>

frontend/src/components/misc/flatpickr/Flatpickr.vue

@@ -62,29 +62,22 @@ export default {inheritAttrs: false}
 </script>
 
 <script setup lang="ts">
-import {computed, onBeforeUnmount, onMounted, ref, toRefs, useAttrs, watch, watchEffect, type PropType} from 'vue'
+import {computed, onBeforeUnmount, onMounted, ref, toRefs, useAttrs, watch, watchEffect} from 'vue'
 
-const props = defineProps({
-	modelValue: {
-		type: [String, Number, Date, Array] as PropType<DateOption | DateOption[] | null>,
-		default: null,
-	},
-	// https://flatpickr.js.org/options/
-	config: {
-		type: Object as PropType<Options>,
-		default: () => ({
-			defaultDate: null,
-			wrap: false,
-		}),
-	},
-	events: {
-		type: Array as PropType<HookKey[]>,
-		default: () => includedEvents,
-	},
-	disabled: {
-		type: Boolean,
-		default: false,
-	},
+const props = withDefaults(defineProps<{
+	modelValue: DateOption | DateOption[] | null,
+	/**  https://flatpickr.js.org/options/ */
+	config: Options,
+	events: HookKey[],
+	disabled: boolean,
+}>(), {
+	modelValue: null,
+	config: () => ({
+		defaultDate: undefined,
+		wrap: false,
+	}),
+	events: () => includedEvents,
+	disabled: false,
 })
 
 const emit = defineEmits([

frontend/src/components/notifications/Notifications.vue

@@ -124,15 +124,20 @@ let interval: ReturnType<typeof setInterval>
 onMounted(() => {
 	loadNotifications()
 	document.addEventListener('click', hidePopup)
+	document.addEventListener('visibilitychange', loadNotifications)
 	interval = setInterval(loadNotifications, LOAD_NOTIFICATIONS_INTERVAL)
 })
 
 onUnmounted(() => {
 	document.removeEventListener('click', hidePopup)
+	document.removeEventListener('visibilitychange', loadNotifications)
 	clearInterval(interval)
 })
 
 async function loadNotifications() {
+	if (document.visibilityState !== 'visible') {
+		return
+	}
 	// We're recreating the notification service here to make sure it uses the latest api user token
 	const notificationService = new NotificationService()
 	allNotifications.value = await notificationService.getAll()
@@ -154,6 +159,7 @@ function to(n, index) {
 		case names.TASK_COMMENT:
 		case names.TASK_ASSIGNED:
 		case names.TASK_REMINDER:
+		case names.TASK_MENTIONED:
 			to.name = 'task.detail'
 			to.params.id = n.notification.task.id
 			break

frontend/src/components/project/ProjectSettingsDropdown.vue

@@ -109,6 +109,7 @@
 				{{ $t('menu.createProject') }}
 			</DropdownItem>
 			<DropdownItem
+				v-if="project.maxRight === RIGHTS.ADMIN"
 				v-tooltip="isDefaultProject ? $t('menu.cantDeleteIsDefault') : ''"
 				:to="{ name: 'project.settings.delete', params: { projectId: project.id } }"
 				icon="trash-alt"
@@ -135,6 +136,7 @@ import {isSavedFilter} from '@/services/savedFilter'
 import {useConfigStore} from '@/stores/config'
 import {useProjectStore} from '@/stores/projects'
 import {useAuthStore} from '@/stores/auth'
+import {RIGHTS} from '@/constants/rights'
 
 const props = defineProps<{
 	project: IProject

frontend/src/components/project/partials/FilterInput.vue

@@ -133,7 +133,7 @@ const highlightedFilterQuery = computed(() => {
 				}
 
 				let labelTitles = [value.trim()]
-				if (operator === 'in' || operator === '?=') {
+				if (operator === 'in' || operator === '?=' || operator === 'not in' || operator === '?!=') {
 					labelTitles = value.split(',').map(v => v.trim())
 				}
 
@@ -218,33 +218,35 @@ function handleFieldInput() {
 
 		// eslint-disable-next-line @typescript-eslint/no-unused-vars
 		const [matched, prefix, operator, space, keyword] = match
-		if (keyword) {
-			let search = keyword
-			if (operator === 'in' || operator === '?=') {
-				const keywords = keyword.split(',')
-				search = keywords[keywords.length - 1].trim()
-			}
-			if (matched.startsWith('label')) {
-				autocompleteResultType.value = 'labels'
-				autocompleteResults.value = labelStore.filterLabelsByQuery([], search)
-			}
-			if (matched.startsWith('assignee')) {
-				autocompleteResultType.value = 'assignees'
-				if (props.projectId) {
-					projectUserService.getAll({projectId: props.projectId}, {s: search})
-						.then(users => autocompleteResults.value = users.length > 1 ? users : [])
-				} else {
-					userService.getAll({}, {s: search})
-						.then(users => autocompleteResults.value = users.length > 1 ? users : [])
-				}
-			}
-			if (!props.projectId && matched.startsWith('project')) {
-				autocompleteResultType.value = 'projects'
-				autocompleteResults.value = projectStore.searchProject(search)
-			}
-			autocompleteMatchText.value = keyword
-			autocompleteMatchPosition.value = match.index + prefix.length - 1 + keyword.replace(search, '').length
+		if(!keyword) {
+			return
 		}
+
+		let search = keyword
+		if (operator === 'in' || operator === '?=') {
+			const keywords = keyword.split(',')
+			search = keywords[keywords.length - 1].trim()
+		}
+		if (matched.startsWith('label')) {
+			autocompleteResultType.value = 'labels'
+			autocompleteResults.value = labelStore.filterLabelsByQuery([], search)
+		}
+		if (matched.startsWith('assignee')) {
+			autocompleteResultType.value = 'assignees'
+			if (props.projectId) {
+				projectUserService.getAll({projectId: props.projectId}, {s: search})
+					.then(users => autocompleteResults.value = users.length > 1 ? users : [])
+			} else {
+				userService.getAll({}, {s: search})
+					.then(users => autocompleteResults.value = users.length > 1 ? users : [])
+			}
+		}
+		if (!props.projectId && matched.startsWith('project')) {
+			autocompleteResultType.value = 'projects'
+			autocompleteResults.value = projectStore.searchProject(search)
+		}
+		autocompleteMatchText.value = keyword
+		autocompleteMatchPosition.value = match.index + prefix.length - 1 + keyword.replace(search, '').length
 	})
 }
 

frontend/src/components/project/partials/FilterInputDocs.vue

@@ -30,6 +30,9 @@ const showDocs = ref(false)
 			<li><code>assignees</code>: {{ $t('filters.query.help.fields.assignees') }}</li>
 			<li><code>labels</code>: {{ $t('filters.query.help.fields.labels') }}</li>
 			<li><code>project</code>: {{ $t('filters.query.help.fields.project') }}</li>
+			<li><code>reminders</code>: {{ $t('filters.query.help.fields.reminders') }}</li>
+			<li><code>created</code>: {{ $t('filters.query.help.fields.created') }}</li>
+			<li><code>updated</code>: {{ $t('filters.query.help.fields.updated') }}</li>
 		</ul>
 		<p>{{ $t('filters.query.help.canUseDatemath') }}</p>
 		<p>{{ $t('filters.query.help.operators.intro') }}</p>
@@ -42,6 +45,7 @@ const showDocs = ref(false)
 			<li><code>&lt;=</code>: {{ $t('filters.query.help.operators.lessThanOrEqual') }}</li>
 			<li><code>like</code>: {{ $t('filters.query.help.operators.like') }}</li>
 			<li><code>in</code>: {{ $t('filters.query.help.operators.in') }}</li>
+			<li><code>not in</code>: {{ $t('filters.query.help.operators.notIn') }}</li>
 		</ul>
 		<p>{{ $t('filters.query.help.logicalOperators.intro') }}</p>
 		<ul>

frontend/src/components/project/partials/FilterPopup.vue

@@ -20,6 +20,7 @@
 			:has-title="true"
 			class="filter-popup"
 			:change-immediately="false"
+			:filter-from-view="filterFromView"
 			@showResults="showResults"
 		/>
 	</Modal>
@@ -31,14 +32,22 @@ import {computed, ref, watch} from 'vue'
 import Filters from '@/components/project/partials/Filters.vue'
 
 import {type TaskFilterParams} from '@/services/taskCollection'
+import {type IProjectView} from '@/modelTypes/IProjectView'
+import {type IProject} from '@/modelTypes/IProject'
+import {useProjectStore} from '@/stores/projects'
 
 const props = defineProps<{
 	modelValue: TaskFilterParams,
+	projectId?: IProject['id'],
+	viewId?: IProjectView['id'],
 }>()
+
 const emit = defineEmits<{
 	'update:modelValue': [value: TaskFilterParams]
 }>()
 
+const projectStore = useProjectStore()
+
 const value = ref<TaskFilterParams>({})
 
 watch(
@@ -67,6 +76,19 @@ function showResults() {
 	})
 	modalOpen.value = false
 }
+
+const filterFromView = computed(() => {
+	if (!props.projectId || !props.viewId) {
+		return
+	}
+	
+	const project = projectStore.projects[props.projectId]
+	if (!project) {
+		return
+	}
+	const view = project.views.find(v => v.id === props.viewId)
+	return view?.filter?.filter
+})
 </script>
 
 <style scoped lang="scss">

frontend/src/components/project/partials/Filters.vue

@@ -10,6 +10,15 @@
 			@update:modelValue="() => change('modelValue')"
 			@blur="() => change('blur')"
 		/>
+		
+		<div 
+			v-if="filterFromView"
+			class="tw-text-sm tw-mb-2"
+		>
+			{{ $t('filters.fromView') }}
+			<code>{{ filterFromView }}</code><br>
+			{{ $t('filters.fromViewBoth') }}
+		</div>
 
 		<div class="field is-flex is-flex-direction-column">
 			<FancyCheckbox
@@ -56,7 +65,11 @@ import {useRoute} from 'vue-router'
 import type {TaskFilterParams} from '@/services/taskCollection'
 import {useLabelStore} from '@/stores/labels'
 import {useProjectStore} from '@/stores/projects'
-import {FILTER_OPERATORS, transformFilterStringForApi, transformFilterStringFromApi} from '@/helpers/filters'
+import {
+	hasFilterQuery,
+	transformFilterStringForApi,
+	transformFilterStringFromApi,
+} from '@/helpers/filters'
 import FilterInputDocs from '@/components/project/partials/FilterInputDocs.vue'
 
 const props = withDefaults(defineProps<{
@@ -64,6 +77,7 @@ const props = withDefaults(defineProps<{
 	hasTitle?: boolean,
 	hasFooter?: boolean,
 	changeImmediately?: boolean,
+	filterFromView?: string,
 }>(), {
 	hasTitle: false,
 	hasFooter: true,
@@ -112,7 +126,7 @@ watch(
 		const val = {...value}
 		val.filter = transformFilterStringFromApi(
 			val?.filter || '',
-			labelId => labelStore.getLabelById(labelId)?.title,
+			labelId => labelStore.getLabelById(labelId)?.title || null,
 			projectId => projectStore.projects[projectId]?.title || null,
 		)
 		params.value = val
@@ -151,8 +165,7 @@ function change(event: 'blur' | 'modelValue' | 'always') {
 	let s = ''
 
 	// When the filter does not contain any filter tokens, assume a simple search and redirect the input
-	const hasFilterQueries = FILTER_OPERATORS.find(o => filter.includes(o)) || false
-	if (!hasFilterQueries) {
+	if (!hasFilterQuery(filter)) {
 		s = filter
 	}
 

frontend/src/components/project/partials/ProjectCard.vue

@@ -35,7 +35,7 @@
 		<BaseButton
 			class="project-button"
 			:aria-label="project.title"
-			:title="project.description"
+			:title="textOnlyDescription"
 			:to="{
 				name: 'project.index',
 				params: { projectId: project.id}
@@ -53,11 +53,12 @@
 </template>
 
 <script lang="ts" setup>
+import {computed} from 'vue'
 import type {IProject} from '@/modelTypes/IProject'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 
-import {useProjectBackground} from './useProjectBackground'
+import {useProjectBackground} from '@/composables/useProjectBackground'
 import {useProjectStore} from '@/stores/projects'
 import {getProjectTitle} from '@/helpers/getProjectTitle'
 
@@ -68,6 +69,10 @@ const props = defineProps<{
 const {background, blurHashUrl} = useProjectBackground(() => props.project)
 
 const projectStore = useProjectStore()
+
+const textOnlyDescription = computed(() => {
+	return props.project.description ? props.project.description.replace(/<[^>]*>/g, '') : ''
+})
 </script>
 
 <style lang="scss" scoped>

frontend/src/components/project/partials/ProjectCardGrid.vue

@@ -1,5 +1,8 @@
 <template>
-	<ul class="project-grid">
+	<ul
+		class="project-grid"
+		:class="{ 'show-even-number-of-projects': showEvenNumberOfProjects }"
+	>
 		<li
 			v-for="(item, index) in filteredProjects"
 			:key="`project_${item.id}_${index}`"
@@ -19,11 +22,13 @@ import ProjectCard from './ProjectCard.vue'
 const props = withDefaults(defineProps<{
 	projects: IProject[],
 	showArchived?: boolean,
-	itemLimit?: boolean
+	itemLimit?: boolean,
+	showEvenNumberOfProjects?: boolean,
 }>(), {
 	projects: () => [],
 	showArchived: false,
 	itemLimit: false,
+	showEvenNumberOfProjects: false,
 })
 
 const filteredProjects = computed(() => {
@@ -58,9 +63,13 @@ const filteredProjects = computed(() => {
 
 	@media screen and (min-width: $widescreen) {
 		--project-grid-columns: 5;
+	}
 
-		.project-grid-item:nth-child(6) {
-			display: none;
+	&.show-even-number-of-projects {
+		@media screen and (min-width: $widescreen) {
+			.project-grid-item:nth-child(5) {
+				display: none;
+			}
 		}
 	}
 }

frontend/src/components/project/views/ProjectGantt.vue

@@ -77,7 +77,7 @@ import {useI18n} from 'vue-i18n'
 import type {RouteLocationNormalized} from 'vue-router'
 
 import {useBaseStore} from '@/stores/base'
-import {getFlatpickrLanguage} from '@/helpers/flatpickrLanguage'
+import {useFlatpickrLanguage} from '@/helpers/useFlatpickrLanguage'
 
 import Foo from '@/components/misc/flatpickr/Flatpickr.vue'
 import ProjectWrapper from '@/components/project/ProjectWrapper.vue'
@@ -104,7 +104,7 @@ const GanttChart = createAsyncComponent(() => import('@/components/tasks/GanttCh
 const baseStore = useBaseStore()
 const canWrite = computed(() => baseStore.currentProject?.maxRight > RIGHTS.READ)
 
-const {route} = toRefs(props)
+const {route, viewId} = toRefs(props)
 const {
 	filters,
 	hasDefaultFilters,
@@ -113,7 +113,7 @@ const {
 	isLoading,
 	addTask,
 	updateTask,
-} = useGanttFilters(route, props.viewId)
+} = useGanttFilters(route, viewId)
 
 const DEFAULT_DATE_RANGE_DAYS = 7
 
@@ -153,14 +153,14 @@ const flatPickerDateRange = computed<Date[]>({
 const initialDateRange = [filters.value.dateFrom, filters.value.dateTo]
 
 const {t} = useI18n({useScope: 'global'})
-const flatPickerConfig = computed<Options>(() => ({
+const flatPickerConfig = computed(() => ({
 	altFormat: t('date.altFormatShort'),
 	altInput: true,
 	defaultDate: initialDateRange,
 	enableTime: false,
 	mode: 'range',
-	locale: getFlatpickrLanguage(),
-}))
+	locale: useFlatpickrLanguage().value,
+} as Options))
 </script>
 
 <style lang="scss" scoped>
@@ -218,4 +218,4 @@ const flatPickerConfig = computed<Options>(() => ({
 		font-size: .9rem;
 	}
 }
-</style>
+</style>

frontend/src/components/project/views/ProjectKanban.vue

@@ -9,6 +9,8 @@
 				<FilterPopup
 					v-if="!isSavedFilter(project)"
 					v-model="params"
+					:view-id="viewId"
+					:project-id="projectId"
 				/>
 			</div>
 		</template>
@@ -41,7 +43,7 @@
 									@click="() => unCollapseBucket(bucket)"
 								>
 									<span
-										v-if="view?.doneBucketId === bucket.id"
+										v-if="bucket.id !== 0 && view?.doneBucketId === bucket.id"
 										v-tooltip="$t('project.kanban.doneBucketHint')"
 										class="icon is-small has-text-success mr-2"
 									>
@@ -189,10 +191,12 @@
 											</div>
 											<x-button
 												v-else
+												v-tooltip="bucket.limit > 0 && bucket.count >= bucket.limit ? $t('project.kanban.bucketLimitReached') : ''"
 												class="is-fullwidth has-text-centered"
 												:shadow="false"
 												icon="plus"
 												variant="secondary"
+												:disabled="bucket.limit > 0 && bucket.count >= bucket.limit"
 												@click="toggleShowNewTaskInput(bucket.id)"
 											>
 												{{
@@ -208,6 +212,7 @@
 												class="kanban-card"
 												:task="task"
 												:loading="taskUpdating[task.id] ?? false"
+												:project-id="projectId"
 											/>
 										</div>
 									</template>
@@ -512,6 +517,7 @@ async function updateTaskPosition(e) {
 			taskId: newTask.id,
 		})
 		await taskPositionService.value.update(newPosition)
+		newTask.position = position
 		
 		if(bucketHasChanged) {
 			const updatedTaskBucket = await taskBucketService.value.update(new TaskBucketModel({
@@ -524,8 +530,8 @@ async function updateTaskPosition(e) {
 			if (updatedTaskBucket.bucketId !== newTask.bucketId) {
 				kanbanStore.moveTaskToBucket(newTask, updatedTaskBucket.bucketId)
 			}
-			kanbanStore.setTaskInBucket(newTask)
 		}
+		kanbanStore.setTaskInBucket(newTask)
 
 		// Make sure the first and second task don't both get position 0 assigned
 		if (newTaskIndex === 0 && taskAfter !== null && taskAfter.position === 0) {
@@ -546,6 +552,9 @@ async function updateTaskPosition(e) {
 }
 
 function toggleShowNewTaskInput(bucketId: IBucket['id']) {
+	if (loading.value || taskLoading.value) {
+		return
+	}
 	showNewTaskInput.value[bucketId] = !showNewTaskInput.value[bucketId]
 	newTaskInputFocused.value = false
 }
@@ -564,15 +573,15 @@ async function addTaskToBucket(bucketId: IBucket['id']) {
 	})
 	newTaskText.value = ''
 	kanbanStore.addTaskToBucket(task)
-	scrollTaskContainerToBottom(bucketId)
+	scrollTaskContainerToTop(bucketId)
 }
 
-function scrollTaskContainerToBottom(bucketId: IBucket['id']) {
+function scrollTaskContainerToTop(bucketId: IBucket['id']) {
 	const bucketEl = taskContainerRefs.value[bucketId]
 	if (!bucketEl) {
 		return
 	}
-	bucketEl.scrollTop = bucketEl.scrollHeight
+	bucketEl.scrollTop = 0
 }
 
 async function createNewBucket() {
@@ -766,6 +775,18 @@ function unCollapseBucket(bucket: IBucket) {
 }
 </script>
 
+<style lang="scss" scoped>
+.control.is-loading {
+  &::after {
+    top: 30%;
+    right: 50%;
+    transform: translate(-50%, 0);
+	--loader-border-color: var(--grey-500);
+  }
+}
+</style>
+
+
 <style lang="scss">
 $ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1);
 $bucket-width: 300px;
@@ -788,8 +809,9 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 	}
 
 	@media screen and (max-width: $tablet) {
-		height: calc(#{$crazy-height-calculation} - #{$filter-container-height});
+		height: calc(#{$crazy-height-calculation} - #{$filter-container-height} + 9px);
 		scroll-snap-type: x mandatory;
+		margin: 0 -0.5rem;
 	}
 
 	&-bucket-container {
@@ -867,7 +889,6 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 			// to hide the fact we just made the button smaller.
 			min-width: calc(#{$bucket-width} + 1rem);
 			background: transparent;
-			padding-right: 1rem;
 
 			.button {
 				background: var(--grey-100);
@@ -955,4 +976,4 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 .move-card-leave-active {
 	display: none;
 }
-</style>
+</style>

frontend/src/components/project/views/ProjectList.vue

@@ -9,6 +9,8 @@
 				<FilterPopup
 					v-if="!isSavedFilter(project)"
 					v-model="params"
+					:view-id="viewId"
+					:project-id="projectId"
 					@update:modelValue="prepareFiltersAndLoadTasks()"
 				/>
 			</div>
@@ -35,17 +37,15 @@
 					<Nothing v-if="ctaVisible && tasks.length === 0 && !loading">
 						{{ $t('project.list.empty') }}
 						<ButtonLink
-							v-if="project.id > 0"
+							v-if="project.id > 0 && canWrite"
 							@click="focusNewTaskInput()"
 						>
 							{{ $t('project.list.newTaskCta') }}
 						</ButtonLink>
 					</Nothing>
 
-
 					<draggable
 						v-if="tasks && tasks.length > 0"
-						v-bind="DRAG_OPTIONS"
 						v-model="tasks"
 						group="tasks"
 						handle=".handle"
@@ -59,6 +59,8 @@
 							},
 							type: 'transition-group'
 						}"
+						:animation="100"
+						ghost-class="task-ghost"
 						@start="() => drag = true"
 						@end="saveTaskPosition"
 					>
@@ -73,7 +75,7 @@
 							>
 								<template v-if="canWrite">
 									<span class="icon handle">
-										<Icon icon="grip-lines"/>
+										<Icon icon="grip-lines" />
 									</span>
 								</template>
 							</SingleTaskInProject>
@@ -128,10 +130,6 @@ const props = defineProps<{
 const ctaVisible = ref(false)
 
 const drag = ref(false)
-const DRAG_OPTIONS = {
-	animation: 100,
-	ghostClass: 'task-ghost',
-} as const
 
 const {
 	tasks: allTasks,
@@ -141,7 +139,14 @@ const {
 	loadTasks,
 	params,
 	sortByParam,
-} = useTaskList(() => props.projectId, () => props.viewId, {position: 'asc'})
+} = useTaskList(
+	() => props.projectId,
+	() => props.viewId,
+	{position: 'asc'},
+	() => props.projectId === -1
+		? null
+		: 'subtasks',
+)
 
 const taskPositionService = ref(new TaskPositionService())
 

frontend/src/components/project/views/ProjectTable.vue

@@ -67,7 +67,12 @@
 						</Card>
 					</template>
 				</Popup>
-				<FilterPopup v-model="params" />
+				<FilterPopup
+					v-if="!isSavedFilter({id: projectId})"
+					v-model="params"
+					:view-id="viewId"
+					:project-id="projectId"
+				/>
 			</div>
 		</template>
 
@@ -289,6 +294,8 @@ import type {ITask} from '@/modelTypes/ITask'
 import type {IProject} from '@/modelTypes/IProject'
 import AssigneeList from '@/components/tasks/partials/AssigneeList.vue'
 import type {IProjectView} from '@/modelTypes/IProjectView'
+import { camelCase } from 'change-case'
+import {isSavedFilter} from '@/services/savedFilter'
 
 const props = defineProps<{
 	projectId: IProject['id'],
@@ -355,7 +362,7 @@ function sort(property: keyof SortBy) {
 
 function setActiveColumnsSortParam() {
 	sortByParam.value = Object.keys(sortBy.value)
-		.filter(prop => activeColumns.value[prop])
+		.filter(prop => activeColumns.value[camelCase(prop)])
 		.reduce((obj, key) => {
 			obj[key] = sortBy.value[key]
 			return obj

frontend/src/components/project/views/ViewEditForm.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import type {IProjectView} from '@/modelTypes/IProjectView'
+import type {IFilter} from '@/modelTypes/ISavedFilter'
 import XButton from '@/components/input/Button.vue'
 import FilterInput from '@/components/project/partials/FilterInput.vue'
-import {ref, onBeforeMount} from 'vue'
-import {transformFilterStringForApi, transformFilterStringFromApi} from '@/helpers/filters'
+import {onBeforeMount, ref} from 'vue'
+import {hasFilterQuery, transformFilterStringForApi, transformFilterStringFromApi} from '@/helpers/filters'
 import {useLabelStore} from '@/stores/labels'
 import {useProjectStore} from '@/stores/projects'
 import FilterInputDocs from '@/components/project/partials/FilterInputDocs.vue'
@@ -28,18 +29,24 @@ const labelStore = useLabelStore()
 const projectStore = useProjectStore()
 
 onBeforeMount(() => {
-	const transform = (filterString: string) => transformFilterStringFromApi(
-		filterString,
-		labelId => labelStore.getLabelById(labelId)?.title,
-		projectId => projectStore.projects[projectId]?.title || null,
-	)
+	const transformFilterToString = (filter: IFilter): string => {
+		if (filter.s !== '') {
+			return filter.s
+		}
+
+		return transformFilterStringFromApi(
+			filter.filter,
+			labelId => labelStore.getLabelById(labelId)?.title || null,
+			projectId => projectStore.projects[projectId]?.title || null,
+		)
+	}
 
 	const transformed = {
 		...props.modelValue,
-		filter: transform(props.modelValue.filter),
+		filter: transformFilterToString(props.modelValue.filter),
 		bucketConfiguration: props.modelValue.bucketConfiguration.map(bc => ({
 			title: bc.title,
-			filter: transform(bc.filter),
+			filter: transformFilterToString(bc.filter),
 		})),
 	}
 
@@ -49,21 +56,31 @@ onBeforeMount(() => {
 })
 
 function save() {
-	const transformFilter = (filterQuery: string) => transformFilterStringForApi(
-		filterQuery,
-		labelTitle => labelStore.filterLabelsByQuery([], labelTitle)[0]?.id || null,
-		projectTitle => {
-			const found = projectStore.findProjectByExactname(projectTitle)
-			return found?.id || null
-		},
-	)
+	const transformFilterForApi = (filterQuery: string): IFilter => {
+		const filterString = transformFilterStringForApi(
+			filterQuery,
+			labelTitle => labelStore.getLabelByExactTitle(labelTitle)?.id || null,
+			projectTitle => {
+				const found = projectStore.findProjectByExactname(projectTitle)
+				return found?.id || null
+			},
+		)
+		const filter: IFilter = {}
+		if (hasFilterQuery(filterString)) {
+			filter.filter = filterString
+		} else {
+			filter.s = filterString
+		}
+
+		return filter
+	}
 
 	emit('update:modelValue', {
 		...view.value,
-		filter: transformFilter(view.value?.filter),
+		filter: transformFilterForApi(view.value?.filter || ''),
 		bucketConfiguration: view.value?.bucketConfiguration.map(bc => ({
 			title: bc.title,
-			filter: transformFilter(bc.filter),
+			filter: transformFilterForApi(bc.filter || ''),
 		})),
 	})
 }
@@ -231,7 +248,7 @@ function handleBubbleSave() {
 					<XButton
 						variant="secondary"
 						icon="plus"
-						@click="() => view.bucketConfiguration.push({title: '', filter: ''})"
+						@click="() => view.bucketConfiguration.push({title: '', filter: {filter: ''}})"
 					>
 						{{ $t('project.kanban.addBucket') }}
 					</XButton>

frontend/src/components/sharing/LinkSharing.vue

@@ -100,7 +100,9 @@
 				<thead>
 					<tr>
 						<th />
-						<th>{{ $t('project.share.links.view') }}</th>
+						<th v-if="availableViews.length > 0">
+							{{ $t('project.share.links.view') }}
+						</th>
 						<th>{{ $t('project.share.attributes.delete') }}</th>
 					</tr>
 				</thead>
@@ -150,7 +152,7 @@
 							<div class="field has-addons no-input-mobile">
 								<div class="control">
 									<input
-										:value="getShareLink(s.hash, selectedView[s.id])"
+										:value="shareLinks[s.id]"
 										class="input"
 										readonly
 										type="text"
@@ -160,7 +162,7 @@
 									<x-button
 										v-tooltip="$t('misc.copy')"
 										:shadow="false"
-										@click="copy(getShareLink(s.hash, selectedView[s.id]))"
+										@click="copy(shareLinks[s.id])"
 									>
 										<span class="icon">
 											<Icon icon="paste" />
@@ -169,9 +171,9 @@
 								</div>
 							</div>
 						</td>
-						<td>
+						<td v-if="availableViews.length > 0">
 							<div class="select">
-								<select v-model="selectedView[s.id]">
+								<select v-model="selectedViews[s.id]">
 									<option
 										v-for="(view) in availableViews"
 										:key="view.id"
@@ -251,10 +253,6 @@ const showDeleteModal = ref(false)
 const linkIdToDelete = ref(0)
 const showNewForm = ref(false)
 
-type SelectedViewMapper = Record<IProject['id'], IProjectView['id']>
-
-const selectedView = ref<SelectedViewMapper>({})
-
 const projectStore = useProjectStore()
 
 const availableViews = computed<IProjectView[]>(() => projectStore.projects[props.projectId]?.views || [])
@@ -274,13 +272,28 @@ async function load(projectId: IProject['id']) {
 		return
 	}
 
-	const links = await linkShareService.getAll({projectId})
-	links.forEach((l: ILinkShare) => {
-		selectedView.value[l.id] = availableViews.value[0].id
-	})
-	linkShares.value = links
+	linkShares.value = await linkShareService.getAll({projectId})
 }
 
+type SelectedViewMapper = Record<IProject['id'], IProjectView['id']>
+
+const selectedViews = ref<SelectedViewMapper>({})
+
+watch(() => ([linkShares.value, availableViews.value]), ([newLinkShares, newProjectViews]) => {
+	if (!newLinkShares?.length || !newProjectViews?.length) {
+		selectedViews.value = {}
+		return
+	}
+
+	newLinkShares.forEach((linkShare) => {
+		selectedViews.value[linkShare.id] = newProjectViews.length > 0 ? newProjectViews[0].id : null
+	})
+}, {
+	immediate:true,
+	deep: true,
+})
+
+
 async function add(projectId: IProject['id']) {
 	const newLinkShare = new LinkShareModel({
 		right: selectedRight.value,
@@ -310,9 +323,17 @@ async function remove(projectId: IProject['id']) {
 	}
 }
 
-function getShareLink(hash: string, viewId: IProjectView['id']) {
-	return frontendUrl.value + 'share/' + hash + '/auth?view=' + viewId
+function getShareLink(hash: string, viewId: IProjectView['id']|null) {
+	return frontendUrl.value + 'share/' + hash + '/auth' + (viewId ? '?view=' + viewId : '')
 }
+
+const shareLinks = computed(() => {
+	return linkShares.value.reduce((links, linkShare) => {
+			links[linkShare.id] = getShareLink(linkShare.hash, selectedViews.value[linkShare.id] ?? null)
+			return links
+		}, {} as {[id: string]: string },
+	)
+})
 </script>
 
 <style lang="scss" scoped>
@@ -320,4 +341,4 @@ function getShareLink(hash: string, viewId: IProjectView['id']) {
 .sharables-project:not(.card-content) {
 	overflow-y: auto
 }
-</style>
+</style>

frontend/src/components/sharing/UserTeam.vue

@@ -250,7 +250,6 @@ const sharableName = computed(() => {
 
 if (props.shareType === 'user') {
 	searchService = shallowReactive(new UserService())
-	// eslint-disable-next-line vue/no-ref-as-operand
 	sharable = ref(new UserModel())
 	searchLabel.value = 'username'
 
@@ -262,7 +261,6 @@ if (props.shareType === 'user') {
 	}
 } else if (props.shareType === 'team') {
 	searchService = new TeamService()
-	// eslint-disable-next-line vue/no-ref-as-operand
 	sharable = ref(new TeamModel())
 	searchLabel.value = 'name'
 

frontend/src/components/tasks/AddTask.vue

@@ -13,7 +13,7 @@
 					:class="{'textarea-empty': newTaskTitle === ''}"
 					:placeholder="$t('project.list.addPlaceholder')"
 					rows="1"
-					@keyup="resetEmptyTitleError"
+					@keydown="resetEmptyTitleError"
 					@keydown.enter="handleEnter"
 				/>
 				<span class="icon is-small is-left">
@@ -51,6 +51,7 @@
 import {computed, ref} from 'vue'
 import {useI18n} from 'vue-i18n'
 import {useElementHover} from '@vueuse/core'
+import {useRouter} from 'vue-router'
 
 import {RELATION_KIND} from '@/types/IRelationKind'
 import type {ITask} from '@/modelTypes/ITask'
@@ -66,6 +67,8 @@ import {useAuthStore} from '@/stores/auth'
 import {useTaskStore} from '@/stores/tasks'
 
 import {useAutoHeightTextarea} from '@/composables/useAutoHeightTextarea'
+import TaskService from '@/services/task'
+import TaskModel from '@/models/task'
 
 const props = withDefaults(defineProps<{
 	defaultPosition?: number,
@@ -81,6 +84,7 @@ const {textarea: newTaskInput} = useAutoHeightTextarea(newTaskTitle)
 const {t} = useI18n({useScope: 'global'})
 const authStore = useAuthStore()
 const taskStore = useTaskStore()
+const router = useRouter()
 
 // enable only if we don't have a modal
 // onStartTyping(() => {
@@ -95,13 +99,10 @@ const taskAddHovered = useElementHover(taskAdd)
 
 const errorMessage = ref('')
 
-function resetEmptyTitleError(e: KeyboardEvent) {
-	if (
-		(e.which <= 90 && e.which >= 48 || e.which >= 96 && e.which <= 105)
-		&& newTaskTitle.value !== ''
-	) {
-		errorMessage.value = ''
-	}
+function resetEmptyTitleError() {
+	if (!newTaskTitle.value) {
+        errorMessage.value = ''
+    }
 }
 
 const loading = computed(() => taskStore.isLoading)
@@ -129,21 +130,55 @@ async function addTask() {
 	const allLabels = tasksToCreate.map(({title}) => getLabelsFromPrefix(title, authStore.settings.frontendSettings.quickAddMagicMode) ?? [])
 	await taskStore.ensureLabelsExist(allLabels.flat())
 
-	const newTasks = tasksToCreate.map(async ({title, project}) => {
+	const taskCollectionService = new TaskService()
+	const projectIndices = new Map<number, number>()
+
+	let currentProjectId = authStore.settings.defaultProjectId
+	if (typeof router.currentRoute.value.params.projectId !== 'undefined') {
+		currentProjectId = Number(router.currentRoute.value.params.projectId)
+	}
+
+	// Create a map of project indices before creating tasks
+	if (tasksToCreate.length > 1) {
+		for (const {project} of tasksToCreate) {
+			const projectId = project !== null
+				? await taskStore.findProjectId({project, projectId: 0})
+				: currentProjectId
+
+			if (!projectIndices.has(projectId)) {
+				const newestTask = await taskCollectionService.getAll(new TaskModel({}), {
+					sort_by: ['id'],
+					order_by: ['desc'],
+					per_page: 1,
+					filter: `project_id = ${projectId}`,
+				})
+				projectIndices.set(projectId, newestTask[0]?.index || 0)
+			}
+		}
+	}
+
+	const newTasks = tasksToCreate.map(async ({title, project}, index) => {
 		if (title === '') {
 			return
 		}
 
 		// If the task has a project specified, make sure to use it
-		let projectId = null
-		if (project !== null) {
-			projectId = await taskStore.findProjectId({project, projectId: 0})
+		const projectId = project !== null
+			? await taskStore.findProjectId({project, projectId: 0})
+			: currentProjectId
+
+		// Calculate new index for this task per project
+		let taskIndex: number | undefined
+		if (tasksToCreate.length > 1) {
+			const lastIndex = projectIndices.get(projectId)
+			taskIndex = lastIndex + index + 1
 		}
 
 		const task = await taskStore.createNewTask({
 			title,
 			projectId: projectId || authStore.settings.defaultProjectId,
 			position: props.defaultPosition,
+			index: taskIndex,
 		})
 		createdTasks[title] = task
 		return task
@@ -163,7 +198,6 @@ async function addTask() {
 
 			const isParent = allParentTasks.includes(t.title)
 			if (t.parent === null && !isParent) {
-				emit('taskAdded', createdTask)
 				return
 			}
 
@@ -177,23 +211,37 @@ async function addTask() {
 				otherTaskId: createdParentTask.id,
 				relationKind: RELATION_KIND.PARENTTASK,
 			}))
-
-			createdTask.relatedTasks[RELATION_KIND.PARENTTASK] = [{
+			
+			if (typeof createdTask.relatedTasks === 'undefined') {
+				createdTask.relatedTasks = {}
+			}
+			if (typeof createdTask.relatedTasks[RELATION_KIND.PARENTTASK] === 'undefined') {
+				createdTask.relatedTasks[RELATION_KIND.PARENTTASK] = []
+			}
+			createdTask.relatedTasks[RELATION_KIND.PARENTTASK].push({
 				...createdParentTask,
 				relatedTasks: {}, // To avoid endless references
-			}]
-			// we're only emitting here so that the relation shows up in the project
-			emit('taskAdded', createdTask)
+			})
 
-			createdParentTask.relatedTasks[RELATION_KIND.SUBTASK] = [{
+			if (typeof createdParentTask.relatedTasks === 'undefined') {
+				createdParentTask.relatedTasks = {}
+			}
+			if (typeof createdParentTask.relatedTasks[RELATION_KIND.SUBTASK] === 'undefined') {
+				createdParentTask.relatedTasks[RELATION_KIND.SUBTASK] = []
+			}
+			createdParentTask.relatedTasks[RELATION_KIND.SUBTASK].push({
 				...createdTask,
 				relatedTasks: {}, // To avoid endless references
-			}]
-			emit('taskAdded', createdParentTask)
+			})
 
 			return rel
 		})
 		await Promise.all(relations)
+		
+		// We're emitting all tasks at once at the end to avoid the same task showing up multiple times
+		Object.values(createdTasks).forEach(task => {
+			emit('taskAdded', task)
+		})
 	} catch (e) {
 		newTaskTitle.value = taskTitleBackup
 		if (e?.message === 'NO_PROJECT') {
@@ -226,7 +274,7 @@ defineExpose({
 
 <style lang="scss" scoped>
 .task-add,
-// overwrite bulma styles
+	// overwrite bulma styles
 .task-add .add-task__field {
 	margin-bottom: 0;
 }

frontend/src/components/tasks/partials/AssigneeList.vue

@@ -2,23 +2,23 @@
 import type {IUser} from '@/modelTypes/IUser'
 import BaseButton from '@/components/base/BaseButton.vue'
 import User from '@/components/misc/User.vue'
-import {computed} from 'vue'
 
-const {
-	assignees,
-	remove,
-	disabled,
-	avatarSize = 30,
-	inline = false,
-} = defineProps<{
+withDefaults(defineProps<{
 	assignees: IUser[],
-	remove?: (user: IUser) => void,
 	disabled?: boolean,
 	avatarSize?: number,
 	inline?: boolean,
-}>()
+	/** add this boolean prop to enable removal of assignees */
+	canRemove?: boolean,
+}>(), {
+	avatarSize: 30,
+	inline: false,
+	canRemove: false,
+})
 
-const hasDelete = computed(() => typeof remove !== 'undefined' && !disabled)
+defineEmits<{
+	remove: [user: IUser],
+}>()
 </script>
 
 <template>
@@ -36,13 +36,13 @@ const hasDelete = computed(() => typeof remove !== 'undefined' && !disabled)
 				:avatar-size="avatarSize"
 				:show-username="false"
 				:user="user"
-				:class="{'m-2': hasDelete}"
+				:class="{'m-2': canRemove && !disabled}"
 			/>
 			<BaseButton
-				v-if="hasDelete"
+				v-if="canRemove && !disabled"
 				:key="'delete'+user.id"
 				class="remove-assignee"
-				@click="remove(user)"
+				@click="$emit('remove', user)"
 			>
 				<Icon icon="times" />
 			</BaseButton>

frontend/src/components/tasks/partials/Attachments.vue

@@ -180,7 +180,7 @@ import ProgressBar from '@/components/misc/ProgressBar.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 
 import AttachmentService from '@/services/attachment'
-import {SUPPORTED_IMAGE_SUFFIX} from '@/models/attachment'
+import {canPreview} from '@/models/attachment'
 import type {IAttachment} from '@/modelTypes/IAttachment'
 import type {ITask} from '@/modelTypes/ITask'
 
@@ -274,10 +274,6 @@ async function viewOrDownload(attachment: IAttachment) {
 	}
 }
 
-function canPreview(attachment: IAttachment): boolean {
-	return SUPPORTED_IMAGE_SUFFIX.some((suffix) => attachment.file.name.toLowerCase().endsWith(suffix))
-}
-
 const copy = useCopyToClipboard()
 
 function copyUrl(attachment: IAttachment) {

frontend/src/components/tasks/partials/Comments.vue

@@ -1,7 +1,8 @@
 <template>
 	<div
 		v-if="enabled"
-		class="content details"
+		ref="commentsRef"
+		class="content details comments-container"
 	>
 		<h3
 			v-if="canWrite || comments.length > 0"
@@ -15,13 +16,14 @@
 		<div class="comments">
 			<span
 				v-if="taskCommentService.loading && saving === null && !creating"
-				class="is-inline-flex is-align-items-center"
+				class="is-flex is-align-items-center my-4 ml-2"
 			>
 				<span class="loader is-inline-block mr-2" />
 				{{ $t('task.comment.loading') }}
 			</span>
 			<div
 				v-for="c in comments"
+				:id="`comment-${c.id}`"
 				:key="c.id"
 				class="media comment"
 			>
@@ -56,6 +58,13 @@
 						>
 							· {{ $t('task.comment.edited', {date: formatDateSince(c.updated)}) }}
 						</span>
+						<a
+							v-tooltip="$t('task.comment.permalink')"
+							:href="`#comment-${c.id}`"
+							class="comment-permalink"
+							:title="$t('task.comment.permalink')"
+							@click.prevent.stop="copy(getCommentUrl(`${c.id}`))"
+						><Icon icon="link" /></a>
 						<CustomTransition name="fade">
 							<span
 								v-if="
@@ -107,6 +116,14 @@
 					/>
 				</div>
 			</div>
+
+			<PaginationEmit
+				v-if="taskCommentService.totalPages > 1"
+				:total-pages="taskCommentService.totalPages"
+				:current-page="currentPage"
+				@pageChanged="changePage"
+			/>
+
 			<div
 				v-if="canWrite"
 				class="media comment d-print-none"
@@ -160,6 +177,7 @@
 			</div>
 		</div>
 
+
 		<Modal
 			:enabled="showDeleteModal"
 			@close="showDeleteModal = false"
@@ -185,6 +203,7 @@ import {useI18n} from 'vue-i18n'
 
 import CustomTransition from '@/components/misc/CustomTransition.vue'
 import Editor from '@/components/input/AsyncEditor'
+import PaginationEmit from '@/components/misc/PaginationEmit.vue'
 
 import TaskCommentService from '@/services/taskComment'
 import TaskCommentModel from '@/models/taskComment'
@@ -199,6 +218,7 @@ import {getAvatarUrl, getDisplayName} from '@/models/user'
 import {useConfigStore} from '@/stores/config'
 import {useAuthStore} from '@/stores/auth'
 import Reactions from '@/components/input/Reactions.vue'
+import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 
 const props = withDefaults(defineProps<{
 	taskId: number,
@@ -207,6 +227,8 @@ const props = withDefaults(defineProps<{
 	canWrite: true,
 })
 
+const copy = useCopyToClipboard()
+
 const {t} = useI18n({useScope: 'global'})
 const configStore = useConfigStore()
 const authStore = useAuthStore()
@@ -242,6 +264,12 @@ const actions = computed(() => {
 	])))
 })
 
+const frontendUrl = computed(() => configStore.frontendUrl)
+
+const currentPage = ref(1)
+
+const commentsRef = ref<HTMLElement | null>(null)
+
 async function attachmentUpload(files: File[] | FileList): (Promise<string[]>) {
 
 	const uploadPromises: Promise<string>[] = []
@@ -267,12 +295,21 @@ async function loadComments(taskId: ITask['id']) {
 	newComment.taskId = taskId
 	commentEdit.taskId = taskId
 	commentToDelete.taskId = taskId
-	comments.value = await taskCommentService.getAll({taskId})
+	comments.value = await taskCommentService.getAll({taskId}, {}, currentPage.value)
+}
+
+async function changePage(page: number) {
+	commentsRef.value?.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
+	currentPage.value = page
+	await loadComments(props.taskId)
 }
 
 watch(
 	() => props.taskId,
-	loadComments,
+	() => {
+		currentPage.value = 1 // Reset to first page when task changes
+		loadComments(props.taskId)
+	},
 	{immediate: true},
 )
 
@@ -364,6 +401,10 @@ async function deleteComment(commentToDelete: ITaskComment) {
 		showDeleteModal.value = false
 	}
 }
+
+function getCommentUrl(commentId: string) {
+	return `${frontendUrl.value}${location.pathname}${location.search}#comment-${commentId}`
+}
 </script>
 
 <style lang="scss" scoped>
@@ -391,10 +432,23 @@ async function deleteComment(commentToDelete: ITaskComment) {
 	}
 
 
-	span {
+	span,
+	.comment-permalink {
 		font-size: .75rem;
 		line-height: 1;
 	}
+
+	.comment-permalink {
+		font-size: 1rem;
+		border: 1px solid transparent;
+		padding: 0.25rem;
+		border-radius: 1rem;
+		color: var(--grey, hsl(0, 0%, 48%));
+	}
+	.comment-permalink:hover {
+		color: var(--grey-dark, hsl(0, 0%, 29%));
+		border-color: var(--grey-dark, hsl(0, 0%, 29%));
+	}
 }
 
 .image.is-avatar {
@@ -404,4 +458,8 @@ async function deleteComment(commentToDelete: ITaskComment) {
 .media-content {
 	width: calc(100% - 48px - 2rem);
 }
+
+.comments-container {
+	scroll-margin-top: 4rem;
+}
 </style>

frontend/src/components/tasks/partials/DeferTask.vue

@@ -44,7 +44,7 @@ import flatPickr from 'vue-flatpickr-component'
 
 import TaskService from '@/services/task'
 import type {ITask} from '@/modelTypes/ITask'
-import { getFlatpickrLanguage } from '@/helpers/flatpickrLanguage'
+import {useFlatpickrLanguage} from '@/helpers/useFlatpickrLanguage'
 
 const props = defineProps<{
 	modelValue: ITask,
@@ -101,7 +101,7 @@ const flatPickerConfig = computed(() => ({
 	enableTime: true,
 	time_24hr: true,
 	inline: true,
-	locale: getFlatpickrLanguage(),
+	locale: useFlatpickrLanguage().value,
 }))
 
 function deferDays(days: number) {
@@ -135,18 +135,8 @@ async function updateDueDate() {
 $defer-task-max-width: 350px + 100px;
 
 .defer-task {
-	position: absolute;
 	width: 100%;
 	max-width: $defer-task-max-width;
-	border-radius: $radius;
-	border: 1px solid var(--grey-200);
-	padding: 1rem;
-	margin: 1rem;
-	background: var(--white);
-	color: var(--text);
-	cursor: default;
-	z-index: 10;
-	box-shadow: var(--shadow-lg);
 
 	@media screen and (max-width: ($defer-task-max-width)) {
 		left: .5rem;

frontend/src/components/tasks/partials/Description.vue

@@ -38,7 +38,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref, computed, watch, onBeforeUnmount} from 'vue'
+import {ref, computed, watchEffect, onBeforeUnmount} from 'vue'
 
 import CustomTransition from '@/components/misc/CustomTransition.vue'
 import Editor from '@/components/input/AsyncEditor'
@@ -46,21 +46,25 @@ import Editor from '@/components/input/AsyncEditor'
 import type {ITask} from '@/modelTypes/ITask'
 import {useTaskStore} from '@/stores/tasks'
 
-type AttachmentUploadFunction = (file: File, onSuccess: (attachmentUrl: string) => void) => Promise<string>
+export type AttachmentUploadFunction = (file: File, onSuccess: (attachmentUrl: string) => void) => Promise<string>
 
-const {
-	modelValue,
-	attachmentUpload,
-	canWrite,
-} = defineProps<{
+const props = withDefaults(defineProps<{
 	modelValue: ITask,
 	attachmentUpload: AttachmentUploadFunction,
 	canWrite: boolean,
+}>(), {
+	canWrite: true,
+})
+
+const emit = defineEmits<{
+	'update:modelValue': [value: ITask]
 }>()
 
-const emit = defineEmits(['update:modelValue'])
-
 const description = ref<string>('')
+watchEffect(() => {
+		description.value = props.modelValue.description
+})
+
 const saved = ref(false)
 
 // Since loading is global state, this variable ensures we're only showing the saving icon when saving the description.
@@ -69,14 +73,6 @@ const saving = ref(false)
 const taskStore = useTaskStore()
 const loading = computed(() => taskStore.isLoading)
 
-watch(
-	() => modelValue.description,
-	value => {
-		description.value = value
-	},
-	{immediate: true},
-)
-
 const changeTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
 
 async function saveWithDelay() {
@@ -99,13 +95,12 @@ async function save() {
 	if (changeTimeout.value !== null) {
 		clearTimeout(changeTimeout.value)
 	}
-
+	saved.value = false
 	saving.value = true
 
 	try {
-		// FIXME: don't update state from internal.
 		const updated = await taskStore.update({
-			...modelValue,
+			...props.modelValue,
 			description: description.value,
 		})
 		emit('update:modelValue', updated)
@@ -119,13 +114,12 @@ async function save() {
 	}
 }
 
-async function uploadCallback(files: File[] | FileList): (Promise<string[]>) {
-
+async function uploadCallback(files: File[] | FileList): Promise<string[]> {
 	const uploadPromises: Promise<string>[] = []
 
 	files.forEach((file: File) => {
 		const promise = new Promise<string>((resolve) => {
-			attachmentUpload(file, (uploadedFileUrl: string) => resolve(uploadedFileUrl))
+			props.attachmentUpload(file, (uploadedFileUrl: string) => resolve(uploadedFileUrl))
 		})
 
 		uploadPromises.push(promise)

frontend/src/components/tasks/partials/EditAssignees.vue

@@ -16,8 +16,9 @@
 		<template #items="{items}">
 			<AssigneeList
 				:assignees="items"
-				:remove="removeAssignee"
 				:disabled="disabled"
+				can-remove
+				@remove="removeAssignee"
 			/>
 		</template>
 		<template #searchResult="{option: user}">

frontend/src/components/tasks/partials/EditLabels.vue

@@ -10,6 +10,7 @@
 		:create-placeholder="$t('task.label.createPlaceholder')"
 		:search-delay="10"
 		:close-after-select="false"
+		:disabled="disabled"
 		@search="findLabel"
 		@select="addLabel"
 		@create="createAndAddLabel"
@@ -21,6 +22,7 @@
 			>
 				<span>{{ label.title }}</span>
 				<BaseButton
+					v-if="!disabled"
 					v-cy="'taskDetail.removeLabel'"
 					class="delete is-small"
 					@click="removeLabel(label)"

frontend/src/components/tasks/partials/FilePreview.vue

@@ -20,9 +20,9 @@
 
 <script setup lang="ts">
 import {ref, shallowReactive, watchEffect} from 'vue'
-import AttachmentService from '@/services/attachment'
+import AttachmentService, {PREVIEW_SIZE} from '@/services/attachment'
 import type {IAttachment} from '@/modelTypes/IAttachment'
-import {SUPPORTED_IMAGE_SUFFIX} from '@/models/attachment'
+import {canPreview} from '@/models/attachment'
 
 const props = defineProps<{
 	modelValue?: IAttachment
@@ -33,13 +33,9 @@ const blobUrl = ref<string | undefined>(undefined)
 
 watchEffect(async () => {
 	if (props.modelValue && canPreview(props.modelValue)) {
-		blobUrl.value = await attachmentService.getBlobUrl(props.modelValue)
+		blobUrl.value = await attachmentService.getBlobUrl(props.modelValue, PREVIEW_SIZE.MD)
 	}
 })
-
-function canPreview(attachment: IAttachment): boolean {
-	return SUPPORTED_IMAGE_SUFFIX.some((suffix) => attachment.file.name.toLowerCase().endsWith(suffix))
-}
 </script>
 
 <style scoped lang="scss">

frontend/src/components/tasks/partials/Heading.vue

@@ -1,20 +1,27 @@
 <template>
 	<div class="heading">
-		<div class="flex is-align-items-center">
-			<BaseButton @click="copyUrl">
-				<h1 class="title task-id">
-					{{ textIdentifier }}
-				</h1>
-			</BaseButton>
+		<div class="tw-flex tw-items-center md:tw-items-stretch tw-flex-col tw-gap-1 task-properties">
+			<div class="tw-flex tw-items-center tw-gap-2">
+				<ColorBubble
+					v-if="task.hexColor !== ''"
+					:color="getHexColor(task.hexColor)"
+				/>
+				<BaseButton @click="copyUrl">
+					<h1 class="title task-id">
+						{{ textIdentifier }}
+					</h1>
+				</BaseButton>
+			</div>
 			<Done
-				class="heading__done"
 				:is-done="task.done"
 			/>
-			<ColorBubble
-				v-if="task.hexColor !== ''"
-				:color="getHexColor(task.hexColor)"
-				class="ml-2"
-			/>
+			<BaseButton
+				v-if="hasClose"
+				class="close"
+				@click="$emit('close')"
+			>
+				<Icon icon="times" />
+			</BaseButton>
 		</div>
 		<h1
 			class="title input"
@@ -23,9 +30,17 @@
 			:spellcheck="false"
 			@blur="save(($event.target as HTMLInputElement).textContent as string)"
 			@keydown.enter.prevent.stop="($event.target as HTMLInputElement).blur()"
+			@keydown.esc.prevent.stop="cancel($event.target as HTMLInputElement)"
 		>
 			{{ task.title.trim() }}
 		</h1>
+		<BaseButton
+			v-if="hasClose"
+			class="close"
+			@click="$emit('close')"
+		>
+			<Icon icon="times" />
+		</BaseButton>
 		<CustomTransition name="fade">
 			<span
 				v-if="loading && saving"
@@ -66,12 +81,15 @@ import {getHexColor, getTaskIdentifier} from '@/models/task'
 const props = withDefaults(defineProps<{
 	task: ITask,
 	canWrite: boolean | undefined,
+	hasClose: boolean | undefined,
 }>(), {
 	canWrite: false,
+	hasClose: false,
 })
 
 const emit = defineEmits<{
-	'update:task': [task: ITask]
+	'update:task': [task: ITask],
+	'close': [],
 }>()
 
 const router = useRouter()
@@ -116,6 +134,11 @@ async function save(title: string) {
 		saving.value = false
 	}
 }
+
+async function cancel(element: HTMLInputElement) {
+  element.textContent = props.task.title
+  element.blur()
+}
 </script>
 
 <style lang="scss" scoped>
@@ -138,14 +161,11 @@ async function save(title: string) {
 .title.input {
 	// 1.8rem is the font-size, 1.125 is the line-height, .3rem padding everywhere, 1px border around the whole thing.
 	min-height: calc(1.8rem * 1.125 + .6rem + 2px);
+	margin-right: 0;
 
 	@media screen and (max-width: $tablet) {
 		margin: 0 -.3rem .5rem -.3rem; // the title has 0.3rem padding - this make the text inside of it align with the rest
 	}
-
-	@media screen and (min-width: $tablet) and (max-width: #{$desktop + $close-button-min-space}) {
-		width: calc(100% - 6.5rem);
-	}
 }
 
 .title.task-id {
@@ -153,12 +173,39 @@ async function save(title: string) {
 	white-space: nowrap;
 }
 
-.heading__done {
-	margin-left: .5rem;
-}
-
 .color-bubble {
 	height: .75rem;
 	width: .75rem;
 }
+
+.close {
+	font-size: 2rem;
+	margin-left: 0.5rem;
+	line-height: 1;
+
+	@media screen and (max-width: $tablet) {
+		display: none;
+	}
+	
+	@media screen and (min-width: #{$desktop + 1px}) {
+		display: none;
+	}
+}
+
+.task-properties .close {
+	display: none;
+	position: absolute;
+	right: 1.25rem;
+	top: 1.1rem;
+
+	@media screen and (max-width: $tablet) {
+		display: block;
+	}
+}
+
+.task-properties {
+	@media screen and (max-width: $tablet) {
+		flex-direction: row;
+	}
+}
 </style>

frontend/src/components/tasks/partials/KanbanCard.vue

@@ -16,22 +16,33 @@
 			v-if="coverImageBlobUrl"
 			:src="coverImageBlobUrl"
 			alt=""
-			class="cover-image"
+			class="tw-w-full"
 		>
 		<div class="p-2">
-			<span class="task-id">
-				<Done
-					class="kanban-card__done"
-					:is-done="task.done"
-					variant="small"
-				/>
-				<template v-if="task.identifier === ''">
-					#{{ task.index }}
-				</template>
-				<template v-else>
-					{{ task.identifier }}
-				</template>
-			</span>
+			<div class="task-id tw-flex tw-justify-between">
+				<div>
+					<Done
+						class="kanban-card__done"
+						:is-done="task.done"
+						variant="small"
+					/>
+					<template v-if="task.identifier === ''">
+						#{{ task.index }}
+					</template>
+					<template v-else>
+						{{ task.identifier }}
+					</template>
+					<span
+						v-if="showTaskPosition"
+						class="tw-text-red-600 tw-pl-2"
+					>
+						{{ task.position }}
+					</span>
+				</div>
+				<div v-if="projectTitle">
+					{{ projectTitle }}
+				</div>
+			</div>
 			<span
 				v-if="task.dueDate > 0"
 				v-tooltip="formatDateLong(task.dueDate)"
@@ -93,7 +104,7 @@
 </template>
 
 <script lang="ts" setup>
-import {ref, computed, watch} from 'vue'
+import {computed, ref, watch} from 'vue'
 import {useRouter} from 'vue-router'
 
 import PriorityLabel from '@/components/tasks/partials/PriorityLabel.vue'
@@ -104,18 +115,21 @@ import ChecklistSummary from './ChecklistSummary.vue'
 
 import {getHexColor} from '@/models/task'
 import type {ITask} from '@/modelTypes/ITask'
+import type {IProject} from '@/modelTypes/IProject'
 import {SUPPORTED_IMAGE_SUFFIX} from '@/models/attachment'
-import AttachmentService from '@/services/attachment'
+import AttachmentService, {PREVIEW_SIZE} from '@/services/attachment'
 
-import {formatDateLong, formatISO, formatDateSince} from '@/helpers/time/formatDate'
+import {formatDateLong, formatDateSince, formatISO} from '@/helpers/time/formatDate'
 import {colorIsDark} from '@/helpers/color/colorIsDark'
 import {useTaskStore} from '@/stores/tasks'
 import AssigneeList from '@/components/tasks/partials/AssigneeList.vue'
 import {playPopSound} from '@/helpers/playPop'
 import {isEditorContentEmpty} from '@/helpers/editorContentEmpty'
+import {useProjectStore} from '@/stores/projects'
 
 const props = withDefaults(defineProps<{
 	task: ITask,
+	projectId: IProject['id'],
 	loading: boolean,
 }>(), {
 	loading: false,
@@ -127,6 +141,19 @@ const loadingInternal = ref(false)
 
 const color = computed(() => getHexColor(props.task.hexColor))
 
+const projectStore = useProjectStore()
+
+const projectTitle = computed(() => {
+	if (props.projectId === props.task.projectId) {
+		return false
+	}
+	
+	const project = projectStore.projects[props.task.projectId]
+	return project?.title
+})
+
+const showTaskPosition = computed(() => window.DEBUG_TASK_POSITION)
+
 async function toggleTaskDone(task: ITask) {
 	loadingInternal.value = true
 	try {
@@ -165,7 +192,7 @@ async function maybeDownloadCoverImage() {
 	}
 
 	const attachmentService = new AttachmentService()
-	coverImageBlobUrl.value = await attachmentService.getBlobUrl(attachment)
+	coverImageBlobUrl.value = await attachmentService.getBlobUrl(attachment, PREVIEW_SIZE.LG)
 }
 
 watch(

frontend/src/components/tasks/partials/PriorityLabel.vue

@@ -1,14 +1,17 @@
 <template>
 	<span
 		v-if="!done && (showAll || priority >= priorities.HIGH)"
-		:class="{'not-so-high': priority === priorities.HIGH, 'high-priority': priority >= priorities.HIGH}"
+		:class="{
+			'not-so-high': priority === priorities.HIGH,
+			'high-priority': priority >= priorities.HIGH
+		}"
 		class="priority-label"
 	>
 		<span
 			v-if="priority >= priorities.HIGH"
 			class="icon"
 		>
-			<Icon icon="exclamation" />
+			<Icon icon="exclamation-circle" />
 		</span>
 		<span>
 			<template v-if="priority === priorities.UNSET">{{ $t('task.priority.unset') }}</template>
@@ -18,12 +21,6 @@
 			<template v-if="priority === priorities.URGENT">{{ $t('task.priority.urgent') }}</template>
 			<template v-if="priority === priorities.DO_NOW">{{ $t('task.priority.doNow') }}</template>
 		</span>
-		<span
-			v-if="priority === priorities.DO_NOW"
-			class="icon pr-0"
-		>
-			<Icon icon="exclamation" />
-		</span>
 	</span>
 </template>
 
@@ -42,18 +39,18 @@ withDefaults(defineProps<{
 </script>
 
 <style lang="scss" scoped>
-span.high-priority {
+.high-priority {
 	color: var(--danger);
 	width: auto !important; // To override the width set in tasks
+}
 
-	.icon {
-		vertical-align: top;
-		width: auto !important;
-		padding: 0 .5rem;
-	}
+.not-so-high {
+	color: var(--warning);
+}
 
-	&.not-so-high {
-		color: var(--warning);
-	}
+.icon {
+	vertical-align: top;
+	width: auto !important;
+	padding-right: .5rem;
 }
 </style>

frontend/src/components/tasks/partials/ProjectSearch.vue

@@ -36,9 +36,11 @@ import Multiselect from '@/components/input/Multiselect.vue'
 const props = withDefaults(defineProps<{
 	modelValue?: IProject
 	savedFiltersOnly?: boolean
+	filter?: (project: IProject) => boolean,
 }>(), {
 	modelValue: () => new ProjectModel(),
 	savedFiltersOnly: false,
+	filter: () => true,
 })
 
 const emit = defineEmits<{
@@ -65,11 +67,13 @@ function findProjects(query: string) {
 	}
 	
 	if (props.savedFiltersOnly) {
-		foundProjects.value = projectStore.searchSavedFilter(query)
+		const found = projectStore.searchSavedFilter(query)
+		foundProjects.value = found.filter(props.filter)
 		return
 	}
 	
-	foundProjects.value = projectStore.searchProject(query)
+	const found = projectStore.searchProject(query)
+	foundProjects.value = found.filter(props.filter)
 }
 
 function select(p: IProject | null) {

frontend/src/components/tasks/partials/QuickAddMagic.vue

@@ -62,6 +62,7 @@
 				<ul>
 					<!-- Not localized because these only work in english -->
 					<li>Today</li>
+					<li>Tonight</li>
 					<li>Tomorrow</li>
 					<li>Next monday</li>
 					<li>This weekend</li>

frontend/src/components/tasks/partials/RelatedTasks.vue

@@ -123,10 +123,10 @@
 						<FancyCheckbox
 							v-model="task.done"
 							class="task-done-checkbox"
-							@update:modelValue="toggleTaskDone(t)"
+							@update:modelValue="toggleTaskDone(task)"
 						/>
 						<RouterLink
-							:to="{ name: route.name as string, params: { id: task.id } }"
+							:to="{ name: route.name as string, params: { id: task.id }, state: { backdropView: route.fullPath } }"
 							:class="{ 'is-strikethrough': task.done}"
 						>
 							<span
@@ -183,7 +183,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref, reactive, shallowReactive, watch, computed, type PropType} from 'vue'
+import {ref, reactive, shallowReactive, watch, computed} from 'vue'
 import {useI18n} from 'vue-i18n'
 import {useRoute} from 'vue-router'
 
@@ -206,27 +206,17 @@ import {useTaskStore} from '@/stores/tasks'
 import {useProjectStore} from '@/stores/projects'
 import {playPopSound} from '@/helpers/playPop'
 
-const props = defineProps({
-	taskId: {
-		type: Number,
-		required: true,
-	},
-	initialRelatedTasks: {
-		type: Object as PropType<ITask['relatedTasks']>,
-		default: () => ({}),
-	},
-	showNoRelationsNotice: {
-		type: Boolean,
-		default: false,
-	},
-	projectId: {
-		type: Number,
-		default: 0,
-	},
-	editEnabled: {
-		type: Boolean,
-		default: true,
-	},
+const props = withDefaults(defineProps<{
+	taskId: number,
+	initialRelatedTasks?: ITask['relatedTasks'],
+	showNoRelationsNotice?: boolean,
+	projectId: number,
+	editEnabled: boolean,
+}>(), {
+	initialRelatedTasks: () => ({}),
+	showNoRelationsNotice: false,
+	projectId: 0,
+	editEnabled: true, // this seems like a mistake
 })
 
 const taskStore = useTaskStore()

frontend/src/components/tasks/partials/ReminderDetail.vue

@@ -144,7 +144,7 @@ watch(
 		if (newReminder) {
 			reminder.value = newReminder
 
-			if (newReminder.relativeTo === null) {
+			if (newReminder.relativeTo === null && newReminder.reminder !== null) {
 				reminderDate.value = new Date(newReminder.reminder)
 			}
 

frontend/src/components/tasks/partials/Reminders.vue

@@ -3,7 +3,7 @@
 		<div
 			v-for="(r, index) in reminders"
 			:key="index"
-			:class="{ 'overdue': r.reminder < new Date() }"
+			:class="{ 'overdue': r.reminder < now }"
 			class="reminder-input"
 		>
 			<ReminderDetail
@@ -40,21 +40,25 @@ import BaseButton from '@/components/base/BaseButton.vue'
 import ReminderDetail from '@/components/tasks/partials/ReminderDetail.vue'
 import type {ITask} from '@/modelTypes/ITask'
 import {REMINDER_PERIOD_RELATIVE_TO_TYPES} from '@/types/IReminderPeriodRelativeTo'
+import { useNow } from '@vueuse/core'
 
-const {
-	modelValue,
-	disabled = false,
-} = defineProps<{
+const props = withDefaults(defineProps<{
 	modelValue: ITask,
 	disabled?: boolean,
-}>()
+}>(), {
+	disabled: false,
+})
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits<{
+	'update:modelValue': [ITask]
+}>()
 
 const reminders = ref<ITaskReminder[]>([])
 
+const now = useNow({interval: 1000})
+
 watch(
-	() => modelValue.reminders,
+	() => props.modelValue.reminders,
 	(newVal) => {
 		reminders.value = newVal
 	},
@@ -62,19 +66,19 @@ watch(
 )
 
 const defaultRelativeTo = computed(() => {
-	if (typeof modelValue === 'undefined') {
+	if (typeof props.modelValue === 'undefined') {
 		return null
 	}
 	
-	if (modelValue?.dueDate) {
+	if (props.modelValue?.dueDate) {
 		return REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE
 	}
 	
-	if (modelValue.dueDate === null && modelValue.startDate !== null) {
+	if (props.modelValue.dueDate === null && props.modelValue.startDate !== null) {
 		return REMINDER_PERIOD_RELATIVE_TO_TYPES.STARTDATE
 	}
 	
-	if (modelValue.dueDate === null && modelValue.startDate === null && modelValue.endDate !== null) {
+	if (props.modelValue.dueDate === null && props.modelValue.startDate === null && props.modelValue.endDate !== null) {
 		return REMINDER_PERIOD_RELATIVE_TO_TYPES.ENDDATE
 	}
 	
@@ -83,12 +87,12 @@ const defaultRelativeTo = computed(() => {
 
 function updateData() {
 	emit('update:modelValue', {
-		...modelValue,
+		...props.modelValue,
 		reminders: reminders.value,
 	})
 }
 
-function addNewReminder(newReminder: ITaskReminder) {
+function addNewReminder(newReminder: ITaskReminder|null) {
 	if (newReminder === null) {
 		return
 	}

frontend/src/components/tasks/partials/SingleTaskInProject.vue

@@ -1,17 +1,17 @@
 <template>
 	<div>
 		<div
-			ref="taskContainerRef"
 			:class="{'is-loading': taskService.loading}"
 			class="task loader-container single-task"
 			tabindex="-1"
-			@mouseup.stop.self="openTaskDetail"
-			@mousedown.stop.self="focusTaskLink"
+			@click="openTaskDetail"
+			@keyup.enter="openTaskDetail"
 		>
 			<FancyCheckbox
 				v-model="task.done"
 				:disabled="(isArchived || disabled) && !canMarkAsDone"
 				@update:modelValue="markAsDone"
+				@click.stop
 			/>
 
 			<ColorBubble
@@ -23,8 +23,6 @@
 			<div
 				:class="{ 'done': task.done, 'show-project': showProject && project}"
 				class="tasktext"
-				@mouseup.stop.self="openTaskDetail"
-				@mousedown.stop.self="focusTaskLink"
 			>
 				<span>
 					<RouterLink
@@ -33,6 +31,7 @@
 						:to="{ name: 'project.index', params: { projectId: task.projectId } }"
 						class="task-project mr-1"
 						:class="{'mr-2': task.hexColor !== ''}"
+						@click.stop
 					>
 						{{ project.title }}
 					</RouterLink>
@@ -42,15 +41,15 @@
 						:color="getHexColor(task.hexColor)"
 						class="mr-1"
 					/>
-			
+	
 					<PriorityLabel
 						:priority="task.priority"
 						:done="task.done"
 						class="pr-2"
 					/>
-				
+
 					<RouterLink
-						ref="taskLink"
+						ref="taskLinkRef"
 						:to="taskDetailRoute"
 						class="task-link"
 						tabindex="-1"
@@ -73,29 +72,33 @@
 					:inline="true"
 				/>
 
-				<!-- FIXME: use popup -->
-				<BaseButton
+				<Popup
 					v-if="+new Date(task.dueDate) > 0"
-					v-tooltip="formatDateLong(task.dueDate)"
-					class="dueDate"
-					@click.prevent.stop="showDefer = !showDefer"
 				>
-					<time
-						:datetime="formatISO(task.dueDate)"
-						:class="{'overdue': task.dueDate <= new Date() && !task.done}"
-						class="is-italic"
-						:aria-expanded="showDefer ? 'true' : 'false'"
-					>
-						– {{ $t('task.detail.due', {at: dueDateFormatted}) }}
-					</time>
-				</BaseButton>
-				<CustomTransition name="fade">
-					<DeferTask
-						v-if="+new Date(task.dueDate) > 0 && showDefer"
-						ref="deferDueDate"
-						v-model="task"
-					/>
-				</CustomTransition>
+					<template #trigger="{toggle, isOpen}">
+						<BaseButton
+							v-tooltip="formatDateLong(task.dueDate)"
+							class="dueDate"
+							@click.prevent.stop="toggle()"
+						>	
+							<time
+								:datetime="formatISO(task.dueDate)"
+								:class="{'overdue': task.dueDate <= new Date() && !task.done}"
+								class="is-italic"
+								:aria-expanded="isOpen ? 'true' : 'false'"
+							>
+								– {{ $t('task.detail.due', {at: dueDateFormatted}) }}
+							</time>
+						</BaseButton>
+					</template>
+					<template #content="{isOpen}">
+						<DeferTask
+							v-if="isOpen"
+							v-model="task"
+						/>
+					</template>
+				</Popup>
+
 
 				<span>
 					<span
@@ -138,6 +141,7 @@
 				v-tooltip="$t('task.detail.belongsToProject', {project: project.title})"
 				:to="{ name: 'project.index', params: { projectId: task.projectId } }"
 				class="task-project"
+				@click.stop
 			>
 				{{ project.title }}
 			</RouterLink>
@@ -145,7 +149,7 @@
 			<BaseButton
 				:class="{'is-favorite': task.isFavorite}"
 				class="favorite"
-				@click="toggleFavorite"
+				@click.stop="toggleFavorite"
 			>
 				<Icon
 					v-if="task.isFavorite"
@@ -176,7 +180,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref, watch, shallowReactive, onMounted, onBeforeUnmount, computed} from 'vue'
+import {ref, watch, shallowReactive, onMounted, computed} from 'vue'
 import {useI18n} from 'vue-i18n'
 
 import TaskModel, {getHexColor} from '@/models/task'
@@ -191,11 +195,10 @@ import ProgressBar from '@/components/misc/ProgressBar.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
 import ColorBubble from '@/components/misc/ColorBubble.vue'
-import CustomTransition from '@/components/misc/CustomTransition.vue'
+import Popup from '@/components/misc/Popup.vue'
 
 import TaskService from '@/services/task'
 
-import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import {formatDateSince, formatISO, formatDateLong} from '@/helpers/time/formatDate'
 import {success} from '@/message'
 
@@ -239,7 +242,6 @@ const {t} = useI18n({useScope: 'global'})
 
 const taskService = shallowReactive(new TaskService())
 const task = ref<ITask>(new TaskModel())
-const showDefer = ref(false)
 
 const isRepeating = computed(() => task.value.repeatAfter.amount > 0 || (task.value.repeatAfter.amount === 0 && task.value.repeatMode === TASK_REPEAT_MODES.REPEAT_MODE_MONTH))
 
@@ -254,14 +256,6 @@ watch(
 	},
 )
 
-onMounted(() => {
-	document.addEventListener('click', hideDeferDueDatePopup)
-})
-
-onBeforeUnmount(() => {
-	document.removeEventListener('click', hideDeferDueDatePopup)
-})
-
 const baseStore = useBaseStore()
 const projectStore = useProjectStore()
 const taskStore = useTaskStore()
@@ -350,35 +344,22 @@ async function toggleFavorite() {
 	emit('taskUpdated', task.value)
 }
 
-const deferDueDate = ref<typeof DeferTask | null>(null)
-
-function hideDeferDueDatePopup(e) {
-	if (!showDefer.value) {
-		return
-	}
-	closeWhenClickedOutside(e, deferDueDate.value.$el, () => {
-		showDefer.value = false
-	})
-}
-
-const taskLink = ref<HTMLElement | null>(null)
-const taskContainerRef = ref<HTMLElement | null>(null)
+const taskLinkRef = ref<HTMLElement | null>(null)
 
 function hasTextSelected() {
 	const isTextSelected = window.getSelection().toString()
 	return !(typeof isTextSelected === 'undefined' || isTextSelected === '' || isTextSelected === '\n')
 }
 
-function openTaskDetail() {
-	if (!hasTextSelected()) {
-		taskLink.value.$el.click()
+function openTaskDetail(event: MouseEvent | KeyboardEvent) {
+	if (event.target instanceof HTMLElement) {
+		const isInteractiveElement = event.target.closest('a, button, .favorite, [role="button"]')
+		if (isInteractiveElement || hasTextSelected()) {
+			return
+		}
 	}
-}
 
-function focusTaskLink() {
-	if (!hasTextSelected()) {
-		taskContainerRef.value.focus()
-	}
+	taskLinkRef.value?.$el.click()
 }
 </script>
 
@@ -397,7 +378,7 @@ function focusTaskLink() {
 		background-color: var(--grey-100);
 	}
 
-	&:focus-within, &:focus {
+	&:has(*:focus-visible) {
 		box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
 
 		a.task-link {
@@ -405,6 +386,16 @@ function focusTaskLink() {
 		}
 	}
 
+	@supports not selector(:focus-within) {
+		:focus {
+			box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
+
+			a.task-link {
+				box-shadow: none;
+			}
+		}
+	}
+
 	.tasktext,
 	&.tasktext {
 		text-overflow: ellipsis;
@@ -421,6 +412,15 @@ function focusTaskLink() {
 		.dueDate {
 			display: inline-block;
 			margin-left: 5px;
+
+			&:focus-visible {
+				box-shadow: none;
+
+				time {
+					box-shadow: 0 0 0 1px hsla(var(--primary-hsl), 0.5);
+					border-radius: 3px;
+				}
+			}
 		}
 
 		.overdue {
@@ -466,6 +466,7 @@ function focusTaskLink() {
 		text-align: center;
 		width: 27px;
 		transition: opacity $transition, color $transition;
+		border-radius: $radius;
 
 		&:hover {
 			color: var(--warning);
@@ -542,4 +543,17 @@ function focusTaskLink() {
 .subtask-nested {
 	margin-left: 1.75rem;
 }
+
+:deep(.popup) {
+	border-radius: $radius;
+	background-color: var(--white);
+	box-shadow: var(--shadow-lg);
+	color: var(--text);
+	top: unset;
+	
+	&.is-open {
+		padding: 1rem;
+		border: 1px solid var(--grey-200);
+	}
+}
 </style>

frontend/src/composables/useBodyClass.ts

@@ -5,9 +5,12 @@ export function useBodyClass(className: string, defaultValue = false) {
 	const isActive = ref(defaultValue)
 
 	watchEffect(() => {
-		isActive.value
-			? document.body.classList.add(className)
-			: document.body.classList.remove(className)
+		if(isActive.value) {
+			document.body.classList.add(className)
+			return
+		}
+		
+		document.body.classList.remove(className)
 	})
 
 	tryOnBeforeUnmount(() => isActive.value && document.body.classList.remove(className))

frontend/src/composables/useCopyToClipboard.ts

@@ -24,7 +24,8 @@ export function useCopyToClipboard() {
 			if (!successful) {
 				throw new Error()
 			}
-		} catch (err) {
+			// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		} catch (e) {
 			error(t('misc.copyError'))
 		}
 	
@@ -38,6 +39,7 @@ export function useCopyToClipboard() {
 		}
 		try {
 			await navigator.clipboard.writeText(text)
+			// eslint-disable-next-line @typescript-eslint/no-unused-vars
 		} catch(e) {
 			error(t('misc.copyError'))
 		}

frontend/src/composables/useTaskList.ts

@@ -2,7 +2,11 @@ import {ref, shallowReactive, watch, computed, type ComputedGetter} from 'vue'
 import {useRoute, useRouter} from 'vue-router'
 import {useRouteQuery} from '@vueuse/router'
 
-import TaskCollectionService, {getDefaultTaskFilterParams, type TaskFilterParams} from '@/services/taskCollection'
+import TaskCollectionService, {
+	type ExpandTaskFilterParam,
+	getDefaultTaskFilterParams,
+	type TaskFilterParams,
+} from '@/services/taskCollection'
 import type {ITask} from '@/modelTypes/ITask'
 import {error} from '@/message'
 import type {IProject} from '@/modelTypes/IProject'
@@ -59,6 +63,7 @@ export function useTaskList(
 	projectIdGetter: ComputedGetter<IProject['id']>,
 	projectViewIdGetter: ComputedGetter<IProjectView['id']>,
 	sortByDefault: SortBy = SORT_BY_DEFAULT,
+	expandGetter: ComputedGetter<ExpandTaskFilterParam> = () => 'subtasks',
 ) {
 	
 	const projectId = computed(() => projectIdGetter())
@@ -95,6 +100,7 @@ export function useTaskList(
 			{
 				...allParams.value,
 				filter_timezone: authStore.settings.timezone,
+				expand: expandGetter(),
 			},
 			page.value,
 		]

frontend/src/helpers/calculateItemPosition.ts

@@ -1,4 +1,7 @@
-export const calculateItemPosition = (positionBefore: number | null, positionAfter: number | null): number => {
+export const calculateItemPosition = (
+	positionBefore: number | null = null,
+	positionAfter: number | null = null,
+): number => {
 	if (positionBefore === null) {
 		if (positionAfter === null) {
 			return 0
@@ -13,6 +16,6 @@ export const calculateItemPosition = (positionBefore: number | null, positionAft
 		return positionBefore + Math.pow(2, 16)
 	}
 	
-	// If we have both a task before and after it, we acually calculate the position
+	// If we have both a task before and after it, we actually calculate the position
 	return positionBefore + (positionAfter - positionBefore) / 2
 }

frontend/src/helpers/checkAndSetApiUrl.ts

@@ -40,6 +40,7 @@ export const checkAndSetApiUrl = (url: string | undefined | null): Promise<strin
 	let urlToCheck: URL
 	try {
 		urlToCheck = new URL(url)
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	} catch (e) {
 		throw new InvalidApiUrlProvidedError()
 	}
@@ -50,10 +51,9 @@ export const checkAndSetApiUrl = (url: string | undefined | null): Promise<strin
 	window.API_URL = urlToCheck.toString()
 
 	const configStore = useConfigStore()
-	const updateConfig = () => configStore.update()
 
 	// Check if the api is reachable at the provided url
-	return updateConfig()
+	return configStore.update()
 		.catch(e => {
 			// Check if it is reachable at /api/v1 and http
 			if (
@@ -62,7 +62,7 @@ export const checkAndSetApiUrl = (url: string | undefined | null): Promise<strin
 			) {
 				urlToCheck.pathname = `${urlToCheck.pathname}api/v1`
 				window.API_URL = urlToCheck.toString()
-				return updateConfig()
+				return configStore.update()
 			}
 			throw e
 		})
@@ -75,7 +75,7 @@ export const checkAndSetApiUrl = (url: string | undefined | null): Promise<strin
 			) {
 				urlToCheck.pathname = `${urlToCheck.pathname}api/v1`
 				window.API_URL = urlToCheck.toString()
-				return updateConfig()
+				return configStore.update()
 			}
 			throw e
 		})
@@ -84,7 +84,7 @@ export const checkAndSetApiUrl = (url: string | undefined | null): Promise<strin
 			if (urlToCheck.port !== API_DEFAULT_PORT) {
 				urlToCheck.port = API_DEFAULT_PORT
 				window.API_URL = urlToCheck.toString()
-				return updateConfig()
+				return configStore.update()
 			}
 			throw e
 		})
@@ -97,7 +97,7 @@ export const checkAndSetApiUrl = (url: string | undefined | null): Promise<strin
 			) {
 				urlToCheck.pathname = `${urlToCheck.pathname}api/v1`
 				window.API_URL = urlToCheck.toString()
-				return updateConfig()
+				return configStore.update()
 			}
 			throw e
 		})