chore(i18n): update translations via Crowdin

When the demo mode is enabled, people set the language to their own language - which is understandable. However, this is really confusing for other people when they log in and the language is something unexpected.
This change overrides the configured language when saving it while Vikunja is in demo mode.

.drone.yml

@@ -3,6 +3,11 @@ kind: pipeline
 type: docker
 name: build-and-test
 
+trigger:
+  event:
+    exclude:
+      - cron
+
 workspace:
   base: /go
   path: src/code.vikunja.io/api
@@ -134,7 +139,7 @@ steps:
       event: [ push, tag, pull_request ]
 
   - name: api-lint
-    image: golangci/golangci-lint:v1.55.2
+    image: golangci/golangci-lint:v1.57.2
     pull: always
     environment:
       GOPROXY: 'https://goproxy.kolaente.de'
@@ -359,7 +364,7 @@ steps:
       - api-build
 
   - name: frontend-dependencies
-    image: node:20.11.0-alpine
+    image: node:20.12.2-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
@@ -373,7 +378,7 @@ steps:
   #      - restore-cache
 
   - name: frontend-lint
-    image: node:20.11.0-alpine
+    image: node:20.12.2-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
@@ -385,7 +390,7 @@ steps:
       - frontend-dependencies
 
   - name: frontend-build-prod
-    image: node:20.11.0-alpine
+    image: node:20.12.2-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
@@ -397,7 +402,7 @@ steps:
       - frontend-dependencies
 
   - name: frontend-test-unit
-    image: node:20.11.0-alpine
+    image: node:20.12.2-alpine
     pull: always
     commands:
       - cd frontend
@@ -408,7 +413,7 @@ steps:
 
   - 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
@@ -456,7 +461,6 @@ steps:
       - 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
@@ -528,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
@@ -537,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
@@ -549,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
@@ -709,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
@@ -725,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
@@ -808,6 +815,9 @@ trigger:
   ref:
     - refs/heads/main
     - "refs/tags/**"
+  event:
+    exclude:
+      - cron
 
 steps:
   - name: fetch-tags
@@ -891,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
@@ -952,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
@@ -1145,6 +1155,9 @@ trigger:
   ref:
     - refs/heads/main
     - "refs/tags/**"
+  event:
+    exclude:
+      - cron
 
 steps:
   - name: fetch-tags
@@ -1360,6 +1373,9 @@ trigger:
   ref:
     - refs/heads/main
     - "refs/tags/**"
+  event:
+    exclude:
+      - cron
 
 depends_on:
   - build-and-test
@@ -1384,6 +1400,6 @@ steps:
         - failure
 ---
 kind: signature
-hmac: 008b86263a8d03806da907c128a837a380901f1a2190a658c22d4e06cadc1b64
+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/ ./
 

README.md

@@ -29,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

@@ -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 
@@ -153,7 +156,7 @@ mailer:
   username: "user"
   # SMTP password
   password: ""
-  # Wether to skip verification of the tls certificate on the server
+  # Whether to skip verification of the tls certificate on the server
   skiptlsverify: false
   # The default from address when sending emails
   fromemail: "mail@vikunja"
@@ -303,7 +306,7 @@ auth:
   # The provider needs to support the `openid`, `profile` and `email` scopes.<br/>
   # **Note:** Some openid providers (like Gitlab) only make the email of the user available through OpenID if they have set it to be publicly visible.
   # If the email is not public in those cases, authenticating will fail.
-  # **Note 2:** The frontend expects the third party to 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.
+  # +**Note 2:** The frontend expects the third party to redirect the user <frontend-url>/auth/openid/<auth key> after authentication. Please make sure to configure the redirect url in your third party auth service accordingly if you're using the default vikunja frontend.    
   # The frontend will automatically provide the API with the redirect url, composed from the current url where it's hosted.
   # If you want to use the desktop client with OpenID, make sure to allow redirects to `127.0.0.1`.
   # Take a look at the [default config file](https://kolaente.dev/vikunja/vikunja/src/branch/main/config.yml.sample) for more information about how to configure openid authentication.
@@ -365,8 +368,8 @@ defaultsettings:
 webhooks:
   # Whether to enable support for webhooks
   enabled: true
-  # The timout in seconds until a webhook request fails when no response has been received.
-  timoutseconds: 30
+  # The timeout in seconds until a webhook request fails when no response has been received.
+  timeoutseconds: 30
   # The URL of [a mole instance](https://github.com/frain-dev/mole) to use to proxy outgoing webhook requests. You should use this and configure appropriately if you're not the only one using your Vikunja instance. More info about why: https://webhooks.fyi/best-practices/webhook-providers#implement-security-on-egress-communication. Must be used in combination with `webhooks.password` (see below).
   proxyurl:
   # The proxy password to use when authenticating against the proxy.

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": "29.1.0",
+    "electron": "29.3.3",
     "electron-builder": "24.13.3"
   },
   "dependencies": {
     "connect-history-api-fallback": "2.0.0",
-    "express": "4.18.3"
+    "express": "4.19.2"
   }
 }

docs/content/doc/development/database.md

@@ -24,7 +24,7 @@ In other packages, use the `db.NewSession()` method to get a new database sessio
 
 To add a new table to the database, create the struct and [add a migration for it]({{< ref "db-migrations.md" >}}).
 
