fix(deps): update dependency dompurify to v3.1.1

Maybe resolves https://community.vikunja.io/t/empty-openid-team-cleanup-cron-error-removing-empty-openid-team-database-is-locked-error-when-exporting-data/2306/3

.dockerignore

@@ -1,6 +1,7 @@
 files/
 dist/
 logs/
+docs/
 
 Dockerfile
 docker-manifest.tmpl

.drone.yml

@@ -1,7 +1,12 @@
 ---
 kind: pipeline
 type: docker
-name: build-and-test-api
+name: build-and-test
+
+trigger:
+  event:
+    exclude:
+      - cron
 
 workspace:
   base: /go
@@ -122,7 +127,7 @@ steps:
     when:
       event: [ push, tag, pull_request ]
 
-  - name: build
+  - name: api-build
     image: vikunja/golang-build:latest
     pull: always
     environment:
@@ -133,8 +138,8 @@ steps:
     when:
       event: [ push, tag, pull_request ]
 
-  - name: lint
-    image: golangci/golangci-lint:v1.55.2
+  - name: api-lint
+    image: golangci/golangci-lint:v1.57.2
     pull: always
     environment:
       GOPROXY: 'https://goproxy.kolaente.de'
@@ -156,7 +161,9 @@ steps:
   - name: test-migration-sqlite
     image: vikunja/golang-build:latest
     pull: always
-    depends_on: [ test-migration-prepare, build ]
+    depends_on: 
+      - test-migration-prepare
+      - api-build
     environment:
       VIKUNJA_DATABASE_TYPE: sqlite
       VIKUNJA_DATABASE_PATH: /db/vikunja-migration-test.db
@@ -175,7 +182,9 @@ steps:
   - name: test-migration-mysql
     image: vikunja/golang-build:latest
     pull: always
-    depends_on: [ test-migration-prepare, build ]
+    depends_on:
+      - test-migration-prepare
+      - api-build
     environment:
       VIKUNJA_DATABASE_TYPE: mysql
       VIKUNJA_DATABASE_HOST: test-mysql-migration
@@ -194,7 +203,9 @@ steps:
   - name: test-migration-psql
     image: vikunja/golang-build:latest
     pull: always
-    depends_on: [ test-migration-prepare, build ]
+    depends_on:
+      - test-migration-prepare
+      - api-build
     environment:
       VIKUNJA_DATABASE_TYPE: postgres
       VIKUNJA_DATABASE_HOST: test-postgres-migration
@@ -211,7 +222,7 @@ steps:
     when:
       event: [ push, tag, pull_request ]
 
-  - name: test
+  - name: api-test-unit
     image: vikunja/golang-build:latest
     pull: always
     environment:
@@ -222,7 +233,7 @@ steps:
     when:
       event: [ push, tag, pull_request ]
 
-  - name: test-sqlite
+  - name: api-test-unit-sqlite
     image: vikunja/golang-build:latest
     pull: always
     environment:
@@ -239,7 +250,7 @@ steps:
     when:
       event: [ push, tag, pull_request ]
 
-  - name: test-mysql
+  - name: api-test-unit-mysql
     image: vikunja/golang-build:latest
     pull: always
     environment:
@@ -256,7 +267,7 @@ steps:
     when:
       event: [ push, tag, pull_request ]
 
-  - name: test-postgres
+  - name: api-test-unit-postgres
     image: vikunja/golang-build:latest
     pull: always
     environment:
@@ -337,31 +348,23 @@ steps:
     when:
       event: [ push, tag, pull_request ]
 
----
-kind: pipeline
-type: docker
-name: build-and-test-frontend
-
-trigger:
-  branch:
-    include:
-      - main
-  event:
-    include:
-      - push
-      - pull_request
-
-services:
-  - name: api
-    image: vikunja/api:unstable
+  - name: test-api-run
+    image: vikunja/golang-build:latest
     pull: always
     environment:
       VIKUNJA_SERVICE_TESTINGTOKEN: averyLongSecretToSe33dtheDB
       VIKUNJA_LOG_LEVEL: DEBUG
+      VIKUNJA_CORS_ENABLE: 1
+      VIKUNJA_DATABASE_PATH: memory
+      VIKUNJA_DATABASE_TYPE: sqlite
+    commands:
+      - ./vikunja
+    detach: true
+    depends_on:
+      - api-build
 
-steps:
-  - name: dependencies
-    image: node:20.11.0-alpine
+  - name: frontend-dependencies
+    image: node:20.12.2-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
@@ -374,8 +377,8 @@ steps:
   #    depends_on:
   #      - restore-cache
 
-  - name: lint
-    image: node:20.11.0-alpine
+  - name: frontend-lint
+    image: node:20.12.2-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
@@ -384,33 +387,33 @@ steps:
       - corepack enable && pnpm config set store-dir .cache/pnpm
       - pnpm run lint
     depends_on:
-      - dependencies
+      - frontend-dependencies
 
-  - name: build-prod
-    image: node:20.11.0-alpine
+  - name: frontend-build-prod
+    image: node:20.12.2-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
     commands:
       - cd frontend
       - corepack enable && pnpm config set store-dir .cache/pnpm
-      - pnpm run build
+      - pnpm run build:test
     depends_on:
-      - dependencies
+      - frontend-dependencies
 
-  - name: test-unit
-    image: node:20.11.0-alpine
+  - name: frontend-test-unit
+    image: node:20.12.2-alpine
     pull: always
     commands:
       - cd frontend
       - corepack enable && pnpm config set store-dir .cache/pnpm
       - pnpm run test:unit
     depends_on:
-      - dependencies
+      - frontend-dependencies
 
-  - name: typecheck
+  - name: frontend-typecheck
     failure: ignore
-    image: node:20.11.0-alpine
+    image: node:20.12.2-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
@@ -419,13 +422,13 @@ steps:
       - corepack enable && pnpm config set store-dir .cache/pnpm
       - pnpm run typecheck
     depends_on:
-      - dependencies
+      - frontend-dependencies
 
-  - name: test-frontend
+  - name: frontend-test
     image: cypress/browsers:node18.12.0-chrome107
     pull: always
     environment:
-      CYPRESS_API_URL: http://api:3456/api/v1
+      CYPRESS_API_URL: http://test-api-run:3456/api/v1
       CYPRESS_TEST_SECRET: averyLongSecretToSe33dtheDB
       PNPM_CACHE_FOLDER: .cache/pnpm
       CYPRESS_CACHE_FOLDER: .cache/cypress
@@ -434,14 +437,15 @@ steps:
         from_secret: cypress_project_key
     commands:
       - cd frontend
-      - sed -i 's/localhost/api/g' dist/index.html
+      - sed -i 's/localhost/test-api-run/g' dist-test/index.html
       - corepack enable && pnpm config set store-dir .cache/pnpm
       - pnpm cypress install
-      - pnpm run test:e2e-record
+      - pnpm run test:e2e-record-test
     depends_on:
-      - build-prod
+      - frontend-build-prod
+      - test-api-run
   
-  - name: deploy-preview
+  - name: frontend-deploy-preview
     image: williamjackson/netlify-cli
     pull: always
     user: root # The rest runs as root and thus the permissions wouldn't work
@@ -454,16 +458,15 @@ steps:
         from_secret: gitea_token
     commands:
       - cd frontend
-      - cp -r dist dist-preview
+      - cp -r dist-test dist-preview
       # Override the default api url used for preview
       - sed -i 's|http://localhost:3456|https://try.vikunja.io|g' dist-preview/index.html
-      - apk add --no-cache perl-utils
       # create via:
       # `shasum -a 384 ./scripts/deploy-preview-netlify.mjs > ./scripts/deploy-preview-netlify.mjs.sha384`
       - shasum -a 384 -c ./scripts/deploy-preview-netlify.mjs.sha384
       - node ./scripts/deploy-preview-netlify.mjs
     depends_on:
-      - build-prod
+      - frontend-build-prod
     when:
       event:
         include:
@@ -475,7 +478,7 @@ type: docker
 name: generate-swagger-docs
 
 depends_on:
-  - build-and-test-api
+  - build-and-test
 
 workspace:
   base: /go
@@ -519,8 +522,7 @@ type: docker
 name: release
 
 depends_on:
-  - build-and-test-api
-  - build-and-test-frontend
+  - build-and-test
 
 workspace:
   base: /source
@@ -530,6 +532,9 @@ trigger:
   ref:
     - refs/heads/main
     - "refs/tags/**"
+  event:
+    exclude:
+      - cron
 
 steps:
   # Needed to get the versions right as they depend on tags
@@ -539,7 +544,7 @@ steps:
       - git fetch --tags
 
   - name: frontend-dependencies
-    image: node:20.11.0-alpine
+    image: node:20.12.2-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
@@ -551,7 +556,7 @@ steps:
       - pnpm install --fetch-timeout 100000
 
   - name: frontend-build
-    image: node:20.11.0-alpine
+    image: node:20.12.2-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
@@ -711,7 +716,7 @@ steps:
 
   # Build os packages and push it to our bucket
   - name: build-os-packages-unstable
-    image: goreleaser/nfpm:v2.35.3
+    image: goreleaser/nfpm:v2.36.1
     pull: always
     commands:
       - apk add git go
@@ -727,7 +732,7 @@ steps:
     depends_on: [ after-build-compress ]
 
   - name: build-os-packages-version
-    image: goreleaser/nfpm:v2.35.3
+    image: goreleaser/nfpm:v2.36.1
     pull: always
     commands:
       - apk add git go
@@ -783,6 +788,20 @@ steps:
         - tag
     depends_on: [ build-os-packages-version ]
 