-To learn more about how to configure your struct to create "good" tables, refer to [the xorm documentaion](https://xorm.io/docs/).
+To learn more about how to configure your struct to create "good" tables, refer to [the xorm documentation](https://xorm.io/docs/).
 
 In most cases you will also need to implement the `TableName() string` method on the new struct to make sure the table name matches the rest of the tables - plural.
 

docs/content/doc/development/development.md

@@ -26,6 +26,15 @@ If you plan to do a bigger change, it is better to open an issue for discussion
 
 The main repo is [`vikunja/vikunja`](https://kolaente.dev/vikunja/vikunja), it contains all code for the api, frontend and desktop applications.
 
+## Where to file issues
+
+You can file issues on [the Gitea repo](https://kolaente.dev/vikunja/vikunja) or [on the GitHub mirror](https://github.com/go-vikunja/vikunja), when you don't want to create an account on the Gitea instance.
+
+Please note that due to a spam problem, we need to manually enable accounts on Gitea after you've registered there.
+To get that started, please reach out on another channel with your username.
+
+Another option is [the community forum](https://community.vikunja.io), especially if you want to discuss a feature in more detail.
+
 ## API
 
 You'll need at least Go 1.21 to build Vikunja's api.

docs/content/doc/development/migration.md

@@ -101,7 +101,7 @@ You should also document the routes with [swagger annotations]({{< ref "swagger-
 
 There is a method available in the `migration` package which takes a fully nested Vikunja structure and creates it with all relations.
 This means you start by adding a project, then add projects inside that project, then tasks in the lists and so on.
-In general, it is reccommended to have one root project with all projects of the other service as child projects.
+In general, it is recommended to have one root project with all projects of the other service as child projects.
 
 The root structure must be present as `[]*models.ProjectWithTasksAndBuckets`. It allows to represent all of Vikunja's hierarchy as a single data structure.
 

docs/content/doc/development/test.md

@@ -16,7 +16,7 @@ menu:
 
 The following parts are about the kinds of tests in the API package and how to run them.
 
-### Prerequesites
+### Prerequisites
 
 To run any kind of test, you need to specify Vikunja's [root path](https://vikunja.io/docs/config-options/#rootpath).
 This is required to make sure all test fixtures are correctly loaded.
@@ -39,7 +39,7 @@ This definition is a bit blurry, but we haven't found a better one yet.
 All integration tests live in `pkg/integrations`.
 You can run them by executing `mage test:integration`.
 
-The integration tests use the same config and fixtures as the unit tests and therefor have the same options available,
+The integration tests use the same config and fixtures as the unit tests and therefore have the same options available,
 see at the beginning of this document.
 
 To run integration tests, use `mage test:integration`.

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

@@ -346,6 +346,18 @@ Full path: `service.customlogourl`
 Environment path: `VIKUNJA_SERVICE_CUSTOMLOGOURL`
 
 
+### enablepublicteams
+
+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.
+
+Default: `false`
+
+Full path: `service.enablepublicteams`
+
+Environment path: `VIKUNJA_SERVICE_ENABLEPUBLICTEAMS`
+
+
 ---
 
 ## sentry
@@ -768,7 +780,7 @@ Environment path: `VIKUNJA_MAILER_PASSWORD`
 
 ### skiptlsverify
 
-Wether to skip verification of the tls certificate on the server
+Whether to skip verification of the tls certificate on the server
 
 Default: `false`
 
@@ -1211,7 +1223,7 @@ OpenID configuration will allow users to authenticate through a third-party Open
 The provider needs to support the `openid`, `profile` and `email` scopes.<br/>
 **Note:** Some openid providers (like Gitlab) only make the email of the user available through OpenID if they have set it to be publicly visible.
 If the email is not public in those cases, authenticating will fail.
-**Note 2:** The frontend expects the third party to 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.
++**Note 2:** The frontend expects the third party to redirect the user <frontend-url>/auth/openid/<auth key> after authentication. Please make sure to configure the redirect url in your third party auth service accordingly if you're using the default vikunja frontend.    
 The frontend will automatically provide the API with the redirect url, composed from the current url where it's hosted.
 If you want to use the desktop client with OpenID, make sure to allow redirects to `127.0.0.1`.
 Take a look at the [default config file](https://kolaente.dev/vikunja/vikunja/src/branch/main/config.yml.sample) for more information about how to configure openid authentication.
@@ -1410,15 +1422,15 @@ Full path: `webhooks.enabled`
 Environment path: `VIKUNJA_WEBHOOKS_ENABLED`
 
 
-### timoutseconds
+### timeoutseconds
 
-The timout in seconds until a webhook request fails when no response has been received.
+The timeout in seconds until a webhook request fails when no response has been received.
 
 Default: `30`
 
-Full path: `webhooks.timoutseconds`
+Full path: `webhooks.timeoutseconds`
 
-Environment path: `VIKUNJA_WEBHOOKS_TIMOUTSECONDS`
+Environment path: `VIKUNJA_WEBHOOKS_TIMEOUTSECONDS`
 
 
 ### proxyurl

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

@@ -40,7 +40,7 @@ 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.
+Vikunja will not try to acquire ownership of the files folder, as that would mean it had to run as root.
 
 ## PostgreSQL
 
@@ -312,7 +312,7 @@ To do that, you can
 
 * Either activate SSH and paste the adapted compose file in a terminal (using Putty or similar)
 * Without activating SSH as a "custom script" (go to Control Panel / Task Scheduler / Create / Scheduled Task / User-defined script)
-* Without activating SSH, by using Portainer (you have to install first, check out [this tutorial](https://www.portainer.io/blog/how-to-install-portainer-on-a-synology-nas) for exmple):
+* Without activating SSH, by using Portainer (you have to install first, check out [this tutorial](https://www.portainer.io/blog/how-to-install-portainer-on-a-synology-nas) for example):
   1. Go to **Dashboard / Stacks** click the button **"Add Stack"**
   2. Give it the name Vikunja and paste the adapted docker compose file
   3. Deploy the Stack with the "Deploy Stack" button:

docs/content/doc/setup/install.md

@@ -37,7 +37,7 @@ This document provides an overview and instructions for the different methods:
 * [FreeBSD](#freebsd--freenas)
 * [Kubernetes]({{< ref "k8s.md" >}})
 
-And after you installed Vikunja, you may want to check out these other ressources:
+And after you installed Vikunja, you may want to check out these other resources:
 
 * [Configuration]({{< ref "config.md">}})
 * [UTF-8 Settings]({{< ref "utf-8.md">}})
@@ -225,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:** 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.
+
 ### 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.md

@@ -17,7 +17,7 @@ Vikunja allows for authentication with an external identity source such as Authe
 
 ## 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.
+OpenID Connect is a standardized identity layer built on top of the more generic OAuth 2.0 specification, simplifying 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:
@@ -34,6 +34,22 @@ Claims in turn are assertions containing information about the token bearer, usu
 **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. 
@@ -51,7 +67,7 @@ In general, this involves the following steps at a minimum:
 - 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 detailled instructions for various different identity providers can be [found here]({{< ref "openid-examples.md">}})
+More detailed instructions for various different identity providers can be [found here]({{< ref "openid-examples.md">}})
 
 ### Step 2: Configure Vikunja
 
@@ -64,13 +80,17 @@ auth:
     redirecturl: https://vikunja.mydomain.com/auth/openid/  <---- slash at the end is important
     providers:
       - name: <provider-name>
-        authurl: <auth-url>
+        authurl: <auth-url>  <----- Used for OIDC Discovery, usually the issuer 
         clientid: <vikunja client-id>
         clientsecret: <vikunja client-secret>
         scope: openid profile email
 ```
 
-The values for `authurl` can be obtained from the Metadata of your provider, while `clientid` and `clientsecret` are obtained when configuring the client.
+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:
@@ -83,7 +103,7 @@ auth:
 
 ## Automatically assign users to teams
 
-Vikunja is capable of automatically adding users to a team based on OIDC claims added by the identity provider.
+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.
 
@@ -95,7 +115,7 @@ It depends on the provider being used as well as the preferences of the administ
 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 claim structure expexted by Vikunja is as follows:
+The minimal claim structure expected by Vikunja is as follows:
 
 ```json
 {
@@ -112,6 +132,21 @@ The claim structure expexted by Vikunja is as follows:
 }
 ```
 
+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.
 

docs/content/doc/setup/subdirectory.md

@@ -17,7 +17,7 @@ However, you can still run it in a subdirectory but need to build the frontend y
 First, make sure you're able to build the frontend from source.
 Check [the guide about building from source]({{< ref "build-from-source.md">}}#frontend) about that.
 
-### Dynamicly set with build command
+### Dynamically set with build command
 
 Run the build with the `VIKUNJA_FRONTEND_BASE` variable specified.
 

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.
@@ -139,7 +147,7 @@ Flags:
 #### `user delete`
 
 Start the user deletion process.
-If called without the `--now` flag, this command will only trigger an email to the user in order for them to confirm and start the deletion process (this is the same behavoir as if the user requested their deletion via the web interface).
+If called without the `--now` flag, this command will only trigger an email to the user in order for them to confirm and start the deletion process (this is the same behavior as if the user requested their deletion via the web interface).
 With the flag the user is deleted **immediately**.
 
 **USE WITH CAUTION.**

docs/content/doc/usage/errors.md

@@ -51,51 +51,55 @@ This document describes the different errors Vikunja can return.
 | ErrorCode | HTTP Status Code | Description |
 |-----------|------------------|-------------|
 | 2001 | 400 | ID cannot be empty or 0. |
-| 2002 | 400 | Some of the request data was invalid. The response contains an aditional array with all invalid fields. |
+| 2002 | 400 | Some of the request data was invalid. The response contains an additional array with all invalid fields. |
 
 ## 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
 

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
+
+

docs/content/doc/usage/webhooks.md

@@ -18,7 +18,7 @@ Starting with version 0.22.0, Vikunja allows you to define webhooks to notify ot
 
 To create a webhook, in the project options select "Webhooks". The form will allow you to create and modify webhooks.
 
-Check out [the api docs](https://try.vikunja.io/api/v1/docs#tag/webhooks) for information about how to create webhooks programatically.
+Check out [the api docs](https://try.vikunja.io/api/v1/docs#tag/webhooks) for information about how to create webhooks programmatically.
 
 ## Available events and their payload
 

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

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.4",
+  "packageManager": "pnpm@9.1.0",
   "keywords": [
     "todo",
     "productivity",
@@ -50,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.2.0",
-    "@sentry/tracing": "7.105.0",
-    "@sentry/vue": "7.105.0",
-    "@tiptap/core": "2.2.4",
-    "@tiptap/extension-blockquote": "2.2.4",
-    "@tiptap/extension-bold": "2.2.4",
-    "@tiptap/extension-bullet-list": "2.2.4",
-    "@tiptap/extension-code": "2.2.4",
-    "@tiptap/extension-code-block-lowlight": "2.2.4",
-    "@tiptap/extension-document": "2.2.4",
-    "@tiptap/extension-dropcursor": "2.2.4",
-    "@tiptap/extension-gapcursor": "2.2.4",
-    "@tiptap/extension-hard-break": "2.2.4",
-    "@tiptap/extension-heading": "2.2.4",
-    "@tiptap/extension-history": "2.2.4",
-    "@tiptap/extension-horizontal-rule": "2.2.4",
-    "@tiptap/extension-image": "2.2.4",
-    "@tiptap/extension-italic": "2.2.4",
-    "@tiptap/extension-link": "2.2.4",
-    "@tiptap/extension-list-item": "2.2.4",
-    "@tiptap/extension-ordered-list": "2.2.4",
-    "@tiptap/extension-paragraph": "2.2.4",
-    "@tiptap/extension-placeholder": "2.2.4",
-    "@tiptap/extension-strike": "2.2.4",
-    "@tiptap/extension-table": "2.2.4",
-    "@tiptap/extension-table-cell": "2.2.4",
-    "@tiptap/extension-table-header": "2.2.4",
-    "@tiptap/extension-table-row": "2.2.4",
-    "@tiptap/extension-task-item": "2.2.4",
-    "@tiptap/extension-task-list": "2.2.4",
-    "@tiptap/extension-text": "2.2.4",
-    "@tiptap/extension-typography": "2.2.4",
-    "@tiptap/extension-underline": "2.2.4",
-    "@tiptap/pm": "2.2.4",
-    "@tiptap/suggestion": "2.2.4",
-    "@tiptap/vue-3": "2.2.4",
+    "@infectoone/vue-ganttastic": "2.3.2",
+    "@intlify/unplugin-vue-i18n": "4.0.0",
+    "@kyvg/vue3-notification": "3.2.1",
+    "@sentry/tracing": "7.114.0",
+    "@sentry/vue": "7.114.0",
+    "@tiptap/core": "2.3.2",
+    "@tiptap/extension-blockquote": "2.3.2",
+    "@tiptap/extension-bold": "2.3.2",
+    "@tiptap/extension-bullet-list": "2.3.2",
+    "@tiptap/extension-code": "2.3.2",
+    "@tiptap/extension-code-block-lowlight": "2.3.2",
+    "@tiptap/extension-document": "2.3.2",
+    "@tiptap/extension-dropcursor": "2.3.2",
+    "@tiptap/extension-gapcursor": "2.3.2",
+    "@tiptap/extension-hard-break": "2.3.2",
+    "@tiptap/extension-heading": "2.3.2",
+    "@tiptap/extension-history": "2.3.2",
+    "@tiptap/extension-horizontal-rule": "2.3.2",
+    "@tiptap/extension-image": "2.3.2",
+    "@tiptap/extension-italic": "2.3.2",
+    "@tiptap/extension-link": "2.3.2",
+    "@tiptap/extension-list-item": "2.3.2",
+    "@tiptap/extension-ordered-list": "2.3.2",
+    "@tiptap/extension-paragraph": "2.3.2",
+    "@tiptap/extension-placeholder": "2.3.2",
+    "@tiptap/extension-strike": "2.3.2",
+    "@tiptap/extension-table": "2.3.2",
+    "@tiptap/extension-table-cell": "2.3.2",
+    "@tiptap/extension-table-header": "2.3.2",
+    "@tiptap/extension-table-row": "2.3.2",
+    "@tiptap/extension-task-item": "2.3.2",
+    "@tiptap/extension-task-list": "2.3.2",
+    "@tiptap/extension-text": "2.3.2",
+    "@tiptap/extension-typography": "2.3.2",
+    "@tiptap/extension-underline": "2.3.2",
+    "@tiptap/pm": "2.3.2",
+    "@tiptap/suggestion": "2.3.2",
+    "@tiptap/vue-3": "2.3.2",
     "@types/is-touch-device": "1.0.2",
     "@types/lodash.clonedeep": "4.5.9",
     "@vueuse/core": "10.9.0",
     "@vueuse/router": "10.9.0",
-    "axios": "1.6.7",
+    "axios": "1.6.8",
     "blurhash": "2.0.5",
     "bulma-css-variables": "0.9.33",
     "camel-case": "4.1.2",
-    "date-fns": "3.3.1",
-    "dayjs": "1.11.10",
-    "dompurify": "3.0.9",
+    "date-fns": "3.6.0",
+    "dayjs": "1.11.11",
+    "dompurify": "3.1.2",
     "fast-deep-equal": "3.1.3",
     "flatpickr": "4.6.13",
     "flexsearch": "0.7.31",
@@ -117,13 +117,14 @@
     "snake-case": "3.0.4",
     "sortablejs": "1.15.2",
     "tippy.js": "6.3.7",
-    "ufo": "1.4.0",
-    "vue": "3.4.21",
+    "ufo": "1.5.3",
+    "vue": "3.4.27",
     "vue-advanced-cropper": "2.8.8",
     "vue-flatpickr-component": "11.0.5",
-    "vue-i18n": "9.10.1",
-    "vue-router": "4.3.0",
-    "workbox-precaching": "7.0.0",
+    "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": {
@@ -131,60 +132,61 @@
     "@cypress/vite-dev-server": "5.0.7",
     "@cypress/vue": "6.0.0",
     "@faker-js/faker": "8.4.1",
-    "@histoire/plugin-screenshot": "0.17.8",
-    "@histoire/plugin-vue": "0.17.12",
-    "@rushstack/eslint-patch": "1.7.2",
-    "@tsconfig/node18": "18.2.2",
+    "@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.24",
+    "@types/node": "20.12.11",
     "@types/postcss-preset-env": "7.7.0",
     "@types/sortablejs": "1.15.8",
-    "@typescript-eslint/eslint-plugin": "7.1.1",
-    "@typescript-eslint/parser": "7.1.1",
-    "@vitejs/plugin-legacy": "5.3.1",
+    "@typescript-eslint/eslint-plugin": "7.8.0",
+    "@typescript-eslint/parser": "7.8.0",
+    "@vitejs/plugin-legacy": "5.4.0",
     "@vitejs/plugin-vue": "5.0.4",
-    "@vue/eslint-config-typescript": "12.0.0",
-    "@vue/test-utils": "2.4.4",
+    "@vue/eslint-config-typescript": "13.0.0",
+    "@vue/test-utils": "2.4.6",
     "@vue/tsconfig": "0.5.1",
-    "autoprefixer": "10.4.18",
+    "autoprefixer": "10.4.19",
     "browserslist": "4.23.0",
-    "caniuse-lite": "1.0.30001593",
-    "css-has-pseudo": "6.0.2",
+    "caniuse-lite": "1.0.30001617",
+    "css-has-pseudo": "6.0.3",
     "csstype": "3.1.3",
-    "cypress": "13.6.6",
-    "esbuild": "0.20.1",
+    "cypress": "13.9.0",
+    "esbuild": "0.21.1",
     "eslint": "8.57.0",
-    "eslint-plugin-vue": "9.22.0",
-    "happy-dom": "13.6.2",
-    "histoire": "0.17.9",
-    "postcss": "8.4.35",
+    "eslint-plugin-vue": "9.26.0",
+    "happy-dom": "14.10.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.4.0",
-    "rollup": "4.12.0",
+    "postcss-preset-env": "9.5.11",
+    "rollup": "4.17.2",
     "rollup-plugin-visualizer": "5.12.0",
-    "sass": "1.71.1",
+    "sass": "1.77.0",
     "start-server-and-test": "2.0.3",
-    "typescript": "5.3.3",
-    "vite": "5.1.5",
+    "typescript": "5.4.5",
+    "vite": "5.2.11",
     "vite-plugin-inject-preload": "1.3.3",
-    "vite-plugin-pwa": "0.19.2",
+    "vite-plugin-pwa": "0.20.0",
     "vite-plugin-sentry": "1.4.0",
     "vite-svg-loader": "5.1.0",
-    "vitest": "1.3.1",
-    "vue-tsc": "2.0.4",
+    "vitest": "1.6.0",
+    "vue-tsc": "2.0.16",
     "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/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/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,7 +77,6 @@
 			:model-value="childProjects"
 			:can-edit-order="true"
 			:can-collapse="canCollapse"
-			:level="level + 1"
 		/>
 	</li>
 </template>
@@ -101,12 +99,10 @@ const {
 	project,
 	isLoading,
 	canCollapse,
-	level = 0,
 } = defineProps<{
 	project: IProject,
 	isLoading?: boolean,
 	canCollapse?: boolean,
-	level?: number,
 }>()
 
 const projectStore = useProjectStore()

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>
@@ -162,7 +162,7 @@ projectStore.loadAllProjects()
 .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.loadAllProjects()
 	}
 
 	@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

@@ -1,26 +1,27 @@
 <template>
 	<div
-		:class="[background ? 'has-background' : '', $route.name as string +'-view']"
+		:class="{
+			'has-background': background,
+			'link-share-is-fullwidth': isFullWidth,
+		}"
 		:style="{'background-image': `url(${background})`}"
 		class="link-share-container"
 	>
-		<div class="container has-text-centered link-share-view">
-			<div class="column is-10 is-offset-1">
-				<Logo
-					v-if="logoVisible"
-					class="logo"
-				/>
-				<h1
-					:class="{'m-0': !logoVisible}"
-					:style="{ 'opacity': currentProject?.title === '' ? '0': '1' }"
-					class="title"
-				>
-					{{ currentProject?.title === '' ? $t('misc.loading') : currentProject?.title }}
-				</h1>
-				<div class="box has-text-left view">
-					<router-view />
-					<PoweredByLink />
-				</div>
+		<div class="has-text-centered link-share-view">
+			<Logo
+				v-if="logoVisible"
+				class="logo"
+			/>
+			<h1
+				:class="{'m-0': !logoVisible}"
+				:style="{ 'opacity': currentProject?.title === '' ? '0': '1' }"
+				class="title"
+			>
+				{{ currentProject?.title === '' ? $t('misc.loading') : currentProject?.title }}
+			</h1>
+			<div class="box has-text-left view">
+				<router-view />
+				<PoweredByLink />
 			</div>
 		</div>
 	</div>
@@ -30,14 +31,38 @@
 import {computed} from 'vue'
 
 import {useBaseStore} from '@/stores/base'
+import {useRoute} from 'vue-router'
 
 import Logo from '@/components/home/Logo.vue'
 import PoweredByLink from './PoweredByLink.vue'
+import {useProjectStore} from '@/stores/projects'
+import {useLabelStore} from '@/stores/labels'
+import {PROJECT_VIEW_KINDS} from '@/modelTypes/IProjectView'
 
 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()
+
+const route = useRoute()
+const isFullWidth = computed(() => {
+	const viewId = route.params?.viewId ?? null
+	const projectId = route.params?.projectId ?? null
+	if (!viewId || !projectId) {
+		return false
+	}
+
+	const view = projectStore.projects[Number(projectId)]?.views.find(v => v.id === Number(viewId))
+
+	return view?.viewKind === PROJECT_VIEW_KINDS.KANBAN ||
+		view?.viewKind === PROJECT_VIEW_KINDS.GANTT
+})
 </script>
 
 <style lang="scss" scoped>
@@ -49,20 +74,34 @@ const logoVisible = computed(() => baseStore.logoVisible)
 .logo {
 	max-width: 300px;
 	width: 90%;
-	margin: 2rem 0 1.5rem;
+	margin: 1rem auto 2rem;
 	height: 100px;
 }
 
-.column {
-	max-width: 100%;
-}
-
 .title {
 	text-shadow: 0 0 1rem var(--white);
 }
 
-// FIXME: this should be defined somewhere deep
-.link-share-view .card {
-	background-color: var(--white);
+.link-share-view {
+	width: 100%;
+	max-width: $desktop;
+	margin: 0 auto;
+}
+
+.link-share-container.link-share-is-fullwidth {
+	.link-share-view {
+		max-width: 100vw;
+	}
+}
+
+.link-share-container:not(.has-background) {
+	:deep(.loader-container, .gantt-chart-container > .card) {
+		box-shadow: none !important;
+		border: none;
+
+		.task-add {
+			padding: 1rem 0 0;
+		}
+	}
 }
 </style>

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 ||
@@ -596,7 +615,7 @@ watch(
 	() => isEditing.value,
 	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.
@@ -799,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;
@@ -813,7 +832,7 @@ watch(
 		th {
 			font-weight: bold;
 			text-align: left;
-			background-color: #f1f3f5;
+			background-color: var(--grey-200);
 		}
 
 		.selectedCell:after {
@@ -874,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/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/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/ProjectCard.vue

@@ -30,7 +30,7 @@
 			>
 				<icon icon="filter" />
 			</span>
-			{{ project.title }}
+			{{ getProjectTitle(project) }}
 		</div>
 		<BaseButton
 			class="project-button"
@@ -59,6 +59,7 @@ import BaseButton from '@/components/base/BaseButton.vue'
 
 import {useProjectBackground} from './useProjectBackground'
 import {useProjectStore} from '@/stores/projects'
+import {getProjectTitle} from '@/helpers/getProjectTitle'
 
 const {
 	project,

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 } }"
@@ -90,7 +96,6 @@
 				{{ $t('project.webhooks.title') }}
 			</DropdownItem>
 			<DropdownItem
-				v-if="level < 2"
 				:to="{ name: 'project.createFromParent', params: { parentProjectId: project.id } }"
 				icon="layer-group"
 			>
@@ -129,9 +134,6 @@ const props = defineProps({
 		type: Object as PropType<IProject>,
 		required: true,
 	},
-	level: {
-		type: Number,
-	},
 })
 
 const projectStore = useProjectStore()

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"
 									>
@@ -111,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)"
 										>
@@ -119,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)"
 										>
@@ -197,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>
@@ -277,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'
@@ -290,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 = {
@@ -320,8 +332,9 @@ 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)
@@ -333,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: [
@@ -376,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,
@@ -406,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
 	}
@@ -418,6 +435,7 @@ function handleTaskContainerScroll(id: IBucket['id'], projectId: IProject['id'],
 
 	kanbanStore.loadNextTasksForBucket(
 		projectId,
+		viewId,
 		params.value,
 		id,
 	)
@@ -467,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,
 	)
@@ -477,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
@@ -489,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
@@ -550,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']) {
@@ -570,6 +600,7 @@ async function deleteBucket() {
 			bucket: new BucketModel({
 				id: bucketToDelete.value,
 				projectId: project.value.id,
+				projectViewId: viewId,
 			}),
 			params: params.value,
 		})
@@ -588,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
 }
 
@@ -601,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
 
@@ -611,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,
@@ -625,24 +666,25 @@ async function saveBucketLimit(bucketId: IBucket['id'], limit: number) {
 
 	await kanbanStore.updateBucket({
 		...kanbanStore.getBucketById(bucketId),
+		projectId,
 		limit,
 	})
 	success({message: t('project.kanban.bucketLimitSavedSuccess')})
 }
 
-const setBucketLimitCancel = ref<number|null>(null)
+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)
 }
 
@@ -663,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')})
 }
 
@@ -711,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;
@@ -723,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;
@@ -738,6 +799,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 		* {
 			opacity: 0;
 		}
+
 		&::after {
 			content: '';
 			position: absolute;
@@ -779,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,
@@ -366,4 +306,12 @@ function prepareFiltersAndLoadTasks() {
 		}
 	}
 }
+
+.list-view {
+	padding-bottom: 1rem;
+	
+	:deep(.card) {
+		margin-bottom: 0;
+	}
+}
 </style>

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

@@ -2,73 +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.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>
+				<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>
 
@@ -268,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'
 
@@ -284,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 = {
@@ -321,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,
@@ -333,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]
@@ -348,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
@@ -383,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;
 	}
@@ -392,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

@@ -21,12 +21,12 @@
 			@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>

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/attachments.vue

@@ -323,9 +323,8 @@ async function setCoverImage(attachment: IAttachment | null) {
 		margin-bottom: 0;
 		display: flex;
 
-		> span:not(:last-child):after,
+		> span,
 		> button:not(:last-child):after {
-			content: '·';
 			padding: 0 .25rem;
 		}
 	}

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/reminder-detail.vue

@@ -47,7 +47,6 @@
 					<ReminderPeriod
 						v-if="activeForm === 'relative'"
 						v-model="reminder"
-						@update:modelValue="updateDataAndMaybeClose(close)"
 					/>
 
 					<DatepickerInline
@@ -60,7 +59,7 @@
 						v-if="showFormSwitch !== null"
 						class="reminder__close-button"
 						:shadow="false"
-						@click="updateDataAndMaybeClose(close)"
+						@click="updateDataAndMaybeCloseNow(close)"
 					>
 						{{ $t('misc.confirm') }}
 					</x-button>
@@ -73,10 +72,10 @@
 <script setup lang="ts">
 import {computed, ref, watch} from 'vue'
 import {SECONDS_A_DAY, SECONDS_A_HOUR} from '@/constants/date'
-import {IReminderPeriodRelativeTo, REMINDER_PERIOD_RELATIVE_TO_TYPES} from '@/types/IReminderPeriodRelativeTo'
+import {type IReminderPeriodRelativeTo, REMINDER_PERIOD_RELATIVE_TO_TYPES} from '@/types/IReminderPeriodRelativeTo'
 import {useI18n} from 'vue-i18n'
 
-import {PeriodUnit, secondsToPeriod} from '@/helpers/time/period'
+import {type PeriodUnit, secondsToPeriod} from '@/helpers/time/period'
 import type {ITaskReminder} from '@/modelTypes/ITaskReminder'
 import {formatDateShort} from '@/helpers/time/formatDate'
 
@@ -87,6 +86,7 @@ import Popup from '@/components/misc/popup.vue'
 import TaskReminderModel from '@/models/taskReminder'
 import Card from '@/components/misc/card.vue'
 import SimpleButton from '@/components/input/SimpleButton.vue'
+import {useDebounceFn} from '@vueuse/core'
 
 const {
 	modelValue,
@@ -112,7 +112,7 @@ const presets = computed<TaskReminderModel[]>(() => [
 	{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 7, relativeTo: defaultRelativeTo},
 	{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 30, relativeTo: defaultRelativeTo},
 ])
-const reminderDate = ref<Date|null>(null)
+const reminderDate = ref<Date | null>(null)
 
 type availableForms = null | 'relative' | 'absolute'
 
@@ -142,16 +142,16 @@ const reminderText = computed(() => {
 watch(
 	() => modelValue,
 	(newReminder) => {
-		if(newReminder) {
+		if (newReminder) {
 			reminder.value = newReminder
-			
-			if(newReminder.relativeTo === null) {
+
+			if (newReminder.relativeTo === null) {
 				reminderDate.value = new Date(newReminder.reminder)
 			}
-			
+
 			return
 		}
-		
+
 		reminder.value = new TaskReminderModel()
 	},
 	{immediate: true},
@@ -181,7 +181,9 @@ function setReminderFromPreset(preset, close) {
 	close()
 }
 
-function updateDataAndMaybeClose(close) {
+const updateDataAndMaybeClose = useDebounceFn(updateDataAndMaybeCloseNow, 500)
+
+function updateDataAndMaybeCloseNow(close) {
 	updateData()
 	if (clearAfterUpdate) {
 		close()

frontend/src/components/tasks/partials/reminder-period.vue

@@ -71,8 +71,7 @@ import {periodToSeconds, PeriodUnit, secondsToPeriod} from '@/helpers/time/perio
 import TaskReminderModel from '@/models/taskReminder'
 
 import type {ITaskReminder} from '@/modelTypes/ITaskReminder'
-import {REMINDER_PERIOD_RELATIVE_TO_TYPES, type IReminderPeriodRelativeTo} from '@/types/IReminderPeriodRelativeTo'
-import {useDebounceFn} from '@vueuse/core'
+import {type IReminderPeriodRelativeTo, REMINDER_PERIOD_RELATIVE_TO_TYPES} from '@/types/IReminderPeriodRelativeTo'
 
 const {
 	modelValue,
@@ -123,7 +122,7 @@ function updateData() {
 	reminder.value.relativeTo = period.value.relativeTo
 	reminder.value.reminder = null
 
-	useDebounceFn(() => emit('update:modelValue', reminder.value), 1000)
+	emit('update:modelValue', reminder.value)
 }
 </script>
 

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

@@ -30,7 +30,7 @@
 					<router-link
 						v-if="showProject && typeof project !== 'undefined'"
 						v-tooltip="$t('task.detail.belongsToProject', {project: project.title})"
-						:to="{ name: 'project.list', params: { projectId: task.projectId } }"
+						:to="{ name: 'project.index', params: { projectId: task.projectId } }"
 						class="task-project mr-1"
 						:class="{'mr-2': task.hexColor !== ''}"
 					>
@@ -111,7 +111,7 @@
 						<icon icon="align-left" />
 					</span>
 					<span
-						v-if="task.repeatAfter.amount > 0"
+						v-if="task.repeatAfter.amount > 0 || (task.repeatAfter.amount === 0 && task.repeatMode === TASK_REPEAT_MODES.REPEAT_MODE_MONTH)"
 						class="project-task-icon"
 					>
 						<icon icon="history" />
@@ -136,7 +136,7 @@
 			<router-link
 				v-if="showProjectSeparately"
 				v-tooltip="$t('task.detail.belongsToProject', {project: project.title})"
-				:to="{ name: 'project.list', params: { projectId: task.projectId } }"
+				:to="{ name: 'project.index', params: { projectId: task.projectId } }"
 				class="task-project"
 			>
 				{{ project.title }}
@@ -207,6 +207,7 @@ import {useIntervalFn} from '@vueuse/core'
 import {playPopSound} from '@/helpers/playPop'
 import {useAuthStore} from '@/stores/auth'
 import {isEditorContentEmpty} from '@/helpers/editorContentEmpty'
+import {TASK_REPEAT_MODES} from '@/types/IRepeatMode'
 
 const {
 	theTask,

frontend/src/composables/useAutoHeightTextarea.ts

@@ -6,6 +6,7 @@ import {debouncedWatch, tryOnMounted, useWindowSize, type MaybeRef} from '@vueus
 export function useAutoHeightTextarea(value: MaybeRef<string>) {
 	const textarea = ref<HTMLTextAreaElement | null>(null)
 	const minHeight = ref(0)
+	const height = ref('')
 
 	// adapted from https://github.com/LeaVerou/stretchy/blob/47f5f065c733029acccb755cae793009645809e2/src/stretchy.js#L34
 	function resize(textareaEl: HTMLTextAreaElement | null) {
@@ -19,18 +20,17 @@ export function useAutoHeightTextarea(value: MaybeRef<string>) {
 			textareaEl.value = textareaEl.placeholder
 		}
 
-		const cs = getComputedStyle(textareaEl)
+		// const cs = getComputedStyle(textareaEl)
 
 		textareaEl.style.minHeight = ''
 		textareaEl.style.height = '0'
-		const offset = textareaEl.offsetHeight - parseFloat(cs.paddingTop) - parseFloat(cs.paddingBottom)
-		const height = textareaEl.scrollHeight + offset + 'px'
+		height.value = textareaEl.scrollHeight + 'px'
 
-		textareaEl.style.height = height
+		textareaEl.style.height = height.value
 
 		// calculate min-height for the first time
 		if (!minHeight.value) {
-			minHeight.value = parseFloat(height)
+			minHeight.value = parseFloat(height.value)
 		}
 
 		textareaEl.style.minHeight = minHeight.value.toString()
@@ -68,5 +68,8 @@ export function useAutoHeightTextarea(value: MaybeRef<string>) {
 		},
 	)
 
-	return textarea
+	return {
+		textarea,
+		height,
+	}
 }

frontend/src/composables/useRouteWithModal.ts

@@ -1,12 +1,14 @@
-import {computed, shallowRef, watchEffect, h, type VNode} from 'vue'
+import {computed, h, shallowRef, type VNode, watchEffect} from 'vue'
 import {useRoute, useRouter} from 'vue-router'
 import {useBaseStore} from '@/stores/base'
+import {useProjectStore} from '@/stores/projects'
 
 export function useRouteWithModal() {
 	const router = useRouter()
 	const route = useRoute()
 	const backdropView = computed(() => route.fullPath && window.history.state.backdropView)
 	const baseStore = useBaseStore()
+	const projectStore = useProjectStore()
 
 	const routeWithModal = computed(() => {
 		return backdropView.value
@@ -29,7 +31,7 @@ export function useRouteWithModal() {
 			if (routePropsOption === true) {
 				routeProps = route.params
 			} else {
-				if(typeof routePropsOption === 'function') {
+				if (typeof routePropsOption === 'function') {
 					routeProps = routePropsOption(route)
 				} else {
 					routeProps = routePropsOption
@@ -52,7 +54,7 @@ export function useRouteWithModal() {
 		}
 		currentModal.value = h(component, routeProps)
 	})
-	
+
 	const historyState = computed(() => route.fullPath && window.history.state)
 
 	function closeModal() {
@@ -60,12 +62,23 @@ export function useRouteWithModal() {
 		// If the current project was changed because the user moved the currently opened task while coming from kanban,
 		// we need to reflect that change in the route when they close the task modal.
 		// The last route is only available as resolved string, therefore we need to use a regex for matching here
-		const kanbanRouteMatch = new RegExp('\\/projects\\/\\d+\\/kanban', 'g')
-		const kanbanRouter = {name: 'project.kanban', params: {projectId: baseStore.currentProject?.id}}
-		if (kanbanRouteMatch.test(historyState.value.back)
-			&& baseStore.currentProject
-			&& historyState.value.back !== router.resolve(kanbanRouter).fullPath) {
-			router.push(kanbanRouter)
+		const routeMatch = new RegExp('\\/projects\\/\\d+\\/(\\d+)', 'g')
+		const match = routeMatch.exec(historyState.value.back)
+		if (match !== null && baseStore.currentProject) {
+			let viewId: string | number = match[1]
+
+			if (!viewId) {
+				viewId = projectStore.projects[baseStore.currentProject?.id].views[0]?.id
+			}
+
+			const newRoute = {
+				name: 'project.view',
+				params: {
+					projectId: baseStore.currentProject?.id,
+					viewId,
+				},
+			}
+			router.push(newRoute)
 			return
 		}
 

frontend/src/composables/useTaskList.ts

@@ -1,11 +1,13 @@
 import {ref, shallowReactive, watch, computed, type ComputedGetter} from 'vue'
-import {useRoute} from 'vue-router'
+import {useRoute, useRouter} from 'vue-router'
 import {useRouteQuery} from '@vueuse/router'
 
-import TaskCollectionService from '@/services/taskCollection'
+import TaskCollectionService, {getDefaultTaskFilterParams, type TaskFilterParams} from '@/services/taskCollection'
 import type {ITask} from '@/modelTypes/ITask'
 import {error} from '@/message'
 import type {IProject} from '@/modelTypes/IProject'
+import {useAuthStore} from '@/stores/auth'
+import type {IProjectView} from '@/modelTypes/IProjectView'
 
 export type Order = 'asc' | 'desc' | 'none'
 
@@ -24,16 +26,6 @@ export interface SortBy {
 	done_at?: Order,
 }
 
-// FIXME: merge with DEFAULT_PARAMS in filters.vue
-export const getDefaultParams = () => ({
-	sort_by: ['position', 'id'],
-	order_by: ['asc', 'desc'],
-	filter_by: ['done'],
-	filter_value: ['false'],
-	filter_comparator: ['equals'],
-	filter_concat: 'and',
-})
-
 const SORT_BY_DEFAULT: SortBy = {
 	id: 'desc',
 }
@@ -63,13 +55,17 @@ const SORT_BY_DEFAULT: SortBy = {
 /**
  * This mixin provides a base set of methods and properties to get tasks.
  */
-export function useTaskList(projectIdGetter: ComputedGetter<IProject['id']>, sortByDefault: SortBy = SORT_BY_DEFAULT) {
+export function useTaskList(
+	projectIdGetter: ComputedGetter<IProject['id']>,
+	projectViewIdGetter: ComputedGetter<IProjectView['id']>,
+	sortByDefault: SortBy = SORT_BY_DEFAULT,
+) {
 	
 	const projectId = computed(() => projectIdGetter())
+	const projectViewId = computed(() => projectViewIdGetter())
 	
-	const params = ref({...getDefaultParams()})
+	const params = ref<TaskFilterParams>({...getDefaultTaskFilterParams()})
 	
-	const search = ref('')
 	const page = useRouteQuery('page', '1', { transform: Number })
 
 	const sortBy = ref({ ...sortByDefault })
@@ -77,10 +73,6 @@ export function useTaskList(projectIdGetter: ComputedGetter<IProject['id']>, sor
 	const allParams = computed(() => {
 		const loadParams = {...params.value}
 
-		if (search.value !== '') {
-			loadParams.s = search.value
-		}
-
 		return formatSortOrder(sortBy.value, loadParams)
 	})
 	
@@ -91,11 +83,19 @@ export function useTaskList(projectIdGetter: ComputedGetter<IProject['id']>, sor
 			page.value = 1
 		},
 	)
-
+	
+	const authStore = useAuthStore()
+	
 	const getAllTasksParams = computed(() => {
 		return [
-			{projectId: projectId.value},
-			allParams.value,
+			{
+				projectId: projectId.value,
+				viewId: projectViewId.value,
+			},
+			{
+				...allParams.value,
+				filter_timezone: authStore.settings.timezone,
+			},
 			page.value,
 		]
 	})
@@ -117,16 +117,38 @@ export function useTaskList(projectIdGetter: ComputedGetter<IProject['id']>, sor
 
 	const route = useRoute()
 	watch(() => route.query, (query) => {
-		const { page: pageQueryValue, search: searchQuery } = query
-		if (searchQuery !== undefined) {
-			search.value = searchQuery as string
+		const { 
+			page: pageQueryValue,
+			s,
+			filter,
+		} = query
+		if (s !== undefined) {
+			params.value.s = s as string
 		}
 		if (pageQueryValue !== undefined) {
 			page.value = Number(pageQueryValue)
 		}
-
+		if (filter !== undefined) {
+			params.value.filter = filter
+		}
 	}, { immediate: true })
 
+	const router = useRouter()
+	watch(
+		() => [page.value, params.value.filter, params.value.s],
+		() => {
+			router.replace({
+				name: route.name,
+				params: route.params,
+				query: {
+					page: page.value,
+					filter: params.value.filter || undefined,
+					s: params.value.s || undefined,
+				},
+			})
+		},
+		{ deep: true },
+	)
 
 	// Only listen for query path changes
 	watch(() => JSON.stringify(getAllTasksParams.value), (newParams, oldParams) => {
@@ -143,7 +165,6 @@ export function useTaskList(projectIdGetter: ComputedGetter<IProject['id']>, sor
 		totalPages,
 		currentPage: page,
 		loadTasks,
-		searchTerm: search,
 		params,
 		sortByParam: sortBy,
 	}