+  - name: gitea-release
+    image: plugins/gitea-release
+    pull: true
+    settings:
+      api_key:
+        from_secret: gitea_token
+      base_url: https://kolaente.dev
+      files: dist/zip/*
+      prerelease: true
+      title: ${DRONE_TAG##v} 
+    when:
+      event:
+        - tag
+    depends_on: [ sign-release ]
 
 ---
 kind: pipeline
@@ -790,13 +809,15 @@ type: docker
 name: docker-release
 
 depends_on:
-  - build-and-test-api
-  - build-and-test-frontend
+  - build-and-test
 
 trigger:
   ref:
     - refs/heads/main
     - "refs/tags/**"
+  event:
+    exclude:
+      - cron
 
 steps:
   - name: fetch-tags
@@ -865,7 +886,7 @@ type: docker
 name: frontend-release-unstable
 
 depends_on:
-  - build-and-test-frontend
+  - build-and-test
 
 trigger:
   branch:
@@ -880,7 +901,7 @@ steps:
       - git fetch --tags
   
   - name: build
-    image: node:20.11.0-alpine
+    image: node:20.12.2-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
@@ -928,7 +949,7 @@ type: docker
 name: frontend-release-version
 
 depends_on:
-  - build-and-test-frontend
+  - build-and-test
 
 trigger:
   event:
@@ -941,7 +962,7 @@ steps:
       - git fetch --tags
   
   - name: build
-    image: node:20.11.0-alpine
+    image: node:20.12.2-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
@@ -1134,6 +1155,9 @@ trigger:
   ref:
     - refs/heads/main
     - "refs/tags/**"
+  event:
+    exclude:
+      - cron
 
 steps:
   - name: fetch-tags
@@ -1199,8 +1223,21 @@ steps:
 #        - '.cache'
 #    depends_on:
 #      - build
+  
+  - name: rename-unstable
+    image: bash
+    pull: true
+    commands:
+      - cd desktop/dist
+      - bash -c 'for file in Vikunja*; do suffix=".$${file##*.}"; if [[ ! -d $file ]]; then mv "$file" "Vikunja-Desktop-unstable$${suffix}"; fi; done'
+    depends_on:
+      - build
+    when:
+      event:
+        exclude:
+          - tag
 
-  - name: release-latest
+  - name: release-unstable
     image: plugins/s3
     pull: true
     settings:
@@ -1213,13 +1250,14 @@ steps:
       region: fr-par
       path_style: true
       strip_prefix: desktop/dist/
-      source: desktop/dist/*
+      source: desktop/dist/Vikunja-Desktop*
       target: /desktop/unstable/
     when:
       event:
         exclude:
           - tag
-    depends_on: [ build ]
+    depends_on:
+      - rename-unstable
 
   - name: release-version
     image: plugins/s3
@@ -1335,10 +1373,12 @@ trigger:
   ref:
     - refs/heads/main
     - "refs/tags/**"
+  event:
+    exclude:
+      - cron
 
 depends_on:
-  - build-and-test-api
-  - build-and-test-frontend
+  - build-and-test
   - release
   - deploy-docs
   - docker-release
@@ -1360,6 +1400,6 @@ steps:
         - failure
 ---
 kind: signature
-hmac: 128214182f90834702da16ed7b0f1dec09dc61bbbe7f293aea7cb6c46e7edae2
+hmac: f2753482faf9e2a3d34a9111587a75dfb4519cb77002cc64a51266540fd2478e
 
 ...

.gitignore

@@ -28,3 +28,4 @@ vendor/
 os-packages/
 mage_output_file.go
 mage-static
+.direnv/

.golangci.yml

@@ -18,6 +18,7 @@ linters:
     - scopelint # Obsolete, using exportloopref instead
     - durationcheck
     - goconst
+    - musttag
   presets:
     - bugs
     - unused
@@ -99,3 +100,11 @@ issues:
     - path: pkg/modules/migration/ticktick/ticktick_test.go
       linters:
         - testifylint
+    - path: pkg/migration/*
+      text: "parameter 'tx' seems to be unused, consider removing or renaming it as"
+      linters:
+        - revive
+    - path: pkg/models/typesense.go
+      text: 'structtag: struct field Position repeats json tag "position" also at'
+      linters:
+        - govet

.vscode/settings.json

@@ -5,7 +5,7 @@
     "eslint.packageManager": "pnpm",
     "editor.formatOnSave": false,
     "editor.codeActionsOnSave": {
-        "source.fixAll": true
+        "source.fixAll": "explicit"
     },
     "eslint.format.enable": true,
     "[javascript]": {

Dockerfile

@@ -1,10 +1,11 @@
 # syntax=docker/dockerfile:1
-FROM --platform=$BUILDPLATFORM node:20.11.0-alpine AS frontendbuilder
+FROM --platform=$BUILDPLATFORM node:20.12.2-alpine AS frontendbuilder
 
 WORKDIR /build
 
 ENV PNPM_CACHE_FOLDER .cache/pnpm/
 ENV PUPPETEER_SKIP_DOWNLOAD true
+ENV CYPRESS_INSTALL_BINARY 0
 
 COPY frontend/ ./
 
@@ -33,22 +34,15 @@ RUN export PATH=$PATH:$GOPATH/bin && \
 #  ┘└┘┘─┘┘└┘┘└┘┴─┘┘└┘
 
 # The actual image
-# Note: I wanted to use the scratch image here, but unfortunatly the go-sqlite bindings require cgo and
-# because of this, the container would not start when I compiled the image without cgo.
-FROM alpine:3.19 AS runner
+FROM scratch
 LABEL maintainer="maintainers@vikunja.io"
 WORKDIR /app/vikunja
-ENTRYPOINT [ "/sbin/tini", "-g", "--", "/entrypoint.sh" ]
+ENTRYPOINT [ "/app/vikunja/vikunja" ]
 EXPOSE 3456
+USER 1000
 
 ENV VIKUNJA_SERVICE_ROOTPATH=/app/vikunja/
-ENV PUID 1000
-ENV PGID 1000
-
-RUN apk --update --no-cache add tzdata tini shadow && \
-    addgroup vikunja && \
-    adduser -s /bin/sh -D -G vikunja vikunja -h /app/vikunja -H
-COPY docker/entrypoint.sh /entrypoint.sh
-RUN chmod 0755 /entrypoint.sh && mkdir files
+ENV VIKUNJA_DATABASE_PATH=/db/vikunja.db
 
 COPY --from=apibuilder /build/vikunja-* vikunja
+COPY --from=apibuilder /etc/ssl/certs/ca-certificates.crt /etc/ssl/certs/

README.md

@@ -11,6 +11,9 @@
 
 > The Todo-app to organize your life.
 
+If Vikunja is useful to you, please consider [buying me a coffee](https://www.buymeacoffee.com/kolaente), [sponsoring me on GitHub](https://github.com/sponsors/kolaente) or buying [a sticker pack](https://vikunja.cloud/stickers).
+I'm also offering [a hosted version of Vikunja](https://vikunja.cloud/) if you want a hassle-free solution for yourself or your team.
+
 # Table of contents
 
 * [Security Reports](#security-reports)
@@ -26,7 +29,7 @@ If you find any security-related issues you don't want to disclose publicly, ple
 
 ## Features
 
-See [the features page](https://vikunja.io/features/) on our website for a more exaustive list or 
+See [the features page](https://vikunja.io/features/) on our website for a more exhaustive list or 
 try it on [try.vikunja.io](https://try.vikunja.io)!
 
 ## Docs

config.yml.sample

@@ -6,7 +6,7 @@ service:
   # 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 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
@@ -48,7 +48,7 @@ service:
   # 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 
+  # 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
@@ -62,6 +62,9 @@ service:
   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 
@@ -76,7 +79,7 @@ sentry:
   frontenddsn: "https://85694a2d757547cbbc90cd4b55c5a18d@o1047380.ingest.sentry.io/6024480"
 
 database:
-  # Database type to use. Supported types are mysql, postgres and sqlite.
+  # 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"
@@ -109,7 +112,7 @@ database:
 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 
+  # 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
@@ -203,7 +206,7 @@ ratelimit:
   # 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, 
+  # 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
@@ -301,13 +304,11 @@ auth:
     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 claims if they have set it to be publicly visible.
+  # **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 to be redirected after authentication by the third party
-  # to <frontend-url>/auth/openid/<auth key>. 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`.
+  # **Note 2:** The frontend expects the third party to rediect 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
@@ -325,6 +326,10 @@ auth:
         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:

desktop/default.nix

@@ -1,9 +0,0 @@
-{ pkgs ? import <nixpkgs> {}
-}:
-pkgs.mkShell {
-  name="electron-dev";
-  buildInputs = [
-    pkgs.electron
-  ];
-}
-

desktop/package.json

@@ -51,11 +51,11 @@
     }
   },
   "devDependencies": {
-    "electron": "28.2.2",
-    "electron-builder": "24.9.1"
+    "electron": "29.3.1",
+    "electron-builder": "24.13.3"
   },
   "dependencies": {
-    "connect-history-api-fallback": "^2.0.0",
-    "express": "^4.17.1"
+    "connect-history-api-fallback": "2.0.0",
+    "express": "4.19.2"
   }
 }

docker/entrypoint.sh

@@ -1,15 +0,0 @@
-#!/usr/bin/env sh
-set -e
-
-if [ -n "$PUID" ] && [ "$PUID" -ne 0 ] && \
-   [ -n "$PGID" ] && [ "$PGID" -ne 0 ] ; then
-  echo "info: creating the new user vikunja with $PUID:$PGID"
-  groupmod -g "$PGID" -o vikunja
-  usermod -u "$PUID" -o vikunja
-  chown -R vikunja:vikunja ./files/
-  chown vikunja:vikunja .
-  exec su vikunja -c /app/vikunja/vikunja "$@"
-else
-  echo "info: creation of non-root user is skipped"
-  exec /app/vikunja/vikunja "$@"
-fi

docs/content/doc/development/mage.md

@@ -41,24 +41,13 @@ There are multiple categories of subcommands in the magefile:
 
 These tasks are automatically run in our CI every time someone pushes to main or you update a pull request:
 
-* `mage check:lint`
-* `mage check:fmt`
-* `mage check:ineffassign`
-* `mage check:misspell`
-* `mage check:goconst`
-* `mage build:generate`
+* `mage lint`
 * `mage build:build`
 
 ## Build
 
 ### Build Vikunja
 
-```
-mage build:build
-```
-
-or
-
 ```
 mage build
 ```
@@ -79,16 +68,9 @@ All check sub-commands exit with a status code of 1 if the check fails.
 
 Various code-checks are available:
 
-* `mage check:all`: Runs fmt-check, lint, got-swag, misspell-check, ineffasign-check, gocyclo-check, static-check, gosec-check, goconst-check all in parallel
-* `mage check:fmt`: Checks if the code is properly formatted with go fmt
-* `mage check:go-sec`: Checks the source code for potential security issues by scanning the Go AST using the [gosec tool](https://github.com/securego/gosec)
-* `mage check:goconst`: Checks for repeated strings that could be replaced by a constant using [goconst](https://github.com/jgautheron/goconst/)
-* `mage check:gocyclo`: Checks for the cyclomatic complexity of the source code using [gocyclo](https://github.com/fzipp/gocyclo)
-* `mage check:got-swag`: Checks if the swagger docs need to be re-generated from the code annotations
-* `mage check:ineffassign`: Checks the source code for ineffectual assigns using [ineffassign](https://github.com/gordonklaus/ineffassign)
-* `mage check:lint`: Runs golint on all packages
-* `mage check:misspell`: Checks the source code for misspellings
-* `mage check:static`: Statically analyzes the source code about a range of different problems using [staticcheck](https://staticcheck.io/docs/)
+* `mage check:all`: Runs golangci and swagger documentation check
+* `mage lint`: Checks if the code follows the rules as defined in the `.golangci.yml` config file.
+* `mage lint:fix`: Fixes all code style issues which are easily fixable.
 
 ## Release
 

docs/content/doc/setup/build-from-source.md

@@ -18,6 +18,7 @@ To fully build Vikunja from source files, you need to build the api and frontend
 
 1. Make sure you have git installed
 2. Clone the repo with `git clone https://code.vikunja.io/vikunja` and switch into the directory.
+3. Check out the version you want to build with `git checkout VERSION` - replace `VERSION` with the version want to use. If you don't do this, you'll build the [latest unstable build]({{< ref "versions.md">}}), which might contain bugs.
 
 ## Frontend
 
@@ -35,7 +36,7 @@ That means compiling it boils down to these steps:
 
 1. Make sure [Go](https://golang.org/doc/install) is properly installed on your system. You'll need at least Go `1.21`.
 2. Make sure [Mage](https://magefile.org) is properly installed on your system.
-3. If you did not build the frontend in the steps before, you need to either do that or create a dummy index file with `mkdir -p frontend/dist && touch index.html`.
+3. If you did not build the frontend in the steps before, you need to either do that or create a dummy index file with `mkdir -p frontend/dist && touch frontend/dist/index.html`.
 4. Run `mage build` in the source of the main repo. This will build a binary in the root of the repo which will be able to run on your system.
 
 ### Build for different architectures

docs/content/doc/setup/config.md

@@ -94,7 +94,7 @@ Environment path: `VIKUNJA_SERVICE_JWTTTL`
 
 ### jwtttllong
 
-The duration of the "remember me" time in seconds. When the login request is made with 
+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).
 
@@ -289,7 +289,7 @@ Environment path: `VIKUNJA_SERVICE_ENABLEEMAILREMINDERS`
 
 ### enableuserdeletion
 
-If true, will allow users to request the complete deletion of their account. When using external authentication methods 
+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.
 
@@ -346,6 +346,17 @@ Full path: `service.customlogourl`
 Environment path: `VIKUNJA_SERVICE_CUSTOMLOGOURL`
 
 
+### enablepublicteams
+
+discoverable when sharing a project, therefore not only showing teams the user is member of.
+
+Default: `false`
+
+Full path: `service.enablepublicteams`
+
+Environment path: `VIKUNJA_SERVICE_ENABLEPUBLICTEAMS`
+
+
 ---
 
 ## sentry
@@ -406,7 +417,7 @@ Environment path: `VIKUNJA_SENTRY_FRONTENDDSN`
 
 ### type
 
-Database type to use. Supported types are mysql, postgres and sqlite.
+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.
 
 Default: `sqlite`
 
@@ -569,7 +580,7 @@ Environment path: `VIKUNJA_DATABASE_TLS`
 
 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 
+Typesense allows fast fulltext search including fuzzy matching support. It may return different results than
 what you'd get with a database-only search.
 
 Default: `false`
@@ -1024,7 +1035,7 @@ Environment path: `VIKUNJA_RATELIMIT_STORE`
 
 ### noauthlimit
 
-The number of requests a user can make from the same IP to all unauthenticated routes (login, register, 
+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.
 
@@ -1209,13 +1220,11 @@ Environment path: `VIKUNJA_AUTH_LOCAL`
 
 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 claims if they have set it to be publicly visible.
+**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 to be redirected after authentication by the third party
-to <frontend-url>/auth/openid/<auth key>. 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`.
+**Note 2:** The frontend expects the third party to rediect 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.
 
 Default: `<empty>`

docs/content/doc/setup/desktop.md

@@ -0,0 +1,30 @@
+---
+title: "Desktop Packages"
+date: 2024-02-11T15:58:18+01:00
+draft: false
+type: "doc"
+menu:
+  sidebar:
+    parent: "setup"
+---
+
+# Desktop Packages
+
+Vikunja is available as an electron-based desktop application for Linux and Windows.
+
+## Installation
+
+1. Download the latest release for your platform from [the download page](https://dl.vikunja.io/desktop/).
+  * For Windows, choose the file with the `.exe` or `.msi` file ending
+  * For a Linux-based operating system, choose a file with an ending for your operating system - we have builds for Alpine, AppImage, Arch Linux, Debian-based systems, FreeBSD, Fedora and Snap.
+2. Run the downloaded package in the same way you would normally install a package for your OS.
+
+## Flatpack
+
+Vikunja Desktop can be installed via the [Flathub](https://flathub.org/apps/io.vikunja.Vikunja).
+
+To install it, run the following command:
+
+```
+flatpak install flathub io.vikunja.Vikunja
+```

docs/content/doc/setup/docker-start-to-finish.md

@@ -27,7 +27,6 @@ Create a directory for the project where all data and the compose file will live
 
 Create a `docker-compose.yml` file with the following contents in your directory:
 
-
 ```yaml
 version: '3'
 
@@ -37,7 +36,7 @@ services:
         environment:
             VIKUNJA_SERVICE_PUBLICURL: http://<the public url where vikunja is reachable>
             VIKUNJA_DATABASE_HOST: db
-            VIKUNJA_DATABASE_PASSWORD: secret
+            VIKUNJA_DATABASE_PASSWORD: changeme
             VIKUNJA_DATABASE_TYPE: mysql
             VIKUNJA_DATABASE_USER: vikunja
             VIKUNJA_DATABASE_DATABASE: vikunja
@@ -47,19 +46,24 @@ services:
         volumes:
             - ./files:/app/vikunja/files
         depends_on:
-            - db
+            db:
+                condition: service_healthy
         restart: unless-stopped
     db:
         image: mariadb:10
         command: --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
         environment:
-            MYSQL_ROOT_PASSWORD: supersupersecret
+            MYSQL_ROOT_PASSWORD: supersecret
             MYSQL_USER: vikunja
-            MYSQL_PASSWORD: supersecret
+            MYSQL_PASSWORD: changeme
             MYSQL_DATABASE: vikunja
         volumes:
             - ./db:/var/lib/mysql
         restart: unless-stopped
+        healthcheck:
+            test: ["CMD-SHELL", "mysqladmin ping -h localhost -u $$MYSQL_USER --password=$$MYSQL_PASSWORD"]
+            interval: 2s
+			start_period: 30s
 ```
 
 This defines two services, each with their own container:
@@ -75,6 +79,18 @@ The number before the colon is the host port - This is where you can reach vikun
 
 You'll need to change the value of the `VIKUNJA_SERVICE_PUBLICURL` environment variable to the public port or hostname where Vikunja is reachable.
 
+## Ensure adequate file permissions
+
+Vikunja runs as user `1000` and no group by default.
+
+To be able to upload task attachments or change the background of project, Vikunja must be able to write into the `files` directory.
+To do this, create the folder and chown it before starting the stack:
+
+```
+mkdir $PWD/files
+chown 1000 $PWD/files
+```
+
 ## Run it
 
 Run `sudo docker-compose up` in your directory and take a look at the output you get.

docs/content/doc/setup/full-docker-example.md

@@ -15,8 +15,6 @@ It uses a proxy configuration to make it available under a domain.
 
 For all available configuration options, see [configuration]({{< ref "config.md">}}).
 
-Once deployed, you might want to change the [`PUID` and `GUID` settings]({{< ref "install.md">}}#setting-user-and-group-id-of-the-user-running-vikunja) or [set the time zone]({{< ref "config.md">}}#timezone).
-
 After registering all your users, you might also want to [disable the user registration]({{<ref "config.md">}}#enableregistration).
 
 <div class="notification is-warning">
@@ -27,6 +25,23 @@ All examples on this page already reflect this and do not require additional wor
 
 {{< table_of_contents >}}
 
+## File permissions
+
+Vikunja runs as user `1000` and no group by default.
+You can use Docker's [`--user`](https://docs.docker.com/engine/reference/run/#user) flag to change that.
+
+You must ensure Vikunja is able to write into the `files` directory.
+To do this, create the folder and chown it before starting the stack:
+
+```
+mkdir $PWD/files
+chown 1000 $PWD/files
+```
+
+You'll need to do this before running any of the examples on this page.
+
+Vikunja will not try to aquire ownership of the files folder, as that would mean it had to run as root.
+
 ## PostgreSQL
 
 Vikunja supports postgres, mysql and sqlite as a database backend. The examples on this page use mysql with a mariadb container.
@@ -34,21 +49,20 @@ To use postgres as a database backend, change the `db` section of the examples t
 
 ```yaml
 db:
-  image: postgres:13
+  image: postgres:16
   environment:
-    POSTGRES_PASSWORD: secret
+    POSTGRES_PASSWORD: changeme
     POSTGRES_USER: vikunja
   volumes:
     - ./db:/var/lib/postgresql/data
   restart: unless-stopped
+  healthcheck:
+    test: ["CMD-SHELL", "pg_isready -h localhost -U $$POSTGRES_USER"]
+    interval: 2s
 ```
 
 You'll also need to change the `VIKUNJA_DATABASE_TYPE` to `postgres` on the api container declaration.
 
-<div class="notification is-warning">
-<b>NOTE:</b> The mariadb container can sometimes take a while to initialize, especially on the first run. During this time, the api container will fail to start at all. It will automatically restart every few seconds.
-</div>
-
 ## Sqlite
 
 Vikunja supports postgres, mysql and sqlite as a database backend. The examples on this page use mysql with a mariadb container.
@@ -79,6 +93,13 @@ You'll also need to remove or change the `VIKUNJA_DATABASE_TYPE` to `sqlite` on
 
 You can also remove the db section.
 
+To run the container, you need to create the directories first and make sure they have all required permissions:
+
+```
+mkdir $PWD/files $PWD/db
+chown 1000 $PWD/files $PWD/db
+```
+
 <div class="notification is-warning">
 <b>NOTE:</b> If you'll use your instance with more than a handful of users, we recommend using mysql or postgres.
 </div>
@@ -89,8 +110,13 @@ This example lets you host Vikunja without any reverse proxy in front of it.
 This is the absolute minimum configuration you need to get something up and running. 
 If you want to make Vikunja available on a domain or need tls termination, check out one of the other examples.
 
-Note that you need to change the [`VIKUNJA_SERVICE_PUBLICURL`]({{< ref "config.md" >}}#publicurl) environment variable to the ip (the docker host you're running this on) is reachable at. 
-Because the browser you'll use to access the Vikunja frontend uses that url to make the requests, it has to be able to reach that ip + port from the outside. 
+Note that you need to change the [`VIKUNJA_SERVICE_PUBLICURL`]({{< ref "config.md" >}}#publicurl) environment variable to the public ip or hostname including the port (the docker host you're running this on) is reachable at, prefixed with `http://`.
+Because the browser you'll use to access the Vikunja frontend uses that url to make the requests, it has to be able to reach it from the outside. 
+
+<div class="notification is-warning">
+<b>NOTE:</b> You must ensure Vikunja has write permissions on the `files` directory before starting the stack.
+To do this, <a href="#file-permissions">check out the related commands here</a>.
+</div>
 
 ```yaml
 version: '3'
@@ -99,9 +125,9 @@ services:
   vikunja:
     image: vikunja/vikunja
     environment:
-      VIKUNJA_SERVICE_PUBLICURL: http://<the public url where vikunja is reachable>
+      VIKUNJA_SERVICE_PUBLICURL: http://<the public ip or host where vikunja is reachable>
       VIKUNJA_DATABASE_HOST: db
-      VIKUNJA_DATABASE_PASSWORD: secret
+      VIKUNJA_DATABASE_PASSWORD: changeme
       VIKUNJA_DATABASE_TYPE: mysql
       VIKUNJA_DATABASE_USER: vikunja
       VIKUNJA_DATABASE_DATABASE: vikunja
@@ -111,19 +137,24 @@ services:
     volumes:
       - ./files:/app/vikunja/files
     depends_on:
-      - db
+      db:
+        condition: service_healthy
     restart: unless-stopped
   db:
     image: mariadb:10
     command: --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
     environment:
-      MYSQL_ROOT_PASSWORD: supersupersecret
+      MYSQL_ROOT_PASSWORD: supersecret
       MYSQL_USER: vikunja
-      MYSQL_PASSWORD: supersecret
+      MYSQL_PASSWORD: changeme
       MYSQL_DATABASE: vikunja
     volumes:
       - ./db:/var/lib/mysql
     restart: unless-stopped
+    healthcheck:
+      test: ["CMD-SHELL", "mysqladmin ping -h localhost -u $$MYSQL_USER --password=$$MYSQL_PASSWORD"]
+      interval: 2s
+      start_period: 30s
 ```
 
 ## Example with Traefik 2
@@ -136,6 +167,11 @@ We also make a few assumptions here which you'll most likely need to adjust for
 * The entrypoint you want to make vikunja available from is called `https`
 * The tls cert resolver is called `acme`
 
+<div class="notification is-warning">
+<b>NOTE:</b> You must ensure Vikunja has write permissions on the `files` directory before starting the stack.
+To do this, <a href="#file-permissions">check out the related commands here</a>.
+</div>
+
 ```yaml
 version: '3'
 
@@ -145,7 +181,7 @@ services:
     environment:
       VIKUNJA_SERVICE_PUBLICURL: http://<the public url where vikunja is reachable>
       VIKUNJA_DATABASE_HOST: db
-      VIKUNJA_DATABASE_PASSWORD: supersecret
+      VIKUNJA_DATABASE_PASSWORD: changeme
       VIKUNJA_DATABASE_TYPE: mysql
       VIKUNJA_DATABASE_USER: vikunja
       VIKUNJA_DATABASE_DATABASE: vikunja
@@ -156,10 +192,12 @@ services:
       - web
       - default
     depends_on:
-      - db
+      db:
+        condition: service_healthy
     restart: unless-stopped
     labels:
       - "traefik.enable=true"
+      - "traefik.docker.network=web"
       - "traefik.http.routers.vikunja.rule=Host(`vikunja.example.com`)"
       - "traefik.http.routers.vikunja.entrypoints=https"
       - "traefik.http.routers.vikunja.tls.certResolver=acme"
@@ -169,11 +207,15 @@ services:
     environment:
       MYSQL_ROOT_PASSWORD: supersupersecret 
       MYSQL_USER: vikunja
-      MYSQL_PASSWORD: supersecret
+      MYSQL_PASSWORD: changeme
       MYSQL_DATABASE: vikunja
     volumes:
       - ./db:/var/lib/mysql
     restart: unless-stopped
+    healthcheck:
+      test: ["CMD-SHELL", "mysqladmin ping -h localhost -u $$MYSQL_USER --password=$$MYSQL_PASSWORD"]
+      interval: 2s
+      start_period: 30s
 
 networks:
   web:
@@ -193,6 +235,11 @@ vikunja.example.com {
 Note that you need to change the [`VIKUNJA_SERVICE_PUBLICURL`]({{< ref "config.md" >}}#publicurl) environment variable to the ip (the docker host you're running this on) is reachable at.
 Because the browser you'll use to access the Vikunja frontend uses that url to make the requests, it has to be able to reach that ip + port from the outside.
 
+<div class="notification is-warning">
+<b>NOTE:</b> You must ensure Vikunja has write permissions on the `files` directory before starting the stack.
+To do this, <a href="#file-permissions">check out the related commands here</a>.
+</div>
+
 Docker Compose config:
 
 ```yaml
@@ -204,7 +251,7 @@ services:
     environment:
       VIKUNJA_SERVICE_PUBLICURL: http://<the public url where vikunja is reachable>
       VIKUNJA_DATABASE_HOST: db
-      VIKUNJA_DATABASE_PASSWORD: secret
+      VIKUNJA_DATABASE_PASSWORD: changeme
       VIKUNJA_DATABASE_TYPE: mysql
       VIKUNJA_DATABASE_USER: vikunja
       VIKUNJA_DATABASE_DATABASE: vikunja
@@ -214,19 +261,24 @@ services:
     volumes:
       - ./files:/app/vikunja/files
     depends_on:
-      - db
+      db:
+        condition: service_healthy
     restart: unless-stopped
   db:
     image: mariadb:10
     command: --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
     environment:
-      MYSQL_ROOT_PASSWORD: supersupersecret
+      MYSQL_ROOT_PASSWORD: supersecret
       MYSQL_USER: vikunja
-      MYSQL_PASSWORD: supersecret
+      MYSQL_PASSWORD: changeme
       MYSQL_DATABASE: vikunja
     volumes:
       - ./db:/var/lib/mysql
     restart: unless-stopped
+    healthcheck:
+      test: ["CMD-SHELL", "mysqladmin ping -h localhost -u $$MYSQL_USER --password=$$MYSQL_PASSWORD"]
+      interval: 2s
+      start_period: 30s
   caddy:
     image: caddy
     restart: unless-stopped
@@ -271,10 +323,13 @@ The docker-compose file we're going to use is exactly the same from the [example
 
 You may want to change the volumes to match the rest of your setup.
 
-Once deployed, you might want to change the [`PUID` and `GUID` settings]({{< ref "install.md">}}#setting-user-and-group-id-of-the-user-running-vikunja) or [set the time zone]({{< ref "config.md">}}#timezone).
-
 After registering all your users, you might also want to [disable the user registration]({{<ref "config.md">}}#enableregistration).
 
+<div class="notification is-warning">
+<b>NOTE:</b> You must ensure Vikunja has write permissions on the `files` directory before starting the stack.
+To do this, <a href="#file-permissions">check out the related commands here</a>.
+</div>
+
 ## Redis
 
 While Vikunja has support to use redis as a caching backend, you'll probably not need it unless you're using Vikunja with more than a handful of users.

docs/content/doc/setup/install.md

@@ -29,10 +29,11 @@ You can also:
 Vikunja can be installed in various ways.
 This document provides an overview and instructions for the different methods:
 
-* [Installing from binary](#install-from-binary)
+* [Installing from binary (manual)](#install-from-binary)
 * [Build from source]({{< ref "build-from-source.md">}})
 * [Docker](#docker)
-* [Debian packages](#debian-packages)
+* [Debian](#debian-packages)
+* [RPM](#rpm)
 * [FreeBSD](#freebsd--freenas)
 * [Kubernetes]({{< ref "k8s.md" >}})
 
@@ -139,17 +140,23 @@ It will automatically run all necessary database migrations.
 To get up and running quickly, use this command:
 
 ```
-touch vikunja.db
-docker run -p 3456:3456 -v $PWD/files:/app/vikunja/files -v $PWD/vikunja.db:/app/vikunja/vikunja.db vikunja/vikunja
+mkdir $PWD/files $PWD/db
+chown 1000 $PWD/files $PWD/db
+docker run -p 3456:3456 -v $PWD/files:/app/vikunja/files -v $PWD/db:/db vikunja/vikunja
 ```
 
 This will expose vikunja on port `3456` on the host running the container and use sqlite as database backend.
 
+**Note**: The container runs as the user `1000` and no group by default. 
+You can use Docker's [`--user`](https://docs.docker.com/engine/reference/run/#user) flag to change that.
+Make sure the new user has required permissions on the `db` and `files` folder.
+
 You can mount a local configuration like so:
 
 ```
-touch vikunja.db
-docker run -p 3456:3456 -v /path/to/config/on/host.yml:/app/vikunja/config.yml:ro -v $PWD/files:/app/vikunja/files -v $PWD/vikunja.db:/app/vikunja/vikunja.db vikunja/vikunja
+mkdir $PWD/files $PWD/db
+chown 1000 $PWD/files $PWD/db
+docker run -p 3456:3456 -v /path/to/config/on/host.yml:/app/vikunja/config.yml:ro -v $PWD/files:/app/vikunja/files -v $PWD/db:/db vikunja/vikunja
 ```
 
 Though it is recommended to use environment variables or `.env` files to configure Vikunja in docker.
@@ -162,20 +169,13 @@ Check out the [docker examples]({{<ref "full-docker-example.md">}}) for more adv
 By default, the container stores all files uploaded and used through vikunja inside of `/app/vikunja/files` which is created as a docker volume.
 You should mount the volume somewhere to the host to permanently store the files and don't lose them if the container restarts.
 
-### Setting user and group id of the user running vikunja
-
-You can set the user and group id of the user running vikunja with the `PUID` and `PGID` environment variables.
-This follows the pattern used by [the linuxserver.io](https://docs.linuxserver.io/general/understanding-puid-and-pgid) docker images.
-
-This is useful to solve general permission problems when host-mounting volumes such as the volume used for task attachments.
-
 ### Docker compose
 
 Check out the [docker examples]({{<ref "full-docker-example.md">}}) for more advanced configuration using docker compose.
 
 ## Debian packages
 
-Vikunja is available as debian packages.
+Vikunja is available as deb package for installation on debian-like systems.
 
 To install these, grab a `.deb` file from [the download page](https://dl.vikunja.io/vikunja) and run
 
@@ -186,6 +186,18 @@ dpkg -i vikunja.deb
 This will install Vikunja to `/opt/vikunja`.
 To configure it, use the config file in `/etc/vikunja/config.yml`.
 
+## RPM
+
+Vikunja is available as rpm package for installation on Fedora, CentOS and others.
+
+To install these, grab a `.rpm` file from [the download page](https://dl.vikunja.io/vikunja) and run
+
+```
+rpm -i vikunja.rpm
+```
+
+To configure Vikunja, use the config file in `/etc/vikunja/config.yml`.
+
 ## FreeBSD / FreeNAS
 
 Unfortunately, we currently can't provide pre-built binaries for FreeBSD.
@@ -213,10 +225,13 @@ go install github.com/magefile/mage
 ```
 mkdir /mnt/GO/code.vikunja.io
 cd /mnt/GO/code.vikunja.io
-git clone https://code.vikunja.io/api
-cd /mnt/GO/code.vikunja.io/api
+git clone https://code.vikunja.io/vikunja
+cd vikunja
 ```
 
+**Note:** Ceck out the version you want to build with `git checkout VERSION` - replace `VERSION` with the version want to use.
+If you don't do this, you'll build the [latest unstable build]({{< ref "versions.md">}}), which might contain bugs.
+
 ### Compile binaries
 
 ```

docs/content/doc/setup/migration.md

@@ -0,0 +1,57 @@
+---
+date: "2023-03-09:00:00+02:00"
+title: "Migration from third-party services"
+draft: false
+type: "doc"
+menu:
+  sidebar:
+    parent: "setup"
+    weight: 5
+---
+
+# Migration from third-party services
+
+There are several importers available for third-party services like Trello, Microsoft To Do or Todoist.
+All available migration options can be found [here](https://kolaente.dev/vikunja/vikunja/src/branch/main/config.yml.sample#L218).
+
+You can develop migrations for more services, see the [documentation]({{< ref "../development/migration.md">}}) for more info.
+
+{{< table_of_contents >}}
+
+## Trello
+
+### Config Setup
+
+Log into Trello and navigate to the [site](https://trello.com/app-key) to manage your API keys.
+Save your `Personal Key` for later and add your Vikunja domain to the Allowed Origins list.
+
+Create a `config.yml` file based on [default config file](https://kolaente.dev/vikunja/vikunja/src/branch/main/config.yml.sample) if you haven't already.
+
+- Copy the [Trello options](https://kolaente.dev/vikunja/vikunja/src/branch/main/config.yml.sample#L233) from the default config file
+- Set `enable` to true
+- Set `key` to your [trello API key](https://trello.com/app-key) 
+- Replace `<frontend url>` in `redirecturl` with your url
+
+### Config Loading
+
+To load the config with Vikunja, see the [installation]({{< ref "install.md">}}) documentation for instructions to load the `config.yml` file and start Vikunja.
+
+### Config Loading with Docker Compose
+
+In case you are using Docker Compose you need to edit `docker-compose.yml` to load `config.yml`.
+Mount the `config.yml` file into the Vikunja container, by adding this line to the volumes of the Vikunja container and replacing the `./path/to/config.yml` with the relative path from the `docker-compose.yml` to your `config.yml`.
+```yaml
+volumes:
+  - ./path/to/config.yml:/etc/vikunja/config.yml
+```
+
+After all the setup is done, start Vikunja as shown in the [Docker Compose setup]({{< ref "full-docker-example.md">}}). 
+
+### Start the Migration Process
+
+Log in, and navigate to Settings > Import from other services. In the list of available third-party services, there should be a Trello icon now.
+If not, ensure that you are properly loading your config file. Refer to the Vikunja log to see if the config file was loaded or not.
+In case the config file was loaded, and there is no Trello icon, make sure your [config setup](#config-setup) is correct.
+
+Click on Trello and on Get Started. This will redirect you to Trello where you need to allow Vikunja Migration to access your account. In case there is an error when being directed to Trello, make sure that your Vikunja domain is in your Trello Allowed Origins list.
+Once this is done, you will be redirected to Vikunja which should tell you that the migration is in progress now. Note that this can take up to several hours depending on the amount of boards in your Trello account.

docs/content/doc/setup/openid-examples.md

@@ -10,7 +10,7 @@ menu:
 
 # OpenID example configurations
 
-On this page you will find examples about how to set up Vikunja with a third-party OpenID provider.
+On this page you will find examples about how to set up Vikunja with a third-party OAuth 2.0 provider using OpenID Connect.
 To add another example, please [edit this document](https://kolaente.dev/vikunja/vikunja/src/branch/main/docs/content/doc/setup/openid-examples.md) and send a PR.
 
 {{< table_of_contents >}}
@@ -67,7 +67,7 @@ Google config:
 
 Note that there currently seems to be no way to stop creation of new users, even when `enableregistration` is `false` in the configuration. This means that this approach works well only with an "Internal Organization" app for Google Workspace, which limits the allowed users to organizational accounts only. External / public applications will potentially allow every Google user to register.
 
-## Keycloak 
+## Keycloak
 
 Vikunja Config:
 ```yaml
@@ -111,4 +111,7 @@ auth:
         clientsecret: "" # copy from Authentik
 ```
 
-**Note:** The `authurl` that Vikunja requires is not the `Authorize URL` that you can see in the Provider. Vikunja uses Open ID Discovery to find the correct endpoint to use. Vikunja does this by automatically accessing the `OpenID Configuration URL` (usually `https://authentik.mydomain.com/application/o/vikunja/.well-known/openid-configuration`). Use this URL without the `.well-known/openid-configuration` as the `authurl`.
+**Note:** The `authurl` that Vikunja requires is not the `Authorize URL` that you can see in the Provider.
+OpenID Discovery is used to find the correct endpoint to use automatically, by accessing the `OpenID Configuration URL` (usually `https://authentik.mydomain.com/application/o/vikunja/.well-known/openid-configuration`).
+Use this URL without the `.well-known/openid-configuration` as the `authurl`.
+Typically this URL can be found in the metadata section within your identity provider.

docs/content/doc/setup/openid.md

@@ -0,0 +1,215 @@
+---
+date: "2022-08-09:00:00+02:00"
+title: "OpenID"
+draft: false
+type: "doc"
+menu:
+  sidebar:
+    parent: "setup"
+---
+
+# OpenID
+
+Vikunja allows for authentication with an external identity source such as Authentik, Keycloak or similar via the
+[OpenID Connect](https://openid.net/developers/specs/) standard.
+
+{{< table_of_contents >}}
+
+## OpenID Connect Overview
+
+OpenID Connect is a standardized identity layer built on top of the more generic OAuth 2.0 specification, simplying interaction between the involved parties significantly.
+While the [OpenID specification](https://openid.net/specs/openid-connect-core-1_0.html#Overview) is worth a read, we summarize the most important basics here.
+
+The involved parties are:
+
+- **Resource Owner:** typically the end-user
+- **Resource Server:** the application server handling requests from the client, the Vikunja API in our case
+- **Client:** the application or client accessing the RS on behalf of the RO. Vikunja web frontend or any of the apps
+- **Authorization Server:** the server verifying the user identity and issuing tokens. These docs also use the words `OAuth 2.0 provider`, `Identity Provider` interchangeably.
+
+After the user is authenticated, the provider issues a token to the user, containing various claims.
+There's different types of tokens (ID token, access token, refresh token), and all of them are created as [JSON Web Token](https://www.rfc-editor.org/info/rfc7519).
+Claims in turn are assertions containing information about the token bearer, usually the user.
+
+**Scopes** are requested by the client when redirecting the end-user to the Authorization Server for authentication, and indirectly control which claims are included in the resulting tokens.
+There's certain default scopes, but its also possible to define custom scopes, which are used by the feature assigning users to Teams automatically.
+
+## Supported and required claims
+
+Vikunja only requires a few claims to be present in the ID token to successfully authenticate the user.
+Additional claims can be added though to customize behaviour during user creation.
+
+The following table gives an overview about the claims supported by Vikunja. The scope column lists the scope that should request the claim according to the [OpenID Connect Standard](https://openid.net/specs/openid-connect-core-1_0.html#ScopeClaims). It omits the claims such as `sub` or `issuer` required by the `openid` scope, which must always be present.
+
+| Claim | Type | Scope | Comment |
+| ------|------|-------|---------|
+| email | required | email | Sets the email address of the user. Taken from the `userinfo` endpoint if not present in ID token. User creation fails if claim not present and userinfo lookup fails. |
+| name | optional | profile | Sets the display name of the user. Taken from the `userinfo` endpoint if not present in ID token. |
+| preferred_username | optional | profile | Sets the username of the user. Taken from the `userinfo` endpoint if not present in ID token. If this also doesn't contain the claim, use the `nickname` claim from `userinfo` instead. If that one is not available either, the username is auto-generated by Vikunja. |
+| vikunja_groups | optional | N/A | Can be used to automatically assign users to teams. See below for a more detailed explanation about the expected format and implementation examples. |
+
+If one of the claims `email`, `name` or `preferred_username` is missing from the ID token, Vikunja will attempt to query the `userinfo` endpoint to obtain the information from there.
+
+## Configuring OIDC Authentication
+
+To achieve authentication via an external provider, it is required to (a) configure a confidential Client on your OAuth 2.0 provider and (b) configure Vikunja to authenticate against this provider. 
+[Example configurations]({{< ref "openid-examples.md">}}) are provided for various different identity providers, below you can find generic guides though.
+
+OpenID Connect defines various flow types indicating how exactly the interaction between the involved parties work, Vikunja makes use of the standard **Authorization Code Flow**.
+
+### Step 1: Configure your Authorization Server
+
+The first step is to configure the Authorization Server to correctly handle requests coming from Vikunja.
+In general, this involves the following steps at a minimum:
+
+- Create a confidential client and obtain the client ID and client secret
+- Configure (whitelist) redirect URLs that can be used by Vikunja
+- Make sure the required scopes (`openid profile email` are the default scopes used by Vikunja) are supported
+- Optional: configure an additional scope for automatic team assignment, see below for details
+
+More detailed instructions for various different identity providers can be [found here]({{< ref "openid-examples.md">}})
+
+### Step 2: Configure Vikunja
+
+Vikunja has to be configured to use the identity provider. Please note that there is currently no option to configure these settings via environment variables, they have to be defined using the configuration file. The configuration schema is as follows:
+
+```yaml
+auth:
+  openid:
+    enabled: true
+    redirecturl: https://vikunja.mydomain.com/auth/openid/  <---- slash at the end is important
+    providers:
+      - name: <provider-name>
+        authurl: <auth-url>  <----- Used for OIDC Discovery, usually the issuer 
+        clientid: <vikunja client-id>
+        clientsecret: <vikunja client-secret>
+        scope: openid profile email
+```
+
+The value for `authurl` can be obtained from the metadata of your provider.
+Note that the `authurl` is used for [OIDC Discovery](https://openid.net/specs/openid-connect-discovery-1_0.html).
+Typically, you'll want to use the `issuer` URL as found in the provider metadata.
+
+The values for `clientid` and `clientsecret` are typically obtained when configuring the client.
+The scope usually doesn't need to be specified or changed, unless you want to configure the automatic team assignment.
+
+Optionally it is possible to disable local authentication and therefore forcing users to login via OpenID connect:
+
+```yaml
+auth:
+  local:
+    enabled: false
+```
+
+## Automatically assign users to teams
+
+Starting with version 0.24.0, Vikunja is capable of automatically adding users to a team based on OIDC claims added by the identity provider.
+If configured, Vikunja will sync teams, automatically create new ones and make sure the members are part of the configured teams.
+Teams which exist only because they were created from oidc attributes are not editable in Vikunja.
+
+To distinguish between teams created in Vikunja and teams generated automatically via oidc, generated teams have an `oidcID` assigned internally.
+Within the UI, the teams created through OIDC get a `(OIDC)` suffix to make them distinguishable from locally created teams.
+
+On a high level, you need to make sure that the **ID token** issued by your identity provider contains a `vikunja_groups` claim, following the structure defined below.
+It depends on the provider being used as well as the preferences of the administrator how this is achieved.
+Typically you'd want to request an additional scope (e.g. `vikunja_scope`) which then triggers the identity provider to add the claim.
+If the `vikunja_groups` is part of the **ID token**, Vikunja will  start the procedure and import teams and team memberships.
+
+The minimal claim structure expected by Vikunja is as follows:
+
+```json
+{
+    "vikunja_groups": [
+        {
+            "name": "team 1",
+            "oidcID": 33349
+        },
+        {
+            "name": "team 2",
+            "oidcID": 35933
+        }
+    ]
+}
+```
+
+It is also possible to pass the `description` and the `isPublic` flag as optional parameters. If not present, the description will be empty and project visibility defaults to false.
+
+```json
+{
+    "vikunja_groups": [
+        {
+            "name": "team 3",
+            "oidcID": 33349,
+            "description": "My Team Description",
+            "isPublic": true
+        },
+    ]
+}
+```
+
+For each team, you need to define a team `name` and an `oidcID`, where the `oidcID` can be any string with a length of less than 250 characters.
+The `oidcID` is used to uniquely identify the team, so please make sure to keep this unique.
+
+Below you'll find two example implementations for Authentik and Keycloak.
+If you've successfully implemented this with another identity provider, please let us know and submit a PR to improve the docs.
+
+### Setup in Authentik
+
+To configure automatic team management through Authentik, we assume you have already [set up Authentik]({{< ref "openid-examples.md">}}#authentik) as an OIDC provider for authentication with Vikunja.
+
+To use Authentik's group assignment feature, follow these steps:
+
+1. Edit [your config]({{< ref "config.md">}}) to include the following scopes: `openid profile email vikunja_scope`
+2. Open `<your authentik url>/if/admin/#/core/property-mappings`
+3. Create a new property mapping called `vikunja_scope` as scope mapping. There is a field `expression` to enter python expressions that will be delivered with the oidc token.
+4. Write a small script like the following to add group information to `vikunja_scope`:
+
+```python
+groupsDict = {"vikunja_groups": []}
+for group in request.user.ak_groups.all():
+  groupsDict["vikunja_groups"].append({"name": group.name, "oidcID": group.num_pk})
+return groupsDict
+```
+
+5. In Authentik's menu on the left, go to Applications > Providers > Select the Vikunja provider. Then click on "Edit", on the bottom open "Advanced protocol settings", select the newly created property mapping under "Scopes". Save the provider.
+
+Now when you log into Vikunja via Authentik it will show you a list of scopes you are claiming.
+You should see the description you entered on the OIDC provider's admin area.
+
+Proceed to vikunja and open the teams page in the sidebar menu.
+You should see "(OIDC)" written next to each team you were assigned through OIDC.
+
+### Setup in Keycloak
+
+The kind people from Makerspace Darmstadt e.V. have written [a guide on how to create a mapper for Vikunja here](https://github.com/makerspace-darmstadt/keycloak-vikunja-mapper).
+
+## Use cases
+
+All examples assume one team called "Team 1" to be configured within your provider.
+
+* *Token delivers team.name +team.oidcID and Vikunja team does not exist:* \
+New team will be created called "Team 1" with attribute oidcID: "33929"
+
+2. *In Vikunja Team with name "team 1" already exists in vikunja, but has no oidcID set:* \
+new team will be created called "team 1" with attribute oidcID: "33929"
+
+3. *In Vikunja Team with name "team 1" already exists in vikunja, but has different oidcID set:* \
+new team will be created called "team 1" with attribute oidcID: "33929"
+
+4. *In Vikunja Team with oidcID "33929" already exists in vikunja, but has different name than "team1":* \
+new team will be created called "team 1" with attribute oidcID: "33929"
+
+5. *Scope vikunja_scope is not set:* \
+nothing happens
+
+6. *oidcID is not set:* \
+You'll get error.
+Custom Scope malformed
+"The custom scope set by the OIDC provider is malformed. Please make sure the openid provider sets the data correctly for your scope. Check especially to have set an oidcID."
+
+7. *In Vikunja I am in "team 3" with oidcID "", but the token does not deliver any data for "team 3":* \
+You will stay in team 3 since it was not set by the oidc provider
+
+8. *In Vikunja I am in "team 3" with oidcID "12345", but the token does not deliver any data for "team 3"*:\
+You will be signed out of all teams, which have an oidcID set and are not contained in the token.
+Especially if you've been the last team member, the team will be deleted.

docs/content/doc/setup/versions.md

@@ -10,7 +10,7 @@ menu:
 
 # Vikunja Versions
 
-The Vikunja api and frontend are available in two different release flavors.
+Vikunja api is available in two different release flavors.
 
 {{< table_of_contents >}}
 
@@ -30,6 +30,9 @@ There might be multiple new such builds a day.
 Versions contain the last stable version, the number of commits since then and the commit the currently running binary was built from.
 They look like this: `v0.18.1+269-5cc4927b9e`
 
+Since a release is also cut from the main branch at some point, features from unstable will eventually become available in stable releases.
+At the point in time of a new version release, the unstable build is the same exact thing.
+
 The demo instance at [try.vikunja.io](https://try.vikunja.io) automatically updates and always runs the last unstable build.
 
 ## Switching between versions

docs/content/doc/usage/caldav.md

@@ -72,6 +72,7 @@ Vikunja **currently does not** support these properties:
 * [Evolution](https://wiki.gnome.org/Apps/Evolution/)
 * [OpenTasks](https://opentasks.app/) & [DAVx⁵](https://www.davx5.com/)
 * [Tasks (Android)](https://tasks.org/)
+* [Korganizer](https://apps.kde.org/korganizer/)
 
 ### Not working
 

docs/content/doc/usage/cli.md

@@ -28,13 +28,21 @@ All commands use the same standard [config file]({{< ref "../setup/config.md">}}
 
 ## Using the cli in docker
 
-When running Vikunja in docker, you'll need to execute all commands in the `api` container.
+When running Vikunja in docker, you'll need to execute all commands in the `vikunja` container.
 Instead of running the `vikunja` binary directly, run it like this:
 
 ```sh
-docker exec <name of the vikunja api container> /app/vikunja/vikunja <subcommand>
+docker exec <name of the vikunja container> /app/vikunja/vikunja <subcommand>
 ```
 
+If you need to run a bunch of Vikunja commands, you can also create a shell alias for it:
+
+```sh
+alias vikunja-docker='docker exec <name of the vikunja container> /app/vikunja/vikunja'
+```
+
+Then use it as `vikunja-docker <subcommand>`.
+
 ### `dump`
 
 Creates a zip file with all vikunja-related files.

docs/content/doc/usage/errors.md

@@ -44,6 +44,7 @@ This document describes the different errors Vikunja can return.
 | 1020      | 412 | This user account is disabled. |
 | 1021      | 412 | This account is managed by a third-party authentication provider. |
 | 1021      | 412 | The username must not contain spaces. |
+| 1022      | 412 | The custom scope set by the OIDC provider is malformed. Please make sure the openid provider sets the data correctly for your scope. Check especially to have set an oidcID. |
 
 ## Validation
 
@@ -54,47 +55,51 @@ This document describes the different errors Vikunja can return.
 
 ## Project
 
-| ErrorCode | HTTP Status Code | Description                                                                                                                         |
-|-----------|------------------|-------------------------------------------------------------------------------------------------------------------------------------|
-| 3001      | 404 | The project does not exist.                                                                                                         |
-| 3004      | 403 | The user needs to have read permissions on that project to perform that action.                                                     |
-| 3005      | 400 | The project title cannot be empty.                                                                                                  |
-| 3006      | 404 | The project share does not exist.                                                                                                   |
-| 3007      | 400 | A project with this identifier already exists.                                                                                      |
+| ErrorCode | HTTP Status Code | Description                                                                                                                        |
+|-----------|------------------|------------------------------------------------------------------------------------------------------------------------------------|
+| 3001      | 404 | The project does not exist.                                                                                                        |
+| 3004      | 403 | The user needs to have read permissions on that project to perform that action.                                                    |
+| 3005      | 400 | The project title cannot be empty.                                                                                                 |
+| 3006      | 404 | The project share does not exist.                                                                                                  |
+| 3007      | 400 | A project with this identifier already exists.                                                                                     |
 | 3008      | 412 | The project is archived and can therefore only be accessed read only. This is also true for all tasks associated with this project. |
-| 3009      | 412 | The project cannot belong to a dynamically generated parent project like "Favorites".                                               |
-| 3010      | 412 | This project cannot be a child of itself.                                                                                           |
-| 3011      | 412 | This project cannot have a cyclic relationship to a parent project.                                                                 |
-| 3012      | 412 | This project cannot be deleted because a user has set it as their default project.                                                  |
-| 3013      | 412 | This project cannot be archived because a user has set it as their default project.                                                 |
+| 3009      | 412 | The project cannot belong to a dynamically generated parent project like "Favorites".                                              |
+| 3010      | 412 | This project cannot be a child of itself.                                                                                          |
+| 3011      | 412 | This project cannot have a cyclic relationship to a parent project.                                                                |
+| 3012      | 412 | This project cannot be deleted because a user has set it as their default project.                                                 |
+| 3013      | 412 | This project cannot be archived because a user has set it as their default project.                                                |
+| 3014      | 404 | This project view does not exist.                                                                                                  |
 
 ## Task
 
 | ErrorCode | HTTP Status Code | Description                                                                |
 |-----------|------------------|----------------------------------------------------------------------------|
-| 4001 | 400 | The project task text cannot be empty.                                     |
-| 4002 | 404 | The project task does not exist.                                           |
-| 4003 | 403 | All bulk editing tasks must belong to the same project.                    |
-| 4004 | 403 | Need at least one task when bulk editing tasks.                            |
-| 4005 | 403 | The user does not have the right to see the task.                          |
-| 4006 | 403 | The user tried to set a parent task as the task itself.                    |
-| 4007 | 400 | The user tried to create a task relation with an invalid kind of relation. |
-| 4008 | 409 | The user tried to create a task relation which already exists.             |
-| 4009 | 404 | The task relation does not exist.                                          |
-| 4010 | 400 | Cannot relate a task with itself.                                          |
-| 4011 | 404 | The task attachment does not exist.                                        |
-| 4012 | 400 | The task attachment is too large.                                          |
-| 4013 | 400 | The task sort param is invalid.                                            |
-| 4014 | 400 | The task sort order is invalid.                                            |
-| 4015 | 404 | The task comment does not exist.                                           |
-| 4016 | 400 | Invalid task field.                                                        |
-| 4017 | 400 | Invalid task filter comparator.                                            |
-| 4018 | 400 | Invalid task filter concatinator.                                          |
-| 4019 | 400 | Invalid task filter value.                                                 |
-| 4020 | 400 | The provided attachment does not belong to that task.                      |
-| 4021 | 400 | This user is already assigned to that task.                                |
-| 4022 | 400 | The task has a relative reminder which does not specify relative to what.  |
-| 4023 | 409 | Tried to create a task relation which would create a cycle.                |
+| 4001      | 400 | The project task text cannot be empty.                                     |
+| 4002      | 404 | The project task does not exist.                                           |
+| 4003      | 403 | All bulk editing tasks must belong to the same project.                    |
+| 4004      | 403 | Need at least one task when bulk editing tasks.                            |
+| 4005      | 403 | The user does not have the right to see the task.                          |
+| 4006      | 403 | The user tried to set a parent task as the task itself.                    |
+| 4007      | 400 | The user tried to create a task relation with an invalid kind of relation. |
+| 4008      | 409 | The user tried to create a task relation which already exists.             |
+| 4009      | 404 | The task relation does not exist.                                          |
+| 4010      | 400 | Cannot relate a task with itself.                                          |
+| 4011      | 404 | The task attachment does not exist.                                        |
+| 4012      | 400 | The task attachment is too large.                                          |
+| 4013      | 400 | The task sort param is invalid.                                            |
+| 4014      | 400 | The task sort order is invalid.                                            |
+| 4015      | 404 | The task comment does not exist.                                           |
+| 4016      | 400 | Invalid task field.                                                        |
+| 4017      | 400 | Invalid task filter comparator.                                            |
+| 4018      | 400 | Invalid task filter concatinator.                                          |
+| 4019      | 400 | Invalid task filter value.                                                 |
+| 4020      | 400 | The provided attachment does not belong to that task.                      |
+| 4021      | 400 | This user is already assigned to that task.                                |
+| 4022      | 400 | The task has a relative reminder which does not specify relative to what.  |
+| 4023      | 409 | Tried to create a task relation which would create a cycle.                |
+| 4024      | 400 | The provided filter expression is invalid.                                 |
+| 4025      | 400 | The reaction kind is invalid.                                              |
+| 4026      | 400 | You must provide a project view ID when sorting by position.               |
 
 ## Team
 
@@ -106,6 +111,9 @@ This document describes the different errors Vikunja can return.
 | 6005 | 409 | The user is already a member of that team.                           |
 | 6006 | 400 | Cannot delete the last team member.                                  |
 | 6007 | 403 | The team does not have access to the project to perform that action. |
+| 6008 | 400 | There are no teams found with that team name. |
+| 6009 | 400 | There is no oidc team with that team name and oidcId. |
+| 6010 | 400 | There are no oidc teams found for the user. |
 
 ## User Project Access
 

docs/content/doc/usage/filters.md

@@ -0,0 +1,67 @@
+---
+title: "Filters"
+date: 2024-03-09T19:51:32+02:00
+draft: false
+type: doc
+menu:
+  sidebar:
+    parent: "usage"
+---
+
+# Filter Syntax
+
+To filter tasks via the api, you can use a query syntax similar to SQL. 
+
+This document is about filtering via the api. To filter in Vikunja's web ui, check out the help text below the filter query input.
+
+{{< table_of_contents >}}
+
+## Available fields
+
+The available fields for filtering include:
+
+*   `done`: Whether the task is completed or not
+*   `priority`: The priority level of the task (1-5)
+*   `percentDone`: The percentage of completion for the task (0-100)
+*   `dueDate`: The due date of the task
+*   `startDate`: The start date of the task
+*   `endDate`: The end date of the task
+*   `doneAt`: The date and time when the task was completed
+*   `assignees`: The assignees of the task
+*   `labels`: The labels associated with the task
+*   `project`: The project the task belongs to (only available for saved filters, not on a project level)
+
+You can date math to set relative dates. Click on the date value in a query to find out more.
+
+All strings must be either single-word or enclosed in `"` or `'`. This extends to date values like `2024-03-11`.
+
+## Operators
+
+The available operators for filtering include:
+
+*   `!=`: Not equal to
+*   `=`: Equal to
+*   `>`: Greater than
+*   `>=`: Greater than or equal to
+*   `<`: Less than
+*   `<=`: Less than or equal to
+*   `like`: Matches a pattern (using wildcard `%`)
+*   `in`: Matches any value in a comma-seperated list of values
+
+To combine multiple conditions, you can use the following logical operators:
+
+*   `&&`: AND operator, matches if all conditions are true
+*   `||`: OR operator, matches if any of the conditions are true
+*   `(` and `)`: Parentheses for grouping conditions
+
+## Examples
+
+Here are some examples of filter queries:
+
+*   `priority = 4`: Matches tasks with priority level 4
+*   `dueDate < now`: Matches tasks with a due date in the past
+*   `done = false && priority >= 3`: Matches undone tasks with priority level 3 or higher
+*   `assignees in [user1, user2]`: Matches tasks assigned to either "user1" or "user2
+*   `(priority = 1 || priority = 2) && dueDate <= now`: Matches tasks with priority level 1 or 2 and a due date in the past
+
+

flake.lock

@@ -2,11 +2,11 @@
   "nodes": {
     "nixpkgs": {
       "locked": {
-        "lastModified": 1701336116,
-        "narHash": "sha256-kEmpezCR/FpITc6yMbAh4WrOCiT2zg5pSjnKrq51h5Y=",
+        "lastModified": 1712449641,
+        "narHash": "sha256-U9DDWMexN6o5Td2DznEgguh8TRIUnIl9levmit43GcI=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "f5c27c6136db4d76c30e533c20517df6864c46ee",
+        "rev": "600b15aea1b36eeb43833a50b0e96579147099ff",
         "type": "github"
       },
       "original": {

flake.nix

@@ -0,0 +1,20 @@
+{
+  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
+          nodePackages.pnpm cypress 
+          # API tools
+          go golangci-lint mage
+          # Desktop
+          electron
+        ]; 
+      };
+    };
+}

frontend/.gitignore

@@ -13,7 +13,6 @@ node_modules
 /dist*
 coverage
 *.zip
-.direnv/
 
 # Test files
 cypress/screenshots

frontend/.nvmrc

@@ -1 +1 @@
-20.11.0
+20.12.2

frontend/cypress/e2e/project/prepareProjects.ts

@@ -1,15 +1,50 @@
 import {ProjectFactory} from '../../factories/project'
 import {TaskFactory} from '../../factories/task'
+import {ProjectViewFactory} from "../../factories/project_view";
+
+export function createDefaultViews(projectId) {
+	ProjectViewFactory.truncate()
+	const list = ProjectViewFactory.create(1, {
+		id: 1,
+		project_id: projectId,
+		view_kind: 0,
+	}, false)
+	const gantt = ProjectViewFactory.create(1, {
+		id: 2,
+		project_id: projectId,
+		view_kind: 1,
+	}, false)
+	const table = ProjectViewFactory.create(1, {
+		id: 3,
+		project_id: projectId,
+		view_kind: 2,
+	}, false)
+	const kanban = ProjectViewFactory.create(1, {
+		id: 4,
+		project_id: projectId,
+		view_kind: 3,
+		bucket_configuration_mode: 1,
+	}, false)
+
+	return [
+		list[0],
+		gantt[0],
+		table[0],
+		kanban[0],
+	]
+}
 
 export function createProjects() {
 	const projects = ProjectFactory.create(1, {
 		title: 'First Project'
 	})
 	TaskFactory.truncate()
+	projects.views = createDefaultViews(projects[0].id)
 	return projects
 }
 
-export function prepareProjects(setProjects = (...args: any[]) => {}) {
+export function prepareProjects(setProjects = (...args: any[]) => {
+}) {
 	beforeEach(() => {
 		const projects = createProjects()
 		setProjects(projects)

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

@@ -2,6 +2,7 @@ import {createFakeUserAndLogin} from '../../support/authenticateUser'
 
 import {ProjectFactory} from '../../factories/project'
 import {prepareProjects} from './prepareProjects'
+import {ProjectViewFactory} from '../../factories/project_view'
 
 describe('Project History', () => {
 	createFakeUserAndLogin()
@@ -11,24 +12,31 @@ describe('Project History', () => {
 		cy.intercept(Cypress.env('API_URL') + '/projects*').as('loadProjectArray')
 		cy.intercept(Cypress.env('API_URL') + '/projects/*').as('loadProject')
 		
-		const projects = ProjectFactory.create(6)
+		const projects = ProjectFactory.create(7)
+		ProjectViewFactory.truncate()
+		projects.forEach(p => ProjectViewFactory.create(1, {
+			id: p.id,
+			project_id: p.id,
+		}, false))
 
 		cy.visit('/')
 		cy.wait('@loadProjectArray')
 		cy.get('body')
 			.should('not.contain', 'Last viewed')
 
-		cy.visit(`/projects/${projects[0].id}`)
+		cy.visit(`/projects/${projects[0].id}/${projects[0].id}`)
 		cy.wait('@loadProject')
-		cy.visit(`/projects/${projects[1].id}`)
+		cy.visit(`/projects/${projects[1].id}/${projects[1].id}`)
 		cy.wait('@loadProject')
-		cy.visit(`/projects/${projects[2].id}`)
+		cy.visit(`/projects/${projects[2].id}/${projects[2].id}`)
 		cy.wait('@loadProject')
-		cy.visit(`/projects/${projects[3].id}`)
+		cy.visit(`/projects/${projects[3].id}/${projects[3].id}`)
 		cy.wait('@loadProject')
-		cy.visit(`/projects/${projects[4].id}`)
+		cy.visit(`/projects/${projects[4].id}/${projects[4].id}`)
 		cy.wait('@loadProject')
-		cy.visit(`/projects/${projects[5].id}`)
+		cy.visit(`/projects/${projects[5].id}/${projects[5].id}`)
+		cy.wait('@loadProject')
+		cy.visit(`/projects/${projects[6].id}/${projects[6].id}`)
 		cy.wait('@loadProject')
 
 		// cy.visit('/')
@@ -46,5 +54,6 @@ describe('Project History', () => {
 			.should('contain', projects[3].title)
 			.should('contain', projects[4].title)
 			.should('contain', projects[5].title)
+			.should('contain', projects[6].title)
 	})
 })

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

@@ -11,7 +11,7 @@ describe('Project View Gantt', () => {
 
 	it('Hides tasks with no dates', () => {
 		const tasks = TaskFactory.create(1)
-		cy.visit('/projects/1/gantt')
+		cy.visit('/projects/1/2')
 
 		cy.get('.g-gantt-rows-container')
 			.should('not.contain', tasks[0].title)
@@ -25,7 +25,7 @@ describe('Project View Gantt', () => {
 		nextMonth.setDate(1)
 		nextMonth.setMonth(9)
 
-		cy.visit('/projects/1/gantt')
+		cy.visit('/projects/1/2')
 
 		cy.get('.g-timeunits-container')
 			.should('contain', format(now, 'MMMM'))
@@ -38,7 +38,7 @@ describe('Project View Gantt', () => {
 			start_date: now.toISOString(),
 			end_date: new Date(new Date(now).setDate(now.getDate() + 4)).toISOString(),
 		})
-		cy.visit('/projects/1/gantt')
+		cy.visit('/projects/1/2')
 
 		cy.get('.g-gantt-rows-container')
 			.should('not.be.empty')
@@ -50,7 +50,7 @@ describe('Project View Gantt', () => {
 			start_date: null,
 			end_date: null,
 		})
-		cy.visit('/projects/1/gantt')
+		cy.visit('/projects/1/2')
 
 		cy.get('.gantt-options .fancycheckbox')
 			.contains('Show tasks which don\'t have dates set')
@@ -69,7 +69,7 @@ describe('Project View Gantt', () => {
 			start_date: now.toISOString(),
 			end_date: new Date(new Date(now).setDate(now.getDate() + 4)).toISOString(),
 		})
-		cy.visit('/projects/1/gantt')
+		cy.visit('/projects/1/2')
 
 		cy.get('.g-gantt-rows-container .g-gantt-row .g-gantt-row-bars-container div .g-gantt-bar')
 			.first()
@@ -83,7 +83,7 @@ describe('Project View Gantt', () => {
 		const now = Date.UTC(2022, 10, 9)
 		cy.clock(now, ['Date'])
 
-		cy.visit('/projects/1/gantt')
+		cy.visit('/projects/1/2')
 
 		cy.get('.project-gantt .gantt-options .field .control input.input.form-control')
 			.click()
@@ -99,7 +99,7 @@ describe('Project View Gantt', () => {
 	})
 
 	it('Should change the date range based on date query parameters', () => {
-		cy.visit('/projects/1/gantt?dateFrom=2022-09-25&dateTo=2022-11-05')
+		cy.visit('/projects/1/2?dateFrom=2022-09-25&dateTo=2022-11-05')
 
 		cy.get('.g-timeunits-container')
 			.should('contain', 'September 2022')
@@ -115,7 +115,7 @@ describe('Project View Gantt', () => {
 			start_date: formatISO(now),
 			end_date: formatISO(now.setDate(now.getDate() + 4)),
 		})
-		cy.visit('/projects/1/gantt')
+		cy.visit('/projects/1/2')
 
 		cy.get('.gantt-container .g-gantt-chart .g-gantt-row-bars-container .g-gantt-bar')
 			.dblclick()

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

@@ -4,35 +4,64 @@ import {BucketFactory} from '../../factories/bucket'
 import {ProjectFactory} from '../../factories/project'
 import {TaskFactory} from '../../factories/task'
 import {prepareProjects} from './prepareProjects'
+import {ProjectViewFactory} from "../../factories/project_view";
+import {TaskBucketFactory} from "../../factories/task_buckets";
 
 function createSingleTaskInBucket(count = 1, attrs = {}) {
 	const projects = ProjectFactory.create(1)
-	const buckets = BucketFactory.create(2, {
+	const views = ProjectViewFactory.create(1, {
+		id: 1,
 		project_id: projects[0].id,
+		view_kind: 3,
+		bucket_configuration_mode: 1,
+	})
+	const buckets = BucketFactory.create(2, {
+		project_view_id: views[0].id,
 	})
 	const tasks = TaskFactory.create(count, {
 		project_id: projects[0].id,
-		bucket_id: buckets[0].id,
 		...attrs,
 	})
-	return tasks[0]
+	TaskBucketFactory.create(1, {
+		task_id: tasks[0].id,
+		bucket_id: buckets[0].id,
+		project_view_id: views[0].id,
+	})
+	return {
+		task: tasks[0],
+		view: views[0],
+		project: projects[0],
+	}
+}
+
+function createTaskWithBuckets(buckets, count = 1) {
+	const data = TaskFactory.create(10, {
+		project_id: 1,
+	})
+	TaskBucketFactory.truncate()
+	data.forEach(t => TaskBucketFactory.create(count, {
+		task_id: t.id,
+		bucket_id: buckets[0].id,
+		project_view_id: buckets[0].project_view_id,
+	}, false))
+
+	return data
 }
 
 describe('Project View Kanban', () => {
 	createFakeUserAndLogin()
 	prepareProjects()
-	
+
 	let buckets
 	beforeEach(() => {
-		buckets = BucketFactory.create(2)
+		buckets = BucketFactory.create(2, {
+			project_view_id: 4,
+		})
 	})
 
 	it('Shows all buckets with their tasks', () => {
-		const data = TaskFactory.create(10, {
-			project_id: 1,
-			bucket_id: 1,
-		})
-		cy.visit('/projects/1/kanban')
+		const data = createTaskWithBuckets(buckets, 10)
+		cy.visit('/projects/1/4')
 
 		cy.get('.kanban .bucket .title')
 			.contains(buckets[0].title)
@@ -46,11 +75,8 @@ describe('Project View Kanban', () => {
 	})
 
 	it('Can add a new task to a bucket', () => {
-		TaskFactory.create(2, {
-			project_id: 1,
-			bucket_id: 1,
-		})
-		cy.visit('/projects/1/kanban')
+		createTaskWithBuckets(buckets, 2)
+		cy.visit('/projects/1/4')
 
 		cy.get('.kanban .bucket')
 			.contains(buckets[0].title)
@@ -68,7 +94,7 @@ describe('Project View Kanban', () => {
 	})
 
 	it('Can create a new bucket', () => {
-		cy.visit('/projects/1/kanban')
+		cy.visit('/projects/1/4')
 
 		cy.get('.kanban .bucket.new-bucket .button')
 			.click()
@@ -82,7 +108,7 @@ describe('Project View Kanban', () => {
 	})
 
 	it('Can set a bucket limit', () => {
-		cy.visit('/projects/1/kanban')
+		cy.visit('/projects/1/4')
 
 		cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-trigger')
 			.first()
@@ -103,7 +129,7 @@ describe('Project View Kanban', () => {
 	})
 
 	it('Can rename a bucket', () => {
-		cy.visit('/projects/1/kanban')
+		cy.visit('/projects/1/4')
 
 		cy.get('.kanban .bucket .bucket-header .title')
 			.first()
@@ -114,7 +140,7 @@ describe('Project View Kanban', () => {
 	})
 
 	it('Can delete a bucket', () => {
-		cy.visit('/projects/1/kanban')
+		cy.visit('/projects/1/4')
 
 		cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-trigger')
 			.first()
@@ -137,17 +163,14 @@ describe('Project View Kanban', () => {
 	})
 
 	it('Can drag tasks around', () => {
-		const tasks = TaskFactory.create(2, {
-			project_id: 1,
-			bucket_id: 1,
-		})
-		cy.visit('/projects/1/kanban')
+		const tasks = createTaskWithBuckets(buckets, 2)
+		cy.visit('/projects/1/4')
 
 		cy.get('.kanban .bucket .tasks .task')
 			.contains(tasks[0].title)
 			.first()
 			.drag('.kanban .bucket:nth-child(2) .tasks')
-		
+
 		cy.get('.kanban .bucket:nth-child(2) .tasks')
 			.should('contain', tasks[0].title)
 		cy.get('.kanban .bucket:nth-child(1) .tasks')
@@ -155,12 +178,8 @@ describe('Project View Kanban', () => {
 	})
 
 	it('Should navigate to the task when the task card is clicked', () => {
-		const tasks = TaskFactory.create(5, {
-			id: '{increment}',
-			project_id: 1,
-			bucket_id: 1,
-		})
-		cy.visit('/projects/1/kanban')
+		const tasks = createTaskWithBuckets(buckets, 5)
+		cy.visit('/projects/1/4')
 
 		cy.get('.kanban .bucket .tasks .task')
 			.contains(tasks[0].title)
@@ -168,28 +187,33 @@ describe('Project View Kanban', () => {
 			.click()
 
 		cy.url()
-			.should('contain', `/tasks/${tasks[0].id}`, { timeout: 1000 })
+			.should('contain', `/tasks/${tasks[0].id}`, {timeout: 1000})
 	})
 
 	it('Should remove a task from the kanban board when moving it to another project', () => {
 		const projects = ProjectFactory.create(2)
-		BucketFactory.create(2, {
+		const views = ProjectViewFactory.create(2, {
 			project_id: '{increment}',
+			view_kind: 3,
+			bucket_configuration_mode: 1,
 		})
+		BucketFactory.create(2)
 		const tasks = TaskFactory.create(5, {
 			id: '{increment}',
 			project_id: 1,
-			bucket_id: 1,
+		})
+		TaskBucketFactory.create(5, {
+			project_view_id: 1,
 		})
 		const task = tasks[0]
-		cy.visit('/projects/1/kanban')
+		cy.visit('/projects/1/'+views[0].id)
 
 		cy.get('.kanban .bucket .tasks .task')
 			.contains(task.title)
 			.should('be.visible')
 			.click()
 
-		cy.get('.task-view .action-buttons .button', { timeout: 3000 })
+		cy.get('.task-view .action-buttons .button', {timeout: 3000})
 			.contains('Move')
 			.click()
 		cy.get('.task-view .content.details .field .multiselect.control .input-wrapper input')
@@ -201,27 +225,23 @@ describe('Project View Kanban', () => {
 			.first()
 			.click()
 
-		cy.get('.global-notification', { timeout: 1000 })
+		cy.get('.global-notification', {timeout: 1000})
 			.should('contain', 'Success')
 		cy.go('back')
 		cy.get('.kanban .bucket')
 			.should('not.contain', task.title)
 	})
-	
+
 	it('Shows a button to filter the kanban board', () => {
-		const data = TaskFactory.create(10, {
-			project_id: 1,
-			bucket_id: 1,
-		})
-		cy.visit('/projects/1/kanban')
-		
+		cy.visit('/projects/1/4')
+
 		cy.get('.project-kanban .filter-container .base-button')
 			.should('exist')
 	})
-	
+
 	it('Should remove a task from the board when deleting it', () => {
-		const task = createSingleTaskInBucket(5)
-		cy.visit('/projects/1/kanban')
+		const {task, view} = createSingleTaskInBucket(5)
+		cy.visit(`/projects/1/${view.id}`)
 
 		cy.get('.kanban .bucket .tasks .task')
 			.contains(task.title)
@@ -239,18 +259,18 @@ describe('Project View Kanban', () => {
 
 		cy.get('.global-notification')
 			.should('contain', 'Success')
-		
+
 		cy.get('.kanban .bucket .tasks')
 			.should('not.contain', task.title)
 	})
 
 	it('Should show a task description icon if the task has a description', () => {
-		cy.intercept(Cypress.env('API_URL') + '/projects/1/buckets**').as('loadTasks')
-		const task = createSingleTaskInBucket(1, {
+		cy.intercept(Cypress.env('API_URL') + '/projects/1/views/*/tasks**').as('loadTasks')
+		const {task, view} = createSingleTaskInBucket(1, {
 			description: 'Lorem Ipsum',
 		})
 
-		cy.visit(`/projects/${task.project_id}/kanban`)
+		cy.visit(`/projects/${task.project_id}/${view.id}`)
 		cy.wait('@loadTasks')
 
 		cy.get('.bucket .tasks .task .footer .icon svg')
@@ -258,12 +278,12 @@ describe('Project View Kanban', () => {
 	})
 
 	it('Should not show a task description icon if the task has an empty description', () => {
-		cy.intercept(Cypress.env('API_URL') + '/projects/1/buckets**').as('loadTasks')
-		const task = createSingleTaskInBucket(1, {
+		cy.intercept(Cypress.env('API_URL') + '/projects/1/views/*/tasks**').as('loadTasks')
+		const {task, view} = createSingleTaskInBucket(1, {
 			description: '',
 		})
 
-		cy.visit(`/projects/${task.project_id}/kanban`)
+		cy.visit(`/projects/${task.project_id}/${view.id}`)
 		cy.wait('@loadTasks')
 
 		cy.get('.bucket .tasks .task .footer .icon svg')
@@ -271,15 +291,15 @@ describe('Project View Kanban', () => {
 	})
 
 	it('Should not show a task description icon if the task has a description containing only an empty p tag', () => {
-		cy.intercept(Cypress.env('API_URL') + '/projects/1/buckets**').as('loadTasks')
-		const task = createSingleTaskInBucket(1, {
+		cy.intercept(Cypress.env('API_URL') + '/projects/1/views/*/tasks**').as('loadTasks')
+		const {task, view} = createSingleTaskInBucket(1, {
 			description: '<p></p>',
 		})
 
-		cy.visit(`/projects/${task.project_id}/kanban`)
+		cy.visit(`/projects/${task.project_id}/${view.id}`)
 		cy.wait('@loadTasks')
 
 		cy.get('.bucket .tasks .task .footer .icon svg')
 			.should('not.exist')
 	})
-})
+})

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

@@ -5,15 +5,16 @@ import {TaskFactory} from '../../factories/task'
 import {UserFactory} from '../../factories/user'
 import {ProjectFactory} from '../../factories/project'
 import {prepareProjects} from './prepareProjects'
+import {BucketFactory} from '../../factories/bucket'
 
-describe('Project View Project', () => {
+describe('Project View List', () => {
 	createFakeUserAndLogin()
 	prepareProjects()
 
 	it('Should be an empty project', () => {
 		cy.visit('/projects/1')
 		cy.url()
-			.should('contain', '/projects/1/list')
+			.should('contain', '/projects/1/1')
 		cy.get('.project-title')
 			.should('contain', 'First Project')
 		cy.get('.project-title-dropdown')
@@ -24,6 +25,10 @@ describe('Project View Project', () => {
 	})
 	
 	it('Should create a new task', () => {
+		BucketFactory.create(2, {
+			project_view_id: 4,
+		})
+		
 		const newTaskTitle = 'New task'
 		
 		cy.visit('/projects/1')
@@ -38,7 +43,7 @@ describe('Project View Project', () => {
 			id: '{increment}',
 			project_id: 1,
 		})
-		cy.visit('/projects/1/list')
+		cy.visit('/projects/1/1')
 
 		cy.get('.tasks .task .tasktext')
 			.contains(tasks[0].title)
@@ -88,10 +93,10 @@ describe('Project View Project', () => {
 			title: i => `task${i}`,
 			project_id: 1,
 		})
-		cy.visit('/projects/1/list')
+		cy.visit('/projects/1/1')
 
 		cy.get('.tasks')
-			.should('contain', tasks[1].title)
+			.should('contain', tasks[20].title)
 		cy.get('.tasks')
 			.should('not.contain', tasks[99].title)
 
@@ -104,6 +109,6 @@ describe('Project View Project', () => {
 		cy.get('.tasks')
 			.should('contain', tasks[99].title)
 		cy.get('.tasks')
-			.should('not.contain', tasks[1].title)
+			.should('not.contain', tasks[20].title)
 	})
 })

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

@@ -1,13 +1,15 @@
 import {createFakeUserAndLogin} from '../../support/authenticateUser'
 
 import {TaskFactory} from '../../factories/task'
+import {prepareProjects} from './prepareProjects'
 
 describe('Project View Table', () => {
 	createFakeUserAndLogin()
+	prepareProjects()
 
 	it('Should show a table with tasks', () => {
 		const tasks = TaskFactory.create(1)
-		cy.visit('/projects/1/table')
+		cy.visit('/projects/1/3')
 
 		cy.get('.project-table table.table')
 			.should('exist')
@@ -17,9 +19,9 @@ describe('Project View Table', () => {
 
 	it('Should have working column switches', () => {
 		TaskFactory.create(1)
-		cy.visit('/projects/1/table')
+		cy.visit('/projects/1/3')
 
-		cy.get('.project-table .filter-container .items .button')
+		cy.get('.project-table .filter-container .button')
 			.contains('Columns')
 			.click()
 		cy.get('.project-table .filter-container .card.columns-filter .card-content .fancycheckbox')
@@ -42,7 +44,7 @@ describe('Project View Table', () => {
 			id: '{increment}',
 			project_id: 1,
 		})
-		cy.visit('/projects/1/table')
+		cy.visit('/projects/1/3')
 
 		cy.get('.project-table table.table')
 			.contains(tasks[0].title)

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

@@ -33,14 +33,14 @@ describe('Projects', () => {
 	})
 
 	it('Should redirect to a specific project view after visited', () => {
-		cy.intercept(Cypress.env('API_URL') + '/projects/*/buckets*').as('loadBuckets')
-		cy.visit('/projects/1/kanban')
+		cy.intercept(Cypress.env('API_URL') + '/projects/*/views/*/tasks**').as('loadBuckets')
+		cy.visit('/projects/1/4')
 		cy.url()
-			.should('contain', '/projects/1/kanban')
+			.should('contain', '/projects/1/4')
 		cy.wait('@loadBuckets')
 		cy.visit('/projects/1')
 		cy.url()
-			.should('contain', '/projects/1/kanban')
+			.should('contain', '/projects/1/4')
 	})
 
 	it('Should rename the project in all places', () => {

frontend/cypress/e2e/sharing/linkShare.spec.ts

@@ -1,9 +1,9 @@
 import {LinkShareFactory} from '../../factories/link_sharing'
-import {ProjectFactory} from '../../factories/project'
 import {TaskFactory} from '../../factories/task'
+import {createProjects} from '../project/prepareProjects'
 
 function prepareLinkShare() {
-	const projects = ProjectFactory.create(1)
+	const projects = createProjects()
 	const tasks = TaskFactory.create(10, {
 		project_id: projects[0].id
 	})
@@ -32,13 +32,13 @@ describe('Link shares', () => {
 		cy.get('.tasks')
 			.should('contain', tasks[0].title)
 		
-		cy.url().should('contain', `/projects/${project.id}/list#share-auth-token=${share.hash}`)
+		cy.url().should('contain', `/projects/${project.id}/1#share-auth-token=${share.hash}`)
 	})
 
 	it('Should work when directly viewing a project with share hash present', () => {
 		const {share, project, tasks} = prepareLinkShare()
 
-		cy.visit(`/projects/${project.id}/list#share-auth-token=${share.hash}`)
+		cy.visit(`/projects/${project.id}/1#share-auth-token=${share.hash}`)
 
 		cy.get('h1.title')
 			.should('contain', project.title)

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

@@ -5,11 +5,13 @@ import {seed} from '../../support/seed'
 import {TaskFactory} from '../../factories/task'
 import {BucketFactory} from '../../factories/bucket'
 import {updateUserSettings} from '../../support/updateUserSettings'
+import {createDefaultViews} from "../project/prepareProjects";
 
 function seedTasks(numberOfTasks = 50, startDueDate = new Date()) {
 	const project = ProjectFactory.create()[0]
+	const views = createDefaultViews(project.id)
 	BucketFactory.create(1, {
-		project_id: project.id,
+		project_view_id: views[3].id,
 	})
 	const tasks = []
 	let dueDate = startDueDate
@@ -60,7 +62,7 @@ describe('Home Page Task Overview', () => {
 	})
 
 	it('Should show a new task with a very soon due date at the top', () => {
-		const {tasks} = seedTasks()
+		const {tasks} = seedTasks(49)
 		const newTaskTitle = 'New Task'
 		
 		cy.visit('/')
@@ -71,9 +73,8 @@ describe('Home Page Task Overview', () => {
 			due_date: new Date().toISOString(),
 		}, false)
 		
-		cy.visit(`/projects/${tasks[0].project_id}/list`)
+		cy.visit(`/projects/${tasks[0].project_id}/1`)
 		cy.get('.tasks .task')
-			.first()
 			.should('contain.text', newTaskTitle)
 		cy.visit('/')
 		cy.get('[data-cy="showTasks"] .card .task')
@@ -88,7 +89,7 @@ describe('Home Page Task Overview', () => {
 
 		cy.visit('/')
 
-		cy.visit(`/projects/${tasks[0].project_id}/list`)
+		cy.visit(`/projects/${tasks[0].project_id}/1`)
 		cy.get('.task-add textarea')
 			.type(newTaskTitle+'{enter}')
 		cy.visit('/')

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

@@ -12,6 +12,8 @@ import {BucketFactory} from '../../factories/bucket'
 
 import {TaskAttachmentFactory} from '../../factories/task_attachments'
 import {TaskReminderFactory} from '../../factories/task_reminders'
+import {createDefaultViews} from "../project/prepareProjects";
+import { TaskBucketFactory } from '../../factories/task_buckets'
 
 function addLabelToTaskAndVerify(labelTitle: string) {
 	cy.get('.task-view .action-buttons .button')
@@ -47,21 +49,22 @@ function uploadAttachmentAndVerify(taskId: number) {
 describe('Task', () => {
 	createFakeUserAndLogin()
 
-	let projects
+	let projects: {}[]
 	let buckets
 
 	beforeEach(() => {
 		// UserFactory.create(1)
 		projects = ProjectFactory.create(1)
+		const views = createDefaultViews(projects[0].id)
 		buckets = BucketFactory.create(1, {
-			project_id: projects[0].id,
+			project_view_id: views[3].id,
 		})
 		TaskFactory.truncate()
 		UserProjectFactory.truncate()
 	})
 
 	it('Should be created new', () => {
-		cy.visit('/projects/1/list')
+		cy.visit('/projects/1/1')
 		cy.get('.input[placeholder="Add a new task…"')
 			.type('New Task')
 		cy.get('.button')
@@ -75,7 +78,7 @@ describe('Task', () => {
 	it('Inserts new tasks at the top of the project', () => {
 		TaskFactory.create(1)
 
-		cy.visit('/projects/1/list')
+		cy.visit('/projects/1/1')
 		cy.get('.project-is-empty-notice')
 			.should('not.exist')
 		cy.get('.input[placeholder="Add a new task…"')
@@ -93,7 +96,7 @@ describe('Task', () => {
 	it('Marks a task as done', () => {
 		TaskFactory.create(1)
 
-		cy.visit('/projects/1/list')
+		cy.visit('/projects/1/1')
 		cy.get('.tasks .task .fancycheckbox')
 			.first()
 			.click()
@@ -104,7 +107,7 @@ describe('Task', () => {
 	it('Can add a task to favorites', () => {
 		TaskFactory.create(1)
 
-		cy.visit('/projects/1/list')
+		cy.visit('/projects/1/1')
 		cy.get('.tasks .task .favorite')
 			.first()
 			.click()
@@ -113,12 +116,12 @@ describe('Task', () => {
 	})
 
 	it('Should show a task description icon if the task has a description', () => {
-		cy.intercept(Cypress.env('API_URL') + '/projects/1/tasks**').as('loadTasks')
+		cy.intercept(Cypress.env('API_URL') + '/projects/1/views/*/tasks**').as('loadTasks')
 		TaskFactory.create(1, {
 			description: 'Lorem Ipsum',
 		})
 
-		cy.visit('/projects/1/list')
+		cy.visit('/projects/1/1')
 		cy.wait('@loadTasks')
 
 		cy.get('.tasks .task .project-task-icon')
@@ -126,12 +129,12 @@ describe('Task', () => {
 	})
 
 	it('Should not show a task description icon if the task has an empty description', () => {
-		cy.intercept(Cypress.env('API_URL') + '/projects/1/tasks**').as('loadTasks')
+		cy.intercept(Cypress.env('API_URL') + '/projects/1/views/*/tasks**').as('loadTasks')
 		TaskFactory.create(1, {
 			description: '',
 		})
 
-		cy.visit('/projects/1/list')
+		cy.visit('/projects/1/1')
 		cy.wait('@loadTasks')
 
 		cy.get('.tasks .task .project-task-icon')
@@ -139,12 +142,12 @@ describe('Task', () => {
 	})
 
 	it('Should not show a task description icon if the task has a description containing only an empty p tag', () => {
-		cy.intercept(Cypress.env('API_URL') + '/projects/1/tasks**').as('loadTasks')
+		cy.intercept(Cypress.env('API_URL') + '/projects/1/views/*/tasks**').as('loadTasks')
 		TaskFactory.create(1, {
 			description: '<p></p>',
 		})
 
-		cy.visit('/projects/1/list')
+		cy.visit('/projects/1/1')
 		cy.wait('@loadTasks')
 
 		cy.get('.tasks .task .project-task-icon')
@@ -314,8 +317,9 @@ describe('Task', () => {
 
 		it('Can move a task to another project', () => {
 			const projects = ProjectFactory.create(2)
+			const views = createDefaultViews(projects[0].id)
 			BucketFactory.create(2, {
-				project_id: '{increment}',
+				project_view_id: views[3].id,
 			})
 			const tasks = TaskFactory.create(1, {
 				id: 1,
@@ -464,12 +468,15 @@ describe('Task', () => {
 			const tasks = TaskFactory.create(1, {
 				id: 1,
 				project_id: projects[0].id,
-				bucket_id: buckets[0].id,
 			})
 			const labels = LabelFactory.create(1)
 			LabelTaskFactory.truncate()
+			TaskBucketFactory.create(1, {
+				task_id: tasks[0].id,
+				bucket_id: buckets[0].id,
+			})
 
-			cy.visit(`/projects/${projects[0].id}/kanban`)
+			cy.visit(`/projects/${projects[0].id}/4`)
 
 			cy.get('.bucket .task')
 				.contains(tasks[0].title)
@@ -831,12 +838,11 @@ describe('Task', () => {
 			const tasks = TaskFactory.create(1, {
 				id: 1,
 				project_id: projects[0].id,
-				bucket_id: buckets[0].id,
 			})
 			const labels = LabelFactory.create(1)
 			LabelTaskFactory.truncate()
 
-			cy.visit(`/projects/${projects[0].id}/kanban`)
+			cy.visit(`/projects/${projects[0].id}/4`)
 
 			cy.get('.bucket .task')
 				.contains(tasks[0].title)

frontend/cypress/factories/bucket.ts

@@ -10,7 +10,7 @@ export class BucketFactory extends Factory {
 		return {
 			id: '{increment}',
 			title: faker.lorem.words(3),
-			project_id: 1,
+			project_view_id: '{increment}',
 			created_by_id: 1,
 			created: now.toISOString(),
 			updated: now.toISOString(),

frontend/cypress/factories/project_view.ts

@@ -0,0 +1,19 @@
+import {Factory} from '../support/factory'
+import {faker} from '@faker-js/faker'
+
+export class ProjectViewFactory extends Factory {
+	static table = 'project_views'
+
+	static factory() {
+		const now = new Date()
+
+		return {
+			id: '{increment}',
+			title: faker.lorem.words(3),
+			project_id: '{increment}',
+			view_kind: 0,
+			created: now.toISOString(),
+			updated: now.toISOString(),
+		}
+	}
+}

frontend/cypress/factories/task.ts

@@ -14,7 +14,6 @@ export class TaskFactory extends Factory {
 			project_id: 1,
 			created_by_id: 1,
 			index: '{increment}',
-			position: '{increment}',
 			created: now.toISOString(),
 			updated: now.toISOString()
 		}

frontend/cypress/factories/task_buckets.ts

@@ -0,0 +1,13 @@
+import {Factory} from '../support/factory'
+
+export class TaskBucketFactory extends Factory {
+	static table = 'task_buckets'
+
+	static factory() {
+		return {
+			task_id: '{increment}',
+			bucket_id: '{increment}',
+			project_view_id: '{increment}',
+		}
+	}
+}

frontend/flake.nix

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

frontend/package.json

@@ -13,7 +13,7 @@
   },
   "homepage": "https://vikunja.io/",
   "funding": "https://opencollective.com/vikunja",
-  "packageManager": "pnpm@8.15.1",
+  "packageManager": "pnpm@9.0.6",
   "keywords": [
     "todo",
     "productivity",
@@ -28,13 +28,15 @@
     "serve": "pnpm run dev",
     "preview": "vite preview --port 4173",
     "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:dev": "vite build --mode development --outDir dist-dev/",
     "lint": "eslint 'src/**/*.{js,ts,vue}'",
     "lint:fix": "pnpm run lint --fix",
     "test:e2e": "start-server-and-test preview http://127.0.0.1:4173 'cypress run --e2e --browser chrome'",
-    "test:e2e-record": "start-server-and-test preview http://127.0.0.1:4173 'cypress run --e2e --browser chrome --record'",
+    "test:e2e-record-test": "start-server-and-test preview:test http://127.0.0.1:4173 'cypress run --e2e --browser chrome --record'",
     "test:e2e-dev-dev": "start-server-and-test preview:dev http://127.0.0.1:4173 'cypress open --e2e'",
     "test:e2e-dev": "start-server-and-test preview http://127.0.0.1:4173 'cypress open --e2e'",
     "test:unit": "vitest --dir ./src",
@@ -48,60 +50,60 @@
     "story:preview": "histoire preview"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.5.1",
-    "@fortawesome/free-regular-svg-icons": "6.5.1",
-    "@fortawesome/free-solid-svg-icons": "6.5.1",
+    "@fortawesome/fontawesome-svg-core": "6.5.2",
+    "@fortawesome/free-regular-svg-icons": "6.5.2",
+    "@fortawesome/free-solid-svg-icons": "6.5.2",
     "@fortawesome/vue-fontawesome": "3.0.6",
     "@github/hotkey": "3.1.0",
-    "@infectoone/vue-ganttastic": "2.2.0",
-    "@intlify/unplugin-vue-i18n": "2.0.0",
-    "@kyvg/vue3-notification": "3.1.4",
-    "@sentry/tracing": "7.100.1",
-    "@sentry/vue": "7.100.1",
-    "@tiptap/core": "2.2.1",
-    "@tiptap/extension-blockquote": "2.2.1",
-    "@tiptap/extension-bold": "2.2.1",
-    "@tiptap/extension-bullet-list": "2.2.1",
-    "@tiptap/extension-code": "2.2.1",
-    "@tiptap/extension-code-block-lowlight": "2.2.1",
-    "@tiptap/extension-document": "2.2.1",
-    "@tiptap/extension-dropcursor": "2.2.1",
-    "@tiptap/extension-gapcursor": "2.2.1",
-    "@tiptap/extension-hard-break": "2.2.1",
-    "@tiptap/extension-heading": "2.2.1",
-    "@tiptap/extension-history": "2.2.1",
-    "@tiptap/extension-horizontal-rule": "2.2.1",
-    "@tiptap/extension-image": "2.2.1",
-    "@tiptap/extension-italic": "2.2.1",
-    "@tiptap/extension-link": "2.2.1",
-    "@tiptap/extension-list-item": "2.2.1",
-    "@tiptap/extension-ordered-list": "2.2.1",
-    "@tiptap/extension-paragraph": "2.2.1",
-    "@tiptap/extension-placeholder": "2.2.1",
-    "@tiptap/extension-strike": "2.2.1",
-    "@tiptap/extension-table": "2.2.1",
-    "@tiptap/extension-table-cell": "2.2.1",
-    "@tiptap/extension-table-header": "2.2.1",
-    "@tiptap/extension-table-row": "2.2.1",
-    "@tiptap/extension-task-item": "2.2.1",
-    "@tiptap/extension-task-list": "2.2.1",
-    "@tiptap/extension-text": "2.2.1",
-    "@tiptap/extension-typography": "2.2.1",
-    "@tiptap/extension-underline": "2.2.1",
-    "@tiptap/pm": "2.2.1",
-    "@tiptap/suggestion": "2.2.1",
-    "@tiptap/vue-3": "2.2.1",
+    "@infectoone/vue-ganttastic": "2.3.2",
+    "@intlify/unplugin-vue-i18n": "4.0.0",
+    "@kyvg/vue3-notification": "3.2.1",
+    "@sentry/tracing": "7.112.2",
+    "@sentry/vue": "7.112.2",
+    "@tiptap/core": "2.3.0",
+    "@tiptap/extension-blockquote": "2.3.0",
+    "@tiptap/extension-bold": "2.3.0",
+    "@tiptap/extension-bullet-list": "2.3.0",
+    "@tiptap/extension-code": "2.3.0",
+    "@tiptap/extension-code-block-lowlight": "2.3.0",
+    "@tiptap/extension-document": "2.3.0",
+    "@tiptap/extension-dropcursor": "2.3.0",
+    "@tiptap/extension-gapcursor": "2.3.0",
+    "@tiptap/extension-hard-break": "2.3.0",
+    "@tiptap/extension-heading": "2.3.0",
+    "@tiptap/extension-history": "2.3.0",
+    "@tiptap/extension-horizontal-rule": "2.3.0",
+    "@tiptap/extension-image": "2.3.0",
+    "@tiptap/extension-italic": "2.3.0",
+    "@tiptap/extension-link": "2.3.0",
+    "@tiptap/extension-list-item": "2.3.0",
+    "@tiptap/extension-ordered-list": "2.3.0",
+    "@tiptap/extension-paragraph": "2.3.0",
+    "@tiptap/extension-placeholder": "2.3.0",
+    "@tiptap/extension-strike": "2.3.0",
+    "@tiptap/extension-table": "2.3.0",
+    "@tiptap/extension-table-cell": "2.3.0",
+    "@tiptap/extension-table-header": "2.3.0",
+    "@tiptap/extension-table-row": "2.3.0",
+    "@tiptap/extension-task-item": "2.3.0",
+    "@tiptap/extension-task-list": "2.3.0",
+    "@tiptap/extension-text": "2.3.0",
+    "@tiptap/extension-typography": "2.3.0",
+    "@tiptap/extension-underline": "2.3.0",
+    "@tiptap/pm": "2.3.0",
+    "@tiptap/suggestion": "2.3.0",
+    "@tiptap/vue-3": "2.3.0",
     "@types/is-touch-device": "1.0.2",
     "@types/lodash.clonedeep": "4.5.9",
-    "@vueuse/core": "10.7.2",
-    "@vueuse/router": "10.7.2",
-    "axios": "1.6.7",
+    "@vueuse/core": "10.9.0",
+    "@vueuse/router": "10.9.0",
+    "axios": "1.6.8",
     "blurhash": "2.0.5",
     "bulma-css-variables": "0.9.33",
     "camel-case": "4.1.2",
-    "date-fns": "3.3.1",
+    "date-fns": "3.6.0",
     "dayjs": "1.11.10",
-    "dompurify": "3.0.8",
+    "dompurify": "3.1.1",
     "fast-deep-equal": "3.1.3",
     "flatpickr": "4.6.13",
     "flexsearch": "0.7.31",
@@ -115,74 +117,76 @@
     "snake-case": "3.0.4",
     "sortablejs": "1.15.2",
     "tippy.js": "6.3.7",
-    "ufo": "1.4.0",
-    "vue": "3.4.15",
+    "ufo": "1.5.3",
+    "vue": "3.4.25",
     "vue-advanced-cropper": "2.8.8",
-    "vue-flatpickr-component": "11.0.3",
-    "vue-i18n": "9.9.1",
-    "vue-router": "4.2.5",
-    "workbox-precaching": "7.0.0",
+    "vue-flatpickr-component": "11.0.5",
+    "vue-i18n": "9.13.1",
+    "vue-router": "4.3.2",
+    "vuemoji-picker": "0.2.1",
+    "workbox-precaching": "7.1.0",
     "zhyswan-vuedraggable": "4.1.3"
   },
   "devDependencies": {
     "@4tw/cypress-drag-drop": "2.2.5",
     "@cypress/vite-dev-server": "5.0.7",
     "@cypress/vue": "6.0.0",
-    "@faker-js/faker": "8.4.0",
-    "@histoire/plugin-screenshot": "0.17.8",
-    "@histoire/plugin-vue": "0.17.9",
-    "@rushstack/eslint-patch": "1.7.2",
-    "@tsconfig/node18": "18.2.2",
+    "@faker-js/faker": "8.4.1",
+    "@histoire/plugin-screenshot": "0.17.17",
+    "@histoire/plugin-vue": "0.17.17",
+    "@rushstack/eslint-patch": "1.10.2",
+    "@tsconfig/node18": "18.2.4",
     "@types/codemirror": "5.60.15",
     "@types/dompurify": "3.0.5",
     "@types/flexsearch": "0.7.6",
     "@types/is-touch-device": "1.0.2",
     "@types/lodash.debounce": "4.0.9",
     "@types/marked": "5.0.2",
-    "@types/node": "20.11.10",
+    "@types/node": "20.12.7",
     "@types/postcss-preset-env": "7.7.0",
-    "@types/sortablejs": "1.15.7",
-    "@typescript-eslint/eslint-plugin": "6.20.0",
-    "@typescript-eslint/parser": "6.20.0",
-    "@vitejs/plugin-legacy": "5.3.0",
-    "@vitejs/plugin-vue": "5.0.3",
-    "@vue/eslint-config-typescript": "12.0.0",
-    "@vue/test-utils": "2.4.4",
+    "@types/sortablejs": "1.15.8",
+    "@typescript-eslint/eslint-plugin": "7.7.1",
+    "@typescript-eslint/parser": "7.7.1",
+    "@vitejs/plugin-legacy": "5.3.2",
+    "@vitejs/plugin-vue": "5.0.4",
+    "@vue/eslint-config-typescript": "13.0.0",
+    "@vue/test-utils": "2.4.5",
     "@vue/tsconfig": "0.5.1",
-    "autoprefixer": "10.4.17",
-    "browserslist": "4.22.3",
-    "caniuse-lite": "1.0.30001581",
-    "css-has-pseudo": "6.0.1",
+    "autoprefixer": "10.4.19",
+    "browserslist": "4.23.0",
+    "caniuse-lite": "1.0.30001612",
+    "css-has-pseudo": "6.0.3",
     "csstype": "3.1.3",
-    "cypress": "13.6.3",
-    "esbuild": "0.20.0",
-    "eslint": "8.56.0",
-    "eslint-plugin-vue": "9.20.1",
-    "happy-dom": "13.3.5",
-    "histoire": "0.17.9",
-    "postcss": "8.4.33",
+    "cypress": "13.8.1",
+    "esbuild": "0.20.2",
+    "eslint": "8.57.0",
+    "eslint-plugin-vue": "9.25.0",
+    "happy-dom": "14.7.1",
+    "histoire": "0.17.17",
+    "postcss": "8.4.38",
     "postcss-easing-gradients": "3.0.1",
     "postcss-easings": "4.0.0",
     "postcss-focus-within": "8.0.1",
-    "postcss-preset-env": "9.3.0",
-    "rollup": "4.9.6",
+    "postcss-preset-env": "9.5.9",
+    "rollup": "4.16.4",
     "rollup-plugin-visualizer": "5.12.0",
-    "sass": "1.70.0",
+    "sass": "1.75.0",
     "start-server-and-test": "2.0.3",
-    "typescript": "5.3.3",
-    "vite": "5.0.12",
+    "typescript": "5.4.5",
+    "vite": "5.2.10",
     "vite-plugin-inject-preload": "1.3.3",
-    "vite-plugin-pwa": "0.17.5",
-    "vite-plugin-sentry": "1.3.0",
+    "vite-plugin-pwa": "0.19.8",
+    "vite-plugin-sentry": "1.4.0",
     "vite-svg-loader": "5.1.0",
-    "vitest": "1.2.2",
-    "vue-tsc": "1.8.27",
+    "vitest": "1.5.2",
+    "vue-tsc": "2.0.14",
     "wait-on": "7.2.0",
-    "workbox-cli": "7.0.0"
+    "workbox-cli": "7.1.0"
   },
   "pnpm": {
     "patchedDependencies": {
-      "flexsearch@0.7.31": "patches/flexsearch@0.7.31.patch"
+      "flexsearch@0.7.31": "patches/flexsearch@0.7.31.patch",
+      "@github/hotkey@3.1.0": "patches/@github__hotkey@3.1.0.patch"
     }
   }
 }

frontend/patches/@github__hotkey@3.1.0.patch

@@ -0,0 +1,28 @@
+diff --git a/dist/index.js b/dist/index.js
+index b6e6e0a6864cb00bc085b8d4503a705cb3bc8404..0466ef46406b0df41c8d0bb9a5bac9eabf4a50de 100644
+--- a/dist/index.js
++++ b/dist/index.js
+@@ -368,10 +368,12 @@ const sequenceTracker = new SequenceTracker({
+ function keyDownHandler(event) {
+     if (event.defaultPrevented)
+         return;
+-    if (!(event.target instanceof Node))
++    const target = event.explicitOriginalTarget || event.target;
++    if (target.shadowRoot)
+         return;
+-    if (isFormField(event.target)) {
+-        const target = event.target;
++    if (!(target instanceof Node))
++        return;
++    if (isFormField(target)) {
+         if (!target.id)
+             return;
+         if (!target.ownerDocument.querySelector(`[data-hotkey-scope="${target.id}"]`))
+@@ -385,7 +387,6 @@ function keyDownHandler(event) {
+     sequenceTracker.registerKeypress(event);
+     currentTriePosition = newTriePosition;
+     if (newTriePosition instanceof Leaf) {
+-        const target = event.target;
+         let shouldFire = false;
+         let elementToFire;
+         const formField = isFormField(target);

frontend/scripts/deploy-preview-netlify.mjs

@@ -51,10 +51,12 @@ Hi ${process.env.DRONE_COMMIT_AUTHOR}!
 
 Thank you for creating a PR!
 
-I've deployed the changes of this PR on a preview environment under this URL: ${fullPreviewUrl}
+I've deployed the frontend changes of this PR on a preview environment under this URL: ${fullPreviewUrl}
 
 You can use this url to view the changes live and test them out.
-You will need to manually connect this to an api running somehwere. The easiest to use is https://try.vikunja.io/.
+You will need to manually connect this to an api running somewhere. The easiest to use is https://try.vikunja.io/.
+
+This preview does not contain any changes made to the api, only the frontend.
 
 Have a nice day!
 

frontend/scripts/deploy-preview-netlify.mjs.sha384

@@ -1 +1 @@
-d58cd9ebc135407aa29d093b046d84b72ec7073b3f08cedfdbb936318a0ad3e272fab921d3ff91a82c1a7059fcdecd7b  ./scripts/deploy-preview-netlify.mjs
+2ba5ae4c831fd749296d92f92c5f89339030e22b80be62b1253dc26982e8fd0082e354f884a3ba15293e0b96317ec758  ./scripts/deploy-preview-netlify.mjs

frontend/src/App.vue

@@ -47,7 +47,7 @@ import AddToHomeScreen from '@/components/home/AddToHomeScreen.vue'
 import DemoMode from '@/components/home/DemoMode.vue'
 
 const importAccountDeleteService = () => import('@/services/accountDelete')
-const importMessage = () => import('@/message')
+import {success} from '@/message'
 
 const baseStore = useBaseStore()
 const authStore = useAuthStore()
@@ -69,11 +69,9 @@ watch(accountDeletionConfirm, async (accountDeletionConfirm) => {
 		return
 	}
 
-	const messageP = importMessage()
 	const AccountDeleteService = (await importAccountDeleteService()).default
 	const accountDeletionService = new AccountDeleteService()
 	await accountDeletionService.confirm(accountDeletionConfirm)
-	const {success} = await messageP
 	success({message: t('user.deletion.confirmSuccess')})
 	authStore.refreshUserInfo()
 }, { immediate: true })

frontend/src/components/base/BaseButton.vue

@@ -26,7 +26,7 @@
 		class="base-button"
 		:href="href"
 		rel="noreferrer noopener nofollow"
-		target="_blank"
+		:target="openExternalInNewTab ? '_blank' : undefined"
 	>
 		<slot />
 	</a>
@@ -69,6 +69,7 @@ export interface BaseButtonProps extends /* @vue-ignore */ HTMLAttributes {
 	disabled?: boolean
 	to?: RouteLocationRaw
 	href?: string
+	openExternalInNewTab?: boolean
 }
 
 export interface BaseButtonEmits {
@@ -78,6 +79,7 @@ export interface BaseButtonEmits {
 const {
 	type = BASE_BUTTON_TYPES_MAP.BUTTON,
 	disabled = false,
+	openExternalInNewTab = true,
 } = defineProps<BaseButtonProps>()
 
 const emit = defineEmits<BaseButtonEmits>()

frontend/src/components/date/dateRanges.ts

@@ -19,3 +19,28 @@ export const DATE_RANGES = {
 	'thisYear': ['now/y', 'now/y+1y'],
 	'restOfThisYear': ['now', 'now/y+1y'],
 }
+
+export const DATE_VALUES = {
+	'now': 'now',
+	'startOfToday': 'now/d',
+	'endOfToday': 'now/d+1d',
+
+	'beginningOflastWeek': 'now/w-1w',
+	'endOfLastWeek': 'now/w-2w',
+	'beginningOfThisWeek': 'now/w',
+	'endOfThisWeek': 'now/w+1w',
+	'startOfNextWeek': 'now/w+1w',
+	'endOfNextWeek': 'now/w+2w',
+	'in7Days': 'now+7d',
+
+	'beginningOfLastMonth': 'now/M-1M',
+	'endOfLastMonth': 'now/M-2M',
+	'startOfThisMonth': 'now/M',
+	'endOfThisMonth': 'now/M+1M',
+	'startOfNextMonth': 'now/M+1M',
+	'endOfNextMonth': 'now/M+2M',
+	'in30Days': 'now+30d',
+
+	'startOfThisYear': 'now/y',
+	'endOfThisYear': 'now/y+1y',
+}

frontend/src/components/date/datepickerWithRange.vue

@@ -75,14 +75,15 @@
 
 						<p>
 							{{ $t('input.datemathHelp.canuse') }}
-							<BaseButton
-								class="has-text-primary"
-								@click="showHowItWorks = true"
-							>
-								{{ $t('input.datemathHelp.learnhow') }}
-							</BaseButton>
 						</p>
 
+						<BaseButton
+							class="has-text-primary"
+							@click="showHowItWorks = true"
+						>
+							{{ $t('input.datemathHelp.learnhow') }}
+						</BaseButton>
+
 						<modal
 							:enabled="showHowItWorks"
 							transition-name="fade"
@@ -111,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 {getFlatpickrLanguage} from '@/helpers/flatpickrLanguage'
 
 const props = defineProps({
 	modelValue: {

frontend/src/components/date/datepickerWithValues.vue

@@ -0,0 +1,256 @@
+<template>
+	<div class="datepicker-with-range-container">
+		<Popup
+			:open="open"
+			@close="() => emit('close')"
+		>
+			<template #content="{isOpen}">
+				<div
+					class="datepicker-with-range"
+					:class="{'is-open': isOpen}"
+				>
+					<div class="selections">
+						<BaseButton
+							:class="{'is-active': customRangeActive}"
+							@click="setDate(null)"
+						>
+							{{ $t('misc.custom') }}
+						</BaseButton>
+						<BaseButton
+							v-for="(value, text) in DATE_VALUES"
+							:key="text"
+							:class="{'is-active': date === value}"
+							@click="setDate(value)"
+						>
+							{{ $t(`input.datepickerRange.values.${text}`) }}
+						</BaseButton>
+					</div>
+					<div class="flatpickr-container input-group">
+						<label class="label">
+							{{ $t('input.datepickerRange.date') }}
+							<div class="field has-addons">
+								<div class="control is-fullwidth">
+									<input
+										v-model="date"
+										class="input"
+										type="text"
+									>
+								</div>
+								<div class="control">
+									<x-button
+										icon="calendar"
+										variant="secondary"
+										data-toggle
+									/>
+								</div>
+							</div>
+						</label>
+						<flat-pickr
+							v-model="flatpickrDate"
+							:config="flatPickerConfig"
+						/>
+
+						<p>
+							{{ $t('input.datemathHelp.canuse') }}
+						</p>
+
+						<BaseButton
+							class="has-text-primary"
+							@click="showHowItWorks = true"
+						>
+							{{ $t('input.datemathHelp.learnhow') }}
+						</BaseButton>
+
+						<modal
+							:enabled="showHowItWorks"
+							transition-name="fade"
+							:overflow="true"
+							variant="hint-modal"
+							@close="() => showHowItWorks = false"
+						>
+							<DatemathHelp />
+						</modal>
+					</div>
+				</div>
+			</template>
+		</Popup>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import {computed, ref, watch} from 'vue'
+import {useI18n} from 'vue-i18n'
+
+import flatPickr from 'vue-flatpickr-component'
+import 'flatpickr/dist/flatpickr.css'
+import {parseDateOrString} from '@/helpers/time/parseDateOrString'
+
+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'
+
+const props = defineProps({
+	modelValue: {
+		required: false,
+		default: null,
+	},
+	open: {
+		type: Boolean,
+		default: false,
+	},
+})
+
+const emit = defineEmits(['update:modelValue', 'close'])
+
+const {t} = useI18n({useScope: 'global'})
+
+const flatPickerConfig = computed(() => ({
+	altFormat: t('date.altFormatLong'),
+	altInput: true,
+	dateFormat: 'Y-m-d H:i',
+	enableTime: false,
+	wrap: true,
+	locale: getFlatpickrLanguage(),
+}))
+
+const showHowItWorks = ref(false)
+
+const flatpickrDate = ref('')
+
+const date = ref<string|Date>('')
+
+watch(
+	() => props.modelValue,
+	newValue => {
+		date.value = newValue
+		// Only set the date back to flatpickr when it's an actual date.
+		// Otherwise flatpickr runs in an endless loop and slows down the browser.
+		const parsed = parseDateOrString(date.value, false)
+		if (parsed instanceof Date) {
+			flatpickrDate.value = date.value
+		}
+	},
+)
+
+function emitChanged() {
+	emit('update:modelValue', date.value === '' ? null : date.value)
+}
+
+watch(
+	() => flatpickrDate.value,
+	(newVal: string | null) => {
+		if (newVal === null) {
+			return
+		}
+
+		date.value = newVal
+
+		emitChanged()
+	},
+)
+watch(() => date.value, emitChanged)
+
+function setDate(range: string | null) {
+	if (range === null) {
+		date.value = ''
+
+		return
+	}
+
+	date.value = range
+}
+
+const customRangeActive = computed<boolean>(() => {
+	return !Object.values(DATE_VALUES).some(d => date.value === d)
+})
+</script>
+
+<style lang="scss" scoped>
+.datepicker-with-range-container {
+	position: relative;
+}
+
+:deep(.popup) {
+	z-index: 10;
+	margin-top: 1rem;
+	border-radius: $radius;
+	border: 1px solid var(--grey-200);
+	background-color: var(--white);
+	box-shadow: $shadow;
+
+	&.is-open {
+		width: 500px;
+		height: 320px;
+	}
+}
+
+.datepicker-with-range {
+	display: flex;
+	width: 100%;
+	height: 100%;
+	position: absolute;
+}
+
+:deep(.flatpickr-calendar) {
+	margin: 0 auto 8px;
+	box-shadow: none;
+}
+
+.flatpickr-container {
+	width: 70%;
+	border-left: 1px solid var(--grey-200);
+	padding: 1rem;
+	font-size: .9rem;
+
+	// Flatpickr has no option to use it without an input field so we're hiding it instead
+	:deep(input.form-control.input) {
+		height: 0;
+		padding: 0;
+		border: 0;
+	}
+
+	.field .control :deep(.button) {
+		border: 1px solid var(--input-border-color);
+		height: 2.25rem;
+
+		&:hover {
+			border: 1px solid var(--input-hover-border-color);
+		}
+	}
+
+	.label, .input, :deep(.button) {
+		font-size: .9rem;
+	}
+}
+
+.selections {
+	width: 30%;
+	display: flex;
+	flex-direction: column;
+	padding-top: .5rem;
+	overflow-y: scroll;
+
+	button {
+		display: block;
+		width: 100%;
+		text-align: left;
+		padding: .5rem 1rem;
+		transition: $transition;
+		font-size: .9rem;
+		color: var(--text);
+		background: transparent;
+		border: 0;
+		cursor: pointer;
+
+		&.is-active {
+			color: var(--primary);
+		}
+
+		&:hover, &.is-active {
+			background-color: var(--grey-100);
+		}
+	}
+}
+</style>

frontend/src/components/home/ProjectsNavigation.vue

@@ -26,7 +26,6 @@
 				:project="project"
 				:is-loading="projectUpdating[project.id]"
 				:can-collapse="canCollapse"
-				:level="level"
 				:data-project-id="project.id"
 			/>
 		</template>
@@ -49,7 +48,6 @@ const props = defineProps<{
 	modelValue?: IProject[],
 	canEditOrder: boolean,
 	canCollapse?: boolean,
-	level?: number,
 }>()
 const emit = defineEmits<{
 	(e: 'update:modelValue', projects: IProject[]): void

frontend/src/components/home/ProjectsNavigationItem.vue

@@ -58,7 +58,6 @@
 			<ProjectSettingsDropdown
 				class="menu-list-dropdown"
 				:project="project"
-				:level="level"
 			>
 				<template #trigger="{toggleOpen}">
 					<BaseButton
@@ -78,15 +77,15 @@
 			:model-value="childProjects"
 			:can-edit-order="true"
 			:can-collapse="canCollapse"
-			:level="level + 1"
 		/>
 	</li>
 </template>
 
 <script setup lang="ts">
-import {computed, ref} from 'vue'
+import {computed} from 'vue'
 import {useProjectStore} from '@/stores/projects'
 import {useBaseStore} from '@/stores/base'
+import {useStorage} from '@vueuse/core'
 
 import type {IProject} from '@/modelTypes/IProject'
 
@@ -100,19 +99,28 @@ const {
 	project,
 	isLoading,
 	canCollapse,
-	level = 0,
 } = defineProps<{
 	project: IProject,
 	isLoading?: boolean,
 	canCollapse?: boolean,
-	level?: number,
 }>()
 
 const projectStore = useProjectStore()
 const baseStore = useBaseStore()
 const currentProject = computed(() => baseStore.currentProject)
 
-const childProjectsOpen = ref(true)
+// Persist open state across browser reloads. Using a seperate ref for the state 
+// allows us to use only one entry in local storage instead of one for every project id.
+type openState = { [key: number]: boolean }
+const childProjectsOpenState = useStorage<openState>('navigation-child-projects-open', {})
+const childProjectsOpen = computed({
+	get() {
+		return childProjectsOpenState.value[project.id] ?? true
+	},
+	set(open) {
+		childProjectsOpenState.value[project.id] = open
+	},
+})
 
 const childProjects = computed(() => {
 	return projectStore.getChildProjects(project.id)

frontend/src/components/home/contentAuth.vue

@@ -37,7 +37,7 @@
 					v-slot="{ Component }"
 					:route="routeWithModal"
 				>
-					<keep-alive :include="['project.list', 'project.gantt', 'project.table', 'project.kanban']">
+					<keep-alive :include="['project.view']">
 						<component :is="Component" />
 					</keep-alive>
 				</router-view>
@@ -122,7 +122,7 @@ const labelStore = useLabelStore()
 labelStore.loadAllLabels()
 
 const projectStore = useProjectStore()
-projectStore.loadProjects()
+projectStore.loadAllProjects()
 </script>
 
 <style lang="scss" scoped>
@@ -162,7 +162,7 @@ projectStore.loadProjects()
 .app-content {
 	z-index: 10;
 	position: relative;
-	padding: 1.5rem 0.5rem 1rem;
+	padding: 1.5rem 0.5rem 0;
 	// TODO refactor: DRY `transition-timing-function` with `./navigation.vue`.
 	transition: margin-left $transition-duration;
 
@@ -172,7 +172,7 @@ projectStore.loadProjects()
 	}
 
 	@media screen and (min-width: $tablet) {
-		padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
+		padding: $navbar-height + 1.5rem 1.5rem 0 1.5rem;
 	}
 
 	&.is-menu-enabled {

frontend/src/components/home/contentLinkShare.vue

@@ -33,11 +33,19 @@ import {useBaseStore} from '@/stores/base'
 
 import Logo from '@/components/home/Logo.vue'
 import PoweredByLink from './PoweredByLink.vue'
+import {useProjectStore} from '@/stores/projects'
+import {useLabelStore} from '@/stores/labels'
 
 const baseStore = useBaseStore()
 const currentProject = computed(() => baseStore.currentProject)
 const background = computed(() => baseStore.background)
 const logoVisible = computed(() => baseStore.logoVisible)
+
+const projectStore = useProjectStore()
+projectStore.loadAllProjects()
+
+const labelStore = useLabelStore()
+labelStore.loadAllLabels()
 </script>
 
 <style lang="scss" scoped>

frontend/src/components/home/navigation.vue

@@ -155,8 +155,8 @@ const savedFilterProjects = computed(() => projectStore.savedFilterProjects)
 	bottom: 0;
 	left: 0;
 	transform: translateX(-100%);
-	overflow-x: auto;
 	width: $navbar-width;
+	overflow-y: auto;
 
 	@media screen and (max-width: $tablet) {
 		top: 0;

frontend/src/components/input/AutocompleteDropdown.vue

@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import {type ComponentPublicInstance, nextTick, ref, watch} from 'vue'
+
+const props = withDefaults(defineProps<{
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	options: any[],
+	suggestion?: string,
+	maxHeight?: number,
+}>(), {
+	maxHeight: 200,
+	suggestion: '',
+})
+
+const emit = defineEmits(['blur'])
+
+const ESCAPE = 27,
+	ARROW_UP = 38,
+	ARROW_DOWN = 40
+
+type StateType = 'unfocused' | 'focused'
+
+const selectedIndex = ref(-1)
+const state = ref<StateType>('unfocused')
+const val = ref<string>('')
+const model = defineModel<string>()
+
+const suggestionScrollerRef = ref<HTMLInputElement | null>(null)
+const containerRef = ref<HTMLInputElement | null>(null)
+const editorRef = ref<HTMLInputElement | null>(null)
+
+watch(
+	() => model.value,
+	newValue => {
+		val.value = newValue
+	},
+)
+
+function updateSuggestionScroll() {
+	nextTick(() => {
+		const scroller = suggestionScrollerRef.value
+		const selectedItem = scroller?.querySelector('.selected')
+		scroller.scrollTop = selectedItem ? selectedItem.offsetTop : 0
+	})
+}
+
+function setState(stateName: StateType) {
+	state.value = stateName
+	if (stateName === 'unfocused') {
+		emit('blur')
+	}
+}
+
+function onFocusField() {
+	setState('focused')
+}
+
+function onKeydown(e) {
+	switch (e.keyCode || e.which) {
+		case ESCAPE:
+			e.preventDefault()
+			setState('unfocused')
+			break
+		case ARROW_UP:
+			e.preventDefault()
+			select(-1)
+			break
+		case ARROW_DOWN:
+			e.preventDefault()
+			select(1)
+			break
+	}
+}
+
+const resultRefs = ref<(HTMLElement | null)[]>([])
+
+function setResultRefs(el: Element | ComponentPublicInstance | null, index: number) {
+	resultRefs.value[index] = el as (HTMLElement | null)
+}
+
+function select(offset: number) {
+
+	let index = selectedIndex.value + offset
+
+	if (!isFinite(index)) {
+		index = 0
+	}
+
+	if (index >= props.options.length) {
+		// At the last index, now moving back to the top
+		index = 0
+	}
+
+	if (index < 0) {
+		// Arrow up but we're already at the top
+		index = props.options.length - 1
+	}
+	const elems = resultRefs.value[index]
+	if (
+		typeof elems === 'undefined'
+	) {
+		return
+	}
+
+	selectedIndex.value = index
+	updateSuggestionScroll()
+
+	if (Array.isArray(elems)) {
+		elems[0].focus()
+		return
+	}
+	elems?.focus()
+}
+
+function onSelectValue(value) {
+	model.value = value
+	selectedIndex.value = 0
+	setState('unfocused')
+}
+
+function onUpdateField(e) {
+	setState('focused')
+	model.value = e.currentTarget.value
+}
+</script>
+
+<template>
+	<div
+		ref="containerRef"
+		class="autocomplete"
+	>
+		<div class="entry-box">
+			<slot
+				name="input"
+				:on-update-field
+				:on-focus-field
+				:on-keydown
+			>
+				<textarea
+					ref="editorRef"
+					class="field"
+					:class="state"
+					:value="val"
+					@input="onUpdateField"
+					@focus="onFocusField"
+					@keydown="onKeydown"
+				/>
+			</slot>
+		</div>
+		<div
+			v-if="state === 'focused' && options.length"
+			class="suggestion-list"
+		>
+			<div
+				v-if="options && options.length"
+				class="scroll-list"
+			>
+				<div
+					ref="suggestionScrollerRef"
+					class="items"
+					@keydown="onKeydown"
+				>
+					<button
+						v-for="(item, index) in options"
+						:key="item"
+						:ref="(el: Element | ComponentPublicInstance | null) => setResultRefs(el, index)"
+						class="item"
+						:class="{ selected: index === selectedIndex }"
+						@click="onSelectValue(item)"
+					>
+						<slot
+							name="result"
+							:item
+							:selected="index === selectedIndex"
+						>
+							{{ item }}
+						</slot>
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.autocomplete {
+	position: relative;
+
+	.suggestion-list {
+		position: absolute;
+
+		background: var(--white);
+		border-radius: 0 0 var(--input-radius) var(--input-radius);
+		border: 1px solid var(--primary);
+		border-top: none;
+
+		max-height: 50vh;
+		overflow-x: auto;
+		z-index: 100;
+		max-width: 100%;
+		min-width: 100%;
+		margin-top: -2px;
+
+		button {
+			width: 100%;
+			background: transparent;
+			border: 0;
+
+			font-size: .9rem;
+			width: 100%;
+			color: var(--grey-800);
+			text-align: left;
+			box-shadow: none;
+			text-transform: none;
+			font-family: $family-sans-serif;
+			font-weight: normal;
+			padding: .5rem .75rem;
+			border: none;
+			cursor: pointer;
+
+			&:focus,
+			&:hover {
+				background: var(--grey-100);
+				box-shadow: none !important;
+			}
+
+			&:active {
+				background: var(--grey-100);
+			}
+		}
+	}
+}
+</style>

frontend/src/components/input/Reactions.vue

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import type {IReactionPerEntity, ReactionKind} from '@/modelTypes/IReaction'
+import {VuemojiPicker} from 'vuemoji-picker'
+import ReactionService from '@/services/reactions'
+import ReactionModel from '@/models/reaction'
+import BaseButton from '@/components/base/BaseButton.vue'
+import type {IUser} from '@/modelTypes/IUser'
+import {getDisplayName} from '@/models/user'
+import {useI18n} from 'vue-i18n'
+import {nextTick, onBeforeUnmount, onMounted, ref} from 'vue'
+import CustomTransition from '@/components/misc/CustomTransition.vue'
+import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
+import {useAuthStore} from '@/stores/auth'
+import {useColorScheme} from '@/composables/useColorScheme'
+
+const {
+	entityKind,
+	entityId,
+	disabled = false,
+} = defineProps<{
+	entityKind: ReactionKind,
+	entityId: number,
+	disabled?: boolean,
+}>()
+
+const authStore = useAuthStore()
+const {t} = useI18n()
+const reactionService = new ReactionService()
+const {isDark} = useColorScheme()
+
+const model = defineModel<IReactionPerEntity>()
+
+async function addReaction(value: string) {
+	const reaction = new ReactionModel({
+		id: entityId,
+		kind: entityKind,
+		value,
+	})
+	await reactionService.create(reaction)
+	showEmojiPicker.value = false
+
+	if (typeof model.value === 'undefined') {
+		model.value = {}
+	}
+
+	if (typeof model.value[reaction.value] === 'undefined') {
+		model.value[reaction.value] = [authStore.info]
+	} else {
+		model.value[reaction.value].push(authStore.info)
+	}
+}
+
+async function removeReaction(value: string) {
+	const reaction = new ReactionModel({
+		id: entityId,
+		kind: entityKind,
+		value,
+	})
+	await reactionService.delete(reaction)
+	showEmojiPicker.value = false
+	
+	const userIndex = model.value[reaction.value].findIndex(u => u.id === authStore.info?.id)
+	if (userIndex !== -1) {
+		model.value[reaction.value].splice(userIndex, 1)
+	}
+	if(model.value[reaction.value].length === 0) {
+		delete model.value[reaction.value]
+	}
+}
+
+function getReactionTooltip(users: IUser[], value: string) {
+	const names = users.map(u => getDisplayName(u))
+
+	if (names.length === 1) {
+		return t('reaction.reactedWith', {user: names[0], value})
+	}
+
+	if (names.length > 1 && names.length < 10) {
+		return t('reaction.reactedWithAnd', {
+			users: names.slice(0, names.length - 1).join(', '),
+			lastUser: names[names.length - 1],
+			value,
+		})
+	}
+
+	return t('reaction.reactedWithAndMany', {
+		users: names.slice(0, 10).join(', '),
+		num: names.length - 10,
+		value,
+	})
+}
+
+const showEmojiPicker = ref(false)
+const emojiPickerRef = ref<HTMLElement | null>(null)
+
+function hideEmojiPicker(e: MouseEvent) {
+	if (showEmojiPicker.value) {
+		closeWhenClickedOutside(e, emojiPickerRef.value.$el, () => showEmojiPicker.value = false)
+	}
+}
+
+onMounted(() => document.addEventListener('click', hideEmojiPicker))
+onBeforeUnmount(() => document.removeEventListener('click', hideEmojiPicker))
+
+const emojiPickerButtonRef = ref<HTMLElement | null>(null)
+const reactionContainerRef = ref<HTMLElement | null>(null)
+const emojiPickerPosition = ref()
+
+function toggleEmojiPicker() {
+	if (!showEmojiPicker.value) {
+		const rect = emojiPickerButtonRef.value?.$el.getBoundingClientRect()
+		const container = reactionContainerRef.value?.getBoundingClientRect()
+		const left = rect.left - container.left + rect.width
+
+		emojiPickerPosition.value = {
+			left: left === 0 ? undefined : left,
+		}
+	}
+
+	nextTick(() => showEmojiPicker.value = !showEmojiPicker.value)
+}
+
+function hasCurrentUserReactedWithEmoji(value: string): boolean {
+	const user = model.value[value].find(u => u.id === authStore.info.id)
+	return typeof user !== 'undefined'
+}
+
+async function toggleReaction(value: string) {
+	if (hasCurrentUserReactedWithEmoji(value)) {
+		return removeReaction(value)
+	}
+	
+	return addReaction(value)
+}
+</script>
+
+<template>
+	<div
+		ref="reactionContainerRef"
+		class="reactions"
+	>
+		<BaseButton
+			v-for="(users, value) in (model as IReactionPerEntity)"
+			:key="'button' + value"
+			v-tooltip="getReactionTooltip(users, value)"
+			class="reaction-button"
+			:class="{'current-user-has-reacted': hasCurrentUserReactedWithEmoji(value)}"
+			:disabled
+			@click="toggleReaction(value)"
+		>
+			{{ value }} {{ users.length }}
+		</BaseButton>
+		<BaseButton
+			v-if="!disabled"
+			ref="emojiPickerButtonRef"
+			v-tooltip="$t('reaction.add')"
+			class="reaction-button"
+			@click.stop="toggleEmojiPicker"
+		>
+			<icon :icon="['far', 'face-laugh']" />
+		</BaseButton>
+		<CustomTransition name="fade">
+			<VuemojiPicker
+				v-if="showEmojiPicker"
+				ref="emojiPickerRef"
+				class="emoji-picker"
+				:style="{left: emojiPickerPosition?.left + 'px'}"
+				data-source="/emojis.json"
+				:is-dark="isDark"
+				@emojiClick="detail => addReaction(detail.unicode)"
+			/>
+		</CustomTransition>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.reaction-button {
+	margin-right: .25rem;
+	margin-bottom: .25rem;
+	padding: .175rem .5rem .15rem;
+	border: 1px solid var(--grey-400);
+	background: var(--grey-100);
+	border-radius: 100px;
+	font-size: .75rem;
+
+	&.current-user-has-reacted {
+		border-color: var(--primary);
+		background-color: hsla(var(--primary-h), var(--primary-s), var(--primary-light-l), 0.5);
+	}
+}
+
+.emoji-picker {
+	position: absolute;
+	z-index: 99;
+	margin-top: .5rem;
+}
+</style>

frontend/src/components/input/button.vue

@@ -13,7 +13,7 @@
 		}"
 	>
 		<template v-if="icon">
-			<icon 
+			<icon
 				v-if="showIconOnly"
 				:icon="icon"
 				:style="{'color': iconColor !== '' ? iconColor : undefined}"
@@ -22,7 +22,7 @@
 				v-else
 				class="icon is-small"
 			>
-				<icon 
+				<icon
 					:icon="icon"
 					:style="{'color': iconColor !== '' ? iconColor : undefined}"
 				/>
@@ -34,20 +34,20 @@
 
 <script lang="ts">
 const BUTTON_TYPES_MAP = {
-  primary: 'is-primary',
-  secondary: 'is-outlined',
-  tertiary: 'is-text is-inverted underline-none',
+	primary: 'is-primary',
+	secondary: 'is-outlined',
+	tertiary: 'is-text is-inverted underline-none',
 } as const
 
 export type ButtonTypes = keyof typeof BUTTON_TYPES_MAP
 
-export default { name: 'XButton' }
+export default {name: 'XButton'}
 </script>
 
 <script setup lang="ts">
 import {computed, useSlots} from 'vue'
 import BaseButton, {type BaseButtonProps} from '@/components/base/BaseButton.vue'
-import type { IconProp } from '@fortawesome/fontawesome-svg-core'
+import type {IconProp} from '@fortawesome/fontawesome-svg-core'
 
 // extending the props of the BaseButton
 export interface ButtonProps extends /* @vue-ignore */ BaseButtonProps {
@@ -76,37 +76,38 @@ const showIconOnly = computed(() => icon !== '' && typeof slots.default === 'und
 
 <style lang="scss" scoped>
 .button {
-  transition: all $transition;
-  border: 0;
-  text-transform: uppercase;
-  font-size: 0.85rem;
-  font-weight: bold;
-  height: auto;
-  min-height: $button-height;
-  box-shadow: var(--shadow-sm);
-  display: inline-flex;
-  white-space: var(--button-white-space);
+	transition: all $transition;
+	border: 0;
+	text-transform: uppercase;
+	font-size: 0.85rem;
+	font-weight: bold;
+	height: auto;
+	min-height: $button-height;
+	box-shadow: var(--shadow-sm);
+	display: inline-flex;
+	white-space: var(--button-white-space);
+	line-height: 1;
 
-  &:hover {
-    box-shadow: var(--shadow-md);
-  }
+	&:hover {
+		box-shadow: var(--shadow-md);
+	}
 
-  &.fullheight {
-    padding-right: 7px;
-    height: 100%;
-  }
+	&.fullheight {
+		padding-right: 7px;
+		height: 100%;
+	}
 
-  &.is-active,
-  &.is-focused,
-  &:active,
-  &:focus,
-  &:focus:not(:active) {
-    box-shadow: var(--shadow-xs) !important;
-  }
+	&.is-active,
+	&.is-focused,
+	&:active,
+	&:focus,
+	&:focus:not(:active) {
+		box-shadow: var(--shadow-xs) !important;
+	}
 
-  &.is-primary.is-outlined:hover {
-    color: var(--white);
-  }
+	&.is-primary.is-outlined:hover {
+		color: var(--white);
+	}
 }
 
 .is-small {
@@ -114,6 +115,6 @@ const showIconOnly = computed(() => icon !== '' && typeof slots.default === 'und
 }
 
 .underline-none {
-  text-decoration: none !important;
+	text-decoration: none !important;
 }
 </style>

frontend/src/components/input/datepickerInline.vue

@@ -63,6 +63,7 @@
 
 	<div class="flatpickr-container">
 		<flat-pickr
+			ref="flatPickrRef"
 			v-model="flatPickrDate"
 			:config="flatPickerConfig"
 		/>
@@ -70,7 +71,7 @@
 </template>
 
 <script lang="ts" setup>
-import {ref, toRef, watch, computed, type PropType} from 'vue'
+import {computed, onBeforeUnmount, onMounted, type PropType, ref, toRef, watch} from 'vue'
 import flatPickr from 'vue-flatpickr-component'
 import 'flatpickr/dist/flatpickr.css'
 
@@ -81,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 {getFlatpickrLanguage} from '@/helpers/flatpickrLanguage'
 
 const props = defineProps({
 	modelValue: {
@@ -105,6 +106,7 @@ watch(
 	{immediate: true},
 )
 
+const flatPickrRef = ref<HTMLElement | null>(null)
 const flatPickerConfig = computed(() => ({
 	altFormat: t('date.altFormatLong'),
 	altInput: true,
@@ -142,6 +144,41 @@ const flatPickrDate = computed({
 	},
 })
 
+onMounted(() => {
+	const inputs = flatPickrRef.value?.$el.parentNode.querySelectorAll('.numInputWrapper > input.numInput')
+	inputs.forEach(i => {
+		i.addEventListener('input', handleFlatpickrInput)
+	})
+})
+
+onBeforeUnmount(() => {
+	const inputs = flatPickrRef.value?.$el.parentNode.querySelectorAll('.numInputWrapper > input.numInput')
+	inputs.forEach(i => {
+		i.removeEventListener('input', handleFlatpickrInput)
+	})
+})
+
+// Flatpickr only returns a change event when the value in the input it's referring to changes.
+// That means it will usually only trigger when the focus is moved out of the input field.
+// This is fine most of the time. However, since we're displaying flatpickr in a popup,
+// the whole html dom instance might get destroyed, before the change event had a
+// chance to fire. In that case, it would not update the date value. To fix 
+// this, we're now listening on every change and bubble them up as soon
+// as they happen.
+function handleFlatpickrInput(e) {
+	const newDate = new Date(date?.value || 'now')
+	if (e.target.classList.contains('flatpickr-minute')) {
+		newDate.setMinutes(e.target.value)
+	}
+	if (e.target.classList.contains('flatpickr-hour')) {
+		newDate.setHours(e.target.value)
+	}
+	if (e.target.classList.contains('cur-year')) {
+		newDate.setFullYear(e.target.value)
+	}
+	flatPickrDate.value = newDate
+}
+
 
 function setDateValue(dateString: string | Date | null) {
 	if (dateString === null) {

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

@@ -139,7 +139,7 @@
 			<BaseButton
 				v-tooltip="$t('input.editor.image')" 
 				class="editor-toolbar__button" 
-				@click="openImagePicker"
+				@click="e => emit('imageUploadClicked', e)"
 			>
 				<span class="icon">
 					<icon icon="fa-image" />
@@ -347,16 +347,14 @@ const {
 	editor: Editor,
 }>()
 
+const emit = defineEmits(['imageUploadClicked'])
+
 const tableMode = ref(false)
 
 function toggleTableMode() {
 	tableMode.value = !tableMode.value
 }
 
-function openImagePicker() {
-	document.getElementById('tiptap__image-upload').click()
-}
-
 function setLink(event) {
 	setLinkInEditor(event.target.getBoundingClientRect(), editor)
 }

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

@@ -6,7 +6,7 @@
 		<EditorToolbar
 			v-if="editor && isEditing"
 			:editor="editor"
-			:upload-callback="uploadCallback"
+			@imageUploadClicked="triggerImageInput"
 		/>
 		<BubbleMenu
 			v-if="editor && isEditing"
@@ -338,10 +338,12 @@ const editor = useEditor({
 		HardBreak.extend({
 			addKeyboardShortcuts() {
 				return {
+					'Shift-Enter': () => this.editor.commands.setHardBreak(),
 					'Mod-Enter': () => {
 						if (contentHasChanged.value) {
 							bubbleSave()
 						}
+						return true
 					},
 				}
 			},
@@ -374,7 +376,7 @@ const editor = useEditor({
 		Typography,
 		Underline,
 		Link.configure({
-			openOnClick: true,
+			openOnClick: false,
 			validate: (href: string) => /^https?:\/\//.test(href),
 		}),
 		Table.configure({
@@ -489,6 +491,15 @@ function uploadAndInsertFiles(files: File[] | FileList) {
 	})
 }
 
+function triggerImageInput(event) {
+	if (typeof uploadCallback !== 'undefined') {
+		uploadInputRef.value?.click()
+		return
+	}
+
+	addImage(event)
+}
+
 async function addImage(event) {
 
 	if (typeof uploadCallback !== 'undefined') {
@@ -522,16 +533,20 @@ onMounted(async () => {
 
 	await nextTick()
 
-	const input = tiptapInstanceRef.value?.querySelectorAll('.tiptap__editor')[0]?.children[0]
-	input?.addEventListener('paste', handleImagePaste)
+	if (typeof uploadCallback !== 'undefined') {
+		const input = tiptapInstanceRef.value?.querySelectorAll('.tiptap__editor')[0]?.children[0]
+		input?.addEventListener('paste', handleImagePaste)
+	}
 
 	setModeAndValue(modelValue)
 })
 
 onBeforeUnmount(() => {
 	nextTick(() => {
-		const input = tiptapInstanceRef.value?.querySelectorAll('.tiptap__editor')[0]?.children[0]
-		input?.removeEventListener('paste', handleImagePaste)
+		if (typeof uploadCallback !== 'undefined') {
+			const input = tiptapInstanceRef.value?.querySelectorAll('.tiptap__editor')[0]?.children[0]
+			input?.removeEventListener('paste', handleImagePaste)
+		}
 	})
 	if (editShortcut !== '') {
 		document.removeEventListener('keydown', setFocusToEditor)
@@ -558,6 +573,10 @@ function handleImagePaste(event) {
 
 // See https://github.com/github/hotkey/discussions/85#discussioncomment-5214660
 function setFocusToEditor(event) {
+	if (event.target.shadowRoot) {
+		return
+	}
+
 	const hotkeyString = eventToHotkeyString(event)
 	if (!hotkeyString) return
 	if (hotkeyString !== editShortcut ||
@@ -594,27 +613,21 @@ function clickTasklistCheckbox(event) {
 
 watch(
 	() => isEditing.value,
-	editing => {
-		nextTick(() => {
-			const checkboxes = tiptapInstanceRef.value?.querySelectorAll('[data-checked]')
+	async editing => {
+		await nextTick()
+
+		let checkboxes = tiptapInstanceRef.value?.querySelectorAll('[data-checked]')
+		if (typeof checkboxes === 'undefined' || checkboxes.length === 0) {
+			// For some reason, this works when we check a second time.
+			await nextTick()
+
+			checkboxes = tiptapInstanceRef.value?.querySelectorAll('[data-checked]')
 			if (typeof checkboxes === 'undefined' || checkboxes.length === 0) {
 				return
 			}
+		}
 
-			if (editing) {
-				checkboxes.forEach(check => {
-					if (check.children.length < 2) {
-						return
-					}
-
-					// We assume the first child contains the label element with the checkbox and the second child the actual label
-					// When the actual label is clicked, we forward that click to the checkbox.
-					check.children[1].removeEventListener('click', clickTasklistCheckbox)
-				})
-
-				return
-			}
-
+		if (editing) {
 			checkboxes.forEach(check => {
 				if (check.children.length < 2) {
 					return
@@ -622,8 +635,21 @@ watch(
 
 				// We assume the first child contains the label element with the checkbox and the second child the actual label
 				// When the actual label is clicked, we forward that click to the checkbox.
-				check.children[1].addEventListener('click', clickTasklistCheckbox)
+				check.children[1].removeEventListener('click', clickTasklistCheckbox)
 			})
+
+			return
+		}
+
+		checkboxes.forEach(check => {
+			if (check.children.length < 2) {
+				return
+			}
+
+			// We assume the first child contains the label element with the checkbox and the second child the actual label
+			// When the actual label is clicked, we forward that click to the checkbox.
+			check.children[1].removeEventListener('click', clickTasklistCheckbox)
+			check.children[1].addEventListener('click', clickTasklistCheckbox)
 		})
 	},
 	{immediate: true},
@@ -781,6 +807,7 @@ watch(
 
 .ProseMirror {
 	/* Table-specific styling */
+
 	table {
 		border-collapse: collapse;
 		table-layout: fixed;
@@ -791,7 +818,7 @@ watch(
 		td,
 		th {
 			min-width: 1em;
-			border: 2px solid #ced4da;
+			border: 2px solid var(--grey-300) !important;
 			padding: 3px 5px;
 			vertical-align: top;
 			box-sizing: border-box;
@@ -805,7 +832,7 @@ watch(
 		th {
 			font-weight: bold;
 			text-align: left;
-			background-color: #f1f3f5;
+			background-color: var(--grey-200);
 		}
 
 		.selectedCell:after {
@@ -836,6 +863,7 @@ watch(
 	}
 
 	// Lists
+
 	ul {
 		margin-left: .5rem;
 		margin-top: 0 !important;
@@ -865,8 +893,14 @@ ul[data-type='taskList'] {
 	padding: 0;
 	margin-left: 0;
 
+	li[data-checked='true'] {
+		color: var(--grey-500);
+		text-decoration: line-through;
+	}
+
 	li {
 		display: flex;
+		margin-top: 0.25rem;
 
 		> label {
 			flex: 0 0 auto;

frontend/src/components/input/password.vue

@@ -10,7 +10,8 @@
 			autocomplete="current-password"
 			:tabindex="props.tabindex"
 			@keyup.enter="e => $emit('submit', e)"
-			@focusout="validate"
+			@focusout="() => {validate(); validateAfterFirst = true}"
+			@keyup="() => {validateAfterFirst ? validate() : null}"
 			@input="handleInput"
 		>
 		<BaseButton
@@ -23,16 +24,17 @@
 		</BaseButton>
 	</div>
 	<p
-		v-if="!isValid"
+		v-if="isValid !== true"
 		class="help is-danger"
 	>
-		{{ $t('user.auth.passwordRequired') }}
+		{{ isValid }}
 	</p>
 </template>
 
 <script lang="ts" setup>
 import {ref, watch} from 'vue'
 import {useDebounceFn} from '@vueuse/core'
+import {useI18n} from 'vue-i18n'
 import BaseButton from '@/components/base/BaseButton.vue'
 
 const props = defineProps({
@@ -40,13 +42,17 @@ const props = defineProps({
 	modelValue: String,
 	// This prop is a workaround to trigger validation from the outside when the user never had focus in the input.
 	validateInitially: Boolean,
+	validateMinLength: {
+		type: Boolean,
+		default: true,
+	},
 })
-
 const emit = defineEmits(['submit', 'update:modelValue'])
-
+const {t} = useI18n()
 const passwordFieldType = ref('password')
 const password = ref('')
-const isValid = ref(!props.validateInitially)
+const isValid = ref<true | string>(props.validateInitially === true ? true : '')
+const validateAfterFirst = ref(false)
 
 watch(
 	() => props.validateInitially,
@@ -55,7 +61,22 @@ watch(
 )
 
 const validate = useDebounceFn(() => {
-	isValid.value = password.value !== ''
+	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
 }, 100)
 
 function togglePasswordFieldType() {

frontend/src/components/misc/Icon.ts

@@ -87,7 +87,7 @@ import {
 	faStar,
 	faSun,
 	faTimesCircle,
-	faCircleQuestion,
+	faCircleQuestion, faFaceLaugh,
 } from '@fortawesome/free-regular-svg-icons'
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
 
@@ -186,6 +186,7 @@ library.add(faXmarksLines)
 library.add(faFont)
 library.add(faRulerHorizontal)
 library.add(faUnderline)
+library.add(faFaceLaugh)
 
 // overwriting the wrong types
 export default FontAwesomeIcon as unknown as FontAwesomeIconFixedTypes

frontend/src/components/misc/dropdown-item.vue

@@ -1,5 +1,8 @@
 <template>
-	<BaseButton class="dropdown-item">
+	<BaseButton
+		class="dropdown-item"
+		:class="{'is-disabled': disabled}"
+	>
 		<span
 			v-if="icon"
 			class="icon is-small"
@@ -21,6 +24,7 @@ import type {IconProp} from '@fortawesome/fontawesome-svg-core'
 export interface DropDownItemProps extends /* @vue-ignore */ BaseButtonProps {
 	icon?: IconProp,
 	iconClass?: object | string,
+	disabled?: boolean,
 }
 
 defineProps<DropDownItemProps>()

frontend/src/components/misc/keyboard-shortcuts/shortcuts.ts

@@ -62,7 +62,7 @@ export const KEYBOARD_SHORTCUTS : ShortcutGroup[] = [
 	},
 	{
 		title: 'project.kanban.title',
-		available: (route) => route.name === 'project.kanban',
+		available: (route) => route.name === 'project.view',
 		shortcuts: [
 			{
 				title: 'keyboardShortcuts.task.done',

frontend/src/components/misc/modal.vue

@@ -188,12 +188,6 @@ $modal-width: 1024px;
 		.info {
 			font-style: italic;
 		}
-
-		p {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-		}
 	}
 }
 

frontend/src/components/misc/popup.vue

@@ -1,7 +1,7 @@
 <template>
 	<slot
 		name="trigger"
-		:is-open="open"
+		:is-open="openValue"
 		:toggle="toggle"
 		:close="close"
 	/>
@@ -9,13 +9,13 @@
 		ref="popup"
 		class="popup"
 		:class="{
-			'is-open': open,
-			'has-overflow': props.hasOverflow && open
+			'is-open': openValue,
+			'has-overflow': props.hasOverflow && openValue
 		}"
 	>
 		<slot
 			name="content"
-			:is-open="open"
+			:is-open="openValue"
 			:toggle="toggle"
 			:close="close"
 		/>
@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref} from 'vue'
+import {ref, watch} from 'vue'
 import {onClickOutside} from '@vueuse/core'
 
 const props = defineProps({
@@ -31,24 +31,35 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	open: {
+		type: Boolean,
+		default: false,
+	},
 })
 
 const emit = defineEmits(['close'])
 
-const open = ref(false)
+watch(
+	() => props.open,
+	nowOpen => {
+		openValue.value = nowOpen
+	},
+)
+
+const openValue = ref(false)
 const popup = ref<HTMLElement | null>(null)
 
 function close() {
-	open.value = false
+	openValue.value = false
 	emit('close')
 }
 
 function toggle() {
-	open.value = !open.value
+	openValue.value = !openValue.value
 }
 
 onClickOutside(popup, () => {
-	if (!open.value) {
+	if (!openValue.value) {
 		return
 	}
 	close()

frontend/src/components/project/ProjectWrapper.vue

@@ -6,44 +6,23 @@
 		<h1 class="project-title-print">
 			{{ getProjectTitle(currentProject) }}
 		</h1>
-		
-		<div class="switch-view-container d-print-none">
-			<div class="switch-view">
+
+		<div
+			class="switch-view-container d-print-none"
+			:class="{'is-justify-content-flex-end': views.length === 1}"
+		>
+			<div
+				v-if="views.length > 1"
+				class="switch-view"
+			>
 				<BaseButton
-					v-shortcut="'g l'"
-					:title="$t('keyboardShortcuts.project.switchToListView')"
+					v-for="v in views"
+					:key="v.id"
 					class="switch-view-button"
-					:class="{'is-active': viewName === 'project'}"
-					:to="{ name: 'project.list', params: { projectId } }"
+					:class="{'is-active': v.id === viewId}"
+					:to="{ name: 'project.view', params: { projectId, viewId: v.id } }"
 				>
-					{{ $t('project.list.title') }}
-				</BaseButton>
-				<BaseButton
-					v-shortcut="'g g'"
-					:title="$t('keyboardShortcuts.project.switchToGanttView')"
-					class="switch-view-button"
-					:class="{'is-active': viewName === 'gantt'}"
-					:to="{ name: 'project.gantt', params: { projectId } }"
-				>
-					{{ $t('project.gantt.title') }}
-				</BaseButton>
-				<BaseButton
-					v-shortcut="'g t'"
-					:title="$t('keyboardShortcuts.project.switchToTableView')"
-					class="switch-view-button"
-					:class="{'is-active': viewName === 'table'}"
-					:to="{ name: 'project.table', params: { projectId } }"
-				>
-					{{ $t('project.table.title') }}
-				</BaseButton>
-				<BaseButton
-					v-shortcut="'g k'"
-					:title="$t('keyboardShortcuts.project.switchToKanbanView')"
-					class="switch-view-button"
-					:class="{'is-active': viewName === 'kanban'}"
-					:to="{ name: 'project.kanban', params: { projectId } }"
-				>
-					{{ $t('project.kanban.title') }}
+					{{ getViewTitle(v) }}
 				</BaseButton>
 			</div>
 			<slot name="header" />
@@ -63,7 +42,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref, computed, watch} from 'vue'
+import {computed, ref, watch} from 'vue'
 import {useRoute} from 'vue-router'
 
 import BaseButton from '@/components/base/BaseButton.vue'
@@ -79,26 +58,27 @@ import {useTitle} from '@/composables/useTitle'
 
 import {useBaseStore} from '@/stores/base'
 import {useProjectStore} from '@/stores/projects'
+import type {IProject} from '@/modelTypes/IProject'
+import type {IProjectView} from '@/modelTypes/IProjectView'
+import {useI18n} from 'vue-i18n'
 
-const props = defineProps({
-	projectId: {
-		type: Number,
-		required: true,
-	},
-	viewName: {
-		type: String,
-		required: true,
-	},
-})
+const {
+	projectId,
+	viewId,
+} = defineProps<{
+	projectId: IProject['id'],
+	viewId: IProjectView['id'],
+}>()
 
 const route = useRoute()
+const {t} = useI18n()
 
 const baseStore = useBaseStore()
 const projectStore = useProjectStore()
 const projectService = ref(new ProjectService())
 const loadedProjectId = ref(0)
 
-const currentProject = computed(() => {
+const currentProject = computed<IProject>(() => {
 	return typeof baseStore.currentProject === 'undefined' ? {
 		id: 0,
 		title: '',
@@ -108,13 +88,15 @@ const currentProject = computed(() => {
 })
 useTitle(() => currentProject.value?.id ? getProjectTitle(currentProject.value) : '')
 
+const views = computed(() => projectStore.projects[projectId]?.views)
+
 // watchEffect would be called every time the prop would get a value assigned, even if that value was the same as before.
 // This resulted in loading and setting the project multiple times, even when navigating away from it.
 // This caused wired bugs where the project background would be set on the home page but only right after setting a new 
 // project background and then navigating to home. It also highlighted the project in the menu and didn't allow changing any
 // of it, most likely due to the rights not being properly populated.
 watch(
-	() => props.projectId,
+	() => projectId,
 	// loadProject
 	async (projectIdToLoad: number) => {
 		const projectData = {id: projectIdToLoad}
@@ -130,11 +112,11 @@ watch(
 			)
 			&& typeof currentProject.value !== 'undefined' && currentProject.value.maxRight !== null
 		) {
-			loadedProjectId.value = props.projectId
+			loadedProjectId.value = projectId
 			return
 		}
 
-		console.debug(`Loading project, props.viewName = ${props.viewName}, $route.params =`, route.params, `, loadedProjectId = ${loadedProjectId.value}, currentProject = `, currentProject.value)
+		console.debug('Loading project, $route.params =', route.params, `, loadedProjectId = ${loadedProjectId.value}, currentProject = `, currentProject.value)
 
 		// Set the current project to the one we're about to load so that the title is already shown at the top
 		loadedProjectId.value = 0
@@ -149,31 +131,51 @@ watch(
 			const loadedProject = await projectService.value.get(project)
 			baseStore.handleSetCurrentProject({project: loadedProject})
 		} finally {
-			loadedProjectId.value = props.projectId
+			loadedProjectId.value = projectId
 		}
 	},
 	{immediate: true},
 )
+
+function getViewTitle(view: IProjectView) {
+	switch (view.title) {
+		case 'List':
+			return t('project.list.title')
+		case 'Gantt':
+			return t('project.gantt.title')
+		case 'Table':
+			return t('project.table.title')
+		case 'Kanban':
+			return t('project.kanban.title')
+	}
+	
+	return view.title
+}
 </script>
 
 <style lang="scss" scoped>
 .switch-view-container {
-  @media screen and (max-width: $tablet) {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-  }
+	min-height: $switch-view-height;
+	margin-bottom: 1rem;
+	
+	display: flex;
+	justify-content: space-between;
+	align-items: center;	
+	gap: 1rem;
+	
+	@media screen and (max-width: $tablet) {
+		justify-content: center;
+		flex-direction: column;
+	}
 }
 
 .switch-view {
-  background: var(--white);
-  display: inline-flex;
-  border-radius: $radius;
-  font-size: .75rem;
-  box-shadow: var(--shadow-sm);
-  height: $switch-view-height;
-  margin: 0 auto 1rem;
-  padding: .5rem;
+	background: var(--white);
+	display: inline-flex;
+	border-radius: $radius;
+	font-size: .75rem;
+	box-shadow: var(--shadow-sm);
+	padding: .5rem;
 }
 
 .switch-view-button {
@@ -201,7 +203,7 @@ watch(
 
 // FIXME: this should be in notification and set via a prop
 .is-archived .notification.is-warning {
-  margin-bottom: 1rem;
+	margin-bottom: 1rem;
 }
 
 .project-title-print {
@@ -209,7 +211,7 @@ watch(
 	font-size: 1.75rem;
 	text-align: center;
 	margin-bottom: .5rem;
-	
+
 	@media print {
 		display: block;
 	}

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import FilterInput from '@/components/project/partials/FilterInput.vue'
+
+function initState(value: string) {
+	return {
+		value,
+	}
+}
+</script>
+
+<template>
+	<Story title="Filter Input">
+		<Variant 
+			title="With date values"
+			:init-state="initState('dueDate < now && done = false && dueDate > now/w+1w')"
+		>
+			<template #default="{state}">
+				<FilterInput v-model="state.value" />
+			</template>
+		</Variant>
+	</Story>
+</template>

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

@@ -0,0 +1,402 @@
+<script setup lang="ts">
+import {computed, nextTick, ref, watch} from 'vue'
+import {useAutoHeightTextarea} from '@/composables/useAutoHeightTextarea'
+import DatepickerWithValues from '@/components/date/datepickerWithValues.vue'
+import UserService from '@/services/user'
+import AutocompleteDropdown from '@/components/input/AutocompleteDropdown.vue'
+import {useLabelStore} from '@/stores/labels'
+import XLabel from '@/components/tasks/partials/label.vue'
+import User from '@/components/misc/user.vue'
+import ProjectUserService from '@/services/projectUsers'
+import {useProjectStore} from '@/stores/projects'
+import {
+	ASSIGNEE_FIELDS,
+	AUTOCOMPLETE_FIELDS,
+	AVAILABLE_FILTER_FIELDS,
+	DATE_FIELDS,
+	FILTER_JOIN_OPERATOR,
+	FILTER_OPERATORS,
+	FILTER_OPERATORS_REGEX,
+	getFilterFieldRegexPattern,
+	LABEL_FIELDS,
+} from '@/helpers/filters'
+import {useDebounceFn} from '@vueuse/core'
+import {createRandomID} from '@/helpers/randomId'
+
+const {
+	modelValue,
+	projectId,
+	inputLabel = undefined,
+} = defineProps<{
+	modelValue: string,
+	projectId?: number,
+	inputLabel?: string,
+}>()
+
+const emit = defineEmits(['update:modelValue', 'blur'])
+
+const filterQuery = ref<string>('')
+const {
+	textarea: filterInput,
+	height,
+} = useAutoHeightTextarea(filterQuery)
+
+const id = ref(createRandomID())
+
+watch(
+	() => modelValue,
+	() => {
+		filterQuery.value = modelValue
+	},
+	{immediate: true},
+)
+
+watch(
+	() => filterQuery.value,
+	() => {
+		if (filterQuery.value !== modelValue) {
+			emit('update:modelValue', filterQuery.value)
+		}
+	},
+)
+
+const userService = new UserService()
+const projectUserService = new ProjectUserService()
+
+function escapeHtml(unsafe: string): string {
+	return unsafe
+		.replace(/&/g, '&amp;')
+		.replace(/</g, '&lt;')
+		.replace(/>/g, '&gt;')
+		.replace(/"/g, '&quot;')
+		.replace(/'/g, '&#039;')
+}
+
+function unEscapeHtml(unsafe: string): string {
+	return unsafe
+		.replace(/&amp;/g, '&')
+		.replace(/&lt;/g, '<')
+		.replace(/&gt;/g, '>')
+		.replace(/&quot/g, '"')
+		.replace(/&#039;/g, '\'')
+}
+
+const highlightedFilterQuery = computed(() => {
+	let highlighted = escapeHtml(filterQuery.value)
+	DATE_FIELDS
+		.forEach(o => {
+			const pattern = new RegExp(o + '(\\s*)' + FILTER_OPERATORS_REGEX + '(\\s*)([\'"]?)([^\'"\\s]+\\1?)?', 'ig')
+			highlighted = highlighted.replaceAll(pattern, (match, spacesBefore, token, spacesAfter, start, value, position) => {
+				if (typeof value === 'undefined') {
+					value = ''
+				}
+
+				let endPadding = ''
+				if(value.endsWith(' ')) {
+					const fullLength = value.length
+					value = value.trimEnd()
+					const numberOfRemovedSpaces = fullLength - value.length
+					endPadding = endPadding.padEnd(numberOfRemovedSpaces, ' ')
+				}
+
+				return `${o}${spacesBefore}${token}${spacesAfter}<button class="is-primary filter-query__date_value" data-position="${position}">${value}</button><span class="filter-query__date_value_placeholder">${value}</span>${endPadding}`
+			})
+		})
+	ASSIGNEE_FIELDS
+		.forEach(f => {
+			const pattern = new RegExp(f + '\\s*' + FILTER_OPERATORS_REGEX + '\\s*([\'"]?)([^\'"\\s]+\\1?)?', 'ig')
+			highlighted = highlighted.replaceAll(pattern, (match, token, start, value) => {
+				if (typeof value === 'undefined') {
+					value = ''
+				}
+
+				return `${f} ${token} <span class="filter-query__assignee_value">${value}<span>`
+			})
+		})
+	FILTER_JOIN_OPERATOR
+		.map(o => escapeHtml(o))
+		.forEach(o => {
+			highlighted = highlighted.replaceAll(o, `<span class="filter-query__join-operator">${o}</span>`)
+		})
+	LABEL_FIELDS
+		.forEach(f => {
+			const pattern = getFilterFieldRegexPattern(f)
+			highlighted = highlighted.replaceAll(pattern, (match, prefix, operator, space, value) => {
+
+				if (typeof value === 'undefined') {
+					value = ''
+				}
+
+				let labelTitles = [value.trim()]
+				if (operator === 'in' || operator === '?=') {
+					labelTitles = value.split(',').map(v => v.trim())
+				}
+
+				const labelsHtml: string[] = []
+				labelTitles.forEach(t => {
+					const label = labelStore.getLabelByExactTitle(t) || undefined
+					labelsHtml.push(`<span class="filter-query__label_value" style="background-color: ${label?.hexColor}; color: ${label?.textColor}">${label?.title ?? t}</span>`)
+				})
+
+				const endSpace = value.endsWith(' ') ? ' ' : ''
+				return `${f} ${operator} ${labelsHtml.join(', ')}${endSpace}`
+			})
+		})
+	FILTER_OPERATORS
+		.map(o => ` ${escapeHtml(o)} `)
+		.forEach(o => {
+			highlighted = highlighted.replaceAll(o, `<span class="filter-query__operator">${o}</span>`)
+		})
+	AVAILABLE_FILTER_FIELDS.forEach(f => {
+		highlighted = highlighted.replaceAll(f, `<span class="filter-query__field">${f}</span>`)
+	})
+	return highlighted
+})
+
+const currentOldDatepickerValue = ref('')
+const currentDatepickerValue = ref('')
+const currentDatepickerPos = ref()
+const datePickerPopupOpen = ref(false)
+
+watch(
+	() => highlightedFilterQuery.value,
+	async () => {
+		await nextTick()
+		document.querySelectorAll('button.filter-query__date_value')
+			.forEach(b => {
+				b.addEventListener('click', event => {
+					event.preventDefault()
+					event.stopPropagation()
+
+					const button = event.target
+					currentOldDatepickerValue.value = button?.innerText
+					currentDatepickerValue.value = button?.innerText
+					currentDatepickerPos.value = parseInt(button?.dataset.position)
+					datePickerPopupOpen.value = true
+				})
+			})
+	},
+	{immediate: true},
+)
+
+function updateDateInQuery(newDate: string) {
+	// Need to escape and unescape the query because the positions are based on the escaped query
+	let escaped = escapeHtml(filterQuery.value)
+	escaped = escaped
+			.substring(0, currentDatepickerPos.value)
+		+ escaped
+			.substring(currentDatepickerPos.value)
+			.replace(currentOldDatepickerValue.value, newDate)
+	currentOldDatepickerValue.value = newDate
+	filterQuery.value = unEscapeHtml(escaped)
+}
+
+const autocompleteMatchPosition = ref(0)
+const autocompleteMatchText = ref('')
+const autocompleteResultType = ref<'labels' | 'assignees' | 'projects' | null>(null)
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const autocompleteResults = ref<any[]>([])
+const labelStore = useLabelStore()
+const projectStore = useProjectStore()
+
+function handleFieldInput() {
+	const cursorPosition = filterInput.value.selectionStart
+	const textUpToCursor = filterQuery.value.substring(0, cursorPosition)
+	autocompleteResults.value = []
+
+	AUTOCOMPLETE_FIELDS.forEach(field => {
+		const pattern = new RegExp('(' + field + '\\s*' + FILTER_OPERATORS_REGEX + '\\s*)([\'"]?)([^\'"&|()]+\\1?)?$', 'ig')
+		const match = pattern.exec(textUpToCursor)
+
+		if (match !== null) {
+			// 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 (projectId) {
+						projectUserService.getAll({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 (!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
+			}
+		}
+	})
+}
+
+function autocompleteSelect(value) {
+	filterQuery.value = filterQuery.value.substring(0, autocompleteMatchPosition.value + 1) +
+		(autocompleteResultType.value === 'assignees'
+			? value.username
+			: value.title) +
+		filterQuery.value.substring(autocompleteMatchPosition.value + autocompleteMatchText.value.length + 1)
+
+	autocompleteResults.value = []
+}
+
+// The blur from the textarea might happen before the replacement after autocomplete select was done.
+// That caused listeners to try and replace values earlier, resulting in broken queries.
+const blurDebounced = useDebounceFn(() => emit('blur'), 500)
+</script>
+
+<template>
+	<div class="field">
+		<label 
+			class="label"
+			:for="id"
+		>
+			{{ inputLabel ?? $t('filters.query.title') }}
+		</label>
+		<AutocompleteDropdown
+			:options="autocompleteResults"
+			@blur="filterInput?.blur()"
+			@update:modelValue="autocompleteSelect"
+		>
+			<template
+				#input="{ onKeydown, onFocusField }"
+			>
+				<div class="control filter-input">
+					<textarea
+						:id
+						ref="filterInput"
+						v-model="filterQuery"
+						autocomplete="off"
+						autocorrect="off"
+						autocapitalize="off"
+						spellcheck="false"
+						class="input"
+						:class="{'has-autocomplete-results': autocompleteResults.length > 0}"
+						:placeholder="$t('filters.query.placeholder')"
+						@input="handleFieldInput"
+						@focus="onFocusField"
+						@keydown="onKeydown"
+						@blur="blurDebounced"
+					/>
+					<div
+						class="filter-input-highlight"
+						:style="{'height': height}"
+						v-html="highlightedFilterQuery"
+					/>
+					<DatepickerWithValues
+						v-model="currentDatepickerValue"
+						:open="datePickerPopupOpen"
+						@close="() => datePickerPopupOpen = false"
+						@update:modelValue="updateDateInQuery"
+					/>
+				</div>
+			</template>
+			<template
+				#result="{ item }"
+			>
+				<XLabel
+					v-if="autocompleteResultType === 'labels'"
+					:label="item"
+				/>
+				<User
+					v-else-if="autocompleteResultType === 'assignees'"
+					:user="item"
+					:avatar-size="25"
+				/>
+				<template v-else>
+					{{ item.title }}
+				</template>
+			</template>
+		</AutocompleteDropdown>
+	</div>
+</template>
+
+<style lang="scss">
+.filter-input-highlight {
+	
+	&, button.filter-query__date_value {
+		color: var(--card-color);
+	}
+	
+	span {
+		&.filter-query__field {
+			color: var(--code-literal);
+		}
+
+		&.filter-query__operator {
+			color: var(--code-keyword);
+		}
+
+		&.filter-query__join-operator {
+			color: var(--code-section);
+		}
+
+		&.filter-query__date_value_placeholder {
+			display: inline-block;
+			color: transparent;
+		}
+
+		&.filter-query__assignee_value, &.filter-query__label_value {
+			border-radius: $radius;
+			background-color: var(--grey-200);
+			color: var(--grey-700);
+		}
+	}
+
+	button.filter-query__date_value {
+		border-radius: $radius;
+		position: absolute;
+		margin-top: calc((0.25em - 0.125rem) * -1);
+		height: 1.75rem;
+		padding: 0;
+		border: 0;
+		background: transparent;
+		font-size: 1rem;
+		cursor: pointer;
+		line-height: 1.5;
+	}
+}
+</style>
+
+<style lang="scss" scoped>
+.filter-input {
+	position: relative;
+
+	textarea {
+		position: absolute;
+		background: transparent !important;
+		resize: none;
+		text-fill-color: transparent;
+		-webkit-text-fill-color: transparent;
+
+		&::placeholder {
+			text-fill-color: var(--input-placeholder-color);
+			-webkit-text-fill-color: var(--input-placeholder-color);
+		}
+
+		&.has-autocomplete-results {
+			border-radius: var(--input-radius) var(--input-radius) 0 0;
+		}
+	}
+
+	.filter-input-highlight {
+		background: var(--white);
+		height: 2.5em;
+		line-height: 1.5;
+		padding: .5em .75em;
+		word-break: break-word;
+	}
+}
+</style>

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

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import {ref} from 'vue'
+import BaseButton from '@/components/base/BaseButton.vue'
+
+const showDocs = ref(false)
+</script>
+
+<template>
+	<BaseButton
+		class="has-text-primary"
+		@click="showDocs = !showDocs"
+	>
+		{{ $t('filters.query.help.link') }}
+	</BaseButton>
+
+	<Transition>
+		<div
+			v-if="showDocs"
+			class="content"
+		>
+			<p>{{ $t('filters.query.help.intro') }}</p>
+			<ul>
+				<li><code>done</code>: {{ $t('filters.query.help.fields.done') }}</li>
+				<li><code>priority</code>: {{ $t('filters.query.help.fields.priority') }}</li>
+				<li><code>percentDone</code>: {{ $t('filters.query.help.fields.percentDone') }}</li>
+				<li><code>dueDate</code>: {{ $t('filters.query.help.fields.dueDate') }}</li>
+				<li><code>startDate</code>: {{ $t('filters.query.help.fields.startDate') }}</li>
+				<li><code>endDate</code>: {{ $t('filters.query.help.fields.endDate') }}</li>
+				<li><code>doneAt</code>: {{ $t('filters.query.help.fields.doneAt') }}</li>
+				<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>
+			</ul>
+			<p>{{ $t('filters.query.help.canUseDatemath') }}</p>
+			<p>{{ $t('filters.query.help.operators.intro') }}</p>
+			<ul>
+				<li><code>!=</code>: {{ $t('filters.query.help.operators.notEqual') }}</li>
+				<li><code>=</code>: {{ $t('filters.query.help.operators.equal') }}</li>
+				<li><code>&gt;</code>: {{ $t('filters.query.help.operators.greaterThan') }}</li>
+				<li><code>&gt;=</code>: {{ $t('filters.query.help.operators.greaterThanOrEqual') }}</li>
+				<li><code>&lt;</code>: {{ $t('filters.query.help.operators.lessThan') }}</li>
+				<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>
+			</ul>
+			<p>{{ $t('filters.query.help.logicalOperators.intro') }}</p>
+			<ul>
+				<li><code>&amp;&amp;</code>: {{ $t('filters.query.help.logicalOperators.and') }}</li>
+				<li><code>||</code>: {{ $t('filters.query.help.logicalOperators.or') }}</li>
+				<li><code>(</code> and <code>)</code>: {{ $t('filters.query.help.logicalOperators.parentheses') }}</li>
+			</ul>
+			<p>{{ $t('filters.query.help.examples.intro') }}</p>
+			<ul>
+				<li><code>priority = 4</code>: {{ $t('filters.query.help.examples.priorityEqual') }}</li>
+				<li><code>dueDate &lt; now</code>: {{ $t('filters.query.help.examples.dueDatePast') }}</li>
+				<li>
+					<code>done = false &amp;&amp; priority &gt;= 3</code>:
+					{{ $t('filters.query.help.examples.undoneHighPriority') }}
+				</li>
+				<li><code>assignees in [user1, user2]</code>: {{ $t('filters.query.help.examples.assigneesIn') }}</li>
+				<li>
+					<code>(priority = 1 || priority = 2) &amp;&amp; dueDate &lt;= now</code>:
+					{{ $t('filters.query.help.examples.priorityOneOrTwoPastDue') }}
+				</li>
+			</ul>
+		</div>
+	</Transition>
+</template>
+
+<style scoped lang="scss">
+.v-enter-active,
+.v-leave-active {
+	transition: all $transition-duration ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+	transform: scaleY(0);
+}
+</style>

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

@@ -63,6 +63,10 @@ const filteredProjects = computed(() => {
 
 	@media screen and (min-width: $widescreen) {
 		--project-grid-columns: 5;
+
+		.project-grid-item:nth-child(6) {
+			display: none;
+		}
 	}
 }
 

frontend/src/components/project/partials/filter-popup.vue

@@ -1,14 +1,8 @@
 <template>
-	<x-button
-		v-if="hasFilters"
-		variant="secondary"
-		@click="clearFilters"
-	>
-		{{ $t('filters.clear') }}
-	</x-button>
 	<x-button
 		variant="secondary"
 		icon="filter"
+		:class="{'has-filters': hasFilters}"
 		@click="() => modalOpen = true"
 	>
 		{{ $t('filters.title') }}
@@ -25,6 +19,8 @@
 			v-model="value"
 			:has-title="true"
 			class="filter-popup"
+			@update:modelValue="emitChanges"
+			@showResultsButtonClicked="() => modalOpen = false"
 		/>
 	</modal>
 </template>
@@ -34,58 +30,35 @@ import {computed, ref, watch} from 'vue'
 
 import Filters from '@/components/project/partials/filters.vue'
 
-import {getDefaultParams} from '@/composables/useTaskList'
+import {type TaskFilterParams} from '@/services/taskCollection'
 
-const props = defineProps({
-	modelValue: {
-		required: true,
-	},
-})
+const props = defineProps(['modelValue'])
 const emit = defineEmits(['update:modelValue'])
 
-const value = computed({
-	get() {
-		return props.modelValue
-	},
-	set(value) {
-		if(props.modelValue === value) {
-			return
-		}
-		emit('update:modelValue', value)
-	},
-})
+const value = ref<TaskFilterParams>({})
 
 watch(
 	() => props.modelValue,
-	(modelValue) => {
+	(modelValue: TaskFilterParams) => {
 		value.value = modelValue
 	},
 	{immediate: true},
 )
 
+function emitChanges(newValue: TaskFilterParams) {
+	emit('update:modelValue', {
+		...value.value,
+		filter: newValue.filter,
+		s: newValue.s,
+	})
+}
+
 const hasFilters = computed(() => {
-	// this.value also contains the page parameter which we don't want to include in filters
-	// eslint-disable-next-line no-unused-vars
-	const {filter_by, filter_value, filter_comparator, filter_concat, s} = value.value
-	const def = {...getDefaultParams()}
-
-	const params = {filter_by, filter_value, filter_comparator, filter_concat, s}
-	const defaultParams = {
-		filter_by: def.filter_by,
-		filter_value: def.filter_value,
-		filter_comparator: def.filter_comparator,
-		filter_concat: def.filter_concat,
-		s: s ? def.s : undefined,
-	}
-
-	return JSON.stringify(params) !== JSON.stringify(defaultParams)
+	return value.value.filter !== '' ||
+		value.value.s !== ''
 })
 
 const modalOpen = ref(false)
-
-function clearFilters() {
-	value.value = {...getDefaultParams()}
-}
 </script>
 
 <style scoped lang="scss">
@@ -96,4 +69,21 @@ function clearFilters() {
 		margin: 2rem 0 1rem;
 	}
 }
+
+$filter-bubble-size: .75rem;
+.has-filters {
+	position: relative;
+
+	&::after {
+		content: '';
+		position: absolute;
+		top: math.div($filter-bubble-size, -2);
+		right: math.div($filter-bubble-size, -2);
+
+		width: $filter-bubble-size;
+		height: $filter-bubble-size;
+		border-radius: 100%;
+		background: var(--primary);
+	}
+}
 </style>

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

@@ -2,195 +2,43 @@
 	<card
 		class="filters has-overflow"
 		:title="hasTitle ? $t('filters.title') : ''"
+		role="search"
 	>
+		<FilterInput
+			v-model="filterQuery"
+			:project-id="projectId"
+			@blur="change()"
+		/>
+
 		<div class="field is-flex is-flex-direction-column">
 			<Fancycheckbox
 				v-model="params.filter_include_nulls"
-				@update:modelValue="change()"
+				@blur="change()"
 			>
 				{{ $t('filters.attributes.includeNulls') }}
 			</Fancycheckbox>
-			<Fancycheckbox
-				v-model="filters.requireAllFilters"
-				@update:modelValue="setFilterConcat()"
-			>
-				{{ $t('filters.attributes.requireAll') }}
-			</Fancycheckbox>
-			<Fancycheckbox
-				v-model="filters.done"
-				@update:modelValue="setDoneFilter"
-			>
-				{{ $t('filters.attributes.showDoneTasks') }}
-			</Fancycheckbox>
-			<Fancycheckbox
-				v-if="!['project.kanban', 'project.table'].includes($route.name as string)"
-				v-model="sortAlphabetically"
-				@update:modelValue="change()"
-			>
-				{{ $t('filters.attributes.sortAlphabetically') }}
-			</Fancycheckbox>
-		</div>
-		<div class="field">
-			<label class="label">{{ $t('misc.search') }}</label>
-			<div class="control">
-				<input
-					v-model="params.s"
-					class="input"
-					:placeholder="$t('misc.search')"
-					@blur="change()"
-					@keyup.enter="change()"
-				>
-			</div>
-		</div>
-		<div class="field">
-			<label class="label">{{ $t('task.attributes.priority') }}</label>
-			<div class="control single-value-control">
-				<PrioritySelect
-					v-model.number="filters.priority"
-					:disabled="!filters.usePriority || undefined"
-					@update:modelValue="setPriority"
-				/>
-				<Fancycheckbox
-					v-model="filters.usePriority"
-					@update:modelValue="setPriority"
-				>
-					{{ $t('filters.attributes.enablePriority') }}
-				</Fancycheckbox>
-			</div>
-		</div>
-		<div class="field">
-			<label class="label">{{ $t('task.attributes.percentDone') }}</label>
-			<div class="control single-value-control">
-				<PercentDoneSelect
-					v-model.number="filters.percentDone"
-					:disabled="!filters.usePercentDone || undefined"
-					@update:modelValue="setPercentDoneFilter"
-				/>
-				<Fancycheckbox
-					v-model="filters.usePercentDone"
-					@update:modelValue="setPercentDoneFilter"
-				>
-					{{ $t('filters.attributes.enablePercentDone') }}
-				</Fancycheckbox>
-			</div>
-		</div>
-		<div class="field">
-			<label class="label">{{ $t('task.attributes.dueDate') }}</label>
-			<div class="control">
-				<DatepickerWithRange
-					v-model="filters.dueDate"
-					@update:modelValue="values => setDateFilter('due_date', values)"
-				>
-					<template #trigger="{toggle, buttonText}">
-						<x-button
-							variant="secondary"
-							:shadow="false"
-							class="mb-2"
-							@click.prevent.stop="toggle()"
-						>
-							{{ buttonText }}
-						</x-button>
-					</template>
-				</DatepickerWithRange>
-			</div>
-		</div>
-		<div class="field">
-			<label class="label">{{ $t('task.attributes.startDate') }}</label>
-			<div class="control">
-				<DatepickerWithRange
-					v-model="filters.startDate"
-					@update:modelValue="values => setDateFilter('start_date', values)"
-				>
-					<template #trigger="{toggle, buttonText}">
-						<x-button
-							variant="secondary"
-							:shadow="false"
-							class="mb-2"
-							@click.prevent.stop="toggle()"
-						>
-							{{ buttonText }}
-						</x-button>
-					</template>
-				</DatepickerWithRange>
-			</div>
-		</div>
-		<div class="field">
-			<label class="label">{{ $t('task.attributes.endDate') }}</label>
-			<div class="control">
-				<DatepickerWithRange
-					v-model="filters.endDate"
-					@update:modelValue="values => setDateFilter('end_date', values)"
-				>
-					<template #trigger="{toggle, buttonText}">
-						<x-button
-							variant="secondary"
-							:shadow="false"
-							class="mb-2"
-							@click.prevent.stop="toggle()"
-						>
-							{{ buttonText }}
-						</x-button>
-					</template>
-				</DatepickerWithRange>
-			</div>
-		</div>
-		<div class="field">
-			<label class="label">{{ $t('task.attributes.reminders') }}</label>
-			<div class="control">
-				<DatepickerWithRange
-					v-model="filters.reminders"
-					@update:modelValue="values => setDateFilter('reminders', values)"
-				>
-					<template #trigger="{toggle, buttonText}">
-						<x-button
-							variant="secondary"
-							:shadow="false"
-							class="mb-2"
-							@click.prevent.stop="toggle()"
-						>
-							{{ buttonText }}
-						</x-button>
-					</template>
-				</DatepickerWithRange>
-			</div>
 		</div>
 
-		<div class="field">
-			<label class="label">{{ $t('task.attributes.assignees') }}</label>
-			<div class="control">
-				<SelectUser
-					v-model="entities.users"
-					@select="changeMultiselectFilter('users', 'assignees')"
-					@remove="changeMultiselectFilter('users', 'assignees')"
-				/>
-			</div>
-		</div>
-
-		<div class="field">
-			<label class="label">{{ $t('task.attributes.labels') }}</label>
-			<div class="control labels-list">
-				<EditLabels
-					v-model="entities.labels"
-					:creatable="false"
-					@update:modelValue="changeLabelFilter"
-				/>
-			</div>
-		</div>
+		<FilterInputDocs />
 
 		<template
-			v-if="['filters.create', 'project.edit', 'filter.settings.edit'].includes($route.name as string)"
+			v-if="hasFooter"
+			#footer
 		>
-			<div class="field">
-				<label class="label">{{ $t('project.projects') }}</label>
-				<div class="control">
-					<SelectProject
-						v-model="entities.projects"
-						:project-filter="p => p.id > 0"
-						@select="changeMultiselectFilter('projects', 'project_id')"
-						@remove="changeMultiselectFilter('projects', 'project_id')"
-					/>
-				</div>
-			</div>
+			<x-button
+				variant="secondary"
+				class="mr-2"
+				:disabled="filterQuery === ''"
+				@click.prevent.stop="clearFiltersAndEmit"
+			>
+				{{ $t('filters.clear') }}
+			</x-button>
+			<x-button
+				variant="primary"
+				@click.prevent.stop="changeAndEmitButton"
+			>
+				{{ $t('filters.showResults') }}
+			</x-button>
 		</template>
 	</card>
 </template>
@@ -200,419 +48,111 @@ export const ALPHABETICAL_SORT = 'title'
 </script>
 
 <script setup lang="ts">
-import {computed, nextTick, onMounted, reactive, ref, shallowReactive, toRefs} from 'vue'
-import {camelCase} from 'camel-case'
-import {watchDebounced} from '@vueuse/core'
-
-import type {ILabel} from '@/modelTypes/ILabel'
-import type {IUser} from '@/modelTypes/IUser'
-import type {IProject} from '@/modelTypes/IProject'
-
-import {useLabelStore} from '@/stores/labels'
-
-import DatepickerWithRange from '@/components/date/datepickerWithRange.vue'
-import PrioritySelect from '@/components/tasks/partials/prioritySelect.vue'
-import PercentDoneSelect from '@/components/tasks/partials/percentDoneSelect.vue'
-import EditLabels from '@/components/tasks/partials/editLabels.vue'
+import {computed, ref, watch} from 'vue'
 import Fancycheckbox from '@/components/input/fancycheckbox.vue'
-import SelectUser from '@/components/input/SelectUser.vue'
-import SelectProject from '@/components/input/SelectProject.vue'
+import FilterInput from '@/components/project/partials/FilterInput.vue'
+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 FilterInputDocs from '@/components/project/partials/FilterInputDocs.vue'
 
-import {parseDateOrString} from '@/helpers/time/parseDateOrString'
-import {dateIsValid, formatISO} from '@/helpers/time/formatDate'
-import {objectToSnakeCase} from '@/helpers/case'
+const {
+	hasTitle = false,
+	hasFooter = true,
+	modelValue,
+} = defineProps<{
+	hasTitle?: boolean,
+	hasFooter?: boolean,
+	modelValue: TaskFilterParams,
+}>()
 
-import UserService from '@/services/user'
-import ProjectService from '@/services/project'
+const emit = defineEmits(['update:modelValue', 'showResultsButtonClicked'])
 
-// FIXME: do not use this here for now. instead create new version from DEFAULT_PARAMS
-import {getDefaultParams} from '@/composables/useTaskList'
+const route = useRoute()
+const projectId = computed(() => {
+	if (route.name?.startsWith('project.')) {
+		return Number(route.params.projectId)
+	}
 
-const props = defineProps({
-	modelValue: {
-		required: true,
-	},
-	hasTitle: {
-		type: Boolean,
-		default: false,
-	},
+	return undefined
 })
 
-const emit = defineEmits(['update:modelValue'])
-
-// FIXME: merge with DEFAULT_PARAMS in taskProject.js
-const DEFAULT_PARAMS = {
+const params = ref<TaskFilterParams>({
 	sort_by: [],
 	order_by: [],
-	filter_by: [],
-	filter_value: [],
-	filter_comparator: [],
-	filter_include_nulls: true,
-	filter_concat: 'or',
+	filter: '',
+	filter_include_nulls: false,
 	s: '',
-} as const
-
-const DEFAULT_FILTERS = {
-	done: false,
-	dueDate: '',
-	requireAllFilters: false,
-	priority: 0,
-	usePriority: false,
-	startDate: '',
-	endDate: '',
-	percentDone: 0,
-	usePercentDone: false,
-	reminders: '',
-	assignees: '',
-	labels: '',
-	project_id: '',
-} as const
-
-const {modelValue} = toRefs(props)
-
-const labelStore = useLabelStore()
-
-const params = ref({...DEFAULT_PARAMS})
-const filters = ref({...DEFAULT_FILTERS})
-
-const services = {
-	users: shallowReactive(new UserService()),
-	projects: shallowReactive(new ProjectService()),
-}
-
-interface Entities {
-	users: IUser[]
-	labels: ILabel[]
-	projects: IProject[]
-}
-
-type EntityType = 'users' | 'labels' | 'projects'
-
-const entities: Entities = reactive({
-	users: [],
-	labels: [],
-	projects: [],
 })
 
-onMounted(() => {
-	filters.value.requireAllFilters = params.value.filter_concat === 'and'
-})
-
-// Using watchDebounced to prevent the filter re-triggering itself.
-// FIXME: Only here until this whole component changes a lot with the new filter syntax.
-watchDebounced(
-	modelValue,
-	(value) => {
-		// FIXME: filters should only be converted to snake case in the last moment
-		params.value = objectToSnakeCase(value)
-		prepareFilters()
+const filterQuery = ref('')
+watch(
+	() => [params.value.filter, params.value.s],
+	() => {
+		const filter = params.value.filter || ''
+		const s = params.value.s || ''
+		filterQuery.value = filter || s
 	},
-	{immediate: true, debounce: 500, maxWait: 1000},
 )
 
-const sortAlphabetically = computed({
-	get() {
-		return params.value?.sort_by?.find(sortBy => sortBy === ALPHABETICAL_SORT) !== undefined
+// Using watchDebounced to prevent the filter re-triggering itself.
+watch(
+	() => modelValue,
+	(value: TaskFilterParams) => {
+		const val = {...value}
+		val.filter = transformFilterStringFromApi(
+			val?.filter || '',
+			labelId => labelStore.getLabelById(labelId)?.title,
+			projectId => projectStore.projects[projectId]?.title || null,
+		)
+		params.value = val
 	},
-	set(sortAlphabetically) {
-		params.value.sort_by = sortAlphabetically
-			? [ALPHABETICAL_SORT]
-			: getDefaultParams().sort_by
+	{immediate: true},
+)
 
-		change()
-	},
-})
+const labelStore = useLabelStore()
+const projectStore = useProjectStore()
 
 function change() {
-	const newParams = {...params.value}
-	newParams.filter_value = newParams.filter_value.map(v => v instanceof Date ? v.toISOString() : v)
+	const filter = transformFilterStringForApi(
+		filterQuery.value,
+		labelTitle => labelStore.filterLabelsByQuery([], labelTitle)[0]?.id || null,
+		projectTitle => {
+			const found = projectStore.findProjectByExactname(projectTitle)
+			return found?.id || null
+		},
+	)
+
+	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) {
+		s = filter
+	}
+
+	const newParams = {
+		...params.value,
+		filter: s === '' ? filter : '',
+		s,
+	}
+
+	if (JSON.stringify(modelValue) === JSON.stringify(newParams)) {
+		return
+	}
+
 	emit('update:modelValue', newParams)
 }
 
-function prepareFilters() {
-	prepareDone()
-	prepareDate('due_date', 'dueDate')
-	prepareDate('start_date', 'startDate')
-	prepareDate('end_date', 'endDate')
-	prepareSingleValue('priority', 'priority', 'usePriority', true)
-	prepareSingleValue('percent_done', 'percentDone', 'usePercentDone', true)
-	prepareDate('reminders', 'reminders')
-	prepareRelatedObjectFilter('users', 'assignees')
-	prepareProjectsFilter()
-
-	prepareSingleValue('labels')
-
-	const newLabels = typeof filters.value.labels === 'string'
-		? filters.value.labels
-		: ''
-	const labelIds = newLabels.split(',').map(i => parseInt(i))
-
-	entities.labels = labelStore.getLabelsByIds(labelIds)
-}
-
-function removePropertyFromFilter(filterName) {
-	// Because of the way arrays work, we can only ever remove one element at once.
-	// To remove multiple filter elements of the same name this function has to be called multiple times.
-	for (const i in params.value.filter_by) {
-		if (params.value.filter_by[i] === filterName) {
-			params.value.filter_by.splice(i, 1)
-			params.value.filter_comparator.splice(i, 1)
-			params.value.filter_value.splice(i, 1)
-			break
-		}
-	}
-}
-
-function setDateFilter(filterName, {dateFrom, dateTo}) {
-	dateFrom = parseDateOrString(dateFrom, null)
-	dateTo = parseDateOrString(dateTo, null)
-
-	// Only filter if we have a date
-	if (dateFrom !== null && dateTo !== null) {
-
-		// Check if we already have values in params and only update them if we do
-		let foundStart = false
-		let foundEnd = false
-		params.value.filter_by.forEach((f, i) => {
-			if (f === filterName && params.value.filter_comparator[i] === 'greater_equals') {
-				foundStart = true
-				params.value.filter_value[i] = dateFrom
-			}
-			if (f === filterName && params.value.filter_comparator[i] === 'less_equals') {
-				foundEnd = true
-				params.value.filter_value[i] = dateTo
-			}
-		})
-
-		if (!foundStart) {
-			params.value.filter_by.push(filterName)
-			params.value.filter_comparator.push('greater_equals')
-			params.value.filter_value.push(dateFrom)
-		}
-		if (!foundEnd) {
-			params.value.filter_by.push(filterName)
-			params.value.filter_comparator.push('less_equals')
-			params.value.filter_value.push(dateTo)
-		}
-
-		filters.value[camelCase(filterName)] = {
-			// Passing the dates as string values avoids an endless loop between values changing 
-			// in the datepicker (bubbling up to here) and changing here and bubbling down to the 
-			// datepicker (because there's a new date instance every time this function gets called).
-			// See https://kolaente.dev/vikunja/frontend/issues/2384
-			dateFrom: dateIsValid(dateFrom) ? formatISO(dateFrom) : dateFrom,
-			dateTo: dateIsValid(dateTo) ? formatISO(dateTo) : dateTo,
-		}
-		change()
-		return
-	}
-
-	removePropertyFromFilter(filterName)
-	removePropertyFromFilter(filterName)
+function changeAndEmitButton() {
 	change()
+	emit('showResultsButtonClicked')
 }
 
-function prepareDate(filterName: string, variableName: 'dueDate' | 'startDate' | 'endDate' | 'reminders') {
-	if (typeof params.value.filter_by === 'undefined') {
-		return
-	}
-
-	let foundDateStart: boolean | string = false
-	let foundDateEnd: boolean | string = false
-	for (const i in params.value.filter_by) {
-		if (params.value.filter_by[i] === filterName && params.value.filter_comparator[i] === 'greater_equals') {
-			foundDateStart = i
-		}
-		if (params.value.filter_by[i] === filterName && params.value.filter_comparator[i] === 'less_equals') {
-			foundDateEnd = i
-		}
-
-		if (foundDateStart !== false && foundDateEnd !== false) {
-			break
-		}
-	}
-
-	if (foundDateStart !== false && foundDateEnd !== false) {
-		const startDate = new Date(params.value.filter_value[foundDateStart])
-		const endDate = new Date(params.value.filter_value[foundDateEnd])
-		filters.value[variableName] = {
-			dateFrom: !isNaN(startDate)
-				? `${startDate.getUTCFullYear()}-${startDate.getUTCMonth() + 1}-${startDate.getUTCDate()}`
-				: params.value.filter_value[foundDateStart],
-			dateTo: !isNaN(endDate)
-				? `${endDate.getUTCFullYear()}-${endDate.getUTCMonth() + 1}-${endDate.getUTCDate()}`
-				: params.value.filter_value[foundDateEnd],
-		}
-	}
-}
-
-function setSingleValueFilter(filterName, variableName, useVariableName = '', comparator = 'equals') {
-	if (useVariableName !== '' && !filters.value[useVariableName]) {
-		removePropertyFromFilter(filterName)
-		return
-	}
-
-	let found = false
-	params.value.filter_by.forEach((f, i) => {
-		if (f === filterName) {
-			found = true
-			params.value.filter_value[i] = filters.value[variableName]
-		}
-	})
-
-	if (!found) {
-		params.value.filter_by.push(filterName)
-		params.value.filter_comparator.push(comparator)
-		params.value.filter_value.push(filters.value[variableName])
-	}
-
-	change()
-}
-
-function prepareSingleValue(
-	/** The filter name in the api. */
-	filterName,
-	/** The name of the variable in filters ref. */
-	variableName = null,
-	/** The name of the variable of the "Use this filter" variable. Will only be set if the parameter is not null. */
-	useVariableName = null,
-	/** Toggles if the value should be parsed as a number. */
-	isNumber = false,
-) {
-	if (variableName === null) {
-		variableName = filterName
-	}
-
-	let found = false
-	for (const i in params.value.filter_by) {
-		if (params.value.filter_by[i] === filterName) {
-			found = i
-			break
-		}
-	}
-
-	if (found === false && useVariableName !== null) {
-		filters.value[useVariableName] = false
-		return
-	}
-
-	if (isNumber) {
-		filters.value[variableName] = Number(params.value.filter_value[found])
-	} else {
-		filters.value[variableName] = params.value.filter_value[found]
-	}
-
-	if (useVariableName !== null) {
-		filters.value[useVariableName] = true
-	}
-}
-
-function prepareDone() {
-	// Set filters.done based on params
-	if (typeof params.value.filter_by === 'undefined') {
-		return
-	}
-
-	filters.value.done = params.value.filter_by.some((f) => f === 'done') === false
-}
-
-async function prepareRelatedObjectFilter(kind: EntityType, filterName = null, servicePrefix: Omit<EntityType, 'labels'> | null = null) {
-	if (filterName === null) {
-		filterName = kind
-	}
-
-	if (servicePrefix === null) {
-		servicePrefix = kind
-	}
-
-	prepareSingleValue(filterName)
-	if (typeof filters.value[filterName] === 'undefined' || filters.value[filterName] === '') {
-		return
-	}
-
-	// Don't load things if we already have something loaded.
-	// This is not the most ideal solution because it prevents a re-population when filters are changed 
-	// from the outside. It is still fine because we're not changing them from the outside, other than 
-	// loading them initially.
-	if (entities[kind].length > 0) {
-		return
-	}
-
-	entities[kind] = await services[servicePrefix].getAll({}, {s: filters.value[filterName]})
-}
-
-async function prepareProjectsFilter() {
-	await prepareRelatedObjectFilter('projects', 'project_id')
-	entities.projects = entities.projects.filter(p => p.id > 0)
-}
-
-function setDoneFilter() {
-	if (filters.value.done) {
-		removePropertyFromFilter('done')
-	} else {
-		params.value.filter_by.push('done')
-		params.value.filter_comparator.push('equals')
-		params.value.filter_value.push('false')
-	}
-	change()
-}
-
-function setFilterConcat() {
-	if (filters.value.requireAllFilters) {
-		params.value.filter_concat = 'and'
-	} else {
-		params.value.filter_concat = 'or'
-	}
-	change()
-}
-
-function setPriority() {
-	setSingleValueFilter('priority', 'priority', 'usePriority')
-}
-
-function setPercentDoneFilter() {
-	setSingleValueFilter('percent_done', 'percentDone', 'usePercentDone')
-}
-
-async function changeMultiselectFilter(kind: EntityType, filterName) {
-	await nextTick()
-
-	if (entities[kind].length === 0) {
-		removePropertyFromFilter(filterName)
-		change()
-		return
-	}
-
-	const ids = entities[kind].map(u => kind === 'users' ? u.username : u.id)
-
-	filters.value[filterName] = ids.join(',')
-	setSingleValueFilter(filterName, filterName, '', 'in')
-}
-
-function changeLabelFilter() {
-	if (entities.labels.length === 0) {
-		removePropertyFromFilter('labels')
-		change()
-		return
-	}
-
-	const labelIDs = entities.labels.map(u => u.id)
-	filters.value.labels = labelIDs.join(',')
-	setSingleValueFilter('labels', 'labels', '', 'in')
+function clearFiltersAndEmit() {
+	filterQuery.value = ''
+	changeAndEmitButton()
 }
 </script>
-
-<style lang="scss" scoped>
-.single-value-control {
-	display: flex;
-	align-items: center;
-
-	.fancycheckbox {
-		margin-left: .5rem;
-	}
-}
-
-:deep(.datepicker-with-range-container .popup) {
-	right: 0;
-}
-</style>

frontend/src/components/project/project-settings-dropdown.vue

@@ -47,6 +47,12 @@
 			>
 				{{ $t('menu.edit') }}
 			</DropdownItem>
+			<DropdownItem
+				:to="{ name: 'project.settings.views', params: { projectId: project.id } }"
+				icon="eye"
+			>
+				{{ $t('menu.views') }}
+			</DropdownItem>
 			<DropdownItem
 				v-if="backgroundsEnabled"
 				:to="{ name: 'project.settings.background', params: { projectId: project.id } }"
@@ -67,8 +73,10 @@
 				{{ $t('menu.duplicate') }}
 			</DropdownItem>
 			<DropdownItem
+				v-tooltip="isDefaultProject ? $t('menu.cantArchiveIsDefault') : ''"
 				:to="{ name: 'project.settings.archive', params: { projectId: project.id } }"
 				icon="archive"
+				:disabled="isDefaultProject"
 			>
 				{{ $t('menu.archive') }}
 			</DropdownItem>
@@ -88,16 +96,17 @@
 				{{ $t('project.webhooks.title') }}
 			</DropdownItem>
 			<DropdownItem
-				v-if="level < 2"
 				:to="{ name: 'project.createFromParent', params: { parentProjectId: project.id } }"
 				icon="layer-group"
 			>
 				{{ $t('menu.createProject') }}
 			</DropdownItem>
 			<DropdownItem
+				v-tooltip="isDefaultProject ? $t('menu.cantDeleteIsDefault') : ''"
 				:to="{ name: 'project.settings.delete', params: { projectId: project.id } }"
 				icon="trash-alt"
 				class="has-text-danger"
+				:disabled="isDefaultProject"
 			>
 				{{ $t('menu.delete') }}
 			</DropdownItem>
@@ -106,7 +115,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref, computed, watchEffect, type PropType} from 'vue'
+import {computed, type PropType, ref, watchEffect} from 'vue'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import Dropdown from '@/components/misc/dropdown.vue'
@@ -118,15 +127,13 @@ import type {ISubscription} from '@/modelTypes/ISubscription'
 import {isSavedFilter} from '@/services/savedFilter'
 import {useConfigStore} from '@/stores/config'
 import {useProjectStore} from '@/stores/projects'
+import {useAuthStore} from '@/stores/auth'
 
 const props = defineProps({
 	project: {
 		type: Object as PropType<IProject>,
 		required: true,
 	},
-	level: {
-		type: Number,
-	},
 })
 
 const projectStore = useProjectStore()
@@ -146,4 +153,7 @@ function setSubscriptionInStore(sub: ISubscription) {
 	}
 	projectStore.setProject(updatedProject)
 }
+
+const authStore = useAuthStore()
+const isDefaultProject = computed(() => props.project?.id === authStore.settings.defaultProjectId)
 </script>

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

@@ -2,9 +2,9 @@
 	<ProjectWrapper
 		class="project-gantt"
 		:project-id="filters.projectId"
-		view-name="gantt"
+		:view-id
 	>
-		<template #header>
+		<template #default>
 			<card :has-content="false">
 				<div class="gantt-options">
 					<div class="field">
@@ -45,9 +45,7 @@
 					</Fancycheckbox>
 				</div>
 			</card>
-		</template>
 
-		<template #default>
 			<div class="gantt-chart-container">
 				<card
 					:has-content="false"
@@ -79,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 {getFlatpickrLanguage} from '@/helpers/flatpickrLanguage'
 
 import Foo from '@/components/misc/flatpickr/Flatpickr.vue'
 import ProjectWrapper from '@/components/project/ProjectWrapper.vue'
@@ -87,15 +85,19 @@ import Fancycheckbox from '@/components/input/fancycheckbox.vue'
 import TaskForm from '@/components/tasks/TaskForm.vue'
 
 import {createAsyncComponent} from '@/helpers/createAsyncComponent'
-import {useGanttFilters} from './helpers/useGanttFilters'
+import {useGanttFilters} from '../../../views/project/helpers/useGanttFilters'
 import {RIGHTS} from '@/constants/rights'
 
 import type {DateISO} from '@/types/DateISO'
 import type {ITask} from '@/modelTypes/ITask'
+import type {IProjectView} from '@/modelTypes/IProjectView'
 
 type Options = Flatpickr.Options.Options
 
-const props = defineProps<{route: RouteLocationNormalized}>()
+const props = defineProps<{
+	route: RouteLocationNormalized
+	viewId: IProjectView['id']
+}>()
 
 const GanttChart = createAsyncComponent(() => import('@/components/tasks/GanttChart.vue'))
 
@@ -111,7 +113,7 @@ const {
 	isLoading,
 	addTask,
 	updateTask,
-} = useGanttFilters(route)
+} = useGanttFilters(route, props.viewId)
 
 const DEFAULT_DATE_RANGE_DAYS = 7
 

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

@@ -2,16 +2,14 @@
 	<ProjectWrapper
 		class="project-kanban"
 		:project-id="projectId"
-		view-name="kanban"
+		:view-id
 	>
 		<template #header>
-			<div
-				v-if="!isSavedFilter(project)"
-				class="filter-container"
-			>
-				<div class="items">
-					<FilterPopup v-model="params" />
-				</div>
+			<div class="filter-container">
+				<FilterPopup
+					v-if="!isSavedFilter(project)"
+					v-model="params"
+				/>
 			</div>
 		</template>
 
@@ -43,7 +41,7 @@
 									@click="() => unCollapseBucket(bucket)"
 								>
 									<span
-										v-if="project?.doneBucketId === bucket.id"
+										v-if="view?.doneBucketId === bucket.id"
 										v-tooltip="$t('project.kanban.doneBucketHint')"
 										class="icon is-small has-text-success mr-2"
 									>
@@ -82,14 +80,15 @@
 											>
 												<div class="control">
 													<input
+														ref="bucketLimitInputRef"
 														v-focus.always
 														:value="bucket.limit"
 														class="input"
 														type="number"
 														min="0"
 														@keyup.esc="() => showSetLimitInput = false"
-														@keyup.enter="() => showSetLimitInput = false"
-														@input="(event) => setBucketLimit(bucket.id, parseInt((event.target as HTMLInputElement).value))"
+														@keyup.enter="() => {setBucketLimit(bucket.id, true); showSetLimitInput = false}"
+														@input="setBucketLimit(bucket.id)"
 													>
 												</div>
 												<div class="control">
@@ -98,6 +97,7 @@
 														:disabled="bucket.limit < 0"
 														:icon="['far', 'save']"
 														:shadow="false"
+														@click="setBucketLimit(bucket.id, true)"
 													/>
 												</div>
 											</div>
@@ -109,7 +109,7 @@
 										</DropdownItem>
 										<DropdownItem
 											v-tooltip="$t('project.kanban.doneBucketHintExtended')"
-											:icon-class="{'has-text-success': bucket.id === project?.doneBucketId}"
+											:icon-class="{'has-text-success': bucket.id === view?.doneBucketId}"
 											icon="check-double"
 											@click.stop="toggleDoneBucket(bucket)"
 										>
@@ -117,7 +117,7 @@
 										</DropdownItem>
 										<DropdownItem
 											v-tooltip="$t('project.kanban.defaultBucketHint')"
-											:icon-class="{'has-text-primary': bucket.id === project.defaultBucketId}"
+											:icon-class="{'has-text-primary': bucket.id === view?.defaultBucketId}"
 											icon="th"
 											@click.stop="toggleDefaultBucket(bucket)"
 										>
@@ -195,7 +195,9 @@
 												variant="secondary"
 												@click="toggleShowNewTaskInput(bucket.id)"
 											>
-												{{ bucket.tasks.length === 0 ? $t('project.kanban.addTask') : $t('project.kanban.addAnotherTask') }}
+												{{
+													bucket.tasks.length === 0 ? $t('project.kanban.addTask') : $t('project.kanban.addAnotherTask')
+												}}
 											</x-button>
 										</div>
 									</template>
@@ -275,7 +277,6 @@ import {RIGHTS as Rights} from '@/constants/rights'
 import BucketModel from '@/models/bucket'
 
 import type {IBucket} from '@/modelTypes/IBucket'
-import type {IProject} from '@/modelTypes/IProject'
 import type {ITask} from '@/modelTypes/ITask'
 
 import {useBaseStore} from '@/stores/base'
@@ -288,17 +289,30 @@ import KanbanCard from '@/components/tasks/partials/kanban-card.vue'
 import Dropdown from '@/components/misc/dropdown.vue'
 import DropdownItem from '@/components/misc/dropdown-item.vue'
 
-import {getCollapsedBucketState, saveCollapsedBucketState, type CollapsedBuckets} from '@/helpers/saveCollapsedBucketState'
+import {
+	type CollapsedBuckets,
+	getCollapsedBucketState,
+	saveCollapsedBucketState,
+} from '@/helpers/saveCollapsedBucketState'
 import {calculateItemPosition} from '@/helpers/calculateItemPosition'
 
 import {isSavedFilter} from '@/services/savedFilter'
 import {success} from '@/message'
 import {useProjectStore} from '@/stores/projects'
+import type {TaskFilterParams} from '@/services/taskCollection'
+import type {IProjectView} from '@/modelTypes/IProjectView'
+import TaskPositionService from '@/services/taskPosition'
+import TaskPositionModel from '@/models/taskPosition'
+import {i18n} from '@/i18n'
+import ProjectViewService from '@/services/projectViews'
+import ProjectViewModel from '@/models/projectView'
 
 const {
-	projectId = undefined,
+	projectId,
+	viewId,
 } = defineProps<{
 	projectId: number,
+	viewId: IProjectView['id'],
 }>()
 
 const DRAG_OPTIONS = {
@@ -318,8 +332,10 @@ const baseStore = useBaseStore()
 const kanbanStore = useKanbanStore()
 const taskStore = useTaskStore()
 const projectStore = useProjectStore()
+const taskPositionService = ref(new TaskPositionService())
 
-const taskContainerRefs = ref<{[id: IBucket['id']]: HTMLElement}>({})
+const taskContainerRefs = ref<{ [id: IBucket['id']]: HTMLElement }>({})
+const bucketLimitInputRef = ref<HTMLInputElement | null>(null)
 
 const drag = ref(false)
 const dragBucket = ref(false)
@@ -330,31 +346,32 @@ const bucketToDelete = ref(0)
 const bucketTitleEditable = ref(false)
 
 const newTaskText = ref('')
-const showNewTaskInput = ref<{[id: IBucket['id']]: boolean}>({})
+const showNewTaskInput = ref<{ [id: IBucket['id']]: boolean }>({})
 
 const newBucketTitle = ref('')
 const showNewBucketInput = ref(false)
-const newTaskError = ref<{[id: IBucket['id']]: boolean}>({})
+const newTaskError = ref<{ [id: IBucket['id']]: boolean }>({})
 const newTaskInputFocused = ref(false)
 
 const showSetLimitInput = ref(false)
 const collapsedBuckets = ref<CollapsedBuckets>({})
 
 // We're using this to show the loading animation only at the task when updating it
-const taskUpdating = ref<{[id: ITask['id']]: boolean}>({})
+const taskUpdating = ref<{ [id: ITask['id']]: boolean }>({})
 const oneTaskUpdating = ref(false)
 
-const params = ref({
-	filter_by: [],
-	filter_value: [],
-	filter_comparator: [],
-	filter_concat: 'and',
+const params = ref<TaskFilterParams>({
+	sort_by: [],
+	order_by: [],
+	filter: '',
+	filter_include_nulls: false,
+	s: '',
 })
 
 const getTaskDraggableTaskComponentData = computed(() => (bucket: IBucket) => {
 	return {
 		ref: (el: HTMLElement) => setTaskContainerRef(bucket.id, el),
-		onScroll: (event: Event) => handleTaskContainerScroll(bucket.id, bucket.projectId, event.target as HTMLElement),
+		onScroll: (event: Event) => handleTaskContainerScroll(bucket.id, event.target as HTMLElement),
 		type: 'transition-group',
 		name: !drag.value ? 'move-card' : null,
 		class: [
@@ -373,24 +390,27 @@ const bucketDraggableComponentData = computed(() => ({
 	],
 }))
 const canWrite = computed(() => baseStore.currentProject?.maxRight > Rights.READ)
-const project = computed(() => projectId ? projectStore.projects[projectId]: null)
+const project = computed(() => projectId ? projectStore.projects[projectId] : null)
 
 const buckets = computed(() => kanbanStore.buckets)
 const loading = computed(() => kanbanStore.isLoading)
 
-const taskLoading = computed(() => taskStore.isLoading)
+const view = computed<IProjectView | null>(() => project.value?.views.find(v => v.id === viewId) || null)
+
+const taskLoading = computed(() => taskStore.isLoading || taskPositionService.value.loading)
 
 watch(
 	() => ({
 		params: params.value,
 		projectId,
+		viewId,
 	}),
 	({params}) => {
 		if (projectId === undefined || Number(projectId) === 0) {
 			return
 		}
 		collapsedBuckets.value = getCollapsedBucketState(projectId)
-		kanbanStore.loadBucketsForProject({projectId, params})
+		kanbanStore.loadBucketsForProject(projectId, viewId, params)
 	},
 	{
 		immediate: true,
@@ -403,7 +423,7 @@ function setTaskContainerRef(id: IBucket['id'], el: HTMLElement) {
 	taskContainerRefs.value[id] = el
 }
 
-function handleTaskContainerScroll(id: IBucket['id'], projectId: IProject['id'], el: HTMLElement) {
+function handleTaskContainerScroll(id: IBucket['id'], el: HTMLElement) {
 	if (!el) {
 		return
 	}
@@ -413,11 +433,12 @@ function handleTaskContainerScroll(id: IBucket['id'], projectId: IProject['id'],
 		return
 	}
 
-	kanbanStore.loadNextTasksForBucket({
-		projectId: projectId,
-		params: params.value,
-		bucketId: id,
-	})
+	kanbanStore.loadNextTasksForBucket(
+		projectId,
+		viewId,
+		params.value,
+		id,
+	)
 }
 
 function updateTasks(bucketId: IBucket['id'], tasks: IBucket['tasks']) {
@@ -464,7 +485,7 @@ async function updateTaskPosition(e) {
 
 	const newTask = klona(task) // cloning the task to avoid pinia store manipulation
 	newTask.bucketId = newBucket.id
-	newTask.kanbanPosition = calculateItemPosition(
+	const position = calculateItemPosition(
 		taskBefore !== null ? taskBefore.kanbanPosition : null,
 		taskAfter !== null ? taskAfter.kanbanPosition : null,
 	)
@@ -474,6 +495,8 @@ async function updateTaskPosition(e) {
 	) {
 		newTask.done = project.value?.doneBucketId === newBucket.id
 	}
+	
+	let bucketHasChanged = false
 	if (
 		oldBucket !== undefined && // This shouldn't actually be `undefined`, but let's play it safe.
 		newBucket.id !== oldBucket.id
@@ -486,13 +509,23 @@ async function updateTaskPosition(e) {
 			...newBucket,
 			count: newBucket.count + 1,
 		})
+		bucketHasChanged = true
 	}
 
 	try {
-		await taskStore.update(newTask)
+		const newPosition = new TaskPositionModel({
+			position,
+			projectViewId: viewId,
+			taskId: newTask.id,
+		})
+		await taskPositionService.value.update(newPosition)
+		
+		if(bucketHasChanged) {
+			await taskStore.update(newTask)
+		}
 
 		// Make sure the first and second task don't both get position 0 assigned
-		if(newTaskIndex === 0 && taskAfter !== null && taskAfter.kanbanPosition === 0) {
+		if (newTaskIndex === 0 && taskAfter !== null && taskAfter.kanbanPosition === 0) {
 			const taskAfterAfter = newBucket.tasks[newTaskIndex + 2] ?? null
 			const newTaskAfter = klona(taskAfter) // cloning the task to avoid pinia store manipulation
 			newTaskAfter.bucketId = newBucket.id
@@ -547,9 +580,9 @@ async function createNewBucket() {
 	await kanbanStore.createBucket(new BucketModel({
 		title: newBucketTitle.value,
 		projectId: project.value.id,
+		projectViewId: viewId,
 	}))
 	newBucketTitle.value = ''
-	showNewBucketInput.value = false
 }
 
 function deleteBucketModal(bucketId: IBucket['id']) {
@@ -567,6 +600,7 @@ async function deleteBucket() {
 			bucket: new BucketModel({
 				id: bucketToDelete.value,
 				projectId: project.value.id,
+				projectViewId: viewId,
 			}),
 			params: params.value,
 		})
@@ -585,10 +619,19 @@ async function focusBucketTitle(e: Event) {
 }
 
 async function saveBucketTitle(bucketId: IBucket['id'], bucketTitle: string) {
-	await kanbanStore.updateBucketTitle({
+	
+	const bucket = kanbanStore.getBucketById(bucketId)
+	if (bucket?.title === bucketTitle) {
+		bucketTitleEditable.value = false
+		return
+	}
+	
+	await kanbanStore.updateBucket({
 		id: bucketId,
 		title: bucketTitle,
+		projectId,
 	})
+	success({message: i18n.global.t('project.kanban.bucketTitleSavedSuccess')})
 	bucketTitleEditable.value = false
 }
 
@@ -598,7 +641,7 @@ function updateBuckets(value: IBucket[]) {
 }
 
 // TODO: fix type
-function updateBucketPosition(e: {newIndex: number}) {
+function updateBucketPosition(e: { newIndex: number }) {
 	// (2) bucket positon is changed
 	dragBucket.value = false
 
@@ -608,6 +651,7 @@ function updateBucketPosition(e: {newIndex: number}) {
 
 	kanbanStore.updateBucket({
 		id: bucket.id,
+		projectId,
 		position: calculateItemPosition(
 			bucketBefore !== null ? bucketBefore.position : null,
 			bucketAfter !== null ? bucketAfter.position : null,
@@ -615,18 +659,35 @@ function updateBucketPosition(e: {newIndex: number}) {
 	})
 }
 
-async function setBucketLimit(bucketId: IBucket['id'], limit: number) {
+async function saveBucketLimit(bucketId: IBucket['id'], limit: number) {
 	if (limit < 0) {
 		return
 	}
 
 	await kanbanStore.updateBucket({
 		...kanbanStore.getBucketById(bucketId),
+		projectId,
 		limit,
 	})
 	success({message: t('project.kanban.bucketLimitSavedSuccess')})
 }
 
+const setBucketLimitCancel = ref<number | null>(null)
+
+async function setBucketLimit(bucketId: IBucket['id'], now: boolean = false) {
+	const limit = parseInt(bucketLimitInputRef.value?.value || '')
+
+	if (setBucketLimitCancel.value !== null) {
+		clearTimeout(setBucketLimitCancel.value)
+	}
+
+	if (now) {
+		return saveBucketLimit(bucketId, limit)
+	}
+
+	setBucketLimitCancel.value = setTimeout(saveBucketLimit, 2500, bucketId, limit)
+}
+
 function shouldAcceptDrop(bucket: IBucket) {
 	return (
 		// When dragging from a bucket who has its limit reached, dragging should still be possible
@@ -644,26 +705,46 @@ function dragstart(bucket: IBucket) {
 }
 
 async function toggleDefaultBucket(bucket: IBucket) {
-	const defaultBucketId = project.value.defaultBucketId === bucket.id
+	const defaultBucketId = view.value?.defaultBucketId === bucket.id
 		? 0
 		: bucket.id
 
-	await projectStore.updateProject({
-		...project.value,
+	const projectViewService = new ProjectViewService()
+	const updatedView = await projectViewService.update(new ProjectViewModel({
+		...view.value,
 		defaultBucketId,
-	})
+	}))
+
+	const views = project.value.views.map(v => v.id === view.value?.id ? updatedView : v)
+	const updatedProject = {
+		...project.value,
+		views,
+	}
+
+	projectStore.setProject(updatedProject)
+
 	success({message: t('project.kanban.defaultBucketSavedSuccess')})
 }
 
 async function toggleDoneBucket(bucket: IBucket) {
-	const doneBucketId = project.value?.doneBucketId === bucket.id
+	const doneBucketId = view.value?.doneBucketId === bucket.id
 		? 0
 		: bucket.id
-
-	await projectStore.updateProject({
-		...project.value,
+	
+	const projectViewService = new ProjectViewService()
+	const updatedView = await projectViewService.update(new ProjectViewModel({
+		...view.value,
 		doneBucketId,
-	})
+	}))
+	
+	const views = project.value.views.map(v => v.id === view.value?.id ? updatedView : v)
+	const updatedProject = {
+		...project.value,
+		views,
+	}
+	
+	projectStore.setProject(updatedProject)
+	
 	success({message: t('project.kanban.doneBucketSavedSuccess')})
 }
 
@@ -692,11 +773,6 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1rem - 1.5rem - 11px';
 $crazy-height-calculation-tasks: '#{$crazy-height-calculation} - 1rem - 2.5rem - 2rem - #{$button-height} - 1rem';
 $filter-container-height: '1rem - #{$switch-view-height}';
 
-// FIXME:
-.app-content.project\.kanban, .app-content.task\.detail {
-	padding-bottom: 0 !important;
-}
-
 .kanban {
 	overflow-x: auto;
 	overflow-y: hidden;
@@ -704,6 +780,10 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 	margin: 0 -1.5rem;
 	padding: 0 1.5rem;
 
+	&:focus, .bucket .tasks:focus {
+		box-shadow: none;
+	}
+
 	@media screen and (max-width: $tablet) {
 		height: calc(#{$crazy-height-calculation} - #{$filter-container-height});
 		scroll-snap-type: x mandatory;
@@ -719,6 +799,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 		* {
 			opacity: 0;
 		}
+
 		&::after {
 			content: '';
 			position: absolute;
@@ -760,6 +841,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 			&:first-of-type {
 				padding-top: .5rem;
 			}
+
 			&:last-of-type {
 				padding-bottom: .5rem;
 			}

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

@@ -2,55 +2,15 @@
 	<ProjectWrapper
 		class="project-list"
 		:project-id="projectId"
-		view-name="project"
+		:view-id
 	>
 		<template #header>
-			<div
-				v-if="!isSavedFilter(project)"
-				class="filter-container"
-			>
-				<div class="items">
-					<div class="search">
-						<div
-							:class="{ hidden: !showTaskSearch }"
-							class="field has-addons"
-						>
-							<div class="control has-icons-left has-icons-right">
-								<input
-									v-model="searchTerm"
-									v-focus
-									class="input"
-									:placeholder="$t('misc.search')"
-									type="text"
-									@blur="hideSearchBar()"
-									@keyup.enter="searchTasks"
-								>
-								<span class="icon is-left">
-									<icon icon="search" />
-								</span>
-							</div>
-							<div class="control">
-								<x-button
-									:loading="loading"
-									:shadow="false"
-									@click="searchTasks"
-								>
-									{{ $t('misc.search') }}
-								</x-button>
-							</div>
-						</div>
-						<x-button
-							v-if="!showTaskSearch"
-							icon="search"
-							variant="secondary"
-							@click="showTaskSearch = !showTaskSearch"
-						/>
-					</div>
-					<FilterPopup
-						v-model="params"
-						@update:modelValue="prepareFiltersAndLoadTasks()"
-					/>
-				</div>
+			<div class="filter-container">
+				<FilterPopup
+					v-if="!isSavedFilter(project)"
+					v-model="params"
+					@update:modelValue="prepareFiltersAndLoadTasks()"
+				/>
 			</div>
 		</template>
 
@@ -120,7 +80,7 @@
 						</template>
 					</draggable>
 
-					<Pagination 
+					<Pagination
 						:total-pages="totalPages"
 						:current-page="currentPage"
 					/>
@@ -131,13 +91,12 @@
 </template>
 
 <script lang="ts">
-export default { name: 'List' }
+export default {name: 'List'}
 </script>
 
 <script setup lang="ts">
 import {ref, computed, nextTick, onMounted, watch} from 'vue'
 import draggable from 'zhyswan-vuedraggable'
-import {useRoute, useRouter} from 'vue-router'
 
 import ProjectWrapper from '@/components/project/ProjectWrapper.vue'
 import ButtonLink from '@/components/misc/ButtonLink.vue'
@@ -155,18 +114,21 @@ import type {ITask} from '@/modelTypes/ITask'
 import {isSavedFilter} from '@/services/savedFilter'
 
 import {useBaseStore} from '@/stores/base'
-import {useTaskStore} from '@/stores/tasks'
 
 import type {IProject} from '@/modelTypes/IProject'
+import type {IProjectView} from '@/modelTypes/IProjectView'
+import TaskPositionService from '@/services/taskPosition'
+import TaskPositionModel from '@/models/taskPosition'
 
 const {
 	projectId,
+	viewId,
 } = defineProps<{
 	projectId: IProject['id'],
+	viewId: IProjectView['id'],
 }>()
 
 const ctaVisible = ref(false)
-const showTaskSearch = ref(false)
 
 const drag = ref(false)
 const DRAG_OPTIONS = {
@@ -180,10 +142,11 @@ const {
 	totalPages,
 	currentPage,
 	loadTasks,
-	searchTerm,
 	params,
 	sortByParam,
-} = useTaskList(() => projectId, {position: 'asc' })
+} = useTaskList(() => projectId, () => viewId, {position: 'asc'})
+
+const taskPositionService = ref(new TaskPositionService())
 
 const tasks = ref<ITask[]>([])
 watch(
@@ -203,7 +166,7 @@ watch(
 
 			// If the task is a subtask, make sure the parent task is available in the current view as well
 			for (const pt of t.relatedTasks.parenttask) {
-				if(typeof tasksById[pt.id] === 'undefined') {
+				if (typeof tasksById[pt.id] === 'undefined') {
 					return true
 				}
 			}
@@ -225,7 +188,6 @@ const firstNewPosition = computed(() => {
 	return calculateItemPosition(null, tasks.value[0].position)
 })
 
-const taskStore = useTaskStore()
 const baseStore = useBaseStore()
 const project = computed(() => baseStore.currentProject)
 
@@ -238,43 +200,17 @@ onMounted(async () => {
 	ctaVisible.value = true
 })
 
-const route = useRoute()
-const router = useRouter()
-
-function searchTasks() {
-	// Only search if the search term changed
-	if (route.query as unknown as string === searchTerm.value) {
-		return
-	}
-
-	router.push({
-		name: 'project.list',
-		query: {search: searchTerm.value},
-	})
-}
-
-function hideSearchBar() {
-	// This is a workaround.
-	// When clicking on the search button, @blur from the input is fired. If we
-	// would then directly hide the whole search bar directly, no click event
-	// from the button gets fired. To prevent this, we wait 200ms until we hide
-	// everything so the button has a chance of firing the search event.
-	setTimeout(() => {
-		showTaskSearch.value = false
-	}, 200)
-}
-
 const addTaskRef = ref<typeof AddTask | null>(null)
+
 function focusNewTaskInput() {
 	addTaskRef.value?.focusTaskInput()
 }
 
 function updateTaskList(task: ITask) {
-	if (isAlphabeticalSorting.value ) {
+	if (isAlphabeticalSorting.value) {
 		// reload tasks with current filter and sorting
 		loadTasks()
-	}
-	else {
+	} else {
 		allTasks.value = [
 			task,
 			...allTasks.value,
@@ -300,18 +236,22 @@ async function saveTaskPosition(e) {
 	const taskBefore = tasks.value[e.newIndex - 1] ?? null
 	const taskAfter = tasks.value[e.newIndex + 1] ?? null
 
-	const newTask = {
-		...task,
-		position: calculateItemPosition(taskBefore !== null ? taskBefore.position : null, taskAfter !== null ? taskAfter.position : null),
-	}
+	const position = calculateItemPosition(taskBefore !== null ? taskBefore.position : null, taskAfter !== null ? taskAfter.position : null)
 
-	const updatedTask = await taskStore.update(newTask)
-	tasks.value[e.newIndex] = updatedTask
+	await taskPositionService.value.update(new TaskPositionModel({
+		position,
+		projectViewId: viewId,
+		taskId: task.id,
+	}))
+	tasks.value[e.newIndex] = {
+		...task,
+		position,
+	}
 }
 
 function prepareFiltersAndLoadTasks() {
-	if(isAlphabeticalSorting.value) {
-		sortByParam.value = {} 
+	if (isAlphabeticalSorting.value) {
+		sortByParam.value = {}
 		sortByParam.value[ALPHABETICAL_SORT] = 'asc'
 	}
 
@@ -328,7 +268,7 @@ function prepareFiltersAndLoadTasks() {
 	border-radius: $radius;
 	background: var(--grey-100);
 	border: 2px dashed var(--grey-300);
-	
+
 	* {
 		opacity: 0;
 	}
@@ -339,8 +279,8 @@ function prepareFiltersAndLoadTasks() {
 }
 
 .link-share-view .card {
-  border: none;
-  box-shadow: none;
+	border: none;
+	box-shadow: none;
 }
 
 .control.has-icons-left .icon,

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

@@ -2,70 +2,72 @@
 	<ProjectWrapper
 		class="project-table"
 		:project-id="projectId"
-		view-name="table"
+		:view-id
 	>
 		<template #header>
 			<div class="filter-container">
-				<div class="items">
-					<Popup>
-						<template #trigger="{toggle}">
-							<x-button
-								icon="th"
-								variant="secondary"
-								@click.prevent.stop="toggle()"
-							>
-								{{ $t('project.table.columns') }}
-							</x-button>
-						</template>
-						<template #content="{isOpen}">
-							<card
-								class="columns-filter"
-								:class="{'is-open': isOpen}"
-							>
-								<Fancycheckbox v-model="activeColumns.index">
-									#
-								</Fancycheckbox>
-								<Fancycheckbox v-model="activeColumns.done">
-									{{ $t('task.attributes.done') }}
-								</Fancycheckbox>
-								<Fancycheckbox v-model="activeColumns.title">
-									{{ $t('task.attributes.title') }}
-								</Fancycheckbox>
-								<Fancycheckbox v-model="activeColumns.priority">
-									{{ $t('task.attributes.priority') }}
-								</Fancycheckbox>
-								<Fancycheckbox v-model="activeColumns.labels">
-									{{ $t('task.attributes.labels') }}
-								</Fancycheckbox>
-								<Fancycheckbox v-model="activeColumns.assignees">
-									{{ $t('task.attributes.assignees') }}
-								</Fancycheckbox>
-								<Fancycheckbox v-model="activeColumns.dueDate">
-									{{ $t('task.attributes.dueDate') }}
-								</Fancycheckbox>
-								<Fancycheckbox v-model="activeColumns.startDate">
-									{{ $t('task.attributes.startDate') }}
-								</Fancycheckbox>
-								<Fancycheckbox v-model="activeColumns.endDate">
-									{{ $t('task.attributes.endDate') }}
-								</Fancycheckbox>
-								<Fancycheckbox v-model="activeColumns.percentDone">
-									{{ $t('task.attributes.percentDone') }}
-								</Fancycheckbox>
-								<Fancycheckbox v-model="activeColumns.created">
-									{{ $t('task.attributes.created') }}
-								</Fancycheckbox>
-								<Fancycheckbox v-model="activeColumns.updated">
-									{{ $t('task.attributes.updated') }}
-								</Fancycheckbox>
-								<Fancycheckbox v-model="activeColumns.createdBy">
-									{{ $t('task.attributes.createdBy') }}
-								</Fancycheckbox>
-							</card>
-						</template>
-					</Popup>
-					<FilterPopup v-model="params" />
-				</div>
+				<Popup>
+					<template #trigger="{toggle}">
+						<x-button
+							icon="th"
+							variant="secondary"
+							class="mr-2"
+							@click.prevent.stop="toggle()"
+						>
+							{{ $t('project.table.columns') }}
+						</x-button>
+					</template>
+					<template #content="{isOpen}">
+						<card
+							class="columns-filter"
+							:class="{'is-open': isOpen}"
+						>
+							<Fancycheckbox v-model="activeColumns.index">
+								#
+							</Fancycheckbox>
+							<Fancycheckbox v-model="activeColumns.done">
+								{{ $t('task.attributes.done') }}
+							</Fancycheckbox>
+							<Fancycheckbox v-model="activeColumns.title">
+								{{ $t('task.attributes.title') }}
+							</Fancycheckbox>
+							<Fancycheckbox v-model="activeColumns.priority">
+								{{ $t('task.attributes.priority') }}
+							</Fancycheckbox>
+							<Fancycheckbox v-model="activeColumns.labels">
+								{{ $t('task.attributes.labels') }}
+							</Fancycheckbox>
+							<Fancycheckbox v-model="activeColumns.assignees">
+								{{ $t('task.attributes.assignees') }}
+							</Fancycheckbox>
+							<Fancycheckbox v-model="activeColumns.dueDate">
+								{{ $t('task.attributes.dueDate') }}
+							</Fancycheckbox>
+							<Fancycheckbox v-model="activeColumns.startDate">
+								{{ $t('task.attributes.startDate') }}
+							</Fancycheckbox>
+							<Fancycheckbox v-model="activeColumns.endDate">
+								{{ $t('task.attributes.endDate') }}
+							</Fancycheckbox>
+							<Fancycheckbox v-model="activeColumns.percentDone">
+								{{ $t('task.attributes.percentDone') }}
+							</Fancycheckbox>
+							<Fancycheckbox v-model="activeColumns.doneAt">
+								{{ $t('task.attributes.doneAt') }}
+							</Fancycheckbox>
+							<Fancycheckbox v-model="activeColumns.created">
+								{{ $t('task.attributes.created') }}
+							</Fancycheckbox>
+							<Fancycheckbox v-model="activeColumns.updated">
+								{{ $t('task.attributes.updated') }}
+							</Fancycheckbox>
+							<Fancycheckbox v-model="activeColumns.createdBy">
+								{{ $t('task.attributes.createdBy') }}
+							</Fancycheckbox>
+						</card>
+					</template>
+				</Popup>
+				<FilterPopup v-model="params" />
 			</div>
 		</template>
 
@@ -144,6 +146,13 @@
 											@click="sort('percent_done')"
 										/>
 									</th>
+									<th v-if="activeColumns.doneAt">
+										{{ $t('task.attributes.doneAt') }}
+										<Sort
+											:order="sortBy.done_at"
+											@click="sort('done_at')"
+										/>
+									</th>
 									<th v-if="activeColumns.created">
 										{{ $t('task.attributes.created') }}
 										<Sort
@@ -223,6 +232,10 @@
 									<td v-if="activeColumns.percentDone">
 										{{ t.percentDone * 100 }}%
 									</td>
+									<DateTableCell
+										v-if="activeColumns.doneAt"
+										:date="t.doneAt"
+									/>
 									<DateTableCell
 										v-if="activeColumns.created"
 										:date="t.created"
@@ -254,7 +267,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed, type Ref} from 'vue'
+import {computed, type Ref, watch} from 'vue'
 
 import {useStorage} from '@vueuse/core'
 
@@ -270,17 +283,19 @@ import FilterPopup from '@/components/project/partials/filter-popup.vue'
 import Pagination from '@/components/misc/pagination.vue'
 import Popup from '@/components/misc/popup.vue'
 
-import {useTaskList} from '@/composables/useTaskList'
-
 import type {SortBy} from '@/composables/useTaskList'
+import {useTaskList} from '@/composables/useTaskList'
 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'
 
 const {
 	projectId,
+	viewId,
 } = defineProps<{
 	projectId: IProject['id'],
+	viewId: IProjectView['id'],
 }>()
 
 const ACTIVE_COLUMNS_DEFAULT = {
@@ -297,6 +312,7 @@ const ACTIVE_COLUMNS_DEFAULT = {
 	created: false,
 	updated: false,
 	createdBy: false,
+	doneAt: false,
 }
 
 const SORT_BY_DEFAULT: SortBy = {
@@ -306,7 +322,7 @@ const SORT_BY_DEFAULT: SortBy = {
 const activeColumns = useStorage('tableViewColumns', {...ACTIVE_COLUMNS_DEFAULT})
 const sortBy = useStorage<SortBy>('tableViewSortBy', {...SORT_BY_DEFAULT})
 
-const taskList = useTaskList(() => projectId, sortBy.value)
+const taskList = useTaskList(() => projectId, () => viewId, sortBy.value)
 
 const {
 	loading,
@@ -318,11 +334,15 @@ const {
 const tasks: Ref<ITask[]> = taskList.tasks
 
 Object.assign(params.value, {
-	filter_by: [],
-	filter_value: [],
-	filter_comparator: [],
+	filter: '',
 })
 
+watch(
+	() => activeColumns.value,
+	() => setActiveColumnsSortParam(),
+	{deep: true},
+)
+
 // FIXME: by doing this we can have multiple sort orders
 function sort(property: keyof SortBy) {
 	const order = sortBy.value[property]
@@ -333,7 +353,16 @@ function sort(property: keyof SortBy) {
 	} else {
 		delete sortBy.value[property]
 	}
-	sortByParam.value = sortBy.value
+	setActiveColumnsSortParam()
+}
+
+function setActiveColumnsSortParam() {
+	sortByParam.value = Object.keys(sortBy.value)
+		.filter(prop => activeColumns.value[prop])
+		.reduce((obj, key) => {
+			obj[key] = sortBy.value[key]
+			return obj
+		}, {})
 }
 
 // TODO: re-enable opening task detail in modal
@@ -368,6 +397,11 @@ const taskDetailRoutes = computed(() => Object.fromEntries(
 .columns-filter {
 	margin: 0;
 
+	:deep(.card-content .content) {
+		display: flex;
+		flex-direction: column;
+	}
+
 	&.is-open {
 		margin: 2rem 0 1rem;
 	}
@@ -377,4 +411,8 @@ const taskDetailRoutes = computed(() => Object.fromEntries(
 	border: none;
 	box-shadow: none;
 }
+
+.filter-container :deep(.popup) {
+	top: 7rem;
+}
 </style>

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

@@ -0,0 +1,233 @@
+<script setup lang="ts">
+import type {IProjectView} from '@/modelTypes/IProjectView'
+import XButton from '@/components/input/button.vue'
+import FilterInput from '@/components/project/partials/FilterInput.vue'
+import {ref, watch} from 'vue'
+import {transformFilterStringForApi, transformFilterStringFromApi} from '@/helpers/filters'
+import {useLabelStore} from '@/stores/labels'
+import {useProjectStore} from '@/stores/projects'
+
+const {
+	modelValue,
+} = defineProps<{
+	modelValue: IProjectView,
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const view = ref<IProjectView>()
+
+const labelStore = useLabelStore()
+const projectStore = useProjectStore()
+
+watch(
+	() => modelValue,
+	newValue => {
+		const transformed = {
+			...newValue,
+			filter: transformFilterStringFromApi(
+				newValue.filter,
+				labelId => labelStore.getLabelById(labelId)?.title,
+				projectId => projectStore.projects[projectId]?.title || null,
+			),
+		}
+
+		if (JSON.stringify(view.value) !== JSON.stringify(transformed)) {
+			view.value = transformed
+		}
+	},
+	{immediate: true, deep: true},
+)
+
+watch(
+	() => view.value,
+	newView => {
+		emit('update:modelValue', {
+			...newView,
+			filter: transformFilterStringForApi(
+				newView.filter,
+				labelTitle => labelStore.filterLabelsByQuery([], labelTitle)[0]?.id || null,
+				projectTitle => {
+					const found = projectStore.findProjectByExactname(projectTitle)
+					return found?.id || null
+				},
+			),
+		})
+	},
+	{deep: true},
+)
+
+const titleValid = ref(true)
+
+function validateTitle() {
+	titleValid.value = view.value?.title !== ''
+}
+</script>
+
+<template>
+	<form>
+		<div class="field">
+			<label
+				class="label"
+				for="title"
+			>
+				{{ $t('project.views.title') }}
+			</label>
+			<div class="control">
+				<input
+					id="title"
+					v-model="view.title"
+					v-focus
+					class="input"
+					:placeholder="$t('project.share.links.namePlaceholder')"
+					@blur="validateTitle"
+				>
+			</div>
+			<p
+				v-if="!titleValid"
+				class="help is-danger"
+			>
+				{{ $t('project.views.titleRequired') }}
+			</p>
+		</div>
+
+		<div class="field">
+			<label
+				class="label"
+				for="kind"
+			>
+				{{ $t('project.views.kind') }}
+			</label>
+			<div class="control">
+				<div class="select">
+					<select
+						id="kind"
+						v-model="view.viewKind"
+					>
+						<option value="list">
+							{{ $t('project.list.title') }}
+						</option>
+						<option value="gantt">
+							{{ $t('project.gantt.title') }}
+						</option>
+						<option value="table">
+							{{ $t('project.table.title') }}
+						</option>
+						<option value="kanban">
+							{{ $t('project.kanban.title') }}
+						</option>
+					</select>
+				</div>
+			</div>
+		</div>
+
+		<FilterInput
+			v-model="view.filter"
+			:input-label="$t('project.views.filter')"
+		/>
+
+		<div
+			v-if="view.viewKind === 'kanban'"
+			class="field"
+		>
+			<label
+				class="label"
+				for="configMode"
+			>
+				{{ $t('project.views.bucketConfigMode') }}
+			</label>
+			<div class="control">
+				<div class="select">
+					<select
+						id="configMode"
+						v-model="view.bucketConfigurationMode"
+					>
+						<option value="manual">
+							{{ $t('project.views.bucketConfigManual') }}
+						</option>
+						<option value="filter">
+							{{ $t('project.views.filter') }}
+						</option>
+					</select>
+				</div>
+			</div>
+		</div>
+
+		<div
+			v-if="view.viewKind === 'kanban' && view.bucketConfigurationMode === 'filter'"
+			class="field"
+		>
+			<label class="label">
+				{{ $t('project.views.bucketConfig') }}
+			</label>
+			<div class="control">
+				<div
+					v-for="(b, index) in view.bucketConfiguration"
+					:key="'bucket_'+index"
+					class="filter-bucket"
+				>
+					<button
+						class="is-danger"
+						@click.prevent="() => view.bucketConfiguration.splice(index, 1)"
+					>
+						<icon icon="trash-alt" />
+					</button>
+					<div class="filter-bucket-form">
+						<div class="field">
+							<label
+								class="label"
+								:for="'bucket_'+index+'_title'"
+							>
+								{{ $t('project.views.title') }}
+							</label>
+							<div class="control">
+								<input
+									:id="'bucket_'+index+'_title'"
+									v-model="view.bucketConfiguration[index].title"
+									class="input"
+									:placeholder="$t('project.share.links.namePlaceholder')"
+								>
+							</div>
+						</div>
+
+						<FilterInput
+							v-model="view.bucketConfiguration[index].filter"
+							:input-label="$t('project.views.filter')"
+						/>
+					</div>
+				</div>
+				<div class="is-flex is-justify-content-end">
+					<XButton
+						variant="secondary"
+						icon="plus"
+						@click="() => view.bucketConfiguration.push({title: '', filter: ''})"
+					>
+						{{ $t('project.kanban.addBucket') }}
+					</XButton>
+				</div>
+			</div>
+		</div>
+	</form>
+</template>
+
+<style scoped lang="scss">
+.filter-bucket {
+	display: flex;
+
+	button {
+		background: transparent;
+		border: none;
+		color: var(--danger);
+		padding-right: .75rem;
+		cursor: pointer;
+	}
+
+	&-form {
+		margin-bottom: .5rem;
+		padding: .5rem;
+		border: 1px solid var(--grey-200);
+		border-radius: $radius;
+		width: 100%;
+	}
+}
+</style>

frontend/src/components/quick-actions/quick-actions.vue

@@ -85,7 +85,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref, computed, watchEffect, shallowReactive, type ComponentPublicInstance} from 'vue'
+import {type ComponentPublicInstance, computed, ref, shallowReactive, watchEffect} from 'vue'
 import {useI18n} from 'vue-i18n'
 import {useRouter} from 'vue-router'
 
@@ -107,13 +107,14 @@ import {useTaskStore} from '@/stores/tasks'
 import {useAuthStore} from '@/stores/auth'
 
 import {getHistory} from '@/modules/projectHistory'
-import {parseTaskText, PrefixMode, PREFIXES} from '@/modules/parseTaskText'
+import {parseTaskText, PREFIXES, PrefixMode} from '@/modules/parseTaskText'
 import {success} from '@/message'
 
 import type {ITeam} from '@/modelTypes/ITeam'
 import type {ITask} from '@/modelTypes/ITask'
 import type {IProject} from '@/modelTypes/IProject'
 import type {IAbstract} from '@/modelTypes/IAbstract'
+import {isSavedFilter} from '@/services/savedFilter'
 
 const {t} = useI18n({useScope: 'global'})
 const router = useRouter()
@@ -280,10 +281,13 @@ const commands = computed<{ [key in COMMAND_TYPE]: Command }>(() => ({
 
 const placeholder = computed(() => selectedCmd.value?.placeholder || t('quickActions.placeholder'))
 
-const currentProject = computed(() => Object.keys(baseStore.currentProject).length === 0
-	? null
-	: baseStore.currentProject,
-)
+const currentProject = computed(() => {
+	if (Object.keys(baseStore.currentProject).length === 0 || isSavedFilter(baseStore.currentProject)) {
+		return null
+	}
+	
+	return baseStore.currentProject
+})
 
 const hintText = computed(() => {
 	if (selectedCmd.value !== null && currentProject.value !== null) {
@@ -350,26 +354,6 @@ const isNewTaskCommand = computed(() => (
 
 const taskSearchTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
 
-type Filter = { by: string, value: string | number, comparator: string }
-
-function filtersToParams(filters: Filter[]) {
-	const filter_by: Filter['by'][] = []
-	const filter_value: Filter['value'][] = []
-	const filter_comparator: Filter['comparator'][] = []
-
-	filters.forEach(({by, value, comparator}) => {
-		filter_by.push(by)
-		filter_value.push(value)
-		filter_comparator.push(comparator)
-	})
-
-	return {
-		filter_by,
-		filter_value,
-		filter_comparator,
-	}
-}
-
 function searchTasks() {
 	if (
 		searchMode.value !== SEARCH_MODE.ALL &&
@@ -391,40 +375,27 @@ function searchTasks() {
 
 	const {text, project: projectName, labels} = parsedQuery.value
 
-	const filters: Filter[] = []
-
-	// FIXME: improve types
-	function addFilter(
-		by: Filter['by'],
-		value: Filter['value'],
-		comparator: Filter['comparator'],
-	) {
-		filters.push({
-			by,
-			value,
-			comparator,
-		})
-	}
+	let filter = ''
 
 	if (projectName !== null) {
 		const project = projectStore.findProjectByExactname(projectName)
 		console.log({project})
 		if (project !== null) {
-			addFilter('project_id', project.id, 'equals')
+			filter += ' project = ' + project.id
 		}
 	}
 
 	if (labels.length > 0) {
 		const labelIds = labelStore.getLabelsByExactTitles(labels).map((l) => l.id)
 		if (labelIds.length > 0) {
-			addFilter('labels', labelIds.join(), 'in')
+			filter += 'labels in ' + labelIds.join(', ')
 		}
 	}
 
 	const params = {
 		s: text,
 		sort_by: 'done',
-		...filtersToParams(filters),
+		filter,
 	}
 
 	taskSearchTimeout.value = setTimeout(async () => {

frontend/src/components/sharing/linkSharing.vue

@@ -173,11 +173,11 @@
 							<div class="select">
 								<select v-model="selectedView[s.id]">
 									<option
-										v-for="(title, key) in availableViews"
-										:key="key"
-										:value="key"
+										v-for="(view) in availableViews"
+										:key="view.id"
+										:value="view.id"
 									>
-										{{ title }}
+										{{ view.title }}
 									</option>
 								</select>
 							</div>
@@ -230,9 +230,9 @@ import LinkShareService from '@/services/linkShare'
 import {useCopyToClipboard} from '@/composables/useCopyToClipboard'
 import {success} from '@/message'
 import {getDisplayName} from '@/models/user'
-import type {ProjectView} from '@/types/ProjectView'
-import {PROJECT_VIEWS} from '@/types/ProjectView'
 import {useConfigStore} from '@/stores/config'
+import {useProjectStore} from '@/stores/projects'
+import type {IProjectView} from '@/modelTypes/IProjectView'
 
 const props = defineProps({
 	projectId: {
@@ -252,17 +252,13 @@ const showDeleteModal = ref(false)
 const linkIdToDelete = ref(0)
 const showNewForm = ref(false)
 
-type SelectedViewMapper = Record<IProject['id'], ProjectView>
+type SelectedViewMapper = Record<IProject['id'], IProjectView['id']>
 
 const selectedView = ref<SelectedViewMapper>({})
 
-const availableViews = computed<Record<ProjectView, string>>(() => ({
-	list: t('project.list.title'),
-	gantt: t('project.gantt.title'),
-	table: t('project.table.title'),
-	kanban: t('project.kanban.title'),
-}))
+const projectStore = useProjectStore()
 
+const availableViews = computed<IProjectView[]>(() => projectStore.projects[props.projectId]?.views || [])
 const copy = useCopyToClipboard()
 watch(
 	() => props.projectId,
@@ -281,7 +277,7 @@ async function load(projectId: IProject['id']) {
 
 	const links = await linkShareService.getAll({projectId})
 	links.forEach((l: ILinkShare) => {
-		selectedView.value[l.id] = 'list'
+		selectedView.value[l.id] = availableViews.value[0].id
 	})
 	linkShares.value = links
 }
@@ -315,8 +311,8 @@ async function remove(projectId: IProject['id']) {
 	}
 }
 
-function getShareLink(hash: string, view: ProjectView = PROJECT_VIEWS.LIST) {
-	return frontendUrl.value + 'share/' + hash + '/auth?view=' + view
+function getShareLink(hash: string, viewId: IProjectView['id']) {
+	return frontendUrl.value + 'share/' + hash + '/auth?view=' + viewId
 }
 </script>
 

frontend/src/components/sharing/userTeam.vue

@@ -16,7 +16,22 @@
 						:search-results="found"
 						:label="searchLabel"
 						@search="find"
-					/>
+					>
+						<template #searchResult="{option: result}">
+							<User
+								v-if="shareType === 'user'"
+								:avatar-size="24"
+								:show-username="true"
+								:user="result"
+							/>
+							<span 
+								v-else
+								class="search-result"
+							>
+								{{ result.name }}
+							</span>
+						</template>
+					</Multiselect>
 				</p>
 				<p class="control">
 					<x-button @click="add()">
@@ -172,6 +187,8 @@ import Multiselect from '@/components/input/multiselect.vue'
 import Nothing from '@/components/misc/nothing.vue'
 import {success} from '@/message'
 import {useAuthStore} from '@/stores/auth'
+import {useConfigStore} from '@/stores/config'
+import User from '@/components/misc/user.vue'
 
 // FIXME: I think this whole thing can now only manage user/team sharing for projects? Maybe remove a little generalization?
 
@@ -210,8 +227,8 @@ const selectedRight = ref({})
 const sharables = ref([])
 const showDeleteModal = ref(false)
 
-
 const authStore = useAuthStore()
+const configStore = useConfigStore()
 const userInfo = computed(() => authStore.info)
 
 function createShareTypeNameComputed(count: number) {
@@ -360,7 +377,15 @@ async function find(query: string) {
 		found.value = []
 		return
 	}
-	const results = await searchService.getAll({}, {s: query})
+
+	// Include public teams here if we are sharing with teams and its enabled in the config
+	let results = []
+	if (props.shareType === 'team' && configStore.publicTeamsEnabled) {
+		results = await searchService.getAll({}, {s: query, includePublic: true})
+	} else {
+		results = await searchService.getAll({}, {s: query})
+	}
+
 	found.value = results
 		.filter(m => {
 			if(props.shareType === 'user' && m.id === currentUserId.value) {

frontend/src/components/tasks/GanttChart.vue

@@ -17,15 +17,16 @@
 			bar-end="endDate"
 			:grid="true"
 			:width="ganttChartWidth"
+			:color-scheme="GANTT_COLOR_SCHEME"
 			@dragendBar="updateGanttTask"
 			@dblclickBar="openTask"
 		>
-			<template #timeunit="{value, date}">
+			<template #timeunit="{date}">
 				<div
 					class="timeunit-wrapper"
 					:class="{'today': dateIsToday(date)}"
 				>
-					<span>{{ value }}</span>
+					<span>{{ date.getDate() }}</span>
 					<span class="weekday">
 						{{ weekDayFromDate(date) }}
 					</span>
@@ -59,7 +60,7 @@ import {
 	extendDayjs,
 	GGanttChart,
 	GGanttRow,
-	type GanttBarObject,
+	type GanttBarObject, type ColorScheme,
 } from '@infectoone/vue-ganttastic'
 
 import Loading from '@/components/misc/loading.vue'
@@ -113,6 +114,16 @@ const ganttChartWidth = computed(() => {
 
 const ganttBars = ref<GanttBarObject[][]>([])
 
+const GANTT_COLOR_SCHEME: ColorScheme = {
+	primary: 'var(--grey-100)',
+	secondary: 'var(--grey-300)',
+	ternary: 'var(--grey-500)',
+	quartenary: 'var(--grey-600)',
+	hoverHighlight: 'var(--grey-700)',
+	text: 'var(--grey-800)',
+	background: 'var(--white)',
+}
+
 /**
  * Update ganttBars when tasks change
  */

frontend/src/components/tasks/add-task.vue

@@ -77,7 +77,7 @@ const props = defineProps({
 const emit = defineEmits(['taskAdded'])
 
 const newTaskTitle = ref('')
-const newTaskInput = useAutoHeightTextarea(newTaskTitle)
+const {textarea: newTaskInput} = useAutoHeightTextarea(newTaskTitle)
 
 const {t} = useI18n({useScope: 'global'})
 const authStore = useAuthStore()

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

@@ -59,7 +59,7 @@ const hasDelete = computed(() => typeof remove !== 'undefined' && !disabled)
 	}
 
 	&:hover .assignee:not(:first-child) {
-		margin-left: -1rem;
+		margin-left: -0.5rem;
 	}
 }
 
@@ -68,7 +68,7 @@ const hasDelete = computed(() => typeof remove !== 'undefined' && !disabled)
 	transition: all $transition;
 
 	&:not(:first-child) {
-		margin-left: -1.5rem;
+		margin-left: -1rem;
 	}
 
 	:deep(.user img) {

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

@@ -97,6 +97,13 @@
 							editComment()
 						}"
 					/>
+					<Reactions 
+						v-model="c.reactions"
+						class="mt-2" 
+						entity-kind="comments"
+						:entity-id="c.id"
+						:disabled="!canWrite"
+					/>
 				</div>
 			</div>
 			<div
@@ -190,6 +197,7 @@ import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
 import {getAvatarUrl, getDisplayName} from '@/models/user'
 import {useConfigStore} from '@/stores/config'
 import {useAuthStore} from '@/stores/auth'
+import Reactions from '@/components/input/Reactions.vue'
 
 const props = defineProps({
 	taskId: {

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

@@ -37,7 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref, computed, watch} from 'vue'
+import {ref, computed, watch, onBeforeUnmount} from 'vue'
 
 import CustomTransition from '@/components/misc/CustomTransition.vue'
 import Editor from '@/components/input/AsyncEditor'
@@ -88,6 +88,12 @@ async function saveWithDelay() {
 	}, 5000)
 }
 
+onBeforeUnmount(() => {
+	if (changeTimeout.value !== null) {
+		clearTimeout(changeTimeout.value)
+	}
+})
+
 async function save() {
 	if (changeTimeout.value !== null) {
 		clearTimeout(changeTimeout.value)

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

@@ -27,7 +27,8 @@ defineProps({
 	display: inline;
 	
 	:deep(.tag) {
-		margin-bottom: .25rem;
+		margin-top: .125rem;
+		margin-bottom: .125rem;
 	}
 }
 </style>

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

@@ -261,13 +261,18 @@ const foundTasks = ref<ITask[]>([])
 
 async function findTasks(newQuery: string) {
 	query.value = newQuery
-	foundTasks.value = await taskService.getAll({}, {s: newQuery})
+	const result = await taskService.getAll({}, {
+		s: newQuery,
+		sort_by: 'done',
+	})
+	
+	foundTasks.value = mapRelatedTasks(result)
 }
 
 function mapRelatedTasks(tasks: ITask[]) {
 	return tasks.map(task => {
 		// by doing this here once we can save a lot of duplicate calls in the template
-		const project = projectStore.projects[task.ProjectId]
+		const project = projectStore.projects[task.projectId]
 
 		return {
 			...task,