added .jpeg to support photo viewing from iOS uploads

Reviewed-on: vikunja/frontend#3400
Reviewed-by: konrad <k@knt.li>
Co-authored-by: primeapple <toni.mueller.web@mailbox.org>
Co-committed-by: primeapple <toni.mueller.web@mailbox.org>

.drone.yml

@@ -15,6 +15,7 @@ trigger:
 services:
   - name: api
     image: vikunja/api:unstable
+    pull: always
     environment:
       VIKUNJA_SERVICE_TESTINGTOKEN: averyLongSecretToSe33dtheDB
       VIKUNJA_LOG_LEVEL: DEBUG
@@ -41,11 +42,12 @@ steps:
 #        - .cache
 
   - name: dependencies
-    image: node:18-alpine
+    image: node:20-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
       CYPRESS_CACHE_FOLDER: .cache/cypress
+      PUPPETEER_SKIP_DOWNLOAD: true
     commands:
       - corepack enable && pnpm config set store-dir .cache/pnpm
       - pnpm install --fetch-timeout 100000
@@ -53,7 +55,7 @@ steps:
 #      - restore-cache
 
   - name: lint
-    image: node:18-alpine
+    image: node:20-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
@@ -64,7 +66,7 @@ steps:
       - dependencies
 
   - name: build-prod
-    image: node:18-alpine
+    image: node:20-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
@@ -75,7 +77,7 @@ steps:
       - dependencies
 
   - name: test-unit
-    image: node:18-alpine
+    image: node:20-alpine
     pull: always
     commands:
       - corepack enable && pnpm config set store-dir .cache/pnpm
@@ -85,7 +87,7 @@ steps:
 
   - name: typecheck
     failure: ignore
-    image: node:18-alpine
+    image: node:20-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
@@ -135,8 +137,9 @@ steps:
 #      - dependencies
 
   - name: deploy-preview
-    image: node:18-alpine
+    image: williamjackson/netlify-cli
     pull: always
+    user: root # The rest runs as root and thus the permissions wouldn't work
     environment:
       NETLIFY_AUTH_TOKEN:
         from_secret: netlify_auth_token
@@ -199,7 +202,7 @@ steps:
 #        - .cache
 
   - name: build
-    image: node:18-alpine
+    image: node:20-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
@@ -276,7 +279,7 @@ steps:
 #        - .cache
 
   - name: build
-    image: node:18-alpine
+    image: node:20-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
@@ -521,6 +524,6 @@ steps:
         from_secret: crowdin_key
 ---
 kind: signature
-hmac: 971875b90c7bb1649d1b00d022d0b594ba9b68f927bf8f0dbe840190816d676b
+hmac: 511c2a090e9efd4c942980d971204adb6321540bb01c92409dd9bf8463b7f6f4
 
 ...

.npmrc

@@ -1,2 +1,14 @@
+fetch-timeout=100000
+
+# pnpm settings
+# The following settings prepare for the new default value of pnpm 8
+# they can be removed directly after having moved to pnpm 8
 auto-install-peers=true
-fetch-timeout=100000
+dedupe-peer-dependents=true
+resolve-peers-from-workspace-root=true
+save-workspace-protocol=rolling
+resolution-mode=lowest-direct
+publishConfig.linkDirectory=true
+
+# remove some time after having moved to pnpm 8
+use-lockfile-v6=true

.nvmrc

@@ -1 +1 @@
-18.14.2
+18.16.0

.vscode.example/extensions.json

@@ -8,6 +8,7 @@
     "lokalise.i18n-ally",
     "mgmcdermott.vscode-language-babel",
     "mikestead.dotenv",
-    "Syler.sass-indented"
+    "Syler.sass-indented",
+    "zixuanchen.vitest-explorer"
   ]
 }

CHANGELOG.md

@@ -9,6 +9,279 @@ All releases can be found on https://code.vikunja.io/frontend/releases.
 
 The releases aim at the api versions which is why there are missing versions.
 
+## [0.20.5] - 2023-03-12
+
+### Bug Fixes
+
+* *(docker)* Add cap_net_bind to the nginx binary in the docker container
+* *(docker)* Revert unprivileged user
+
+### Dependencies
+
+* *(deps)* Update dependency sass to v1.59.2
+* *(deps)* Update dependency eslint to v8.36.0
+
+## [0.20.4] - 2023-03-10
+
+### Bug Fixes
+
+* *(base)* Use Build Time Base Path
+* *(docker)* Cross compilation with buildx
+* *(docker)* Default api url
+* *(docker)* Make sure the service worker and webmanifest are never cached
+* *(filter)* Validate title before creating or editing a filter
+* *(filter)* Don't allow marking a filter as favorite
+* *(i18n)* Load language files before doing anything else (#3218)
+* *(keyboard-shortcuts)* Use card prop
+* *(list)* Make sure favorite lists are not duplicated in the menu when renaming them
+* *(menu)* Don't show drag handle for not draggable menu items
+* *(postcss-preset-env)* Client side polyfills (#3051)
+* *(quick actions)* Don't throw an error message when selecting the last items with the arrow keys
+* *(quick actions)* Hide edges of last entry on hover
+* *(quick add magic)* Correctly parse "next {weekday}" on the beginning of the text
+* *(quick-actions)* Nothing happening on team click (#3186)
+* *(table view)* Correctly load sort order from local storage
+* *(task)* Allow clicking on the whole task to open the task detail view
+* *(tests)* Only look in src for tests
+* Make sure global error handler handles unrejected promises correctly ([4576da0](4576da0dd394ee68801b1dc424c9550896d63737))
+* Use Build Time Base Path (#2964) ([6572f75](6572f75e5d111f7f2dd06e8c2ad0e0d16091fca6))
+* Always show update popup on top ([7cbf0ac](7cbf0acac503c508a44e0491ae51e6d5749dfa04))
+* Button styles ([d40729c](d40729cbe70b760bcc64d56130a410b05ef9d3dc))
+* Stop revealing elements on hover if hover is not supported (#3191) ([7b6f76d](7b6f76d1b4698d0d6c6889aaab3f1cdad80469f8))
+* Sync sidebar transition with `<main>` (#3200) ([0f97ba6](0f97ba6ec904226ed91cd3ade8223e2959e9207a))
+* Collapse menu on mobile when path changes ([1b06112](1b06112db4ba5ad4144b5868dd04e954be1d77f7))
+* I18ze a string (#3210) ([b4dd23b](b4dd23b85d909f7e629e953f1d8543ccbf963a1c))
+
+
+### Dependencies
+
+* *(deps)* Update sentry-javascript monorepo to v7.33.0 (#3004)
+* *(deps)* Update dependency axios to v1.2.4 (#3005)
+* *(deps)* Update pnpm to v7.26.0 (#3002)
+* *(deps)* Update dependency cypress to v12.4.0 (#3006)
+* *(deps)* Update dependency @infectoone/vue-ganttastic to v2.1.4 (#3009)
+* *(deps)* Update dependency vitest to v0.28.2 (#3008)
+* *(deps)* Update dependency rollup to v3.11.0 (#3013)
+* *(deps)* Update dependency @vitejs/plugin-legacy to v3.0.2 (#3012)
+* *(deps)* Update dependency axios to v1.2.5
+* *(deps)* Update sentry-javascript monorepo to v7.34.0
+* *(deps)* Update pnpm to v7.26.1
+* *(deps)* Update dependency @vue/test-utils to v2.2.8
+* *(deps)* Update dependency vitest to v0.28.3 (#3019)
+* *(deps)* Update dependency cypress to v12.4.1
+* *(deps)* Update dependency rollup to v3.12.0
+* *(deps)* Update dependency esbuild to v0.17.5
+* *(deps)* Update dependency axios to v1.2.6
+* *(deps)* Update dependency @vueuse/core to v9.12.0
+* *(deps)* Update pnpm to v7.26.2
+* *(deps)* Update dependency eslint to v8.33.0
+* *(deps)* Update dependency netlify-cli to v12.10.0
+* *(deps)* Update dependency happy-dom to v8.2.0
+* *(deps)* Update dependency caniuse-lite to v1.0.30001449
+* *(deps)* Update dependency typescript to v4.9.5
+* *(deps)* Update typescript-eslint monorepo to v5.50.0
+* *(deps)* Update dependency axios to v1.3.0 (#3036)
+* *(deps)* Update dependency sass to v1.58.0
+* *(deps)* Update dependency cypress to v12.5.0
+* *(deps)* Update pnpm to v7.26.3
+* *(deps)* Update dependency rollup to v3.12.1
+* *(deps)* Update sentry-javascript monorepo to v7.35.0 (#3041)
+* *(deps)* Update dependency pinia to v2.0.30 (#3042)
+* *(deps)* Update dependency @vue/test-utils to v2.2.9
+* *(deps)* Update dependency axios to v1.3.1
+* *(deps)* Update dependency vue to v3.2.47
+* *(deps)* Update dependency vite to v4.1.0
+* *(deps)* Update dependency postcss-preset-env to v8 (#3000)
+* *(deps)* Update dependency @vitejs/plugin-legacy to v4
+* *(deps)* Update dependency @vitejs/plugin-legacy to v4.0.1
+* *(deps)* Update sentry-javascript monorepo to v7.36.0
+* *(deps)* Update dependency vite to v4.1.1
+* *(deps)* Update dependency cypress to v12.5.1
+* *(deps)* Update dependency @vue/test-utils to v2.2.10
+* *(deps)* Update dependency vitest to v0.28.4
+* *(deps)* Update dependency rollup to v3.13.0
+* *(deps)* Update dependency axios to v1.3.2
+* *(deps)* Update dependency rollup to v3.14.0
+* *(deps)* Update dependency @types/node to v18.11.19
+* *(deps)* Update dependency @histoire/plugin-screenshot to v0.13.0
+* *(deps)* Update dependency histoire to v0.13.0
+* *(deps)* Update caniuse-and-related
+* *(deps)* Update dependency @histoire/plugin-vue to v0.13.0
+* *(deps)* Update dependency happy-dom to v8.2.6
+* *(deps)* Update typescript-eslint monorepo to v5.51.0
+* *(deps)* Update dependency esbuild to v0.17.6
+* *(deps)* Update dependency @cypress/vue to v5.0.4
+* *(deps)* Update dependency @types/node to v18.13.0
+* *(deps)* Update dependency vite-plugin-pwa to v0.14.2
+* *(deps)* Update font awesome to v6.3.0
+* *(deps)* Update pnpm to v7.27.0
+* *(deps)* Update dependency @histoire/plugin-screenshot to v0.13.1
+* *(deps)* Update dependency @histoire/plugin-vue to v0.13.1
+* *(deps)* Update dependency vite-plugin-pwa to v0.14.3
+* *(deps)* Update dependency histoire to v0.13.1
+* *(deps)* Update dependency @histoire/plugin-screenshot to v0.13.2
+* *(deps)* Update dependency @histoire/plugin-vue to v0.13.2
+* *(deps)* Update dependency histoire to v0.13.2
+* *(deps)* Update dependency @intlify/unplugin-vue-i18n to v0.8.2
+* *(deps)* Update sentry-javascript monorepo to v7.37.0
+* *(deps)* Update dependency esbuild to v0.17.7
+* *(deps)* Update dependency rollup to v3.15.0
+* *(deps)* Create a group for all histoire dependencies
+* *(deps)* Update dependency @histoire/plugin-vue to v0.14.0
+* *(deps)* Update dependency @histoire/plugin-screenshot to v0.14.0
+* *(deps)* Update dependency @histoire/plugin-vue to v0.14.0
+* *(deps)* Update dependency histoire to v0.14.0
+* *(deps)* Update sentry-javascript monorepo to v7.37.1
+* *(deps)* Update dependency histoire to v0.14.2
+* *(deps)* Include histoire main package in histoire renovate group
+* *(deps)* Histoire renovate group
+* *(deps)* Update dependency eslint to v8.34.0
+* *(deps)* Update histoire to v0.14.2
+* *(deps)* Update dependency vite-plugin-pwa to v0.14.4
+* *(deps)* Update dependency esbuild to v0.17.8
+* *(deps)* Update dependency netlify-cli to v12.12.0
+* *(deps)* Update dependency caniuse-lite to v1.0.30001451
+* *(deps)* Update dependency vite-plugin-inject-preload to v1.3.0
+* *(deps)* Update dependency vitest to v0.28.5
+* *(deps)* Update sentry-javascript monorepo to v7.37.2
+* *(deps)* Update dependency dompurify to v3 (#3107)
+* *(deps)* Update typescript-eslint monorepo to v5.52.0
+* *(deps)* Update dependency axios to v1.3.3
+* *(deps)* Update dependency start-server-and-test to v1.15.4 (#3109)
+* *(deps)* Update dependency sass to v1.58.1
+* *(deps)* Update dependency vue-flatpickr-component to v11.0.2 (#3112)
+* *(deps)* Update dependency @kyvg/vue3-notification to v2.9.0 (#3113)
+* *(deps)* Update histoire to v0.15.1
+* *(deps)* Update histoire to v0.15.3
+* *(deps)* Update dependency vue-tsc to v1.1.0
+* *(deps)* Pin node.js to 18.14.0
+* *(deps)* Update dependency cypress to v12.6.0 (#3115)
+* *(deps)* Update histoire to v0.15.4
+* *(deps)* Update dependency vue-tsc to v1.1.2
+* *(deps)* Update dependency sass to v1.58.2
+* *(deps)* Update dependency ufo to v1.1.0
+* *(deps)* Update node.js to v18.14.1
+* *(deps)* Update dependency vite to v4.1.2
+* *(deps)* Update sentry-javascript monorepo to v7.38.0
+* *(deps)* Update dependency rollup to v3.16.0
+* *(deps)* Update histoire to v0.15.7
+* *(deps)* Update dependency blurhash to v2.0.5
+* *(deps)* Update dependency @cypress/vite-dev-server to v5.0.3
+* *(deps)* Update dependency @types/node to v18.14.0
+* *(deps)* Update histoire to v0.15.8
+* *(deps)* Update dependency @vueuse/core to v9.13.0
+* *(deps)* Update dependency rollup to v3.17.0
+* *(deps)* Update pnpm to v7.27.1
+* *(deps)* Update dependency vue-tsc to v1.1.3
+* *(deps)* Update dependency sass to v1.58.3
+* *(deps)* Update dependency rollup to v3.17.1
+* *(deps)* Update dependency esbuild to v0.17.9
+* *(deps)* Update dependency vite to v4.1.3
+* *(deps)* Update dependency @vue/test-utils to v2.3.0
+* *(deps)* Update dependency caniuse-lite to v1.0.30001457
+* *(deps)* Update dependency codemirror to v5.65.12
+* *(deps)* Update dependency pinia to v2.0.31
+* *(deps)* Update dependency vue-tsc to v1.1.4
+* *(deps)* Update dependency rollup to v3.17.2
+* *(deps)* Update dependency happy-dom to v8.6.0
+* *(deps)* Update dependency netlify-cli to v12.13.2
+* *(deps)* Update dependency esbuild to v0.17.10
+* *(deps)* Update typescript-eslint monorepo to v5.53.0
+* *(deps)* Update dependency vue-tsc to v1.1.5
+* *(deps)* Update dependency pinia to v2.0.32
+* *(deps)* Update node.js to v18.14.2
+* *(deps)* Update dependency vite to v4.1.4
+* *(deps)* Update dependency vue-tsc to v1.1.7
+* *(deps)* Update dependency axios to v1.3.4
+* *(deps)* Update dependency @types/node to v18.14.1
+* *(deps)* Update dependency @cypress/vite-dev-server to v5.0.4
+* *(deps)* Update dependency cypress to v12.7.0
+* *(deps)* Update dependency vue-tsc to v1.2.0
+* *(deps)* Update dependency vitest to v0.29.1
+* *(deps)* Update pnpm to v7.28.0
+* *(deps)* Update dependency eslint to v8.35.0
+* *(deps)* Update dependency rollup to v3.17.3
+* *(deps)* Update dependency netlify-cli to v13
+* *(deps)* Update dependency happy-dom to v8.9.0
+* *(deps)* Update dependency caniuse-lite to v1.0.30001458
+* *(deps)* Update dependency start-server-and-test to v1.15.5
+* *(deps)* Update dependency start-server-and-test to v2
+* *(deps)* Update dependency @types/node to v18.14.2
+* *(deps)* Update sentry-javascript monorepo to v7.39.0
+* *(deps)* Update typescript-eslint monorepo to v5.54.0
+* *(deps)* Update dependency ufo to v1.1.1
+* *(deps)* Update dependency vitest to v0.29.2
+* *(deps)* Update dependency rollup to v3.18.0
+* *(deps)* Update dependency dompurify to v3.0.1
+* *(deps)* Update sentry-javascript monorepo to v7.40.0
+* *(deps)* Update dependency @types/node to v18.14.4
+* *(deps)* Update dependency @types/node to v18.14.5
+* *(deps)* Update dependency @types/node to v18.14.6
+* *(deps)* Update dependency esbuild to v0.17.11
+* *(deps)* Update dependency netlify-cli to v13.0.1
+* *(deps)* Update dependency caniuse-lite to v1.0.30001460
+* *(deps)* Update pnpm to v7.29.0
+* *(deps)* Update sentry-javascript monorepo to v7.41.0
+* *(deps)* Update typescript-eslint monorepo to v5.54.1
+* *(deps)* Update dependency pinia to v2.0.33
+* *(deps)* Update node.js to v18.15.0
+* *(deps)* Update dependency @intlify/unplugin-vue-i18n to v0.9.0
+* *(deps)* Update pnpm to v7.29.1
+* *(deps)* Update dependency @vue/test-utils to v2.3.1
+* *(deps)* Update dependency @intlify/unplugin-vue-i18n to v0.9.1
+* *(deps)* Update sentry-javascript monorepo to v7.42.0
+* *(deps)* Update dependency rollup to v3.19.0
+* *(deps)* Update dependency vite-plugin-inject-preload to v1.3.1
+* *(deps)* Update dependency @types/node to v18.15.0
+* *(deps)* Update dependency autoprefixer to v10.4.14
+* *(deps)* Update dependency rollup to v3.19.1
+
+### Features
+
+* *(config)* Support Setting Base Path in .env
+* Use v-show for navigation buttons ([7ed1a37](7ed1a37de53cb8c15994e9524a52080170db5950))
+* Unindent settings page (#2996) ([13a39be](13a39be3de4d0f7e0f6be9c20e0464e86b87c676))
+* Small content auth improvements (#2998) ([2be7847](2be784766f54810f8969e48291ce9181f2854a5b))
+* Move update from navigation to app ([3db5ea4](3db5ea45d768d10458eaab0f5ee9dad0df2996e4))
+* Improve naming and styles ([eaeddda](eaeddda4e468c2040862d18c9b2d37a1c0ba099e))
+* Use klona instead of lodash.clonedeep (#3073) ([7b96397](7b96397e3bfa43a393ca84439069290bc4c8a5c8))
+* Refactor to composable ([c502f9b](c502f9b840ee2d65193aa4ef29c7f260b49db0d2))
+* Header improvements ([e8db2c2](e8db2c2b458bcae592609d5a5bc3f1b333651b25))
+* Persistent menuActive state with Local Storage (#3011) ([e3dd4ef](e3dd4ef78ac818add138d0323bf65abe8a4caa29))
+* Fix calculation of token invalidation (#3077) ([d6b55c7](d6b55c757067413bbc34acd48af9fb553f36db8a))
+* Use renovate js-app as preset (#3087) ([97c8970](97c8970dd60b2ba1e894ca0039524c8f6a5cd5df))
+* Improve recommended vscode settings ([e0f0699](e0f06999beb0a9fb5da817323744307401e85e47))
+
+
+### Miscellaneous Tasks
+
+* *(refactor)* Improve `stores/config` types (#3190)
+* *(services)* Add examples for some functions
+* *(services)* Let `getAll`: always return `Model[]`
+* Move class name to top ([c6ed925](c6ed9254247efeb43e0763e095b145d6ec1965e1))
+* Simplify error handling for login and OpenId Auth ([e67088f](e67088fdb7bd3b24cea6ee37851ef45f1fb7bdad))
+* Simplify getting the error text from an exception ([9adf1ab](9adf1aba895a02f416148ddf8b6925689d6e2687))
+* Typo ([81a4f2d](81a4f2d9775716bc0056348664fc24185af040d4))
+* Update funding links ([7cb0cd2](7cb0cd293d6d277172eccf2558a62427bc86dfe6))
+* Update funding links ([b26ea45](b26ea45fe0d1d6f5f070ef42a5d68aa6db8e6b70))
+* Remove minimist dependency (not used anywhere) ([f697640](f697640636466e8f035c7d31597ee589379fa017))
+* Remove sponsor ([fa0e46a](fa0e46a3991ab423c9364b65439d9e8e5a28cb7b))
+* Histoire add logo link ([af4a039](af4a039502b29e9e7e21cf30d44715c7af056c15))
+* Improve `@/message` `action` type (#3209) ([0eb78e3](0eb78e32f994e7032725e38d564320a5a04cbf2a))
+* Remove an unused duplicate key ([9db3aed](9db3aedde9566fb94717e1dd66a21abdbda6e84a))
+
+
+### Other
+
+* *(other)* Add Ipv6 support to nginx (#100)
+* *(other)* Added ipv6 control script
+* *(other)* Disable listening on IPv6 ports when IPv6 is not supported (#102)
+* *(other)* Docker refactoring (#3018)
+* *(other)* Persist menuActive state in Local Storage
+* *(other)* Refactor to only used local storage value when on desktop viewport widths
+* *(other)* Solve for resize()
+* *(other)* [skip ci] Updated translations via Crowdin
+
 ## [0.20.3] - 2023-01-24
 
 ### Bug Fixes

Dockerfile

@@ -3,7 +3,7 @@
 #  │─││ │││  │ │
 #  ┘─┘┘─┘┘┘─┘┘─┘
 
-FROM --platform=$BUILDPLATFORM node:18-alpine AS builder
+FROM --platform=$BUILDPLATFORM node:20-alpine AS builder
 
 WORKDIR /build
 
@@ -13,6 +13,7 @@ ENV PNPM_CACHE_FOLDER .cache/pnpm/
 
 COPY package.json ./
 COPY pnpm-lock.yaml ./
+COPY patches /build/patches
 
 RUN if [ "$USE_RELEASE" != true ]; then \
       # https://pnpm.io/installation#using-corepack
@@ -66,5 +67,3 @@ RUN chmod 0755 /docker-entrypoint.d/*.sh /etc/nginx/templates && \
     chmod -R 0644 /etc/nginx/nginx.conf && \
     chown -R nginx:nginx ./ /etc/nginx/conf.d /etc/nginx/templates && \
     rm -f /docker-entrypoint.d/10-listen-on-ipv6-by-default.sh
-# unprivileged user
-USER nginx

README.md

@@ -4,7 +4,7 @@
 
 [![Build Status](https://drone.kolaente.de/api/badges/vikunja/frontend/status.svg)](https://drone.kolaente.de/vikunja/frontend)
 [![License: AGPL v3](https://img.shields.io/badge/License-AGPL%20v3-blue.svg)](LICENSE)
-[![Download](https://img.shields.io/badge/download-v0.20.3-brightgreen.svg)](https://dl.vikunja.io)
+[![Download](https://img.shields.io/badge/download-v0.20.5-brightgreen.svg)](https://dl.vikunja.io)
 [![Translation](https://badges.crowdin.net/vikunja/localized.svg)](https://crowdin.com/project/vikunja)
 
 This is the web frontend for Vikunja, written in Vue.js.

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

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

cypress/e2e/list/prepareLists.ts

@@ -1,19 +0,0 @@
-import {ListFactory} from '../../factories/list'
-import {NamespaceFactory} from '../../factories/namespace'
-import {TaskFactory} from '../../factories/task'
-
-export function createLists() {
-	NamespaceFactory.create(1)
-	const lists = ListFactory.create(1, {
-		title: 'First List'
-	})
-	TaskFactory.truncate()
-	return lists
-}
-
-export function prepareLists(setLists = (...args: any[]) => {}) {
-	beforeEach(() => {
-		const lists = createLists()
-		setLists(lists)
-	})
-}

cypress/e2e/misc/editor.spec.ts

@@ -1,18 +1,20 @@
 import {createFakeUserAndLogin} from '../../support/authenticateUser'
 
 import {TaskFactory} from '../../factories/task'
-import {ListFactory} from '../../factories/list'
+import {ProjectFactory} from '../../factories/project'
 import {NamespaceFactory} from '../../factories/namespace'
-import {UserListFactory} from '../../factories/users_list'
+import {UserProjectFactory} from '../../factories/users_project'
+import {BucketFactory} from '../../factories/bucket'
 
 describe('Editor', () => {
 	createFakeUserAndLogin()
 	
 	beforeEach(() => {
 		NamespaceFactory.create(1)
-		ListFactory.create(1)
+		ProjectFactory.create(1)
+		BucketFactory.create(1)
 		TaskFactory.truncate()
-		UserListFactory.truncate()
+		UserProjectFactory.truncate()
 	})
 
 	it('Has a preview with checkable checkboxes', () => {
@@ -24,6 +26,7 @@ describe('Editor', () => {
 * [ ] Checklist
 * [x] Checklist checked
 `,
+			bucket_id: 1,
 		})
 
 		cy.visit(`/tasks/${tasks[0].id}`)

cypress/e2e/project/namespaces.spec.ts

@@ -1,6 +1,6 @@
 import {createFakeUserAndLogin} from '../../support/authenticateUser'
 
-import {ListFactory} from '../../factories/list'
+import {ProjectFactory} from '../../factories/project'
 import {NamespaceFactory} from '../../factories/namespace'
 
 describe('Namepaces', () => {
@@ -10,7 +10,7 @@ describe('Namepaces', () => {
 
 	beforeEach(() => {
 		namespaces = NamespaceFactory.create(1)
-		ListFactory.create(1)
+		ProjectFactory.create(1)
 	})
 
 	it('Should be all there', () => {
@@ -99,17 +99,17 @@ describe('Namepaces', () => {
 			.should('not.contain', newNamespaces[0].title)
 	})
 
-	it('Should not show archived lists & namespaces if the filter is not checked', () => {
+	it('Should not show archived projects & namespaces if the filter is not checked', () => {
 		const n = NamespaceFactory.create(1, {
 			id: 2,
 			is_archived: true,
 		}, false)
-		ListFactory.create(1, {
+		ProjectFactory.create(1, {
 			id: 2,
 			namespace_id: n[0].id,
 		}, false)
 
-		ListFactory.create(1, {
+		ProjectFactory.create(1, {
 			id: 3,
 			is_archived: true,
 		}, false)
@@ -120,7 +120,7 @@ describe('Namepaces', () => {
 			.should('not.contain', 'Archived')
 
 		// Show archived
-		cy.get('[data-cy="show-archived-check"] label.check span')
+		cy.get('[data-cy="show-archived-check"] .fancycheckbox__content')
 			.should('be.visible')
 			.click()
 		cy.get('[data-cy="show-archived-check"] input')
@@ -129,7 +129,7 @@ describe('Namepaces', () => {
 			.should('contain', 'Archived')
 
 		// Don't show archived
-		cy.get('[data-cy="show-archived-check"] label.check span')
+		cy.get('[data-cy="show-archived-check"] .fancycheckbox__content')
 			.should('be.visible')
 			.click()
 		cy.get('[data-cy="show-archived-check"] input')

cypress/e2e/project/prepareProjects.ts

@@ -0,0 +1,19 @@
+import {ProjectFactory} from '../../factories/project'
+import {NamespaceFactory} from '../../factories/namespace'
+import {TaskFactory} from '../../factories/task'
+
+export function createProjects() {
+	NamespaceFactory.create(1)
+	const projects = ProjectFactory.create(1, {
+		title: 'First Project'
+	})
+	TaskFactory.truncate()
+	return projects
+}
+
+export function prepareProjects(setProjects = (...args: any[]) => {}) {
+	beforeEach(() => {
+		const projects = createProjects()
+		setProjects(projects)
+	})
+}

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

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

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

@@ -3,15 +3,15 @@ import {formatISO, format} from 'date-fns'
 import {createFakeUserAndLogin} from '../../support/authenticateUser'
 
 import {TaskFactory} from '../../factories/task'
-import {prepareLists} from './prepareLists'
+import {prepareProjects} from './prepareProjects'
 
-describe('List View Gantt', () => {
+describe('Project View Gantt', () => {
 	createFakeUserAndLogin()
-	prepareLists()
+	prepareProjects()
 
 	it('Hides tasks with no dates', () => {
 		const tasks = TaskFactory.create(1)
-		cy.visit('/lists/1/gantt')
+		cy.visit('/projects/1/gantt')
 
 		cy.get('.g-gantt-rows-container')
 			.should('not.contain', tasks[0].title)
@@ -25,7 +25,7 @@ describe('List View Gantt', () => {
 		nextMonth.setDate(1)
 		nextMonth.setMonth(9)
 
-		cy.visit('/lists/1/gantt')
+		cy.visit('/projects/1/gantt')
 
 		cy.get('.g-timeunits-container')
 			.should('contain', format(now, 'MMMM'))
@@ -38,7 +38,7 @@ describe('List View Gantt', () => {
 			start_date: now.toISOString(),
 			end_date: new Date(new Date(now).setDate(now.getDate() + 4)).toISOString(),
 		})
-		cy.visit('/lists/1/gantt')
+		cy.visit('/projects/1/gantt')
 
 		cy.get('.g-gantt-rows-container')
 			.should('not.be.empty')
@@ -50,7 +50,7 @@ describe('List View Gantt', () => {
 			start_date: null,
 			end_date: null,
 		})
-		cy.visit('/lists/1/gantt')
+		cy.visit('/projects/1/gantt')
 
 		cy.get('.gantt-options .fancycheckbox')
 			.contains('Show tasks which don\'t have dates set')
@@ -69,7 +69,7 @@ describe('List View Gantt', () => {
 			start_date: now.toISOString(),
 			end_date: new Date(new Date(now).setDate(now.getDate() + 4)).toISOString(),
 		})
-		cy.visit('/lists/1/gantt')
+		cy.visit('/projects/1/gantt')
 
 		cy.get('.g-gantt-rows-container .g-gantt-row .g-gantt-row-bars-container div .g-gantt-bar')
 			.first()
@@ -83,9 +83,9 @@ describe('List View Gantt', () => {
 		const now = Date.UTC(2022, 10, 9)
 		cy.clock(now, ['Date'])
 
-		cy.visit('/lists/1/gantt')
+		cy.visit('/projects/1/gantt')
 
-		cy.get('.list-gantt .gantt-options .field .control input.input.form-control')
+		cy.get('.project-gantt .gantt-options .field .control input.input.form-control')
 			.click()
 		cy.get('.flatpickr-calendar .flatpickr-innerContainer .dayContainer .flatpickr-day')
 			.first()
@@ -99,13 +99,13 @@ describe('List View Gantt', () => {
 	})
 
 	it('Should change the date range based on date query parameters', () => {
-		cy.visit('/lists/1/gantt?dateFrom=2022-09-25&dateTo=2022-11-05')
+		cy.visit('/projects/1/gantt?dateFrom=2022-09-25&dateTo=2022-11-05')
 
 		cy.get('.g-timeunits-container')
 			.should('contain', 'September 2022')
 			.should('contain', 'October 2022')
 			.should('contain', 'November 2022')
-		cy.get('.list-gantt .gantt-options .field .control input.input.form-control')
+		cy.get('.project-gantt .gantt-options .field .control input.input.form-control')
 			.should('have.value', '25 Sep 2022 to 5 Nov 2022')
 	})
 
@@ -115,7 +115,7 @@ describe('List View Gantt', () => {
 			start_date: formatISO(now),
 			end_date: formatISO(now.setDate(now.getDate() + 4)),
 		})
-		cy.visit('/lists/1/gantt')
+		cy.visit('/projects/1/gantt')
 
 		cy.get('.gantt-container .g-gantt-chart .g-gantt-row-bars-container .g-gantt-bar')
 			.dblclick()

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

@@ -1,13 +1,13 @@
 import {createFakeUserAndLogin} from '../../support/authenticateUser'
 
 import {BucketFactory} from '../../factories/bucket'
-import {ListFactory} from '../../factories/list'
+import {ProjectFactory} from '../../factories/project'
 import {TaskFactory} from '../../factories/task'
-import {prepareLists} from './prepareLists'
+import {prepareProjects} from './prepareProjects'
 
-describe('List View Kanban', () => {
+describe('Project View Kanban', () => {
 	createFakeUserAndLogin()
-	prepareLists()
+	prepareProjects()
 	
 	let buckets
 	beforeEach(() => {
@@ -16,10 +16,10 @@ describe('List View Kanban', () => {
 
 	it('Shows all buckets with their tasks', () => {
 		const data = TaskFactory.create(10, {
-			list_id: 1,
+			project_id: 1,
 			bucket_id: 1,
 		})
-		cy.visit('/lists/1/kanban')
+		cy.visit('/projects/1/kanban')
 
 		cy.get('.kanban .bucket .title')
 			.contains(buckets[0].title)
@@ -34,10 +34,10 @@ describe('List View Kanban', () => {
 
 	it('Can add a new task to a bucket', () => {
 		TaskFactory.create(2, {
-			list_id: 1,
+			project_id: 1,
 			bucket_id: 1,
 		})
-		cy.visit('/lists/1/kanban')
+		cy.visit('/projects/1/kanban')
 
 		cy.get('.kanban .bucket')
 			.contains(buckets[0].title)
@@ -55,7 +55,7 @@ describe('List View Kanban', () => {
 	})
 
 	it('Can create a new bucket', () => {
-		cy.visit('/lists/1/kanban')
+		cy.visit('/projects/1/kanban')
 
 		cy.get('.kanban .bucket.new-bucket .button')
 			.click()
@@ -69,7 +69,7 @@ describe('List View Kanban', () => {
 	})
 
 	it('Can set a bucket limit', () => {
-		cy.visit('/lists/1/kanban')
+		cy.visit('/projects/1/kanban')
 
 		cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-trigger')
 			.first()
@@ -90,7 +90,7 @@ describe('List View Kanban', () => {
 	})
 
 	it('Can rename a bucket', () => {
-		cy.visit('/lists/1/kanban')
+		cy.visit('/projects/1/kanban')
 
 		cy.get('.kanban .bucket .bucket-header .title')
 			.first()
@@ -101,7 +101,7 @@ describe('List View Kanban', () => {
 	})
 
 	it('Can delete a bucket', () => {
-		cy.visit('/lists/1/kanban')
+		cy.visit('/projects/1/kanban')
 
 		cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-trigger')
 			.first()
@@ -125,10 +125,10 @@ describe('List View Kanban', () => {
 
 	it('Can drag tasks around', () => {
 		const tasks = TaskFactory.create(2, {
-			list_id: 1,
+			project_id: 1,
 			bucket_id: 1,
 		})
-		cy.visit('/lists/1/kanban')
+		cy.visit('/projects/1/kanban')
 
 		cy.get('.kanban .bucket .tasks .task')
 			.contains(tasks[0].title)
@@ -144,10 +144,10 @@ describe('List View Kanban', () => {
 	it('Should navigate to the task when the task card is clicked', () => {
 		const tasks = TaskFactory.create(5, {
 			id: '{increment}',
-			list_id: 1,
+			project_id: 1,
 			bucket_id: 1,
 		})
-		cy.visit('/lists/1/kanban')
+		cy.visit('/projects/1/kanban')
 
 		cy.get('.kanban .bucket .tasks .task')
 			.contains(tasks[0].title)
@@ -158,18 +158,18 @@ describe('List View Kanban', () => {
 			.should('contain', `/tasks/${tasks[0].id}`, { timeout: 1000 })
 	})
 
-	it('Should remove a task from the kanban board when moving it to another list', () => {
-		const lists = ListFactory.create(2)
+	it('Should remove a task from the kanban board when moving it to another project', () => {
+		const projects = ProjectFactory.create(2)
 		BucketFactory.create(2, {
-			list_id: '{increment}',
+			project_id: '{increment}',
 		})
 		const tasks = TaskFactory.create(5, {
 			id: '{increment}',
-			list_id: 1,
+			project_id: 1,
 			bucket_id: 1,
 		})
 		const task = tasks[0]
-		cy.visit('/lists/1/kanban')
+		cy.visit('/projects/1/kanban')
 
 		cy.get('.kanban .bucket .tasks .task')
 			.contains(task.title)
@@ -180,7 +180,7 @@ describe('List View Kanban', () => {
 			.contains('Move')
 			.click()
 		cy.get('.task-view .content.details .field .multiselect.control .input-wrapper input')
-			.type(`${lists[1].title}{enter}`)
+			.type(`${projects[1].title}{enter}`)
 		// The requests happen with a 200ms timeout. Because of that, the results are not yet there when cypress
 		// presses enter and we can't simulate pressing on enter to select the item.
 		cy.get('.task-view .content.details .field .multiselect.control .search-results')
@@ -197,26 +197,26 @@ describe('List View Kanban', () => {
 	
 	it('Shows a button to filter the kanban board', () => {
 		const data = TaskFactory.create(10, {
-			list_id: 1,
+			project_id: 1,
 			bucket_id: 1,
 		})
-		cy.visit('/lists/1/kanban')
+		cy.visit('/projects/1/kanban')
 		
-		cy.get('.list-kanban .filter-container .base-button')
+		cy.get('.project-kanban .filter-container .base-button')
 			.should('exist')
 	})
 	
 	it('Should remove a task from the board when deleting it', () => {
-		const lists = ListFactory.create(1)
+		const projects = ProjectFactory.create(1)
 		const buckets = BucketFactory.create(2, {
-			list_id: lists[0].id,
+			project_id: projects[0].id,
 		})
 		const tasks = TaskFactory.create(5, {
-			list_id: 1,
+			project_id: 1,
 			bucket_id: buckets[0].id,
 		})
 		const task = tasks[0]
-		cy.visit('/lists/1/kanban')
+		cy.visit('/projects/1/kanban')
 
 		cy.get('.kanban .bucket .tasks .task')
 			.contains(task.title)

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

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

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

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

cypress/e2e/project/project.spec.ts

@@ -1,58 +1,60 @@
 import {createFakeUserAndLogin} from '../../support/authenticateUser'
 
 import {TaskFactory} from '../../factories/task'
-import {prepareLists} from './prepareLists'
+import {prepareProjects} from './prepareProjects'
 
-describe('Lists', () => {
+describe('Projects', () => {
 	createFakeUserAndLogin()
 
-	let lists
-	prepareLists((newLists) => (lists = newLists))
+	let projects
+	prepareProjects((newProjects) => (projects = newProjects))
 
-	it('Should create a new list', () => {
+	it('Should create a new project', () => {
 		cy.visit('/')
 		cy.get('.namespace-title .dropdown-trigger')
 			.click()
 		cy.get('.namespace-title .dropdown .dropdown-item')
-			.contains('New list')
+			.contains('New project')
 			.click()
 		cy.url()
-			.should('contain', '/lists/new/1')
+			.should('contain', '/projects/new/1')
 		cy.get('.card-header-title')
-			.contains('New list')
+			.contains('New project')
 		cy.get('input.input')
-			.type('New List')
+			.type('New Project')
 		cy.get('.button')
 			.contains('Create')
 			.click()
 
-		cy.get('.global-notification', { timeout: 1000 }) // Waiting until the request to create the new list is done
+		cy.get('.global-notification', { timeout: 1000 }) // Waiting until the request to create the new project is done
 			.should('contain', 'Success')
 		cy.url()
-			.should('contain', '/lists/')
-		cy.get('.list-title')
-			.should('contain', 'New List')
+			.should('contain', '/projects/')
+		cy.get('.project-title')
+			.should('contain', 'New Project')
 	})
 
-	it('Should redirect to a specific list view after visited', () => {
-		cy.visit('/lists/1/kanban')
+	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.url()
-			.should('contain', '/lists/1/kanban')
-		cy.visit('/lists/1')
+			.should('contain', '/projects/1/kanban')
+		cy.wait('@loadBuckets')
+		cy.visit('/projects/1')
 		cy.url()
-			.should('contain', '/lists/1/kanban')
+			.should('contain', '/projects/1/kanban')
 	})
 
-	it('Should rename the list in all places', () => {
+	it('Should rename the project in all places', () => {
 		TaskFactory.create(5, {
 			id: '{increment}',
-			list_id: 1,
+			project_id: 1,
 		})
-		const newListName = 'New list name'
+		const newProjectName = 'New project name'
 
-		cy.visit('/lists/1')
-		cy.get('.list-title')
-			.should('contain', 'First List')
+		cy.visit('/projects/1')
+		cy.get('.project-title')
+			.should('contain', 'First Project')
 
 		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .menu-list-dropdown-trigger')
 			.click()
@@ -60,27 +62,27 @@ describe('Lists', () => {
 			.contains('Edit')
 			.click()
 		cy.get('#title')
-			.type(`{selectall}${newListName}`)
+			.type(`{selectall}${newProjectName}`)
 		cy.get('footer.card-footer .button')
 			.contains('Save')
 			.click()
 
 		cy.get('.global-notification')
 			.should('contain', 'Success')
-		cy.get('.list-title')
-			.should('contain', newListName)
-			.should('not.contain', lists[0].title)
+		cy.get('.project-title')
+			.should('contain', newProjectName)
+			.should('not.contain', projects[0].title)
 		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child')
-			.should('contain', newListName)
-			.should('not.contain', lists[0].title)
+			.should('contain', newProjectName)
+			.should('not.contain', projects[0].title)
 		cy.visit('/')
 		cy.get('.card-content')
-			.should('contain', newListName)
-			.should('not.contain', lists[0].title)
+			.should('contain', newProjectName)
+			.should('not.contain', projects[0].title)
 	})
 
-	it('Should remove a list', () => {
-		cy.visit(`/lists/${lists[0].id}`)
+	it('Should remove a project', () => {
+		cy.visit(`/projects/${projects[0].id}`)
 
 		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .menu-list-dropdown-trigger')
 			.click()
@@ -96,27 +98,27 @@ describe('Lists', () => {
 		cy.get('.global-notification')
 			.should('contain', 'Success')
 		cy.get('.namespace-container .menu.namespaces-lists .menu-list')
-			.should('not.contain', lists[0].title)
+			.should('not.contain', projects[0].title)
 		cy.location('pathname')
 			.should('equal', '/')
 	})
 	
-	it('Should archive a list', () => {
-		cy.visit(`/lists/${lists[0].id}`)
+	it('Should archive a project', () => {
+		cy.visit(`/projects/${projects[0].id}`)
 		
-		cy.get('.list-title-dropdown')
+		cy.get('.project-title-dropdown')
 			.click()
-		cy.get('.list-title-dropdown .dropdown-menu .dropdown-item')
+		cy.get('.project-title-dropdown .dropdown-menu .dropdown-item')
 			.contains('Archive')
 			.click()
 		cy.get('.modal-content')
-			.should('contain.text', 'Archive this list')
+			.should('contain.text', 'Archive this project')
 		cy.get('.modal-content [data-cy=modalPrimary]')
 			.click()
 		
 		cy.get('.namespace-container .menu.namespaces-lists .menu-list')
-			.should('not.contain', lists[0].title)
+			.should('not.contain', projects[0].title)
 		cy.get('main.app-content')
-			.should('contain.text', 'This list is archived. It is not possible to create new or edit tasks for it.')
+			.should('contain.text', 'This project is archived. It is not possible to create new or edit tasks for it.')
 	})
 })

cypress/e2e/sharing/linkShare.spec.ts

@@ -1,22 +1,22 @@
 import {LinkShareFactory} from '../../factories/link_sharing'
-import {ListFactory} from '../../factories/list'
+import {ProjectFactory} from '../../factories/project'
 import {TaskFactory} from '../../factories/task'
 
 describe('Link shares', () => {
 	it('Can view a link share', () => {
-		const lists = ListFactory.create(1)
+		const projects = ProjectFactory.create(1)
 		const tasks = TaskFactory.create(10, {
-			list_id: lists[0].id
+			project_id: projects[0].id
 		})
 		const linkShares = LinkShareFactory.create(1, {
-			list_id: lists[0].id,
+			project_id: projects[0].id,
 			right: 0,
 		})
 
 		cy.visit(`/share/${linkShares[0].hash}/auth`)
 
 		cy.get('h1.title')
-			.should('contain', lists[0].title)
+			.should('contain', projects[0].title)
 		cy.get('input.input[placeholder="Add a new task..."')
 			.should('not.exist')
 		cy.get('.tasks')

cypress/e2e/task/overview.spec.ts

@@ -1,6 +1,6 @@
 import {createFakeUserAndLogin} from '../../support/authenticateUser'
 
-import {ListFactory} from '../../factories/list'
+import {ProjectFactory} from '../../factories/project'
 import {seed} from '../../support/seed'
 import {TaskFactory} from '../../factories/task'
 import {NamespaceFactory} from '../../factories/namespace'
@@ -9,9 +9,9 @@ import {updateUserSettings} from '../../support/updateUserSettings'
 
 function seedTasks(numberOfTasks = 50, startDueDate = new Date()) {
 	NamespaceFactory.create(1)
-	const list = ListFactory.create()[0]
+	const project = ProjectFactory.create()[0]
 	BucketFactory.create(1, {
-		list_id: list.id,
+		project_id: project.id,
 	})
 	const tasks = []
 	let dueDate = startDueDate
@@ -20,7 +20,7 @@ function seedTasks(numberOfTasks = 50, startDueDate = new Date()) {
 		dueDate = new Date(new Date(dueDate).setDate(dueDate.getDate() + 2))
 		tasks.push({
 			id: i + 1,
-			list_id: list.id,
+			project_id: project.id,
 			done: false,
 			created_by_id: 1,
 			title: 'Test Task ' + i,
@@ -31,7 +31,7 @@ function seedTasks(numberOfTasks = 50, startDueDate = new Date()) {
 		})
 	}
 	seed(TaskFactory.table, tasks)
-	return {tasks, list}
+	return {tasks, project}
 }
 
 describe('Home Page Task Overview', () => {
@@ -73,7 +73,7 @@ describe('Home Page Task Overview', () => {
 			due_date: new Date().toISOString(),
 		}, false)
 		
-		cy.visit(`/lists/${tasks[0].list_id}/list`)
+		cy.visit(`/projects/${tasks[0].project_id}/list`)
 		cy.get('.tasks .task')
 			.first()
 			.should('contain.text', newTaskTitle)
@@ -90,7 +90,7 @@ describe('Home Page Task Overview', () => {
 
 		cy.visit('/')
 
-		cy.visit(`/lists/${tasks[0].list_id}/list`)
+		cy.visit(`/projects/${tasks[0].project_id}/list`)
 		cy.get('.task-add textarea')
 			.type(newTaskTitle+'{enter}')
 		cy.visit('/')
@@ -113,10 +113,10 @@ describe('Home Page Task Overview', () => {
 			.should('contain.text', newTaskTitle)
 	})
 	
-	it('Should show a task without a due date added via default list at the bottom', () => {
-		const {list} = seedTasks(40)
+	it('Should show a task without a due date added via default project at the bottom', () => {
+		const {project} = seedTasks(40)
 		updateUserSettings({
-			default_list_id: list.id,
+			default_project_id: project.id,
 			overdue_tasks_reminders_time: '9:00',
 		})
 		
@@ -131,23 +131,23 @@ describe('Home Page Task Overview', () => {
 			.should('contain.text', newTaskTitle)
 	})
 	
-	it('Should show the cta buttons for new list when there are no tasks', () => {
+	it('Should show the cta buttons for new project when there are no tasks', () => {
 		TaskFactory.truncate()
 		
 		cy.visit('/')
 		
 		cy.get('.home.app-content .content')
-			.should('contain.text', 'You can create a new list for your new tasks:')
-			.should('contain.text', 'Or import your lists and tasks from other services into Vikunja:')
+			.should('contain.text', 'You can create a new project for your new tasks:')
+			.should('contain.text', 'Or import your projects and tasks from other services into Vikunja:')
 	})
 	
-	it('Should not show the cta buttons for new list when there are tasks', () => {
+	it('Should not show the cta buttons for new project when there are tasks', () => {
 		seedTasks()
 
 		cy.visit('/')
 
 		cy.get('.home.app-content .content')
-			.should('not.contain.text', 'You can create a new list for your new tasks:')
-			.should('not.contain.text', 'Or import your lists and tasks from other services into Vikunja:')
+			.should('not.contain.text', 'You can create a new project for your new tasks:')
+			.should('not.contain.text', 'Or import your projects and tasks from other services into Vikunja:')
 	})
 })

cypress/e2e/task/task.spec.ts

@@ -1,11 +1,11 @@
 import {createFakeUserAndLogin} from '../../support/authenticateUser'
 
 import {TaskFactory} from '../../factories/task'
-import {ListFactory} from '../../factories/list'
+import {ProjectFactory} from '../../factories/project'
 import {TaskCommentFactory} from '../../factories/task_comment'
 import {UserFactory} from '../../factories/user'
 import {NamespaceFactory} from '../../factories/namespace'
-import {UserListFactory} from '../../factories/users_list'
+import {UserProjectFactory} from '../../factories/users_project'
 import {TaskAssigneeFactory} from '../../factories/task_assignee'
 import {LabelFactory} from '../../factories/labels'
 import {LabelTaskFactory} from '../../factories/label_task'
@@ -48,22 +48,22 @@ describe('Task', () => {
 	createFakeUserAndLogin()
 
 	let namespaces
-	let lists
+	let projects
 	let buckets
 
 	beforeEach(() => {
 		// UserFactory.create(1)
 		namespaces = NamespaceFactory.create(1)
-		lists = ListFactory.create(1)
+		projects = ProjectFactory.create(1)
 		buckets = BucketFactory.create(1, {
-			list_id: lists[0].id,
+			project_id: projects[0].id,
 		})
 		TaskFactory.truncate()
-		UserListFactory.truncate()
+		UserProjectFactory.truncate()
 	})
 
 	it('Should be created new', () => {
-		cy.visit('/lists/1/list')
+		cy.visit('/projects/1/list')
 		cy.get('.input[placeholder="Add a new task…"')
 			.type('New Task')
 		cy.get('.button')
@@ -74,11 +74,11 @@ describe('Task', () => {
 			.should('contain', 'New Task')
 	})
 
-	it('Inserts new tasks at the top of the list', () => {
+	it('Inserts new tasks at the top of the project', () => {
 		TaskFactory.create(1)
 
-		cy.visit('/lists/1/list')
-		cy.get('.list-is-empty-notice')
+		cy.visit('/projects/1/list')
+		cy.get('.project-is-empty-notice')
 			.should('not.exist')
 		cy.get('.input[placeholder="Add a new task…"')
 			.type('New Task')
@@ -95,8 +95,8 @@ describe('Task', () => {
 	it('Marks a task as done', () => {
 		TaskFactory.create(1)
 
-		cy.visit('/lists/1/list')
-		cy.get('.tasks .task .fancycheckbox label.check')
+		cy.visit('/projects/1/list')
+		cy.get('.tasks .task .fancycheckbox')
 			.first()
 			.click()
 		cy.get('.global-notification')
@@ -106,7 +106,7 @@ describe('Task', () => {
 	it('Can add a task to favorites', () => {
 		TaskFactory.create(1)
 
-		cy.visit('/lists/1/list')
+		cy.visit('/projects/1/list')
 		cy.get('.tasks .task .favorite')
 			.first()
 			.click()
@@ -134,7 +134,7 @@ describe('Task', () => {
 				.should('contain', '#1')
 			cy.get('.task-view h6.subtitle')
 				.should('contain', namespaces[0].title)
-				.should('contain', lists[0].title)
+				.should('contain', projects[0].title)
 			cy.get('.task-view .details.content.description')
 				.should('contain', tasks[0].description)
 			cy.get('.task-view .action-buttons p.created')
@@ -179,21 +179,21 @@ describe('Task', () => {
 				.should('contain', 'Mark as undone')
 		})
 
-		it('Shows a task identifier since the list has one', () => {
-			const lists = ListFactory.create(1, {
+		it('Shows a task identifier since the project has one', () => {
+			const projects = ProjectFactory.create(1, {
 				id: 1,
 				identifier: 'TEST',
 			})
 			const tasks = TaskFactory.create(1, {
 				id: 1,
-				list_id: lists[0].id,
+				project_id: projects[0].id,
 				index: 1,
 			})
 
 			cy.visit(`/tasks/${tasks[0].id}`)
 
 			cy.get('.task-view h1.title.task-id')
-				.should('contain', `${lists[0].identifier}-${tasks[0].index}`)
+				.should('contain', `${projects[0].identifier}-${tasks[0].index}`)
 		})
 
 		it('Can edit the description', () => {
@@ -236,14 +236,14 @@ describe('Task', () => {
 				.should('contain', 'Success')
 		})
 
-		it('Can move a task to another list', () => {
-			const lists = ListFactory.create(2)
+		it('Can move a task to another project', () => {
+			const projects = ProjectFactory.create(2)
 			BucketFactory.create(2, {
-				list_id: '{increment}'
+				project_id: '{increment}'
 			})
 			const tasks = TaskFactory.create(1, {
 				id: 1,
-				list_id: lists[0].id,
+				project_id: projects[0].id,
 			})
 			cy.visit(`/tasks/${tasks[0].id}`)
 
@@ -251,7 +251,7 @@ describe('Task', () => {
 				.contains('Move')
 				.click()
 			cy.get('.task-view .content.details .field .multiselect.control .input-wrapper input')
-				.type(`${lists[1].title}{enter}`)
+				.type(`${projects[1].title}{enter}`)
 			// The requests happen with a 200ms timeout. Because of that, the results are not yet there when cypress 
 			// presses enter and we can't simulate pressing on enter to select the item.
 			cy.get('.task-view .content.details .field .multiselect.control .search-results')
@@ -261,7 +261,7 @@ describe('Task', () => {
 
 			cy.get('.task-view h6.subtitle')
 				.should('contain', namespaces[0].title)
-				.should('contain', lists[1].title)
+				.should('contain', projects[1].title)
 			cy.get('.global-notification')
 				.should('contain', 'Success')
 		})
@@ -269,7 +269,7 @@ describe('Task', () => {
 		it('Can delete a task', () => {
 			const tasks = TaskFactory.create(1, {
 				id: 1,
-				list_id: 1,
+				project_id: 1,
 			})
 			cy.visit(`/tasks/${tasks[0].id}`)
 
@@ -286,17 +286,17 @@ describe('Task', () => {
 			cy.get('.global-notification')
 				.should('contain', 'Success')
 			cy.url()
-				.should('contain', `/lists/${tasks[0].list_id}/`)
+				.should('contain', `/projects/${tasks[0].project_id}/`)
 		})
 
 		it('Can add an assignee to a task', () => {
 			const users = UserFactory.create(5)
 			const tasks = TaskFactory.create(1, {
 				id: 1,
-				list_id: 1,
+				project_id: 1,
 			})
-			UserListFactory.create(5, {
-				list_id: 1,
+			UserProjectFactory.create(5, {
+				project_id: 1,
 				user_id: '{increment}',
 			})
 
@@ -321,10 +321,10 @@ describe('Task', () => {
 			const users = UserFactory.create(2)
 			const tasks = TaskFactory.create(1, {
 				id: 1,
-				list_id: 1,
+				project_id: 1,
 			})
-			UserListFactory.create(5, {
-				list_id: 1,
+			UserProjectFactory.create(5, {
+				project_id: 1,
 				user_id: '{increment}',
 			})
 			TaskAssigneeFactory.create(1, {
@@ -347,7 +347,7 @@ describe('Task', () => {
 		it('Can add a new label to a task', () => {
 			const tasks = TaskFactory.create(1, {
 				id: 1,
-				list_id: 1,
+				project_id: 1,
 			})
 			LabelFactory.truncate()
 			const newLabelText = 'some new label'
@@ -375,7 +375,7 @@ describe('Task', () => {
 		it('Can add an existing label to a task', () => {
 			const tasks = TaskFactory.create(1, {
 				id: 1,
-				list_id: 1,
+				project_id: 1,
 			})
 			const labels = LabelFactory.create(1)
 			LabelTaskFactory.truncate()
@@ -388,13 +388,13 @@ describe('Task', () => {
 		it('Can add a label to a task and it shows up on the kanban board afterwards', () => {
 			const tasks = TaskFactory.create(1, {
 				id: 1,
-				list_id: lists[0].id,
+				project_id: projects[0].id,
 				bucket_id: buckets[0].id,
 			})
 			const labels = LabelFactory.create(1)
 			LabelTaskFactory.truncate()
 			
-			cy.visit(`/lists/${lists[0].id}/kanban`)
+			cy.visit(`/projects/${projects[0].id}/kanban`)
 			
 			cy.get('.bucket .task')
 				.contains(tasks[0].title)
@@ -412,7 +412,7 @@ describe('Task', () => {
 		it('Can remove a label from a task', () => {
 			const tasks = TaskFactory.create(1, {
 				id: 1,
-				list_id: 1,
+				project_id: 1,
 			})
 			const labels = LabelFactory.create(1)
 			LabelTaskFactory.create(1, {
@@ -527,13 +527,13 @@ describe('Task', () => {
 			TaskAttachmentFactory.truncate()
 			const tasks = TaskFactory.create(1, {
 				id: 1,
-				list_id: lists[0].id,
+				project_id: projects[0].id,
 				bucket_id: buckets[0].id,
 			})
 			const labels = LabelFactory.create(1)
 			LabelTaskFactory.truncate()
 
-			cy.visit(`/lists/${lists[0].id}/kanban`)
+			cy.visit(`/projects/${projects[0].id}/kanban`)
 
 			cy.get('.bucket .task')
 				.contains(tasks[0].title)

cypress/e2e/tsconfig.json

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

cypress/e2e/user/login.spec.ts

@@ -1,12 +1,14 @@
 import {UserFactory} from '../../factories/user'
 
 const testAndAssertFailed = fixture => {
+	cy.intercept(Cypress.env('API_URL') + '/login*').as('login')
+	
 	cy.visit('/login')
 	cy.get('input[id=username]').type(fixture.username)
 	cy.get('input[id=password]').type(fixture.password)
 	cy.get('.button').contains('Login').click()
 
-	cy.wait(5000) // It can take waaaayy too long to log the user in
+	cy.wait('@login')
 	cy.url().should('include', '/')
 	cy.get('div.message.danger').contains('Wrong username or password.')
 }

cypress/e2e/user/logout.spec.ts

@@ -1,5 +1,5 @@
 import {createFakeUserAndLogin} from '../../support/authenticateUser'
-import {createLists} from '../list/prepareLists'
+import {createProjects} from '../project/prepareProjects'
 
 function logout() {
 	cy.get('.navbar .username-dropdown-trigger')
@@ -26,21 +26,21 @@ describe('Log out', () => {
 			})
 	})
 	
-	it.skip('Should clear the list history after logging the user out', () => {
-		const lists = createLists()
-		cy.visit(`/lists/${lists[0].id}`)
+	it.skip('Should clear the project history after logging the user out', () => {
+		const projects = createProjects()
+		cy.visit(`/projects/${projects[0].id}`)
 			.then(() => {
-				expect(localStorage.getItem('listHistory')).to.not.eq(null)
+				expect(localStorage.getItem('projectHistory')).to.not.eq(null)
 			})
 
 		logout()
 
-		cy.wait(1000) // This makes re-loading of the list and associated entities (and the resulting error) visible
+		cy.wait(1000) // This makes re-loading of the project and associated entities (and the resulting error) visible
 		
 		cy.url()
 			.should('contain', '/login')
 			.then(() => {
-				expect(localStorage.getItem('listHistory')).to.eq(null)
+				expect(localStorage.getItem('projectHistory')).to.eq(null)
 			})
 	})
 })

cypress/factories/bucket.ts

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

cypress/factories/link_sharing.ts

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

cypress/factories/project.ts

@@ -1,8 +1,8 @@
 import {Factory} from '../support/factory'
 import {faker} from '@faker-js/faker'
 
-export class ListFactory extends Factory {
-	static table = 'lists'
+export class ProjectFactory extends Factory {
+	static table = 'projects'
 
 	static factory() {
 		const now = new Date()

cypress/factories/task.ts

@@ -11,7 +11,7 @@ export class TaskFactory extends Factory {
 			id: '{increment}',
 			title: faker.lorem.words(3),
 			done: false,
-			list_id: 1,
+			project_id: 1,
 			created_by_id: 1,
 			index: '{increment}',
 			position: '{increment}',

cypress/factories/users_project.ts

@@ -1,14 +1,14 @@
 import {Factory} from '../support/factory'
 
-export class UserListFactory extends Factory {
-	static table = 'users_lists'
+export class UserProjectFactory extends Factory {
+	static table = 'users_projects'
 
 	static factory() {
 		const now = new Date()
 
 		return {
 			id: '{increment}',
-			list_id: 1,
+			project_id: 1,
 			user_id: 1,
 			right: 0,
 			created: now.toISOString(),

docker/nginx.conf

@@ -4,7 +4,6 @@
 
 pid                  /tmp/nginx.pid;
 worker_processes     auto;
-worker_rlimit_nofile 65535;
 
 events {
   multi_accept       on;

docs/models-services.md

@@ -30,21 +30,21 @@ A basic service can look like this:
 
 ```javascript
 import AbstractService from './abstractService'
-import ListModel from '../models/list'
+import ProjectModel from '../models/project'
 
-export default class ListService extends AbstractService {
+export default class ProjectService extends AbstractService {
 	constructor() {
 		super({
-			getAll: '/lists',
-			get: '/lists/{id}',
-			create: '/namespaces/{namespaceID}/lists',
-			update: '/lists/{id}',
-			delete: '/lists/{id}',
+			getAll: '/projects',
+			get: '/projects/{id}',
+			create: '/namespaces/{namespaceID}/projects',
+			update: '/projects/{id}',
+			delete: '/projects/{id}',
 		})
 	}
 	
 	modelFactory(data) {
-		return new ListModel(data)
+		return new ProjectModel(data)
 	}
 }
 ```
@@ -132,7 +132,7 @@ import AbstractModel from './abstractModel'
 import TaskModel from './task'
 import UserModel from './user'
 
-export default class ListModel extends AbstractModel {
+export default class ProjectModel extends AbstractModel {
 	
 	constructor(data) {
 		// The constructor of AbstractModel handles all the default parsing.

env.d.ts

@@ -3,6 +3,16 @@
 /// <reference types="cypress" />
 /// <reference types="@histoire/plugin-vue/components" />
 
+declare module 'postcss-focus-within/browser' {
+  import focusWithinInit from 'postcss-focus-within/browser'
+  export default focusWithinInit
+}
+
+declare module 'css-has-pseudo/browser' {
+  import cssHasPseudo from 'css-has-pseudo/browser'
+  export default cssHasPseudo
+}
+
 interface ImportMetaEnv {
   readonly VITE_IS_ONLINE: boolean
 }

flake.lock

@@ -2,11 +2,11 @@
   "nodes": {
     "nixpkgs": {
       "locked": {
-        "lastModified": 1664753041,
-        "narHash": "sha256-0ogaD8PaGHluARFeupofvk1Nq9gpVeZdlFM0Kcwguys=",
+        "lastModified": 1680030621,
+        "narHash": "sha256-qQa1NeS5Rvk2lgK5lSk986PC6I72yIHejzM8PFu+dHs=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "a62844b302507c7531ad68a86cb7aa54704c9cb4",
+        "rev": "402cc3633cc60dfc50378197305c984518b30773",
         "type": "github"
       },
       "original": {

histoire.config.ts

@@ -28,7 +28,7 @@ export default defineConfig({
 		// 	light: './img/light.png',
 		// 	dark: './img/dark.png',
 		// },
-		// logoHref: 'https://acme.com',
+		logoHref: 'https://vikunja.io',
 		// favicon: './favicon.ico',
 	},
 })

package.json

@@ -13,7 +13,7 @@
   },
   "homepage": "https://vikunja.io/",
   "funding": "https://opencollective.com/vikunja",
-  "packageManager": "pnpm@7.28.0",
+  "packageManager": "pnpm@8.5.0",
   "keywords": [
     "todo",
     "productivity",
@@ -45,102 +45,106 @@
     "story:preview": "histoire preview"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.3.0",
-    "@fortawesome/free-regular-svg-icons": "6.3.0",
-    "@fortawesome/free-solid-svg-icons": "6.3.0",
+    "@fortawesome/fontawesome-svg-core": "6.4.0",
+    "@fortawesome/free-regular-svg-icons": "6.4.0",
+    "@fortawesome/free-solid-svg-icons": "6.4.0",
     "@fortawesome/vue-fontawesome": "3.0.3",
     "@github/hotkey": "2.0.1",
     "@infectoone/vue-ganttastic": "2.1.4",
-    "@intlify/unplugin-vue-i18n": "0.8.2",
+    "@intlify/unplugin-vue-i18n": "0.10.0",
     "@kyvg/vue3-notification": "2.9.0",
-    "@sentry/tracing": "7.39.0",
-    "@sentry/vue": "7.39.0",
-    "@types/is-touch-device": "1.0.0",
-    "@types/lodash.clonedeep": "4.5.7",
-    "@types/sortablejs": "1.15.0",
-    "@vueuse/core": "9.13.0",
-    "axios": "1.3.4",
+    "@sentry/tracing": "7.51.2",
+    "@sentry/vue": "7.51.2",
+    "@vueuse/core": "10.1.2",
+    "axios": "1.4.0",
     "blurhash": "2.0.5",
     "bulma-css-variables": "0.9.33",
     "camel-case": "4.1.2",
-    "codemirror": "5.65.12",
-    "date-fns": "2.29.3",
+    "codemirror": "5.65.13",
+    "date-fns": "2.30.0",
     "dayjs": "1.11.7",
-    "dompurify": "3.0.0",
+    "dompurify": "3.0.3",
     "easymde": "2.18.0",
     "fast-deep-equal": "3.1.3",
     "flatpickr": "4.6.13",
-    "flexsearch": "0.7.21",
+    "flexsearch": "0.7.31",
     "floating-vue": "2.0.0-beta.20",
-    "focus-within": "3.0.2",
-    "highlight.js": "11.7.0",
+    "highlight.js": "11.8.0",
     "is-touch-device": "1.0.1",
     "klona": "2.0.6",
     "lodash.debounce": "4.0.8",
-    "marked": "4.2.12",
-    "pinia": "2.0.32",
+    "marked": "5.0.2",
+    "pinia": "2.0.36",
     "register-service-worker": "1.7.2",
     "snake-case": "3.0.4",
     "sortablejs": "1.15.0",
-    "ufo": "1.1.0",
+    "ufo": "1.1.2",
     "vue": "3.2.47",
     "vue-advanced-cropper": "2.8.8",
-    "vue-flatpickr-component": "11.0.2",
+    "vue-flatpickr-component": "11.0.3",
     "vue-i18n": "9.2.2",
-    "vue-router": "4.1.6",
+    "vue-router": "4.2.0",
     "workbox-precaching": "6.5.4",
     "zhyswan-vuedraggable": "4.1.3"
   },
   "devDependencies": {
     "@4tw/cypress-drag-drop": "2.2.3",
-    "@cypress/vite-dev-server": "5.0.4",
-    "@cypress/vue": "5.0.4",
-    "@faker-js/faker": "7.6.0",
-    "@histoire/plugin-screenshot": "0.15.8",
-    "@histoire/plugin-vue": "0.15.8",
+    "@cypress/vite-dev-server": "5.0.5",
+    "@cypress/vue": "5.0.5",
+    "@faker-js/faker": "8.0.0",
+    "@histoire/plugin-screenshot": "0.16.1",
+    "@histoire/plugin-vue": "0.16.1",
     "@rushstack/eslint-patch": "1.2.0",
+    "@tsconfig/node18": "2.0.1",
     "@types/codemirror": "5.60.7",
-    "@types/dompurify": "2.4.0",
+    "@types/dompurify": "3.0.2",
     "@types/flexsearch": "0.7.3",
-    "@types/focus-within": "1.0.1",
+    "@types/is-touch-device": "1.0.0",
     "@types/lodash.debounce": "4.0.7",
-    "@types/marked": "4.0.8",
-    "@types/node": "18.14.2",
+    "@types/marked": "4.3.0",
+    "@types/node": "18.16.8",
     "@types/postcss-preset-env": "7.7.0",
-    "@typescript-eslint/eslint-plugin": "5.53.0",
-    "@typescript-eslint/parser": "5.53.0",
-    "@vitejs/plugin-legacy": "4.0.1",
-    "@vitejs/plugin-vue": "4.0.0",
-    "@vue/eslint-config-typescript": "11.0.2",
-    "@vue/test-utils": "2.3.0",
-    "@vue/tsconfig": "0.1.3",
-    "autoprefixer": "10.4.13",
+    "@types/sortablejs": "1.15.1",
+    "@typescript-eslint/eslint-plugin": "5.59.5",
+    "@typescript-eslint/parser": "5.59.5",
+    "@vitejs/plugin-legacy": "4.0.3",
+    "@vitejs/plugin-vue": "4.2.3",
+    "@vue/eslint-config-typescript": "11.0.3",
+    "@vue/test-utils": "2.3.2",
+    "@vue/tsconfig": "0.4.0",
+    "autoprefixer": "10.4.14",
     "browserslist": "4.21.5",
-    "caniuse-lite": "1.0.30001458",
-    "csstype": "3.1.1",
-    "cypress": "12.7.0",
-    "esbuild": "0.17.10",
-    "eslint": "8.35.0",
-    "eslint-plugin-vue": "9.9.0",
-    "happy-dom": "8.9.0",
-    "histoire": "0.15.8",
-    "netlify-cli": "13.0.0",
-    "postcss": "8.4.21",
+    "caniuse-lite": "1.0.30001486",
+    "css-has-pseudo": "5.0.2",
+    "csstype": "3.1.2",
+    "cypress": "12.12.0",
+    "esbuild": "0.17.18",
+    "eslint": "8.40.0",
+    "eslint-plugin-vue": "9.12.0",
+    "happy-dom": "9.10.9",
+    "histoire": "0.16.1",
+    "postcss": "8.4.23",
     "postcss-easing-gradients": "3.0.1",
     "postcss-easings": "3.0.1",
-    "postcss-preset-env": "8.0.1",
-    "rollup": "3.17.3",
+    "postcss-focus-within": "7.0.2",
+    "postcss-preset-env": "8.3.2",
+    "rollup": "3.21.6",
     "rollup-plugin-visualizer": "5.9.0",
-    "sass": "1.58.3",
+    "sass": "1.62.1",
     "start-server-and-test": "2.0.0",
-    "typescript": "4.9.5",
-    "vite": "4.1.4",
-    "vite-plugin-inject-preload": "1.3.0",
-    "vite-plugin-pwa": "0.14.4",
+    "typescript": "5.0.4",
+    "vite": "4.3.5",
+    "vite-plugin-inject-preload": "1.3.1",
+    "vite-plugin-pwa": "0.14.7",
     "vite-svg-loader": "4.0.0",
-    "vitest": "0.29.1",
-    "vue-tsc": "1.2.0",
+    "vitest": "0.31.0",
+    "vue-tsc": "1.6.4",
     "wait-on": "7.0.1",
     "workbox-cli": "6.5.4"
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "flexsearch@0.7.31": "patches/flexsearch@0.7.31.patch"
+    }
   }
 }

patches/flexsearch@0.7.31.patch

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

renovate.json

@@ -6,7 +6,7 @@
   ],
   "packageRules": [
     {
-      "matchPackageNames": ["netlify-cli", "happy-dom"],
+      "matchPackageNames": ["happy-dom"],
       "extends": ["schedule:weekly"]
     },
     {

scripts/deploy-preview-netlify.mjs

@@ -33,9 +33,9 @@ const promiseExec = cmd => {
 }
 
 (async function () {
-	let stdout = await promiseExec(`./node_modules/.bin/netlify link --id ${siteId}`)
+	let stdout = await promiseExec(`/home/node/docker-netlify-cli/node_modules/.bin/netlify link --id ${siteId}`)
 	console.log(stdout)
-	stdout = await promiseExec(`./node_modules/.bin/netlify deploy --alias ${alias}`)
+	stdout = await promiseExec(`/home/node/docker-netlify-cli/node_modules/.bin/netlify deploy --alias ${alias}`)
 	console.log(stdout)
 
 	const data = await fetch(prIssueCommentsUrl).then(response => response.json())

scripts/deploy-preview-netlify.mjs.sha384

@@ -1 +1 @@
-57af69409e66bc87f4f2fc5822dd8d3c2eb47c601f81af1ac4a56f3e2d80837b1a2de06f4ff57695ec379b7c15b881e3  ./scripts/deploy-preview-netlify.mjs
+4a7c1293c7b12e9ab476cdf35251a407c6a1cd005d22c06df994222cccfb25cde5f47d15866a098c9d739778fee4dc19  ./scripts/deploy-preview-netlify.mjs

src/assets/checkbox.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 18 18" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
+	<path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z" stroke-dasharray="60"></path>
+	<polyline points="1 9 7 14 15 4" stroke-dasharray="22" stroke-dashoffset="66"></polyline>
+</svg>

src/components/base/BaseCheckbox.vue

@@ -0,0 +1,54 @@
+<template>
+	<div class="base-checkbox" v-cy="'checkbox'">
+		<input
+			type="checkbox"
+			:id="checkboxId"
+			class="is-sr-only"
+			:checked="modelValue"
+			@change="(event) => emit('update:modelValue', (event.target as HTMLInputElement).checked)"
+			:disabled="disabled || undefined"
+		/>
+
+		<slot name="label" :checkboxId="checkboxId">
+			<label :for="checkboxId" class="base-checkbox__label">
+				<slot/>
+			</label>
+		</slot>
+	</div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import {createRandomID} from '@/helpers/randomId'
+
+defineProps({
+	modelValue: {
+		type: Boolean,
+		default: false,
+	},
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+})
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: boolean): void
+}>()
+
+const checkboxId = ref(`fancycheckbox_${createRandomID()}`)
+</script>
+
+<style lang="scss" scoped>
+.base-checkbox__label {
+	cursor: pointer;
+	user-select: none;
+	-webkit-tap-highlight-color: transparent;
+	display: inline-flex;
+}
+
+.base-checkbox:has(input:disabled) .base-checkbox__label {
+	cursor:not-allowed;
+	pointer-events: none;
+}
+</style>

src/components/base/Expandable.vue

@@ -32,7 +32,7 @@ import {computed, ref} from 'vue'
 import {getInheritedBackgroundColor} from '@/helpers/getInheritedBackgroundColor'
 
 const props = defineProps({
-  /** Wheather the Expandable is open or not */
+  /** Whether the Expandable is open or not */
   open: {
     type: Boolean,
     default: false,

src/components/date/datemathHelp.story.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import datemathHelp from './datemathHelp.vue'
+</script>
+
+<template>
+  <Story>
+    <Variant title="Default">
+      <datemathHelp />
+    </Variant>
+  </Story>
+</template>

src/components/date/datemathHelp.vue

@@ -1,7 +1,8 @@
 <template>
 	<card
 		class="has-no-shadow how-it-works-modal"
-		:title="$t('input.datemathHelp.title')">
+		:title="$t('input.datemathHelp.title')"
+	>
 		<p>
 			{{ $t('input.datemathHelp.intro') }}
 		</p>
@@ -27,11 +28,11 @@
 		</p>
 		<p>{{ $t('misc.forExample') }}</p>
 		<ul>
-			<li><code>+1d</code>{{ $t('input.datemathHelp.add1Day') }}</li>
-			<li><code>-1d</code>{{ $t('input.datemathHelp.minus1Day') }}</li>
-			<li><code>/d</code>{{ $t('input.datemathHelp.roundDay') }}</li>
+			<li><code>+1d</code> {{ $t('input.datemathHelp.add1Day') }}</li>
+			<li><code>-1d</code> {{ $t('input.datemathHelp.minus1Day') }}</li>
+			<li><code>/d</code> {{ $t('input.datemathHelp.roundDay') }}</li>
 		</ul>
-		<p>{{ $t('input.datemathHelp.supportedUnits') }}</p>
+		<h3>{{ $t('input.datemathHelp.supportedUnits') }}</h3>
 		<table class="table">
 			<tbody>
 			<tr>
@@ -69,7 +70,7 @@
 			</tbody>
 		</table>
 
-		<p>{{ $t('input.datemathHelp.someExamples') }}</p>
+		<h3>{{ $t('input.datemathHelp.someExamples') }}</h3>
 		<table class="table">
 			<tbody>
 			<tr>
@@ -100,7 +101,7 @@
 				<td><code>{{ exampleDate }}||+1M/d</code></td>
 				<td>
 					<i18n-t keypath="input.datemathHelp.examples.datePlusMonth" scope="global">
-						<code>{{ exampleDate }}</code>
+						<strong>{{ exampleDate }}</strong>
 					</i18n-t>
 				</td>
 			</tr>
@@ -110,13 +111,15 @@
 </template>
 
 <script lang="ts" setup>
-import {formatDate} from '@/helpers/time/formatDate'
+import {formatDateShort} from '@/helpers/time/formatDate'
+
 import BaseButton from '@/components/base/BaseButton.vue'
 
-const exampleDate = formatDate(new Date(), 'yyyy-MM-dd')
+const exampleDate = formatDateShort(new Date())
 </script>
 
 <style scoped lang="scss">
+// FIXME: Remove style overwrites
 .how-it-works-modal {
 	font-size: 1rem;
 }

src/components/home/Logo.vue

@@ -4,8 +4,11 @@ import { useNow } from '@vueuse/core'
 
 import LogoFull from '@/assets/logo-full.svg?component'
 import LogoFullPride from '@/assets/logo-full-pride.svg?component'
+import {MILLISECONDS_A_HOUR} from '@/constants/date'
 
-const now = useNow()
+const now = useNow({
+	interval: MILLISECONDS_A_HOUR,
+})
 const Logo = computed(() => now.value.getMonth() === 5 ? LogoFullPride : LogoFull)
 </script>
 

src/components/home/TheNavigation.vue

@@ -1,67 +1,50 @@
 <template>
-	<header
-		:class="{'has-background': background, 'menu-active': menuActive}"
-		aria-label="main navigation"
-		class="navbar d-print-none"
-	>
-		<router-link :to="{name: 'home'}" class="logo-link">
-			<Logo width="164" height="48"/>
+	<header :class="{ 'has-background': background, 'menu-active': menuActive }" aria-label="main navigation"
+		class="navbar d-print-none">
+		<router-link :to="{ name: 'home' }" class="logo-link">
+			<Logo width="164" height="48" />
 		</router-link>
 
-		<MenuButton class="menu-button"/>
+		<MenuButton class="menu-button" />
 
-		<div
-			v-if="currentList.id"
-			class="list-title-wrapper"
-		>
-			<h1 class="list-title">{{ currentList.title === '' ? $t('misc.loading') : getListTitle(currentList) }}</h1>
-			
-			<BaseButton :to="{name: 'list.info', params: {listId: currentList.id}}" class="list-title-button">
-				<icon icon="circle-info"/>
+		<div v-if="currentProject.id" class="project-title-wrapper">
+			<h1 class="project-title">{{ currentProject.title === '' ? $t('misc.loading') : getProjectTitle(currentProject) }}
+			</h1>
+
+			<BaseButton :to="{ name: 'project.info', params: { projectId: currentProject.id } }" class="project-title-button">
+				<icon icon="circle-info" />
 			</BaseButton>
 
-			<list-settings-dropdown
-				v-if="canWriteCurrentList && currentList.id !== -1"
-				class="list-title-dropdown"
-				:list="currentList"
-			>
-				<template #trigger="{toggleOpen}">
-					<BaseButton class="list-title-button" @click="toggleOpen">
-						<icon icon="ellipsis-h" class="icon"/>
+			<project-settings-dropdown v-if="canWriteCurrentProject && currentProject.id !== -1"
+				class="project-title-dropdown" :project="currentProject">
+				<template #trigger="{ toggleOpen }">
+					<BaseButton class="project-title-button" @click="toggleOpen">
+						<icon icon="ellipsis-h" class="icon" />
 					</BaseButton>
 				</template>
-			</list-settings-dropdown>
+			</project-settings-dropdown>
 		</div>
 
 		<div class="navbar-end">
-			<BaseButton
-				@click="openQuickActions"
-				class="trigger-button"
-				v-shortcut="'Control+k'"
-				:title="$t('keyboardShortcuts.quickSearch')"
-			>
-				<icon icon="search"/>
+			<BaseButton @click="openQuickActions" class="trigger-button" v-shortcut="'Control+k'"
+				:title="$t('keyboardShortcuts.quickSearch')">
+				<icon icon="search" />
 			</BaseButton>
 			<Notifications />
 			<dropdown>
-				<template #trigger="{toggleOpen, open}">
-					<BaseButton
-						class="username-dropdown-trigger"
-						@click="toggleOpen"
-						variant="secondary"
-						:shadow="false"
-					>
-						<img :src="authStore.avatarUrl" alt="" class="avatar" width="40" height="40"/>
+				<template #trigger="{ toggleOpen, open }">
+					<BaseButton class="username-dropdown-trigger" @click="toggleOpen" variant="secondary" :shadow="false">
+						<img :src="authStore.avatarUrl" alt="" class="avatar" width="40" height="40" />
 						<span class="username">{{ authStore.userDisplayName }}</span>
 						<span class="icon is-small" :style="{
 							transform: open ? 'rotate(180deg)' : 'rotate(0)',
 						}">
-							<icon icon="chevron-down"/>
+							<icon icon="chevron-down" />
 						</span>
 					</BaseButton>
 				</template>
 
-				<dropdown-item :to="{name: 'user.settings'}">
+				<dropdown-item :to="{ name: 'user.settings' }">
 					{{ $t('user.settings.title') }}
 				</dropdown-item>
 				<dropdown-item v-if="imprintUrl" :href="imprintUrl">
@@ -73,7 +56,7 @@
 				<dropdown-item @click="baseStore.setKeyboardShortcutsActive(true)">
 					{{ $t('keyboardShortcuts.title') }}
 				</dropdown-item>
-				<dropdown-item :to="{name: 'about'}">
+				<dropdown-item :to="{ name: 'about' }">
 					{{ $t('about.title') }}
 				</dropdown-item>
 				<dropdown-item @click="authStore.logout()">
@@ -85,11 +68,11 @@
 </template>
 
 <script setup lang="ts">
-import {computed} from 'vue'
+import { computed } from 'vue'
 
-import {RIGHTS as Rights} from '@/constants/rights'
+import { RIGHTS as Rights } from '@/constants/rights'
 
-import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
+import ProjectSettingsDropdown from '@/components/project/project-settings-dropdown.vue'
 import Dropdown from '@/components/misc/dropdown.vue'
 import DropdownItem from '@/components/misc/dropdown-item.vue'
 import Notifications from '@/components/notifications/notifications.vue'
@@ -97,16 +80,16 @@ import Logo from '@/components/home/Logo.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 import MenuButton from '@/components/home/MenuButton.vue'
 
-import {getListTitle} from '@/helpers/getListTitle'
+import { getProjectTitle } from '@/helpers/getProjectTitle'
 
-import {useBaseStore} from '@/stores/base'
-import {useConfigStore} from '@/stores/config'
-import {useAuthStore} from '@/stores/auth'
+import { useBaseStore } from '@/stores/base'
+import { useConfigStore } from '@/stores/config'
+import { useAuthStore } from '@/stores/auth'
 
 const baseStore = useBaseStore()
-const currentList = computed(() => baseStore.currentList)
+const currentProject = computed(() => baseStore.currentProject)
 const background = computed(() => baseStore.background)
-const canWriteCurrentList = computed(() => baseStore.currentList.maxRight > Rights.READ)
+const canWriteCurrentProject = computed(() => baseStore.currentProject.maxRight > Rights.READ)
 const menuActive = computed(() => baseStore.menuActive)
 
 const authStore = useAuthStore()
@@ -166,7 +149,7 @@ $user-dropdown-width-mobile: 5rem;
 
 .logo-link {
 	display: none;
-	
+
 	@media screen and (min-width: $tablet) {
 		align-self: stretch;
 		display: flex;
@@ -185,12 +168,12 @@ $user-dropdown-width-mobile: 5rem;
 	}
 }
 
-.list-title-wrapper {
+.project-title-wrapper {
 	margin-inline: auto;
 	display: flex;
 	align-items: center;
 
-	// this makes the truncated text of the list title work
+	// this makes the truncated text of the project title work
 	// inside the flexbox parent
 	min-width: 0;
 
@@ -199,7 +182,7 @@ $user-dropdown-width-mobile: 5rem;
 	}
 }
 
-.list-title {
+.project-title {
 	font-size: 1rem;
 	// We need the following for overflowing ellipsis to work
 	text-overflow: ellipsis;
@@ -211,15 +194,15 @@ $user-dropdown-width-mobile: 5rem;
 	}
 }
 
-.list-title-dropdown {
+.project-title-dropdown {
 	align-self: stretch;
 
-	.list-title-button {
+	.project-title-button {
 		flex-grow: 1;
 	}
 }
 
-.list-title-button {
+.project-title-button {
 	align-self: stretch;
 	min-width: var(--navbar-button-min-width);
 	display: flex;
@@ -235,7 +218,7 @@ $user-dropdown-width-mobile: 5rem;
 	display: flex;
 	align-items: stretch;
 
-	> * {
+	>* {
 		min-width: var(--navbar-button-min-width);
 	}
 }

src/components/home/contentAuth.vue

@@ -33,7 +33,7 @@
 				<quick-actions/>
 
 				<router-view :route="routeWithModal" v-slot="{ Component }">
-					<keep-alive :include="['list.list', 'list.gantt', 'list.table', 'list.kanban']">
+					<keep-alive :include="['project.list', 'project.gantt', 'project.table', 'project.kanban']">
 						<component :is="Component"/>
 					</keep-alive>
 				</router-view>
@@ -87,7 +87,7 @@ function showKeyboardShortcuts() {
 const route = useRoute()
 
 // FIXME: this is really error prone
-// Reset the current list highlight in menu if the current route is not list related.
+// Reset the current project highlight in menu if the current route is not project related.
 watch(() => route.name as string, (routeName) => {
 	if (
 		routeName &&
@@ -106,7 +106,7 @@ watch(() => route.name as string, (routeName) => {
 			routeName.startsWith('user.settings')
 		)
 	) {
-		baseStore.handleSetCurrentList({list: null})
+		baseStore.handleSetCurrentProject({project: null})
 	}
 })
 
@@ -156,6 +156,8 @@ labelStore.loadAllLabels()
 	z-index: 10;
 	position: relative;
 	padding: 1.5rem 0.5rem 1rem;
+	// TODO refactor: DRY `transition-timing-function` with `./navigation.vue`.
+	transition: margin-left $transition-duration;
 
 	@media screen and (max-width: $tablet) {
 		margin-left: 0;

src/components/home/contentLinkShare.vue

@@ -9,9 +9,9 @@
 				<Logo class="logo" v-if="logoVisible"/>
 				<h1
 					:class="{'m-0': !logoVisible}"
-					:style="{ 'opacity': currentList.title === '' ? '0': '1' }"
+					:style="{ 'opacity': currentProject.title === '' ? '0': '1' }"
 					class="title">
-					{{ currentList.title === '' ? $t('misc.loading') : currentList.title }}
+					{{ currentProject.title === '' ? $t('misc.loading') : currentProject.title }}
 				</h1>
 				<div class="box has-text-left view">
 					<router-view/>
@@ -31,7 +31,7 @@ import Logo from '@/components/home/Logo.vue'
 import PoweredByLink from './PoweredByLink.vue'
 
 const baseStore = useBaseStore()
-const currentList = computed(() => baseStore.currentList)
+const currentProject = computed(() => baseStore.currentProject)
 const background = computed(() => baseStore.background)
 const logoVisible = computed(() => baseStore.logoVisible)
 </script>

src/components/home/navigation.vue

@@ -52,37 +52,37 @@
 			<template v-for="(n, nk) in namespaces" :key="n.id">
 				<div class="namespace-title" :class="{'has-menu': n.id > 0}">
 					<BaseButton
-						@click="toggleLists(n.id)"
+						@click="toggleProjects(n.id)"
 						class="menu-label"
 						v-tooltip="namespaceTitles[nk]"
 					>
 						<ColorBubble
-							v-if="n.hexColor !== ''"
-							:color="n.hexColor"
-							class="mr-1"
+								v-if="n.hexColor !== ''"
+								:color="n.hexColor"
+								class="mr-1"
 						/>
 						<span class="name">{{ namespaceTitles[nk] }}</span>
 						<div
-							class="icon menu-item-icon is-small toggle-lists-icon pl-2"
-							:class="{'active': typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true}"
+								class="icon menu-item-icon is-small toggle-lists-icon pl-2"
+								:class="{'active': typeof projectsVisible[n.id] !== 'undefined' ? projectsVisible[n.id] : true}"
 						>
 							<icon icon="chevron-down"/>
 						</div>
 						<span class="count" :class="{'ml-2 mr-0': n.id > 0}">
-							({{ namespaceListsCount[nk] }})
+							({{ namespaceProjectsCount[nk] }})
 						</span>
 					</BaseButton>
 					<namespace-settings-dropdown class="menu-list-dropdown" :namespace="n" v-if="n.id > 0"/>
 				</div>
-					<!--
-						NOTE: a v-model / computed setter is not possible, since the updateActiveLists function
-						triggered by the change needs to have access to the current namespace
-					-->
-					<draggable
-						v-if="listsVisible[n.id] ?? true"
+				<!--
+					NOTE: a v-model / computed setter is not possible, since the updateActiveProjects function
+					triggered by the change needs to have access to the current namespace
+				-->
+				<draggable
+						v-if="projectsVisible[n.id] ?? true"
 						v-bind="dragOptions"
-						:modelValue="activeLists[nk]"
-						@update:modelValue="(lists) => updateActiveLists(n, lists)"
+						:modelValue="activeProjects[nk]"
+						@update:modelValue="(projects) => updateActiveProjects(n, projects)"
 						group="namespace-lists"
 						@start="() => drag = true"
 						@end="saveListPosition"
@@ -100,46 +100,46 @@
 								{ 'dragging-disabled': n.id < 0 }
 							]
 						}"
-					>
-						<template #item="{element: l}">
-							<li
-								class="list-menu loader-container is-loading-small"
-								:class="{'is-loading': listUpdating[l.id]}"
+				>
+					<template #item="{element: l}">
+						<li
+							class="list-menu loader-container is-loading-small"
+							:class="{'is-loading': projectUpdating[l.id]}"
+						>
+							<BaseButton
+								:to="{ name: 'project.index', params: { projectId: l.id} }"
+								class="list-menu-link"
+								:class="{'router-link-exact-active': currentProject.id === l.id}"
 							>
-								<BaseButton
-									:to="{ name: 'list.index', params: { listId: l.id} }"
-									class="list-menu-link"
-									:class="{'router-link-exact-active': currentList.id === l.id}"
-								>
-									<span class="icon menu-item-icon handle">
-										<icon icon="grip-lines"/>
-									</span>
-									<ColorBubble
+								<span class="icon menu-item-icon handle">
+									<icon icon="grip-lines"/>
+								</span>
+								<ColorBubble
 										v-if="l.hexColor !== ''"
 										:color="l.hexColor"
 										class="mr-1"
-									/>
-									<span class="list-menu-title">{{ getListTitle(l) }}</span>
-								</BaseButton>
-								<BaseButton
-									v-if="l.id > 0"
-									class="favorite"
-									:class="{'is-favorite': l.isFavorite}"
-									@click="listStore.toggleListFavorite(l)"
-								>
-									<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
-								</BaseButton>
-								<list-settings-dropdown class="menu-list-dropdown" :list="l" v-if="l.id > 0">
-									<template #trigger="{toggleOpen}">
-										<BaseButton class="menu-list-dropdown-trigger" @click="toggleOpen">
-											<icon icon="ellipsis-h" class="icon"/>
-										</BaseButton>
-									</template>
-								</list-settings-dropdown>
-								<span class="list-setting-spacer" v-else></span>
-							</li>
-						</template>
-					</draggable>
+								/>
+								<span class="list-menu-title">{{ getProjectTitle(l) }}</span>
+							</BaseButton>
+							<BaseButton
+								v-if="l.id > 0"
+								class="favorite"
+								:class="{'is-favorite': l.isFavorite}"
+								@click="projectStore.toggleProjectFavorite(l)"
+							>
+								<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
+							</BaseButton>
+							<ProjectSettingsDropdown class="menu-list-dropdown" :project="l" v-if="l.id > 0">
+								<template #trigger="{toggleOpen}">
+									<BaseButton class="menu-list-dropdown-trigger" @click="toggleOpen">
+										<icon icon="ellipsis-h" class="icon"/>
+									</BaseButton>
+								</template>
+							</ProjectSettingsDropdown>
+							<span class="list-setting-spacer" v-else></span>
+						</li>
+					</template>
+				</draggable>
 			</template>
 		</nav>
 		<PoweredByLink/>
@@ -152,20 +152,20 @@ import draggable from 'zhyswan-vuedraggable'
 import type {SortableEvent} from 'sortablejs'
 
 import BaseButton from '@/components/base/BaseButton.vue'
-import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
+import ProjectSettingsDropdown from '@/components/project/project-settings-dropdown.vue'
 import NamespaceSettingsDropdown from '@/components/namespace/namespace-settings-dropdown.vue'
 import PoweredByLink from '@/components/home/PoweredByLink.vue'
 import Logo from '@/components/home/Logo.vue'
 
 import {calculateItemPosition} from '@/helpers/calculateItemPosition'
 import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
-import {getListTitle} from '@/helpers/getListTitle'
-import type {IList} from '@/modelTypes/IList'
+import {getProjectTitle} from '@/helpers/getProjectTitle'
+import type {IProject} from '@/modelTypes/IProject'
 import type {INamespace} from '@/modelTypes/INamespace'
 import ColorBubble from '@/components/misc/colorBubble.vue'
 
 import {useBaseStore} from '@/stores/base'
-import {useListStore} from '@/stores/lists'
+import {useProjectStore} from '@/stores/projects'
 import {useNamespaceStore} from '@/stores/namespaces'
 
 const drag = ref(false)
@@ -176,7 +176,7 @@ const dragOptions = {
 
 const baseStore = useBaseStore()
 const namespaceStore = useNamespaceStore()
-const currentList = computed(() => baseStore.currentList)
+const currentProject = computed(() => baseStore.currentProject)
 const menuActive = computed(() => baseStore.menuActive)
 const loading = computed(() => namespaceStore.isLoading)
 
@@ -184,9 +184,9 @@ const loading = computed(() => namespaceStore.isLoading)
 const namespaces = computed(() => {
 	return namespaceStore.namespaces.filter(n => !n.isArchived)
 })
-const activeLists = computed(() => {
-	return namespaces.value.map(({lists}) => {
-		return lists?.filter(item => {
+const activeProjects = computed(() => {
+	return namespaces.value.map(({projects}) => {
+		return projects?.filter(item => {
 			return typeof item !== 'undefined' && !item.isArchived
 		})
 	})
@@ -196,45 +196,45 @@ const namespaceTitles = computed(() => {
 	return namespaces.value.map((namespace) => getNamespaceTitle(namespace))
 })
 
-const namespaceListsCount = computed(() => {
-	return namespaces.value.map((_, index) => activeLists.value[index]?.length ?? 0)
+const namespaceProjectsCount = computed(() => {
+	return namespaces.value.map((_, index) => activeProjects.value[index]?.length ?? 0)
 })
 
-const listStore = useListStore()
+const projectStore = useProjectStore()
 
-function toggleLists(namespaceId: INamespace['id']) {
-	listsVisible.value[namespaceId] = !listsVisible.value[namespaceId]
+function toggleProjects(namespaceId: INamespace['id']) {
+	projectsVisible.value[namespaceId] = !projectsVisible.value[namespaceId]
 }
 
-const listsVisible = ref<{ [id: INamespace['id']]: boolean }>({})
+const projectsVisible = ref<{ [id: INamespace['id']]: boolean }>({})
 // FIXME: async action will be unfinished when component mounts
 onBeforeMount(async () => {
 	const namespaces = await namespaceStore.loadNamespaces()
 	namespaces.forEach(n => {
-		if (typeof listsVisible.value[n.id] === 'undefined') {
-			listsVisible.value[n.id] = true
+		if (typeof projectsVisible.value[n.id] === 'undefined') {
+			projectsVisible.value[n.id] = true
 		}
 	})
 })
 
-function updateActiveLists(namespace: INamespace, activeLists: IList[]) {
+function updateActiveProjects(namespace: INamespace, activeProjects: IProject[]) {
 	// This is a bit hacky: since we do have to filter out the archived items from the list
 	// for vue draggable updating it is not as simple as replacing it.
-	// To work around this, we merge the active lists with the archived ones. Doing so breaks the order
-	// because now all archived lists are sorted after the active ones. This is fine because they are sorted 
+	// To work around this, we merge the active projects with the archived ones. Doing so breaks the order
+	// because now all archived projects are sorted after the active ones. This is fine because they are sorted
 	// later when showing them anyway, and it makes the merging happening here a lot easier.
-	const lists = [
-		...activeLists,
-		...namespace.lists.filter(l => l.isArchived),
+	const projects = [
+		...activeProjects,
+		...namespace.projects.filter(l => l.isArchived),
 	]
 
 	namespaceStore.setNamespaceById({
 		...namespace,
-		lists,
+		projects,
 	})
 }
 
-const listUpdating = ref<{ [id: INamespace['id']]: boolean }>({})
+const projectUpdating = ref<{ [id: INamespace['id']]: boolean }>({})
 
 async function saveListPosition(e: SortableEvent) {
 	if (!e.newIndex && e.newIndex !== 0) return
@@ -242,31 +242,31 @@ async function saveListPosition(e: SortableEvent) {
 	const namespaceId = parseInt(e.to.dataset.namespaceId as string)
 	const newNamespaceIndex = parseInt(e.to.dataset.namespaceIndex as string)
 
-	const listsActive = activeLists.value[newNamespaceIndex]
-	// If the list was dragged to the last position, Safari will report e.newIndex as the size of the listsActive
-	// array instead of using the position. Because the index is wrong in that case, dragging the list will fail.
+	const projectsActive = activeProjects.value[newNamespaceIndex]
+	// If the project was dragged to the last position, Safari will report e.newIndex as the size of the projectsActive
+	// array instead of using the position. Because the index is wrong in that case, dragging the project will fail.
 	// To work around that we're explicitly checking that case here and decrease the index.
-	const newIndex = e.newIndex === listsActive.length ? e.newIndex - 1 : e.newIndex 
-	
-	const list = listsActive[newIndex]
-	const listBefore = listsActive[newIndex - 1] ?? null
-	const listAfter = listsActive[newIndex + 1] ?? null
-	listUpdating.value[list.id] = true
+	const newIndex = e.newIndex === projectsActive.length ? e.newIndex - 1 : e.newIndex
+
+	const project = projectsActive[newIndex]
+	const projectBefore = projectsActive[newIndex - 1] ?? null
+	const projectAfter = projectsActive[newIndex + 1] ?? null
+	projectUpdating.value[project.id] = true
 
 	const position = calculateItemPosition(
-		listBefore !== null ? listBefore.position : null,
-		listAfter !== null ? listAfter.position : null,
+		projectBefore !== null ? projectBefore.position : null,
+		projectAfter !== null ? projectAfter.position : null,
 	)
 
 	try {
-		// create a copy of the list in order to not violate pinia manipulation
-		await listStore.updateList({
-			...list,
+		// create a copy of the project in order to not violate pinia manipulation
+		await projectStore.updateProject({
+			...project,
 			position,
 			namespaceId,
 		})
 	} finally {
-		listUpdating.value[list.id] = false
+		projectUpdating.value[project.id] = false
 	}
 }
 </script>
@@ -342,13 +342,20 @@ $vikunja-nav-selected-width: 0.4rem;
 			}
 
 			.menu-list-dropdown {
-				opacity: 0;
+				opacity: 1;
 				transition: $transition;
 			}
 
-			&:hover .menu-list-dropdown {
-				opacity: 1;
+			@media(hover: hover) and (pointer: fine) {
+				.menu-list-dropdown {
+					opacity: 0;
+				}
+
+				&:hover .menu-list-dropdown {
+					opacity: 1;
+				}
 			}
+
 		}
 
 		.menu-item-icon {
@@ -418,7 +425,6 @@ $vikunja-nav-selected-width: 0.4rem;
 				opacity: 1;
 			}
 		}
-		
 		&:not(.dragging-disabled) .handle {
 			cursor: grab;
 		}
@@ -427,7 +433,7 @@ $vikunja-nav-selected-width: 0.4rem;
 
 .top-menu {
 	margin-top: math.div($navbar-padding, 2);
- 
+
 	.menu-list {
 		li {
 			font-weight: 600;
@@ -482,17 +488,24 @@ $vikunja-nav-selected-width: 0.4rem;
 	.favorite {
 		margin-left: .25rem;
 		transition: opacity $transition, color $transition;
-		opacity: 0;
+		opacity: 1;
 
-		&:hover,
 		&.is-favorite {
 			color: var(--warning);
+			opacity: 1;
 		}
 	}
 
-	.favorite.is-favorite,
-	.list-menu:hover .favorite {
-		opacity: 1;
+
+	@media(hover: hover) and (pointer: fine) {
+		.list-menu .favorite {
+			opacity: 0;
+		}
+
+		.list-menu:hover .favorite,
+		.favorite.is-favorite {
+			opacity: 1;
+		}
 	}
 
 	.list-menu-title {

src/components/input/SelectList.vue

@@ -1,63 +0,0 @@
-<template>
-	<multiselect
-		v-model="selectedLists"
-		:search-results="foundLists"
-		:loading="listService.loading"
-		:multiple="true"
-		:placeholder="$t('list.search')"
-		label="title"
-		@search="findLists"
-	/>
-</template>
-
-<script setup lang="ts">
-import {computed, ref, shallowReactive, watchEffect, type PropType} from 'vue'
-
-import Multiselect from '@/components/input/multiselect.vue'
-
-import type {IList} from '@/modelTypes/IList'
-
-import ListService from '@/services/list'
-import {includesById} from '@/helpers/utils'
-
-const props = defineProps({
-	modelValue: {
-		type: Array as PropType<IList[]>,
-		default: () => [],
-	},
-})
-const emit = defineEmits<{
-	(e: 'update:modelValue', value: IList[]): void
-}>()
-
-const lists = ref<IList[]>([])
-
-watchEffect(() => {
-	lists.value = props.modelValue
-})
-
-const selectedLists = computed({
-	get() {
-		return lists.value
-	},
-	set: (value) => {
-		lists.value = value
-		emit('update:modelValue', value)
-	},
-})
-
-const listService = shallowReactive(new ListService())
-const foundLists = ref<IList[]>([])
-
-async function findLists(query: string) {
-	if (query === '') {
-		foundLists.value = []
-		return
-	}
-
-	const response = await listService.getAll({}, {s: query}) as IList[]
-
-	// Filter selected items from the results
-	foundLists.value = response.filter(({id}) => !includesById(lists.value, id))
-}
-</script>

src/components/input/SelectProject.vue

@@ -0,0 +1,63 @@
+<template>
+	<multiselect
+		v-model="selectedProjects"
+		:search-results="foundProjects"
+		:loading="projectService.loading"
+		:multiple="true"
+		:placeholder="$t('project.search')"
+		label="title"
+		@search="findProjects"
+	/>
+</template>
+
+<script setup lang="ts">
+import {computed, ref, shallowReactive, watchEffect, type PropType} from 'vue'
+
+import Multiselect from '@/components/input/multiselect.vue'
+
+import type {IProject} from '@/modelTypes/IProject'
+
+import ProjectService from '@/services/project'
+import {includesById} from '@/helpers/utils'
+
+const props = defineProps({
+	modelValue: {
+		type: Array as PropType<IProject[]>,
+		default: () => [],
+	},
+})
+const emit = defineEmits<{
+	(e: 'update:modelValue', value: IProject[]): void
+}>()
+
+const projects = ref<IProject[]>([])
+
+watchEffect(() => {
+	projects.value = props.modelValue
+})
+
+const selectedProjects = computed({
+	get() {
+		return projects.value
+	},
+	set: (value) => {
+		projects.value = value
+		emit('update:modelValue', value)
+	},
+})
+
+const projectService = shallowReactive(new ProjectService())
+const foundProjects = ref<IProject[]>([])
+
+async function findProjects(query: string) {
+	if (query === '') {
+		foundProjects.value = []
+		return
+	}
+
+	const response = await projectService.getAll({}, {s: query}) as IProject[]
+
+	// Filter selected items from the results
+	foundProjects.value = response.filter(({id}) => !includesById(projects.value, id))
+}
+</script>

src/components/input/editor.vue

@@ -286,11 +286,11 @@ function handleCheckboxClick(e: Event) {
 		console.debug('no index found')
 		return
 	}
-	const listPrefix = text.value.substring(index, index + 1)
+	const projectPrefix = text.value.substring(index, index + 1)
 	
-	console.debug({index, listPrefix, checked, text: text.value})
+	console.debug({index, projectPrefix, checked, text: text.value})
 
-	text.value = replaceAt(text.value, index, `${listPrefix} ${checked ? '[x]' : '[ ]'} `)
+	text.value = replaceAt(text.value, index, `${projectPrefix} ${checked ? '[x]' : '[ ]'} `)
 	bubble()
 	renderPreview()
 }

src/components/input/fancycheckbox.story.vue

@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+import {ref} from 'vue'
+import {logEvent} from 'histoire/client'
+import FancyCheckbox from './fancycheckbox.vue'
+
+const isDisabled = ref<boolean | undefined>()
+
+const isChecked = ref(false)
+
+const isCheckedInitiallyEnabled = ref(true)
+
+const isCheckedDisabled = ref(false)
+
+const withoutInitialState = ref<boolean | undefined>()
+</script>
+
+
+<template>
+	<Story :layout="{ type: 'grid', width: '200px' }">
+		<Variant title="Default">
+			<FancyCheckbox
+				v-model="isChecked"
+				:disabled="isDisabled"
+			>
+				This is probably not important
+			</FancyCheckbox>
+
+			Visualisation
+			<input type="checkbox" v-model="isChecked">
+			{{ isChecked }}
+		</Variant>
+		<Variant title="Enabled Initially">
+			<FancyCheckbox
+				:disabled="isDisabled"
+				v-model="isCheckedInitiallyEnabled"
+			>
+				We want you to use this option
+			</FancyCheckbox>
+
+			Visualisation
+			<input type="checkbox" v-model="isCheckedInitiallyEnabled">
+			{{ isCheckedInitiallyEnabled }}
+		</Variant>
+		<Variant title="Disabled">
+			<FancyCheckbox
+				disabled
+				:modelValue="isCheckedDisabled"
+				@update:model-value="logEvent('Setting disabled: This should never happen', $event)"
+			>
+				You can't change this
+			</FancyCheckbox>
+
+			Visualisation
+			<input type="checkbox" v-model="isCheckedDisabled" disabled>
+			{{ isCheckedDisabled }}
+		</Variant>
+
+		<Variant title="Undefined initial State">
+			<FancyCheckbox
+				v-model="withoutInitialState"
+				:disabled="isDisabled"
+			>
+				Not sure what the value should be
+			</FancyCheckbox>
+
+			Visualisation
+			<input type="checkbox" v-model="withoutInitialState" disabled>
+			{{ withoutInitialState }}
+		</Variant>
+	</Story>
+</template>

src/components/input/fancycheckbox.vue

@@ -1,66 +1,42 @@
 <template>
-	<div :class="{'is-disabled': disabled}" class="fancycheckbox">
-		<input
-			:checked="checked"
-			:disabled="disabled || undefined"
-			:id="checkBoxId"
-			@change="(event: Event) => updateData((event.target as HTMLInputElement).checked)"
-			type="checkbox"
-		/>
-		<label :for="checkBoxId" class="check" @click.prevent="check">
-			<svg height="18px" viewBox="0 0 18 18" width="18px">
-				<path
-					d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
-				<polyline points="1 9 7 14 15 4"></polyline>
-			</svg>
-			<span>
-				<slot></slot>
-			</span>
-		</label>
-	</div>
+	<BaseCheckbox
+		class="fancycheckbox"
+		:class="{
+			'is-disabled': disabled,
+			'is-block': isBlock,
+		}"
+		:disabled="disabled"
+		:model-value="modelValue"
+		@update:model-value="value => emit('update:modelValue', value)"
+	>
+		<CheckboxIcon class="fancycheckbox__icon" />
+		<span v-if="$slots.default" class="fancycheckbox__content">
+			<slot/>
+		</span>
+	</BaseCheckbox>
 </template>
 
 <script setup lang="ts">
-import {ref, toRef, watch} from 'vue'
+import CheckboxIcon from '@/assets/checkbox.svg?component'
 
-import {createRandomID} from '@/helpers/randomId'
+import BaseCheckbox from '@/components/base/BaseCheckbox.vue'
 
-const checked = ref(false)
-const checkBoxId = `fancycheckbox_${createRandomID()}`
-
-const props = defineProps({
+defineProps({
 	modelValue: {
 		type: Boolean,
-		required: false,
 	},
 	disabled: {
 		type: Boolean,
-		required: false,
+	},
+	isBlock: {
+		type: Boolean,
 		default: false,
 	},
 })
-const emit = defineEmits(['update:modelValue', 'change'])
 
-const modelValue = toRef(props, 'modelValue')
-
-watch(
-	modelValue,
-	newValue => {
-		checked.value = newValue
-	},
-	{immediate: true},
-)
-
-function updateData(newChecked: boolean) {
-	checked.value = newChecked
-	emit('update:modelValue', newChecked)
-	emit('change', newChecked)
-}
-
-function check() {
-	checked.value = !checked.value
-	updateData(checked.value)
-}
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: boolean): void
+}>()
 </script>
 
 
@@ -70,75 +46,54 @@ function check() {
   padding-right: 5px;
   padding-top: 3px;
 
-	// FIXME: should be a prop
 	&.is-block {
+		display: block;
 		margin: .5rem .2rem;
 	}
 }
 
-input[type=checkbox] {
-	display: none;
-}
-
-.check {
-	cursor: pointer;
-	position: relative;
-	margin: auto;
-	width: 18px;
-	height: 18px;
-	-webkit-tap-highlight-color: transparent;
-	transform: translate3d(0, 0, 0);
-}
-
-span {
+.fancycheckbox__content {
 	font-size: 0.8rem;
 	vertical-align: top;
 	padding-left: .5rem;
 }
 
-svg {
+.fancycheckbox__icon:deep() {
 	position: relative;
 	z-index: 1;
-	fill: none;
-	stroke-linecap: round;
-	stroke-linejoin: round;
-	stroke: #c8ccd4;
-	stroke-width: 1.5;
+	stroke: var(--stroke-color, #c8ccd4);
 	transform: translate3d(0, 0, 0);
 	transition: all 0.2s ease;
-}
 
-.check:hover svg {
-	stroke: var(--primary);
-}
-
-.is-disabled .check:hover svg {
-	stroke: #c8ccd4;
-}
-
-path {
-	stroke-dasharray: 60;
-	stroke-dashoffset: 0;
-}
-
-polyline {
-	stroke-dasharray: 22;
-	stroke-dashoffset: 66;
-}
-
-input[type=checkbox]:checked + .check {
-	svg {
-		stroke: var(--primary);
+	path,
+	polyline {
+		transition: all 0.2s linear, color 0.2s ease;
 	}
+}
 
+.fancycheckbox:not(:has(input:disabled)):hover .fancycheckbox__icon,
+.fancycheckbox:has(input:checked) .fancycheckbox__icon {
+	--stroke-color: var(--primary);
+}
+</style>
+
+<style lang="scss">
+// Since css-has-pseudo doesn't work with deep classes,
+// the following rules can't be scoped
+
+.fancycheckbox:has(:not(input:checked)) .fancycheckbox__icon {
+	path {
+		transition-delay: 0.05s;
+	}
+}
+
+.fancycheckbox:has(input:checked) .fancycheckbox__icon {
 	path {
 		stroke-dashoffset: 60;
-		transition: all 0.3s linear;
 	}
 
 	polyline {
 		stroke-dashoffset: 42;
-		transition: all 0.2s linear;
 		transition-delay: 0.15s;
 	}
 }

src/components/list/ListWrapper.vue

@@ -1,200 +0,0 @@
-<template>
-	<div
-		:class="{ 'is-loading': listService.loading, 'is-archived': currentList.isArchived}"
-		class="loader-container"
-	>
-		<div class="switch-view-container">
-			<div class="switch-view">
-				<BaseButton
-					v-shortcut="'g l'"
-					:title="$t('keyboardShortcuts.list.switchToListView')"
-					class="switch-view-button"
-					:class="{'is-active': viewName === 'list'}"
-					:to="{ name: 'list.list',   params: { listId } }"
-				>
-					{{ $t('list.list.title') }}
-				</BaseButton>
-				<BaseButton
-					v-shortcut="'g g'"
-					:title="$t('keyboardShortcuts.list.switchToGanttView')"
-					class="switch-view-button"
-					:class="{'is-active': viewName === 'gantt'}"
-					:to="{ name: 'list.gantt',  params: { listId } }"
-				>
-					{{ $t('list.gantt.title') }}
-				</BaseButton>
-				<BaseButton
-					v-shortcut="'g t'"
-					:title="$t('keyboardShortcuts.list.switchToTableView')"
-					class="switch-view-button"
-					:class="{'is-active': viewName === 'table'}"
-					:to="{ name: 'list.table',  params: { listId } }"
-				>
-					{{ $t('list.table.title') }}
-				</BaseButton>
-				<BaseButton
-					v-shortcut="'g k'"
-					:title="$t('keyboardShortcuts.list.switchToKanbanView')"
-					class="switch-view-button"
-					:class="{'is-active': viewName === 'kanban'}"
-					:to="{ name: 'list.kanban', params: { listId } }"
-				>
-					{{ $t('list.kanban.title') }}
-				</BaseButton>
-			</div>
-			<slot name="header" />
-		</div>
-		<CustomTransition name="fade">
-			<Message variant="warning" v-if="currentList.isArchived" class="mb-4">
-				{{ $t('list.archived') }}
-			</Message>
-		</CustomTransition>
-
-		<slot v-if="loadedListId"/>
-	</div>
-</template>
-
-<script setup lang="ts">
-import {ref, computed, watch} from 'vue'
-import {useRoute} from 'vue-router'
-
-import BaseButton from '@/components/base/BaseButton.vue'
-import Message from '@/components/misc/message.vue'
-import CustomTransition from '@/components/misc/CustomTransition.vue'
-
-import ListModel from '@/models/list'
-import ListService from '@/services/list'
-
-import {getListTitle} from '@/helpers/getListTitle'
-import {saveListToHistory} from '@/modules/listHistory'
-import {useTitle} from '@/composables/useTitle'
-
-import {useBaseStore} from '@/stores/base'
-import {useListStore} from '@/stores/lists'
-
-const props = defineProps({
-	listId: {
-		type: Number,
-		required: true,
-	},
-	viewName: {
-		type: String,
-		required: true,
-	},
-})
-
-const route = useRoute()
-
-const baseStore = useBaseStore()
-const listStore = useListStore()
-const listService = ref(new ListService())
-const loadedListId = ref(0)
-
-const currentList = computed(() => {
-	return typeof baseStore.currentList === 'undefined' ? {
-		id: 0,
-		title: '',
-		isArchived: false,
-		maxRight: null,
-	} : baseStore.currentList
-})
-useTitle(() => currentList.value.id ? getListTitle(currentList.value) : '')
-
-// 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 list multiple times, even when navigating away from it.
-// This caused wired bugs where the list background would be set on the home page but only right after setting a new 
-// list background and then navigating to home. It also highlighted the list in the menu and didn't allow changing any
-// of it, most likely due to the rights not being properly populated.
-watch(
-	() => props.listId,
-	// loadList
-	async (listIdToLoad: number) => {
-		const listData = {id: listIdToLoad}
-		saveListToHistory(listData)
-
-		// Don't load the list if we either already loaded it or aren't dealing with a list at all currently and
-		// the currently loaded list has the right set.
-		if (
-			(
-				listIdToLoad === loadedListId.value ||
-				typeof listIdToLoad === 'undefined' ||
-				listIdToLoad === currentList.value.id
-			)
-			&& typeof currentList.value !== 'undefined' && currentList.value.maxRight !== null
-		) {
-			loadedListId.value = props.listId
-			return
-		}
-
-		console.debug(`Loading list, props.viewName = ${props.viewName}, $route.params =`, route.params, `, loadedListId = ${loadedListId.value}, currentList = `, currentList.value)
-
-		// Set the current list to the one we're about to load so that the title is already shown at the top
-		loadedListId.value = 0
-		const listFromStore = listStore.getListById(listData.id)
-		if (listFromStore !== null) {
-			baseStore.setBackground(null)
-			baseStore.setBlurHash(null)
-			baseStore.handleSetCurrentList({list: listFromStore})
-		}
-
-		// We create an extra list object instead of creating it in list.value because that would trigger a ui update which would result in bad ux.
-		const list = new ListModel(listData)
-		try {
-			const loadedList = await listService.value.get(list)
-			baseStore.handleSetCurrentList({list: loadedList})
-		} finally {
-			loadedListId.value = props.listId
-		}
-	},
-	{immediate: true},
-)
-</script>
-
-<style lang="scss" scoped>
-.switch-view-container {
-  @media screen and (max-width: $tablet) {
-    display: flex;
-    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;
-}
-
-.switch-view-button {
-	padding: .25rem .5rem;
-	display: block;
-	border-radius: $radius;
-	transition: all 100ms;
-
-	&:not(:last-child) {
-		margin-right: .5rem;
-	}
-
-	&:hover {
-		color: var(--switch-view-color);
-		background: var(--primary);
-	}
-
-	&.is-active {
-		color: var(--switch-view-color);
-		background: var(--primary);
-		font-weight: bold;
-		box-shadow: var(--shadow-xs);
-	}
-}
-
-// FIXME: this should be in notification and set via a prop
-.is-archived .notification.is-warning {
-  margin-bottom: 1rem;
-}
-</style>

src/components/list/partials/ListCardGrid.vue

@@ -1,77 +0,0 @@
-<template>
-    <ul class="list-grid">
-			<li
-				v-for="(item, index) in filteredLists"
-				:key="`list_${item.id}_${index}`"
-				class="list-grid-item"
-			>
-				<ListCard :list="item" />
-			</li>
-    </ul>
-</template>
-
-<script lang="ts" setup>
-import {computed, type PropType} from 'vue'
-import type {IList} from '@/modelTypes/IList'
-
-import ListCard from './ListCard.vue'
-
-const props = defineProps({
-	lists: {
-		type: Array as PropType<IList[]>,
-		default: () => [],
-	},
-	showArchived: {
-		default: false,
-		type: Boolean,
-	},
-	itemLimit: {
-		type: Boolean,
-		default: false,
-	},
-})
-
-const filteredLists = computed(() => {
-	return props.showArchived
-		? props.lists
-		: props.lists.filter(l => !l.isArchived)
-})
-</script>
-
-<style lang="scss" scoped>
-$list-height: 150px;
-$list-spacing: 1rem;
-
-.list-grid {
-	margin: 0; // reset li
-	list-style-type: none;
-	display: grid;
-	grid-template-columns: repeat(var(--list-columns), 1fr);
-	grid-auto-rows: $list-height;
-	gap: $list-spacing;
-
-	@media screen and (min-width: $mobile) {
-		--list-rows: 4;
-		--list-columns: 1;
-	}
-
-	@media screen and (min-width: $mobile) and (max-width: $tablet) {
-		--list-columns: 2;
-	}
-
-	@media screen and (min-width: $tablet) and (max-width: $widescreen) {
-		--list-columns: 3;
-		--list-rows: 3;
-	}
-
-	@media screen and (min-width: $widescreen) {
-		--list-columns: 5;
-		--list-rows: 2;
-	}
-}
-
-.list-grid-item {
-	display: grid;
-	margin-top: 0; // remove padding coming form .content li + li
-}
-</style>

src/components/misc/keyboard-shortcuts/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<modal @close="close()">
-		<card class="has-background-white has-no-shadow keyboard-shortcuts" :title="$t('keyboardShortcuts.title')">
+		<card class="has-background-white keyboard-shortcuts"  :shadow="false" :title="$t('keyboardShortcuts.title')">
 			<template v-for="(s, i) in shortcuts" :key="i">
 				<h3>{{ $t(s.title) }}</h3>
 

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

@@ -61,8 +61,8 @@ export const KEYBOARD_SHORTCUTS : ShortcutGroup[] = [
 		],
 	},
 	{
-		title: 'list.kanban.title',
-		available: (route) => route.name === 'list.kanban',
+		title: 'project.kanban.title',
+		available: (route) => route.name === 'project.kanban',
 		shortcuts: [
 			{
 				title: 'keyboardShortcuts.task.done',
@@ -71,26 +71,26 @@ export const KEYBOARD_SHORTCUTS : ShortcutGroup[] = [
 		],
 	},
 	{
-		title: 'keyboardShortcuts.list.title',
-		available: (route) => (route.name as string)?.startsWith('list.'),
+		title: 'keyboardShortcuts.project.title',
+		available: (route) => (route.name as string)?.startsWith('project.'),
 		shortcuts: [
 			{
-				title: 'keyboardShortcuts.list.switchToListView',
+				title: 'keyboardShortcuts.project.switchToListView',
 				keys: ['g', 'l'],
 				combination: 'then',
 			},
 			{
-				title: 'keyboardShortcuts.list.switchToGanttView',
+				title: 'keyboardShortcuts.project.switchToGanttView',
 				keys: ['g', 'g'],
 				combination: 'then',
 			},
 			{
-				title: 'keyboardShortcuts.list.switchToTableView',
+				title: 'keyboardShortcuts.project.switchToTableView',
 				keys: ['g', 't'],
 				combination: 'then',
 			},
 			{
-				title: 'keyboardShortcuts.list.switchToKanbanView',
+				title: 'keyboardShortcuts.project.switchToKanbanView',
 				keys: ['g', 'k'],
 				combination: 'then',
 			},
@@ -140,6 +140,18 @@ export const KEYBOARD_SHORTCUTS : ShortcutGroup[] = [
 				title: 'keyboardShortcuts.task.description',
 				keys: ['e'],
 			},
+			{
+				title: 'keyboardShortcuts.task.priority',
+				keys: ['p'],
+			},
+			{
+				title: 'keyboardShortcuts.task.delete',
+				keys: ['shift', 'delete'],
+			},
+			{
+				title: 'keyboardShortcuts.task.favorite',
+				keys: ['s'],
+			},
 		],
 	},
-]
+]

src/components/misc/subscription.vue

@@ -73,14 +73,14 @@ const {t} = useI18n({useScope: 'global'})
 
 const tooltipText = computed(() => {
 	if (disabled.value) {
-		if (props.entity === 'list' && subscriptionEntity.value === 'namespace') {
-			return t('task.subscription.subscribedListThroughParentNamespace')
+		if (props.entity === 'project' && subscriptionEntity.value === 'namespace') {
+			return t('task.subscription.subscribedProjectThroughParentNamespace')
 		}
 		if (props.entity === 'task' && subscriptionEntity.value === 'namespace') {
 			return t('task.subscription.subscribedTaskThroughParentNamespace')
 		}
-		if (props.entity === 'task' && subscriptionEntity.value === 'list') {
-			return t('task.subscription.subscribedTaskThroughParentList')
+		if (props.entity === 'task' && subscriptionEntity.value === 'project') {
+			return t('task.subscription.subscribedTaskThroughParentProject')
 		}
 
 		return ''
@@ -91,10 +91,10 @@ const tooltipText = computed(() => {
 			return props.modelValue !== null ?
 				t('task.subscription.subscribedNamespace') :
 				t('task.subscription.notSubscribedNamespace')
-		case 'list':
+		case 'project':
 			return props.modelValue !== null ?
-				t('task.subscription.subscribedList') :
-				t('task.subscription.notSubscribedList')
+				t('task.subscription.subscribedProject') :
+				t('task.subscription.notSubscribedProject')
 		case 'task':
 			return props.modelValue !== null ?
 				t('task.subscription.subscribedTask') :
@@ -133,8 +133,8 @@ async function subscribe() {
 		case 'namespace':
 			message = t('task.subscription.subscribeSuccessNamespace')
 			break
-		case 'list':
-			message = t('task.subscription.subscribeSuccessList')
+		case 'project':
+			message = t('task.subscription.subscribeSuccessProject')
 			break
 		case 'task':
 			message = t('task.subscription.subscribeSuccessTask')
@@ -156,8 +156,8 @@ async function unsubscribe() {
 		case 'namespace':
 			message = t('task.subscription.unsubscribeSuccessNamespace')
 			break
-		case 'list':
-			message = t('task.subscription.unsubscribeSuccessList')
+		case 'project':
+			message = t('task.subscription.unsubscribeSuccessProject')
 			break
 		case 'task':
 			message = t('task.subscription.unsubscribeSuccessTask')

src/components/misc/user.vue

@@ -49,9 +49,11 @@ const displayName = computed(() => getDisplayName(props.user))
 <style lang="scss" scoped>
 .user {
 	margin: .5rem;
+	display: flex;
+	justify-items: center;
 
 	&.is-inline {
-		display: inline;
+		display: inline-flex;
 	}
 }
 

src/components/namespace/namespace-settings-dropdown.vue

@@ -30,10 +30,10 @@
 				{{ $t('menu.share') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'list.create', params: { namespaceId: namespace.id } }"
+				:to="{ name: 'project.create', params: { namespaceId: namespace.id } }"
 				icon="plus"
 			>
-				{{ $t('menu.newList') }}
+				{{ $t('menu.newProject') }}
 			</dropdown-item>
 			<dropdown-item
 				:to="{ name: 'namespace.settings.archive', params: { id: namespace.id } }"

src/components/notifications/notifications.vue

@@ -117,9 +117,9 @@ function to(n, index) {
 		case names.TASK_DELETED:
 			// Nothing
 			break
-		case names.LIST_CREATED:
+		case names.PROJECT_CREATED:
 			to.name = 'task.index'
-			to.params.listId = n.notification.list.id
+			to.params.projectId = n.notification.project.id
 			break
 		case names.TEAM_MEMBER_ADDED:
 			to.name = 'teams.edit'
@@ -145,12 +145,13 @@ function to(n, index) {
 
 	.trigger-button {
 		width: 100%;
+		position: relative;
 	}
 
 	.unread-indicator {
 		position: absolute;
-		top: .75rem;
-		right: 1.15rem;
+		top: 1rem;
+		right: .5rem;
 		width: .75rem;
 		height: .75rem;
 

src/components/project/ProjectWrapper.vue

@@ -0,0 +1,200 @@
+<template>
+	<div
+		:class="{ 'is-loading': projectService.loading, 'is-archived': currentProject.isArchived}"
+		class="loader-container"
+	>
+		<div class="switch-view-container">
+			<div class="switch-view">
+				<BaseButton
+					v-shortcut="'g l'"
+					:title="$t('keyboardShortcuts.project.switchToListView')"
+					class="switch-view-button"
+					:class="{'is-active': viewName === 'project'}"
+					:to="{ name: 'project.list',   params: { projectId } }"
+				>
+					{{ $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') }}
+				</BaseButton>
+			</div>
+			<slot name="header" />
+		</div>
+		<CustomTransition name="fade">
+			<Message variant="warning" v-if="currentProject.isArchived" class="mb-4">
+				{{ $t('project.archived') }}
+			</Message>
+		</CustomTransition>
+
+		<slot v-if="loadedProjectId"/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import {ref, computed, watch} from 'vue'
+import {useRoute} from 'vue-router'
+
+import BaseButton from '@/components/base/BaseButton.vue'
+import Message from '@/components/misc/message.vue'
+import CustomTransition from '@/components/misc/CustomTransition.vue'
+
+import ProjectModel from '@/models/project'
+import ProjectService from '@/services/project'
+
+import {getProjectTitle} from '@/helpers/getProjectTitle'
+import {saveProjectToHistory} from '@/modules/projectHistory'
+import {useTitle} from '@/composables/useTitle'
+
+import {useBaseStore} from '@/stores/base'
+import {useProjectStore} from '@/stores/projects'
+
+const props = defineProps({
+	projectId: {
+		type: Number,
+		required: true,
+	},
+	viewName: {
+		type: String,
+		required: true,
+	},
+})
+
+const route = useRoute()
+
+const baseStore = useBaseStore()
+const projectStore = useProjectStore()
+const projectService = ref(new ProjectService())
+const loadedProjectId = ref(0)
+
+const currentProject = computed(() => {
+	return typeof baseStore.currentProject === 'undefined' ? {
+		id: 0,
+		title: '',
+		isArchived: false,
+		maxRight: null,
+	} : baseStore.currentProject
+})
+useTitle(() => currentProject.value.id ? getProjectTitle(currentProject.value) : '')
+
+// 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,
+	// loadProject
+	async (projectIdToLoad: number) => {
+		const projectData = {id: projectIdToLoad}
+		saveProjectToHistory(projectData)
+
+		// Don't load the project if we either already loaded it or aren't dealing with a project at all currently and
+		// the currently loaded project has the right set.
+		if (
+			(
+				projectIdToLoad === loadedProjectId.value ||
+				typeof projectIdToLoad === 'undefined' ||
+				projectIdToLoad === currentProject.value.id
+			)
+			&& typeof currentProject.value !== 'undefined' && currentProject.value.maxRight !== null
+		) {
+			loadedProjectId.value = props.projectId
+			return
+		}
+
+		console.debug(`Loading project, props.viewName = ${props.viewName}, $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
+		const projectFromStore = projectStore.getProjectById(projectData.id)
+		if (projectFromStore !== null) {
+			baseStore.setBackground(null)
+			baseStore.setBlurHash(null)
+			baseStore.handleSetCurrentProject({project: projectFromStore})
+		}
+
+		// We create an extra project object instead of creating it in project.value because that would trigger a ui update which would result in bad ux.
+		const project = new ProjectModel(projectData)
+		try {
+			const loadedProject = await projectService.value.get(project)
+			baseStore.handleSetCurrentProject({project: loadedProject})
+		} finally {
+			loadedProjectId.value = props.projectId
+		}
+	},
+	{immediate: true},
+)
+</script>
+
+<style lang="scss" scoped>
+.switch-view-container {
+  @media screen and (max-width: $tablet) {
+    display: flex;
+    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;
+}
+
+.switch-view-button {
+	padding: .25rem .5rem;
+	display: block;
+	border-radius: $radius;
+	transition: all 100ms;
+
+	&:not(:last-child) {
+		margin-right: .5rem;
+	}
+
+	&:hover {
+		color: var(--switch-view-color);
+		background: var(--primary);
+	}
+
+	&.is-active {
+		color: var(--switch-view-color);
+		background: var(--primary);
+		font-weight: bold;
+		box-shadow: var(--shadow-xs);
+	}
+}
+
+// FIXME: this should be in notification and set via a prop
+.is-archived .notification.is-warning {
+  margin-bottom: 1rem;
+}
+</style>

src/components/project/partials/ProjectCard.vue

@@ -1,39 +1,39 @@
 <template>
 	<div
-		class="list-card"
+		class="project-card"
 		:class="{
 			'has-light-text': background !== null,
 			'has-background': blurHashUrl !== '' || background !== null
 		}"
 		:style="{
-			'border-left': list.hexColor ? `0.25rem solid ${list.hexColor}` : undefined,
+			'border-left': project.hexColor ? `0.25rem solid ${project.hexColor}` : undefined,
 			'background-image': blurHashUrl !== '' ? `url(${blurHashUrl})` : undefined,
 		}"
 	>
 		<div
-			class="list-background background-fade-in"
+			class="project-background background-fade-in"
 			:class="{'is-visible': background}"
 			:style="{'background-image': background !== null ? `url(${background})` : undefined}"
 		/>
-		<span v-if="list.isArchived" class="is-archived" >{{ $t('namespace.archived') }}</span>
+		<span v-if="project.isArchived" class="is-archived" >{{ $t('namespace.archived') }}</span>
 
-		<div class="list-title" aria-hidden="true">{{ list.title }}</div>
+		<div class="project-title" aria-hidden="true">{{ project.title }}</div>
 		<BaseButton
-			class="list-button"
-			:aria-label="list.title"
-			:title="list.description"
+			class="project-button"
+			:aria-label="project.title"
+			:title="project.description"
 			:to="{
-				name: 'list.index',
-				params: { listId: list.id}
+				name: 'project.index',
+				params: { projectId: project.id}
 			}"
 		/>
 		<BaseButton
-			v-if="!list.isArchived"
+			v-if="!project.isArchived"
 			class="favorite"
-			:class="{'is-favorite': list.isFavorite}"
-			@click.prevent.stop="listStore.toggleListFavorite(list)"
+			:class="{'is-favorite': project.isFavorite}"
+			@click.prevent.stop="projectStore.toggleProjectFavorite(project)"
 		>
-			<icon :icon="list.isFavorite ? 'star' : ['far', 'star']" />
+			<icon :icon="project.isFavorite ? 'star' : ['far', 'star']" />
 		</BaseButton>
 	</div>
 </template>
@@ -41,30 +41,30 @@
 <script lang="ts" setup>
 import {toRef, type PropType} from 'vue'
 
-import type {IList} from '@/modelTypes/IList'
+import type {IProject} from '@/modelTypes/IProject'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 
-import {useListBackground} from './useListBackground'
-import {useListStore} from '@/stores/lists'
+import {useProjectBackground} from './useProjectBackground'
+import {useProjectStore} from '@/stores/projects'
 
 const props = defineProps({
-	list: {
-		type: Object as PropType<IList>,
+	project: {
+		type: Object as PropType<IProject>,
 		required: true,
 	},
 })
 
-const {background, blurHashUrl} = useListBackground(toRef(props, 'list'))
+const {background, blurHashUrl} = useProjectBackground(toRef(props, 'project'))
 
-const listStore = useListStore()
+const projectStore = useProjectStore()
 </script>
 
 <style lang="scss" scoped>
-.list-card {
-	--list-card-padding: 1rem;
+.project-card {
+	--project-card-padding: 1rem;
 	background: var(--white);
-	padding: var(--list-card-padding);
+	padding: var(--project-card-padding);
 	border-radius: $radius;
 	box-shadow: var(--shadow-sm);
 	transition: box-shadow $transition;
@@ -91,14 +91,14 @@ const listStore = useListStore()
 }
 
 .has-background,
-.list-background {
+.project-background {
 	background-size: cover;
 	background-repeat: no-repeat;
 	background-position: center;
 }
 
-.list-background,
-.list-button {
+.project-background,
+.project-button {
 	position: absolute;
 	top: 0;
 	right: 0;
@@ -111,7 +111,7 @@ const listStore = useListStore()
 	float: left;
 }
 
-.list-title {
+.project-title {
 	align-self: flex-end;
 	font-family: $vikunja-font;
 	font-weight: 400;
@@ -120,7 +120,7 @@ const listStore = useListStore()
 	color: var(--text);
 	width: 100%;
 	margin-bottom: 0;
-	max-height: calc(100% - (var(--list-card-padding) + 1rem)); // padding & height of the "is archived" badge
+	max-height: calc(100% - (var(--project-card-padding) + 1rem)); // padding & height of the "is archived" badge
 	overflow: hidden;
 	text-overflow: ellipsis;
 	word-break: break-word;
@@ -130,11 +130,11 @@ const listStore = useListStore()
 	-webkit-box-orient: vertical;
 }
 
-.has-light-text .list-title {
+.has-light-text .project-title {
 	color: var(--grey-100);
 }
 
-.has-background .list-title {
+.has-background .project-title {
 	text-shadow:
 		0 0 10px var(--black),
 		1px 1px 5px var(--grey-700),
@@ -144,10 +144,10 @@ const listStore = useListStore()
 
 .favorite {
 	position: absolute;
-	top: var(--list-card-padding);
-	right: var(--list-card-padding);
+	top: var(--project-card-padding);
+	right: var(--project-card-padding);
 	transition: opacity $transition, color $transition;
-	opacity: 0;
+	opacity: 1;
 
 	&:hover {
 		color: var(--warning);
@@ -160,8 +160,14 @@ const listStore = useListStore()
 	}
 }
 
-.list-card:hover .favorite {
-	opacity: 1;
+@media(hover: hover) and (pointer: fine) {
+	.project-card .favorite {
+		opacity: 0;
+	}
+
+	.project-card:hover .favorite {
+		opacity: 1;
+	}
 }
 
 .background-fade-in {
@@ -173,4 +179,4 @@ const listStore = useListStore()
     opacity: 1;
   }
 }
-</style>
+</style>

src/components/project/partials/ProjectCardGrid.vue

@@ -0,0 +1,73 @@
+<template>
+    <ul class="project-grid">
+			<li
+				v-for="(item, index) in filteredProjects"
+				:key="`project_${item.id}_${index}`"
+				class="project-grid-item"
+			>
+				<ProjectCard :project="item" />
+			</li>
+    </ul>
+</template>
+
+<script lang="ts" setup>
+import {computed, type PropType} from 'vue'
+import type {IProject} from '@/modelTypes/IProject'
+
+import ProjectCard from './ProjectCard.vue'
+
+const props = defineProps({
+	projects: {
+		type: Array as PropType<IProject[]>,
+		default: () => [],
+	},
+	showArchived: {
+		default: false,
+		type: Boolean,
+	},
+	itemLimit: {
+		type: Boolean,
+		default: false,
+	},
+})
+
+const filteredProjects = computed(() => {
+	return props.showArchived
+		? props.projects
+		: props.projects.filter(l => !l.isArchived)
+})
+</script>
+
+<style lang="scss" scoped>
+.project-grid {
+	--project-grid-item-height: 150px;
+	--project-grid-gap: 1rem;
+	margin: 0; // reset li
+	list-style-type: none;
+	display: grid;
+	grid-template-columns: repeat(var(--project-grid-columns), 1fr);
+	grid-auto-rows: var(--project-grid-item-height);
+	gap: var(--project-grid-gap);
+
+	@media screen and (min-width: $mobile) {
+		--project-grid-columns: 1;
+	}
+
+	@media screen and (min-width: $mobile) and (max-width: $tablet) {
+		--project-grid-columns: 2;
+	}
+
+	@media screen and (min-width: $tablet) and (max-width: $widescreen) {
+		--project-grid-columns: 3;
+	}
+
+	@media screen and (min-width: $widescreen) {
+		--project-grid-columns: 5;
+	}
+}
+
+.project-grid-item {
+	display: grid;
+	margin-top: 0; // remove padding coming form .content li + li
+}
+</style>

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

@@ -32,7 +32,7 @@
 <script setup lang="ts">
 import {computed, ref, watch} from 'vue'
 
-import Filters from '@/components/list/partials/filters.vue'
+import Filters from '@/components/project/partials/filters.vue'
 
 import {getDefaultParams} from '@/composables/useTaskList'
 

src/components/project/partials/filters.vue

@@ -20,7 +20,7 @@
 				{{ $t('filters.attributes.showDoneTasks') }}
 			</fancycheckbox>
 			<fancycheckbox
-				v-if="!['list.kanban', 'list.table'].includes($route.name as string)"
+				v-if="!['project.kanban', 'project.table'].includes($route.name as string)"
 				v-model="sortAlphabetically"
 				@update:model-value="change()"
 			>
@@ -154,14 +154,14 @@
 		</div>
 
 		<template
-			v-if="['filters.create', 'list.edit', 'filter.settings.edit'].includes($route.name as string)">
+			v-if="['filters.create', 'project.edit', 'filter.settings.edit'].includes($route.name as string)">
 			<div class="field">
-				<label class="label">{{ $t('list.lists') }}</label>
+				<label class="label">{{ $t('project.lists') }}</label>
 				<div class="control">
-					<SelectList
-						v-model="entities.lists"
-						@select="changeMultiselectFilter('lists', 'list_id')"
-						@remove="changeMultiselectFilter('lists', 'list_id')"
+					<SelectProject
+						v-model="entities.projects"
+						@select="changeMultiselectFilter('projects', 'project_id')"
+						@remove="changeMultiselectFilter('projects', 'project_id')"
 					/>
 				</div>
 			</div>
@@ -190,7 +190,7 @@ import {camelCase} from 'camel-case'
 import type {ILabel} from '@/modelTypes/ILabel'
 import type {IUser} from '@/modelTypes/IUser'
 import type {INamespace} from '@/modelTypes/INamespace'
-import type {IList} from '@/modelTypes/IList'
+import type {IProject} from '@/modelTypes/IProject'
 
 import {useLabelStore} from '@/stores/labels'
 
@@ -200,7 +200,7 @@ import PercentDoneSelect from '@/components/tasks/partials/percentDoneSelect.vue
 import EditLabels from '@/components/tasks/partials/editLabels.vue'
 import Fancycheckbox from '@/components/input/fancycheckbox.vue'
 import SelectUser from '@/components/input/SelectUser.vue'
-import SelectList from '@/components/input/SelectList.vue'
+import SelectProject from '@/components/input/SelectProject.vue'
 import SelectNamespace from '@/components/input/SelectNamespace.vue'
 
 import {parseDateOrString} from '@/helpers/time/parseDateOrString'
@@ -208,13 +208,13 @@ import {dateIsValid, formatISO} from '@/helpers/time/formatDate'
 import {objectToSnakeCase} from '@/helpers/case'
 
 import UserService from '@/services/user'
-import ListService from '@/services/list'
+import ProjectService from '@/services/project'
 import NamespaceService from '@/services/namespace'
 
 // FIXME: do not use this here for now. instead create new version from DEFAULT_PARAMS
 import {getDefaultParams} from '@/composables/useTaskList'
 
-// FIXME: merge with DEFAULT_PARAMS in taskList.js
+// FIXME: merge with DEFAULT_PARAMS in taskProject.js
 const DEFAULT_PARAMS = {
 	sort_by: [],
 	order_by: [],
@@ -239,7 +239,7 @@ const DEFAULT_FILTERS = {
 	reminders: '',
 	assignees: '',
 	labels: '',
-	list_id: '',
+	project_id: '',
 	namespace: '',
 } as const
 
@@ -264,23 +264,23 @@ const filters = ref({...DEFAULT_FILTERS})
 
 const services = {
 	users: shallowReactive(new UserService()),
-	lists: shallowReactive(new ListService()),
+	projects: shallowReactive(new ProjectService()),
   namespace: shallowReactive(new NamespaceService()),
 }
 
 interface Entities {
 	users: IUser[]
 	labels: ILabel[]
-	lists: IList[]
+	projects: IProject[]
 	namespace: INamespace[]
 }
 
-type EntityType = 'users' | 'labels' | 'lists' | 'namespace'
+type EntityType = 'users' | 'labels' | 'projects' | 'namespace'
 
 const entities: Entities = reactive({
 	users: [],
 	labels: [],
-	lists: [],
+	projects: [],
 	namespace: [],
 })
 
@@ -327,7 +327,7 @@ function prepareFilters() {
 	prepareSingleValue('percent_done', 'percentDone', 'usePercentDone', true)
 	prepareDate('reminders')
 	prepareRelatedObjectFilter('users', 'assignees')
-	prepareRelatedObjectFilter('lists', 'list_id')
+	prepareRelatedObjectFilter('projects', 'project_id')
 	prepareRelatedObjectFilter('namespace')
 
 	prepareSingleValue('labels')

src/components/project/partials/useProjectBackground.ts

@@ -1,30 +1,30 @@
 import {ref, watch, type Ref} from 'vue'
-import ListService from '@/services/list'
-import type {IList} from '@/modelTypes/IList'
+import ProjectService from '@/services/project'
+import type {IProject} from '@/modelTypes/IProject'
 import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
 
-export function useListBackground(list: Ref<IList>) {
+export function useProjectBackground(project: Ref<IProject>) {
 	const background = ref<string | null>(null)
 	const backgroundLoading = ref(false)
 	const blurHashUrl = ref('')
 
 	watch(
-		() => [list.value.id, list.value.backgroundBlurHash] as [IList['id'], IList['backgroundBlurHash']],
-		async ([listId, blurHash], oldValue) => {
+		() => [project.value.id, project.value.backgroundBlurHash] as [IProject['id'], IProject['backgroundBlurHash']],
+		async ([projectId, blurHash], oldValue) => {
 			if (
-				list.value === null ||
-				!list.value.backgroundInformation ||
+				project.value === null ||
+				!project.value.backgroundInformation ||
 				backgroundLoading.value
 			) {
 				return
 			}
 
-			const [oldListId, oldBlurHash] = oldValue || []
+			const [oldProjectId, oldBlurHash] = oldValue || []
 			if (
-				oldValue !== undefined && 
-				listId === oldListId && blurHash === oldBlurHash
+				oldValue !== undefined &&
+				projectId === oldProjectId && blurHash === oldBlurHash
 			) {
-				// list hasn't changed
+				// project hasn't changed
 				return
 			}
 
@@ -35,8 +35,8 @@ export function useListBackground(list: Ref<IList>) {
 					blurHashUrl.value = blurHash ? window.URL.createObjectURL(blurHash) : ''
 				})
 
-				const listService = new ListService()
-				const backgroundPromise = listService.background(list.value).then((result) => {
+				const projectService = new ProjectService()
+				const backgroundPromise = projectService.background(project.value).then((result) => {
 					background.value = result
 				})
 				await Promise.all([blurHashPromise, backgroundPromise])
@@ -44,7 +44,7 @@ export function useListBackground(list: Ref<IList>) {
 				backgroundLoading.value = false
 			}
 		},
-		{ immediate: true },
+		{immediate: true},
 	)
 
 	return {
@@ -52,4 +52,4 @@ export function useListBackground(list: Ref<IList>) {
 		blurHashUrl,
 		backgroundLoading,
 	}
-}
+}

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

@@ -8,24 +8,24 @@
 			</slot>
 		</template>
 
-		<template v-if="isSavedFilter(list)">
+		<template v-if="isSavedFilter(project)">
 			<dropdown-item
-				:to="{ name: 'filter.settings.edit', params: { listId: list.id } }"
+				:to="{ name: 'filter.settings.edit', params: { projectId: project.id } }"
 				icon="pen"
 			>
 				{{ $t('menu.edit') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'filter.settings.delete', params: { listId: list.id } }"
+				:to="{ name: 'filter.settings.delete', params: { projectId: project.id } }"
 				icon="trash-alt"
 			>
 				{{ $t('misc.delete') }}
 			</dropdown-item>
 		</template>
 
-		<template v-else-if="list.isArchived">
+		<template v-else-if="project.isArchived">
 			<dropdown-item
-				:to="{ name: 'list.settings.archive', params: { listId: list.id } }"
+				:to="{ name: 'project.settings.archive', params: { projectId: project.id } }"
 				icon="archive"
 			>
 				{{ $t('menu.unarchive') }}
@@ -33,32 +33,32 @@
 		</template>
 		<template v-else>
 			<dropdown-item
-				:to="{ name: 'list.settings.edit', params: { listId: list.id } }"
+				:to="{ name: 'project.settings.edit', params: { projectId: project.id } }"
 				icon="pen"
 			>
 				{{ $t('menu.edit') }}
 			</dropdown-item>
 			<dropdown-item
 				v-if="backgroundsEnabled"
-				:to="{ name: 'list.settings.background', params: { listId: list.id } }"
+				:to="{ name: 'project.settings.background', params: { projectId: project.id } }"
 				icon="image"
 			>
 				{{ $t('menu.setBackground') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'list.settings.share', params: { listId: list.id } }"
+				:to="{ name: 'project.settings.share', params: { projectId: project.id } }"
 				icon="share-alt"
 			>
 				{{ $t('menu.share') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'list.settings.duplicate', params: { listId: list.id } }"
+				:to="{ name: 'project.settings.duplicate', params: { projectId: project.id } }"
 				icon="paste"
 			>
 				{{ $t('menu.duplicate') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'list.settings.archive', params: { listId: list.id } }"
+				:to="{ name: 'project.settings.archive', params: { projectId: project.id } }"
 				icon="archive"
 			>
 				{{ $t('menu.archive') }}
@@ -66,14 +66,14 @@
 			<Subscription
 				class="has-no-shadow"
 				:is-button="false"
-				entity="list"
-				:entity-id="list.id"
-				:model-value="list.subscription"
+				entity="project"
+				:entity-id="project.id"
+				:model-value="project.subscription"
 				@update:model-value="setSubscriptionInStore"
 				type="dropdown"
 			/>
 			<dropdown-item
-				:to="{ name: 'list.settings.delete', params: { listId: list.id } }"
+				:to="{ name: 'project.settings.delete', params: { projectId: project.id } }"
 				icon="trash-alt"
 				class="has-text-danger"
 			>
@@ -90,26 +90,26 @@ import BaseButton from '@/components/base/BaseButton.vue'
 import Dropdown from '@/components/misc/dropdown.vue'
 import DropdownItem from '@/components/misc/dropdown-item.vue'
 import Subscription from '@/components/misc/subscription.vue'
-import type {IList} from '@/modelTypes/IList'
+import type {IProject} from '@/modelTypes/IProject'
 import type {ISubscription} from '@/modelTypes/ISubscription'
 
 import {isSavedFilter} from '@/services/savedFilter'
 import {useConfigStore} from '@/stores/config'
-import {useListStore} from '@/stores/lists'
+import {useProjectStore} from '@/stores/projects'
 import {useNamespaceStore} from '@/stores/namespaces'
 
 const props = defineProps({
-	list: {
-		type: Object as PropType<IList>,
+	project: {
+		type: Object as PropType<IProject>,
 		required: true,
 	},
 })
 
-const listStore = useListStore()
+const projectStore = useProjectStore()
 const namespaceStore = useNamespaceStore()
 const subscription = ref<ISubscription | null>(null)
 watchEffect(() => {
-	subscription.value = props.list.subscription ?? null
+	subscription.value = props.project.subscription ?? null
 })
 
 const configStore = useConfigStore()
@@ -117,11 +117,11 @@ const backgroundsEnabled = computed(() => configStore.enabledBackgroundProviders
 
 function setSubscriptionInStore(sub: ISubscription) {
 	subscription.value = sub
-	const updatedList = {
-		...props.list,
+	const updatedProject = {
+		...props.project,
 		subscription: sub,
 	}
-	listStore.setList(updatedList)
-	namespaceStore.setListInNamespaceById(updatedList)
+	projectStore.setProject(updatedProject)
+	namespaceStore.setProjectInNamespaceById(updatedProject)
 }
 </script>

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

@@ -63,18 +63,18 @@ import TeamService from '@/services/team'
 
 import NamespaceModel from '@/models/namespace'
 import TeamModel from '@/models/team'
-import ListModel from '@/models/list'
+import ProjectModel from '@/models/project'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'
 
 import {useBaseStore} from '@/stores/base'
-import {useListStore} from '@/stores/lists'
+import {useProjectStore} from '@/stores/projects'
 import {useNamespaceStore} from '@/stores/namespaces'
 import {useLabelStore} from '@/stores/labels'
 import {useTaskStore} from '@/stores/tasks'
 
-import {getHistory} from '@/modules/listHistory'
+import {getHistory} from '@/modules/projectHistory'
 import {parseTaskText, PrefixMode, PREFIXES} from '@/modules/parseTaskText'
 import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
 import {success} from '@/message'
@@ -82,13 +82,13 @@ import {success} from '@/message'
 import type {ITeam} from '@/modelTypes/ITeam'
 import type {ITask} from '@/modelTypes/ITask'
 import type {INamespace} from '@/modelTypes/INamespace'
-import type {IList} from '@/modelTypes/IList'
+import type {IProject} from '@/modelTypes/IProject'
 
 const {t} = useI18n({useScope: 'global'})
 const router = useRouter()
 
 const baseStore = useBaseStore()
-const listStore = useListStore()
+const projectStore = useProjectStore()
 const namespaceStore = useNamespaceStore()
 const labelStore = useLabelStore()
 const taskStore = useTaskStore()
@@ -98,13 +98,13 @@ type DoAction<Type = any> = { type: ACTION_TYPE } & Type
 enum ACTION_TYPE {
 	CMD = 'cmd',
 	TASK = 'task',
-	LIST = 'list',
+	PROJECT = 'project',
 	TEAM = 'team',
 }
 
 enum COMMAND_TYPE {
 	NEW_TASK = 'newTask',
-	NEW_LIST = 'newList',
+	NEW_PROJECT = 'newProject',
 	NEW_NAMESPACE = 'newNamespace',
 	NEW_TEAM = 'newTeam',
 }
@@ -112,7 +112,7 @@ enum COMMAND_TYPE {
 enum SEARCH_MODE {
 	ALL = 'all',
 	TASKS = 'tasks',
-	LISTS = 'lists',
+	PROJECTS = 'projects',
 	TEAMS = 'teams',
 }
 
@@ -137,26 +137,26 @@ function closeQuickActions() {
 	baseStore.setQuickActionsActive(false)
 }
 
-const foundLists = computed(() => {
-	const { list } = parsedQuery.value
+const foundProjects = computed(() => {
+	const { project } = parsedQuery.value
 	if (
 		searchMode.value === SEARCH_MODE.ALL ||
-		searchMode.value === SEARCH_MODE.LISTS ||
-		list === null
+		searchMode.value === SEARCH_MODE.PROJECTS ||
+		project === null
 	) {
 		return []
 	}
 
-	const ncache: { [id: ListModel['id']]: INamespace } = {}
+	const ncache: { [id: ProjectModel['id']]: INamespace } = {}
 	const history = getHistory()
-	const allLists = [
+	const allProjects = [
 		...new Set([
-			...history.map((l) => listStore.getListById(l.id)),
-			...listStore.searchList(list),
+			...history.map((l) => projectStore.getProjectById(l.id)),
+			...projectStore.searchProject(project),
 		]),
 	]
 
-	return allLists.filter((l) => {
+	return allProjects.filter((l) => {
 		if (typeof l === 'undefined' || l === null) {
 			return false
 		}
@@ -191,9 +191,9 @@ const results = computed<Result[]>(() => {
 			items: foundTasks.value,
 		},
 		{
-			type: ACTION_TYPE.LIST,
-			title: t('quickActions.lists'),
-			items: foundLists.value,
+			type: ACTION_TYPE.PROJECT,
+			title: t('quickActions.projects'),
+			items: foundProjects.value,
 		},
 		{
 			type: ACTION_TYPE.TEAM,
@@ -206,7 +206,7 @@ const results = computed<Result[]>(() => {
 const loading = computed(() => 
 	taskService.loading ||
 	namespaceStore.isLoading ||
-	listStore.isLoading ||
+	projectStore.isLoading ||
 	teamService.loading,
 )
 
@@ -224,11 +224,11 @@ const commands = computed<{ [key in COMMAND_TYPE]: Command }>(() => ({
 		placeholder: t('quickActions.newTask'),
 		action: newTask,
 	},
-	newList: {
-		type: COMMAND_TYPE.NEW_LIST,
-		title: t('quickActions.cmds.newList'),
-		placeholder: t('quickActions.newList'),
-		action: newList,
+	newProject: {
+		type: COMMAND_TYPE.NEW_PROJECT,
+		title: t('quickActions.cmds.newProject'),
+		placeholder: t('quickActions.newProject'),
+		action: newProject,
 	},
 	newNamespace: {
 		type: COMMAND_TYPE.NEW_NAMESPACE,
@@ -246,24 +246,24 @@ const commands = computed<{ [key in COMMAND_TYPE]: Command }>(() => ({
 
 const placeholder = computed(() => selectedCmd.value?.placeholder || t('quickActions.placeholder'))
 
-const currentList = computed(() => Object.keys(baseStore.currentList).length === 0
+const currentProject = computed(() => Object.keys(baseStore.currentProject).length === 0
 	? null
-	: baseStore.currentList,
+	: baseStore.currentProject,
 )
 
 const hintText = computed(() => {
 	let namespace
-	if (selectedCmd.value !== null && currentList.value !== null) {
+	if (selectedCmd.value !== null && currentProject.value !== null) {
 		switch (selectedCmd.value.type) {
 			case COMMAND_TYPE.NEW_TASK:
 				return t('quickActions.createTask', {
-					title: currentList.value.title,
+					title: currentProject.value.title,
 				})
-			case COMMAND_TYPE.NEW_LIST:
+			case COMMAND_TYPE.NEW_PROJECT:
 				namespace = namespaceStore.getNamespaceById(
-					currentList.value.namespaceId,
+					currentProject.value.namespaceId,
 				)
-				return t('quickActions.createList', {
+				return t('quickActions.createProject', {
 					title: namespace?.title,
 				})
 		}
@@ -275,8 +275,8 @@ const hintText = computed(() => {
 
 const availableCmds = computed(() => {
 	const cmds = []
-	if (currentList.value !== null) {
-		cmds.push(commands.value.newTask, commands.value.newList)
+	if (currentProject.value !== null) {
+		cmds.push(commands.value.newTask, commands.value.newProject)
 	}
 	cmds.push(commands.value.newNamespace, commands.value.newTeam)
 	return cmds
@@ -288,21 +288,21 @@ const searchMode = computed(() => {
 	if (query.value === '') {
 		return SEARCH_MODE.ALL
 	}
-	const { text, list, labels, assignees } = parsedQuery.value
+	const { text, project, labels, assignees } = parsedQuery.value
 	if (assignees.length === 0 && text !== '') {
 		return SEARCH_MODE.TASKS
 	}
 	if (
 		assignees.length === 0 &&
-		list !== null &&
+		project !== null &&
 		text === '' &&
 		labels.length === 0
 	) {
-		return SEARCH_MODE.LISTS
+		return SEARCH_MODE.PROJECTS
 	}
 	if (
 		assignees.length > 0 &&
-		list === null &&
+		project === null &&
 		text === '' &&
 		labels.length === 0
 	) {
@@ -356,7 +356,7 @@ function searchTasks() {
 		taskSearchTimeout.value = null
 	}
 
-	const { text, list: listName, labels } = parsedQuery.value
+	const { text, project: projectName, labels } = parsedQuery.value
 
 	const filters: Filter[] = []
 
@@ -373,10 +373,10 @@ function searchTasks() {
 		})
 	}
 
-	if (listName !== null) {
-		const list = listStore.findListByExactname(listName)
-		if (list !== null) {
-			addFilter('listId', list.id, 'equals')
+	if (projectName !== null) {
+		const project = projectStore.findProjectByExactname(projectName)
+		if (project !== null) {
+			addFilter('projectId', project.id, 'equals')
 		}
 	}
 
@@ -396,9 +396,9 @@ function searchTasks() {
 		const r = await taskService.getAll({}, params) as  DoAction<ITask>[]
 		foundTasks.value = r.map((t) => {
 			t.type = ACTION_TYPE.TASK
-			const list = listStore.getListById(t.listId)
-			if (list !== null) {
-				t.title = `${t.title} (${list.title})`
+			const project = projectStore.getProjectById(t.projectId)
+			if (project !== null) {
+				t.title = `${t.title} (${project.title})`
 			}
 			return t
 		})
@@ -428,7 +428,7 @@ function searchTeams() {
 			teamService.getAll({}, { s: t }),
 		)
 		const teamsResult = await Promise.all(teamSearchPromises)
-		foundTeams.value = teamsResult.flatMap((team) => {
+		foundTeams.value = teamsResult.flat().map((team) => {
 			team.title = team.name
 			return team
 		})
@@ -444,11 +444,11 @@ const searchInput = ref<HTMLElement | null>(null)
 
 async function doAction(type: ACTION_TYPE, item: DoAction) {
 	switch (type) {
-		case ACTION_TYPE.LIST:
+		case ACTION_TYPE.PROJECT:
 			closeQuickActions()
 			await router.push({
-				name: 'list.index',
-				params: { listId: (item as DoAction<IList>).id },
+				name: 'project.index',
+				params: { projectId: (item as DoAction<IProject>).id },
 			})
 			break
 		case ACTION_TYPE.TASK:
@@ -458,6 +458,13 @@ async function doAction(type: ACTION_TYPE, item: DoAction) {
 				params: { id: (item as DoAction<ITask>).id },
 			})
 			break
+		case ACTION_TYPE.TEAM:
+			closeQuickActions()
+			await router.push({
+				name: 'teams.edit',
+				params: { id: (item as DoAction<ITeam>).id },
+			})
+			break
 		case ACTION_TYPE.CMD:
 			query.value = ''
 			selectedCmd.value = item as DoAction<Command>
@@ -482,29 +489,29 @@ async function doCmd() {
 }
 
 async function newTask() {
-	if (currentList.value === null) {
+	if (currentProject.value === null) {
 		return
 	}
 	const task = await taskStore.createNewTask({
 		title: query.value,
-		listId: currentList.value.id,
+		projectId: currentProject.value.id,
 	})
 	success({ message: t('task.createSuccess') })
 	await router.push({ name: 'task.detail', params: { id: task.id } })
 }
 
-async function newList() {
-	if (currentList.value === null) {
+async function newProject() {
+	if (currentProject.value === null) {
 		return
 	}
-	const newList = await listStore.createList(new ListModel({
+	const newProject = await projectStore.createProject(new ProjectModel({
 		title: query.value,
-		namespaceId: currentList.value.namespaceId,
+		namespaceId: currentProject.value.namespaceId,
 	}))
-	success({ message: t('list.create.createdSuccess')})
+	success({ message: t('project.create.createdSuccess')})
 	await router.push({
-		name: 'list.index',
-		params: { listId: newList.id },
+		name: 'project.index',
+		params: { projectId: newProject.id },
 	})
 }
 

src/components/sharing/linkSharing.vue

@@ -1,39 +1,39 @@
 <template>
 	<div>
 		<p class="has-text-weight-bold">
-			{{ $t('list.share.links.title') }}
+			{{ $t('project.share.links.title') }}
 			<span
 				class="is-size-7 has-text-grey is-italic ml-3"
-				v-tooltip="$t('list.share.links.explanation')">
-				{{ $t('list.share.links.what') }}
+				v-tooltip="$t('project.share.links.explanation')">
+				{{ $t('project.share.links.what') }}
 			</span>
 		</p>
 
-		<div class="sharables-list">
+		<div class="sharables-project">
 			<x-button
 				v-if="!(linkShares.length === 0 || showNewForm)"
 				@click="showNewForm = true"
 				icon="plus"
 				class="mb-4">
-				{{ $t('list.share.links.create') }}
+				{{ $t('project.share.links.create') }}
 			</x-button>
 
 			<div class="p-4" v-if="linkShares.length === 0 || showNewForm">
 				<div class="field">
 					<label class="label" for="linkShareRight">
-						{{ $t('list.share.right.title') }}
+						{{ $t('project.share.right.title') }}
 					</label>
 					<div class="control">
 						<div class="select">
 							<select v-model="selectedRight" id="linkShareRight">
 								<option :value="RIGHTS.READ">
-									{{ $t('list.share.right.read') }}
+									{{ $t('project.share.right.read') }}
 								</option>
 								<option :value="RIGHTS.READ_WRITE">
-									{{ $t('list.share.right.readWrite') }}
+									{{ $t('project.share.right.readWrite') }}
 								</option>
 								<option :value="RIGHTS.ADMIN">
-									{{ $t('list.share.right.admin') }}
+									{{ $t('project.share.right.admin') }}
 								</option>
 							</select>
 						</div>
@@ -41,21 +41,21 @@
 				</div>
 				<div class="field">
 					<label class="label" for="linkShareName">
-						{{ $t('list.share.links.name') }}
+						{{ $t('project.share.links.name') }}
 					</label>
 					<div class="control">
 						<input
 							id="linkShareName"
 							class="input"
-							:placeholder="$t('list.share.links.namePlaceholder')"
-							v-tooltip="$t('list.share.links.nameExplanation')"
+							:placeholder="$t('project.share.links.namePlaceholder')"
+							v-tooltip="$t('project.share.links.nameExplanation')"
 							v-model="name"
 						/>
 					</div>
 				</div>
 				<div class="field">
 					<label class="label" for="linkSharePassword">
-						{{ $t('list.share.links.password') }}
+						{{ $t('project.share.links.password') }}
 					</label>
 					<div class="control">
 						<input
@@ -63,25 +63,25 @@
 							type="password"
 							class="input"
 							:placeholder="$t('user.auth.passwordPlaceholder')"
-							v-tooltip="$t('list.share.links.passwordExplanation')"
+							v-tooltip="$t('project.share.links.passwordExplanation')"
 							v-model="password"
 						/>
 					</div>
 				</div>
-				<x-button @click="add(listId)" icon="plus">
-					{{ $t('list.share.share') }}
+				<x-button @click="add(projectId)" icon="plus">
+					{{ $t('project.share.share') }}
 				</x-button>
 			</div>
 
 			<table
-				class="table has-actions is-striped is-hoverable is-fullwidth link-share-list"
+				class="table has-actions is-striped is-hoverable is-fullwidth"
 				v-if="linkShares.length > 0"
 			>
 				<thead>
 				<tr>
 					<th></th>
-					<th>{{ $t('list.share.links.view') }}</th>
-					<th>{{ $t('list.share.attributes.delete') }}</th>
+					<th>{{ $t('project.share.links.view') }}</th>
+					<th>{{ $t('project.share.attributes.delete') }}</th>
 				</tr>
 				</thead>
 				<tbody>
@@ -92,7 +92,7 @@
 						</p>
 
 						<p class="mb-2">
-							<i18n-t keypath="list.share.links.sharedBy" scope="global">
+							<i18n-t keypath="project.share.links.sharedBy" scope="global">
 								<strong>{{ getDisplayName(s.sharedBy) }}</strong>
 							</i18n-t>
 						</p>
@@ -102,19 +102,19 @@
 								<span class="icon is-small">
 									<icon icon="lock"/>
 								</span>&nbsp;
-								{{ $t('list.share.right.admin') }}
+								{{ $t('project.share.right.admin') }}
 							</template>
 							<template v-else-if="s.right === RIGHTS.READ_WRITE">
 								<span class="icon is-small">
 									<icon icon="pen"/>
 								</span>&nbsp;
-								{{ $t('list.share.right.readWrite') }}
+								{{ $t('project.share.right.readWrite') }}
 							</template>
 							<template v-else>
 								<span class="icon is-small">
 									<icon icon="users"/>
 								</span>&nbsp;
-								{{ $t('list.share.right.read') }}
+								{{ $t('project.share.right.read') }}
 							</template>
 						</p>
 						
@@ -172,14 +172,14 @@
 		<modal
 			:enabled="showDeleteModal"
 			@close="showDeleteModal = false"
-			@submit="remove(listId)"
+			@submit="remove(projectId)"
 		>
 			<template #header>
-				<span>{{ $t('list.share.links.remove') }}</span>
+				<span>{{ $t('project.share.links.remove') }}</span>
 			</template>
 
 			<template #text>
-				<p>{{ $t('list.share.links.removeText') }}</p>
+				<p>{{ $t('project.share.links.removeText') }}</p>
 			</template>
 		</modal>
 	</div>
@@ -193,19 +193,19 @@ import {RIGHTS} from '@/constants/rights'
 import LinkShareModel from '@/models/linkShare'
 
 import type {ILinkShare} from '@/modelTypes/ILinkShare'
-import type {IList} from '@/modelTypes/IList'
+import type {IProject} from '@/modelTypes/IProject'
 
 import LinkShareService from '@/services/linkShare'
 
 import {useCopyToClipboard} from '@/composables/useCopyToClipboard'
 import {success} from '@/message'
 import {getDisplayName} from '@/models/user'
-import type {ListView} from '@/types/ListView'
-import {LIST_VIEWS} from '@/types/ListView'
+import type {ProjectView} from '@/types/ProjectView'
+import {PROJECT_VIEWS} from '@/types/ProjectView'
 import {useConfigStore} from '@/stores/config'
 
 const props = defineProps({
-	listId: {
+	projectId: {
 		default: 0,
 		required: true,
 	},
@@ -222,20 +222,20 @@ const showDeleteModal = ref(false)
 const linkIdToDelete = ref(0)
 const showNewForm = ref(false)
 
-type SelectedViewMapper = Record<IList['id'], ListView>
+type SelectedViewMapper = Record<IProject['id'], ProjectView>
 
 const selectedView = ref<SelectedViewMapper>({})
 
-const availableViews = computed<Record<ListView, string>>(() => ({
-	list: t('list.list.title'),
-	gantt: t('list.gantt.title'),
-	table: t('list.table.title'),
-	kanban: t('list.kanban.title'),
+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 copy = useCopyToClipboard()
 watch(
-	() => props.listId,
+	() => props.projectId,
 	load,
 	{immediate: true},
 )
@@ -243,23 +243,23 @@ watch(
 const configStore = useConfigStore()
 const frontendUrl = computed(() => configStore.frontendUrl)
 
-async function load(listId: IList['id']) {
-	// If listId == 0 the list on the calling component wasn't already loaded, so we just bail out here
-	if (listId === 0) {
+async function load(projectId: IProject['id']) {
+	// If projectId == 0 the project on the calling component wasn't already loaded, so we just bail out here
+	if (projectId === 0) {
 		return
 	}
 
-	const links = await linkShareService.getAll({listId})
+	const links = await linkShareService.getAll({projectId})
 	links.forEach((l: ILinkShare) => {
-		selectedView.value[l.id] = 'list'
+		selectedView.value[l.id] = 'project'
 	})
 	linkShares.value = links
 }
 
-async function add(listId: IList['id']) {
+async function add(projectId: IProject['id']) {
 	const newLinkShare = new LinkShareModel({
 		right: selectedRight.value,
-		listId,
+		projectId,
 		name: name.value,
 		password: password.value,
 	})
@@ -268,31 +268,31 @@ async function add(listId: IList['id']) {
 	name.value = ''
 	password.value = ''
 	showNewForm.value = false
-	success({message: t('list.share.links.createSuccess')})
-	await load(listId)
+	success({message: t('project.share.links.createSuccess')})
+	await load(projectId)
 }
 
-async function remove(listId: IList['id']) {
+async function remove(projectId: IProject['id']) {
 	try {
 		await linkShareService.delete(new LinkShareModel({
 			id: linkIdToDelete.value,
-			listId,
+			projectId,
 		}))
-		success({message: t('list.share.links.deleteSuccess')})
-		await load(listId)
+		success({message: t('project.share.links.deleteSuccess')})
+		await load(projectId)
 	} finally {
 		showDeleteModal.value = false
 	}
 }
 
-function getShareLink(hash: string, view: ListView = LIST_VIEWS.LIST) {
+function getShareLink(hash: string, view: ProjectView = PROJECT_VIEWS.LIST) {
 	return frontendUrl.value + 'share/' + hash + '/auth?view=' + view
 }
 </script>
 
 <style lang="scss" scoped>
 // FIXME: I think this is not needed
-.sharables-list:not(.card-content) {
+.sharables-project:not(.card-content) {
 	overflow-y: auto
 }
 </style>

src/components/sharing/userTeam.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<p class="has-text-weight-bold">
-			{{ $t('list.share.userTeam.shared', {type: shareTypeNames}) }}
+			{{ $t('project.share.userTeam.shared', {type: shareTypeNames}) }}
 		</p>
 		<div v-if="userIsAdmin">
 			<div class="field has-addons">
@@ -19,7 +19,7 @@
 					/>
 				</p>
 				<p class="control">
-					<x-button @click="add()">{{ $t('list.share.share') }}</x-button>
+					<x-button @click="add()">{{ $t('project.share.share') }}</x-button>
 				</p>
 			</div>
 		</div>
@@ -31,7 +31,7 @@
 					<td>{{ getDisplayName(s) }}</td>
 					<td>
 						<template v-if="s.id === userInfo.id">
-							<b class="is-success">{{ $t('list.share.userTeam.you') }}</b>
+							<b class="is-success">{{ $t('project.share.userTeam.you') }}</b>
 						</template>
 					</td>
 				</template>
@@ -52,19 +52,19 @@
 							<span class="icon is-small">
 								<icon icon="lock"/>
 							</span>
-						{{ $t('list.share.right.admin') }}
+						{{ $t('project.share.right.admin') }}
 					</template>
 					<template v-else-if="s.right === RIGHTS.READ_WRITE">
 							<span class="icon is-small">
 								<icon icon="pen"/>
 							</span>
-						{{ $t('list.share.right.readWrite') }}
+						{{ $t('project.share.right.readWrite') }}
 					</template>
 					<template v-else>
 							<span class="icon is-small">
 								<icon icon="users"/>
 							</span>
-						{{ $t('list.share.right.read') }}
+						{{ $t('project.share.right.read') }}
 					</template>
 				</td>
 				<td class="actions" v-if="userIsAdmin">
@@ -78,19 +78,19 @@
 								:selected="s.right === RIGHTS.READ"
 								:value="RIGHTS.READ"
 							>
-								{{ $t('list.share.right.read') }}
+								{{ $t('project.share.right.read') }}
 							</option>
 							<option
 								:selected="s.right === RIGHTS.READ_WRITE"
 								:value="RIGHTS.READ_WRITE"
 							>
-								{{ $t('list.share.right.readWrite') }}
+								{{ $t('project.share.right.readWrite') }}
 							</option>
 							<option
 								:selected="s.right === RIGHTS.ADMIN"
 								:value="RIGHTS.ADMIN"
 							>
-								{{ $t('list.share.right.admin') }}
+								{{ $t('project.share.right.admin') }}
 							</option>
 						</select>
 					</div>
@@ -110,7 +110,7 @@
 		</table>
 
 		<nothing v-else>
-			{{ $t('list.share.userTeam.notShared', {type: shareTypeNames}) }}
+			{{ $t('project.share.userTeam.notShared', {type: shareTypeNames}) }}
 		</nothing>
 
 		<modal
@@ -120,11 +120,11 @@
 		>
 			<template #header>
 				<span>{{
-						$t('list.share.userTeam.removeHeader', {type: shareTypeName, sharable: sharableName})
+						$t('project.share.userTeam.removeHeader', {type: shareTypeName, sharable: sharableName})
 					}}</span>
 			</template>
 			<template #text>
-				<p>{{ $t('list.share.userTeam.removeText', {type: shareTypeName, sharable: sharableName}) }}</p>
+				<p>{{ $t('project.share.userTeam.removeText', {type: shareTypeName, sharable: sharableName}) }}</p>
 			</template>
 		</modal>
 	</div>
@@ -143,9 +143,9 @@ import UserNamespaceService from '@/services/userNamespace'
 import UserNamespaceModel from '@/models/userNamespace'
 import type {IUserNamespace} from '@/modelTypes/IUserNamespace'
 
-import UserListService from '@/services/userList'
-import UserListModel from '@/models/userList'
-import type {IUserList} from '@/modelTypes/IUserList'
+import UserProjectService from '@/services/userProject'
+import UserProjectModel from '@/models/userProject'
+import type {IUserProject} from '@/modelTypes/IUserProject'
 
 import UserService from '@/services/user'
 import UserModel, { getDisplayName } from '@/models/user'
@@ -155,9 +155,9 @@ import TeamNamespaceService from '@/services/teamNamespace'
 import TeamNamespaceModel from '@/models/teamNamespace'
 import type { ITeamNamespace } from '@/modelTypes/ITeamNamespace'
 
-import TeamListService from '@/services/teamList'
-import TeamListModel from '@/models/teamList'
-import type { ITeamList } from '@/modelTypes/ITeamList'
+import TeamProjectService from '@/services/teamProject'
+import TeamProjectModel from '@/models/teamProject'
+import type { ITeamProject } from '@/modelTypes/ITeamProject'
 
 import TeamService from '@/services/team'
 import TeamModel from '@/models/team'
@@ -172,7 +172,7 @@ import {useAuthStore} from '@/stores/auth'
 
 const props = defineProps({
 	type: {
-		type: String as PropType<'list' | 'namespace'>,
+		type: String as PropType<'project' | 'namespace'>,
 		default: '',
 	},
 	shareType: {
@@ -191,9 +191,9 @@ const props = defineProps({
 
 const {t} = useI18n({useScope: 'global'})
 
-// This user service is either a userNamespaceService or a userListService, depending on the type we are using
-let stuffService: UserNamespaceService | UserListService | TeamListService | TeamNamespaceService
-let stuffModel: IUserNamespace | IUserList | ITeamList | ITeamNamespace
+// This user service is either a userNamespaceService or a userProjectService, depending on the type we are using
+let stuffService: UserNamespaceService | UserProjectService | TeamProjectService | TeamNamespaceService
+let stuffModel: IUserNamespace | IUserProject | ITeamProject | ITeamNamespace
 let searchService: UserService | TeamService
 let sharable: Ref<IUser | ITeam>
 
@@ -201,7 +201,7 @@ const searchLabel = ref('')
 const selectedRight = ref({})
 
 
-// This holds either teams or users who this namepace or list is shared with
+// This holds either teams or users who this namepace or project is shared with
 const sharables = ref([])
 const showDeleteModal = ref(false)
 
@@ -212,11 +212,11 @@ const userInfo = computed(() => authStore.info)
 function createShareTypeNameComputed(count: number) {
 	return computed(() => {
 		if (props.shareType === 'user') {
-			return t('list.share.userTeam.typeUser', count)
+			return t('project.share.userTeam.typeUser', count)
 		}
 
 		if (props.shareType === 'team') {
-			return t('list.share.userTeam.typeTeam', count)
+			return t('project.share.userTeam.typeTeam', count)
 		}
 
 		return ''
@@ -227,8 +227,8 @@ const shareTypeNames = createShareTypeNameComputed(2)
 const shareTypeName = createShareTypeNameComputed(1)
 
 const sharableName = computed(() => {
-	if (props.type === 'list') {
-		return t('list.list.title')
+	if (props.type === 'project') {
+		return t('project.list.title')
 	}
 
 	if (props.shareType === 'namespace') {
@@ -244,9 +244,9 @@ if (props.shareType === 'user') {
 	sharable = ref(new UserModel())
 	searchLabel.value = 'username'
 
-	if (props.type === 'list') {
-		stuffService = shallowReactive(new UserListService())
-		stuffModel = reactive(new UserListModel({listId: props.id}))
+	if (props.type === 'project') {
+		stuffService = shallowReactive(new UserProjectService())
+		stuffModel = reactive(new UserProjectModel({projectId: props.id}))
 	} else if (props.type === 'namespace') {
 		stuffService = shallowReactive(new UserNamespaceService())
 		stuffModel = reactive(new UserNamespaceModel({
@@ -261,9 +261,9 @@ if (props.shareType === 'user') {
 	sharable = ref(new TeamModel())
 	searchLabel.value = 'name'
 
-	if (props.type === 'list') {
-		stuffService = shallowReactive(new TeamListService())
-		stuffModel = reactive(new TeamListModel({listId: props.id}))
+	if (props.type === 'project') {
+		stuffService = shallowReactive(new TeamProjectService())
+		stuffModel = reactive(new TeamProjectModel({projectId: props.id}))
 	} else if (props.type === 'namespace') {
 		stuffService = shallowReactive(new TeamNamespaceService())
 		stuffModel = reactive(new TeamNamespaceModel({
@@ -303,7 +303,7 @@ async function deleteSharable() {
 		}
 	}
 	success({
-		message: t('list.share.userTeam.removeSuccess', {
+		message: t('project.share.userTeam.removeSuccess', {
 			type: shareTypeName.value,
 			sharable: sharableName.value,
 		}),
@@ -326,7 +326,7 @@ async function add(admin) {
 	}
 
 	await stuffService.create(stuffModel)
-	success({message: t('list.share.userTeam.addedSuccess', {type: shareTypeName.value})})
+	success({message: t('project.share.userTeam.addedSuccess', {type: shareTypeName.value})})
 	await load()
 }
 
@@ -358,7 +358,7 @@ async function toggleType(sharable) {
 			sharables.value[i].right = r.right
 		}
 	}
-	success({message: t('list.share.userTeam.updatedSuccess', {type: shareTypeName.value})})
+	success({message: t('project.share.userTeam.updatedSuccess', {type: shareTypeName.value})})
 }
 
 const found = ref([])

src/components/tasks/GanttChart.vue

@@ -38,9 +38,8 @@
 </template>
 
 <script setup lang="ts">
-import {computed, ref, watch, toRefs} from 'vue'
+import {computed, ref, watch, toRefs, onActivated} from 'vue'
 import {useRouter} from 'vue-router'
-import {useNow} from '@vueuse/core'
 
 import {getHexColor} from '@/models/task'
 
@@ -50,7 +49,7 @@ import {parseKebabDate} from '@/helpers/time/parseKebabDate'
 
 import type {ITask, ITaskPartialWithId} from '@/modelTypes/ITask'
 import type {DateISO} from '@/types/DateISO'
-import type {GanttFilters} from '@/views/list/helpers/useGanttFilters'
+import type {GanttFilters} from '@/views/project/helpers/useGanttFilters'
 
 import {
 	extendDayjs,
@@ -157,7 +156,8 @@ function openTask(e: {
 
 const weekDayFromDate = useWeekDayFromDate()
 
-const today = useNow()
+const today = ref(new Date())
+onActivated(() => today.value = new Date())
 const dateIsToday = computed(() => (date: Date) => {
 	return (
 		date.getDate() === today.value.getDate() &&

src/components/tasks/add-task.vue

@@ -5,7 +5,7 @@
 				<textarea
 					class="add-task-textarea input"
 					:class="{'textarea-empty': newTaskTitle === ''}"
-					:placeholder="$t('list.list.addPlaceholder')"
+					:placeholder="$t('project.list.addPlaceholder')"
 					rows="1"
 					v-focus
 					v-model="newTaskTitle"
@@ -24,10 +24,10 @@
 					@click="addTask()"
 					icon="plus"
 					:loading="loading"
-					:aria-label="$t('list.list.add')"
+					:aria-label="$t('project.list.add')"
 				>
 					<span class="button-text">
-						{{ $t('list.list.add') }}
+						{{ $t('project.list.add') }}
 					</span>
 				</x-button>
 			</p>
@@ -107,7 +107,7 @@ const loading = computed(() => taskStore.isLoading)
 
 async function addTask() {
 	if (newTaskTitle.value === '') {
-		errorMessage.value = t('list.create.addTitleRequired')
+		errorMessage.value = t('project.create.addTitleRequired')
 		return
 	}
 	errorMessage.value = ''
@@ -128,20 +128,20 @@ async function addTask() {
 	const allLabels = tasksToCreate.map(({title}) => getLabelsFromPrefix(title) ?? [])
 	await taskStore.ensureLabelsExist(allLabels.flat())
 
-	const newTasks = tasksToCreate.map(async ({title, list}) => {
+	const newTasks = tasksToCreate.map(async ({title, project}) => {
 		if (title === '') {
 			return
 		}
 
-		// If the task has a list specified, make sure to use it
-		let listId = null
-		if (list !== null) {
-			listId = await taskStore.findListId({list, listId: 0})
+		// If the task has a project specified, make sure to use it
+		let projectId = null
+		if (project !== null) {
+			projectId = await taskStore.findProjectId({project, projectId: 0})
 		}
 
 		const task = await taskStore.createNewTask({
 			title,
-			listId: listId || authStore.settings.defaultListId,
+			projectId: projectId || authStore.settings.defaultProjectId,
 			position: props.defaultPosition,
 		})
 		createdTasks[title] = task
@@ -176,7 +176,7 @@ async function addTask() {
 			}))
 
 			createdTask.relatedTasks[RELATION_KIND.PARENTTASK] = [createdParentTask]
-			// we're only emitting here so that the relation shows up in the task list
+			// we're only emitting here so that the relation shows up in the project
 			emit('taskAdded', createdTask)
 
 			return rel
@@ -184,8 +184,8 @@ async function addTask() {
 		await Promise.all(relations)
 	} catch (e: any) {
 		newTaskTitle.value = taskTitleBackup
-		if (e?.message === 'NO_LIST') {
-			errorMessage.value = t('list.create.addListRequired')
+		if (e?.message === 'NO_PROJECT') {
+			errorMessage.value = t('project.create.addProjectRequired')
 			return
 		}
 		throw e

src/components/tasks/partials/editAssignees.vue

@@ -1,6 +1,6 @@
 <template>
 	<Multiselect
-		:loading="listUserService.loading"
+		:loading="projectUserService.loading"
 		:placeholder="$t('task.assignee.placeholder')"
 		:multiple="true"
 		@search="findUser"
@@ -30,7 +30,7 @@ import Multiselect from '@/components/input/multiselect.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 
 import {includesById} from '@/helpers/utils'
-import ListUserService from '@/services/listUsers'
+import ProjectUserService from '@/services/projectUsers'
 import {success} from '@/message'
 import {useTaskStore} from '@/stores/tasks'
 
@@ -42,7 +42,7 @@ const props = defineProps({
 		type: Number,
 		required: true,
 	},
-	listId: {
+	projectId: {
 		type: Number,
 		required: true,
 	},
@@ -59,7 +59,7 @@ const emit = defineEmits(['update:modelValue'])
 const taskStore = useTaskStore()
 const {t} = useI18n({useScope: 'global'})
 
-const listUserService = shallowReactive(new ListUserService())
+const projectUserService = shallowReactive(new ProjectUserService())
 const foundUsers = ref<IUser[]>([])
 const assignees = ref<IUser[]>([])
 let isAdding = false
@@ -94,7 +94,7 @@ async function addAssignee(user: IUser) {
 async function removeAssignee(user: IUser) {
 	await taskStore.removeAssignee({user: user, taskId: props.taskId})
 
-	// Remove the assignee from the list
+	// Remove the assignee from the project
 	for (const a in assignees.value) {
 		if (assignees.value[a].id === user.id) {
 			assignees.value.splice(a, 1)
@@ -109,7 +109,7 @@ async function findUser(query: string) {
 		return
 	}
 
-	const response = await listUserService.getAll({listId: props.listId}, {s: query}) as IUser[]
+	const response = await projectUserService.getAll({projectId: props.projectId}, {s: query}) as IUser[]
 
 	// Filter the results to not include users who are already assigned
 	foundUsers.value = response

src/components/tasks/partials/projectSearch.vue

@@ -1,18 +1,18 @@
 <template>
 	<Multiselect
 		class="control is-expanded"
-		:placeholder="$t('list.search')"
-		:search-results="foundLists"
+		:placeholder="$t('project.search')"
+		:search-results="foundProjects"
 		label="title"
-		:select-placeholder="$t('list.searchSelect')"
-		:model-value="list"
-		@update:model-value="Object.assign(list, $event)"
+		:select-placeholder="$t('project.searchSelect')"
+		:model-value="project"
+		@update:model-value="Object.assign(project, $event)"
 		@select="select"
-		@search="findLists"
+		@search="findProjects"
 	>
 		<template #searchResult="{option}">
-			<span class="list-namespace-title search-result">{{ namespace((option as IList).namespaceId) }} ></span>
-			{{ (option as IList).title }}
+			<span class="project-namespace-title search-result">{{ namespace((option as IProject).namespaceId) }} ></span>
+			{{ (option as IProject).title }}
 		</template>
 	</Multiselect>
 </template>
@@ -22,19 +22,19 @@ import {reactive, ref, watch} from 'vue'
 import type {PropType} from 'vue'
 import {useI18n} from 'vue-i18n'
 
-import type {IList} from '@/modelTypes/IList'
+import type {IProject} from '@/modelTypes/IProject'
 import type {INamespace} from '@/modelTypes/INamespace'
 
-import {useListStore} from '@/stores/lists'
+import {useProjectStore} from '@/stores/projects'
 import {useNamespaceStore} from '@/stores/namespaces'
 
-import ListModel from '@/models/list'
+import ProjectModel from '@/models/project'
 
 import Multiselect from '@/components/input/multiselect.vue'
 
 const props = defineProps({
 	modelValue: {
-		type: Object as PropType<IList>,
+		type: Object as PropType<IProject>,
 		required: false,
 	},
 })
@@ -42,45 +42,45 @@ const emit = defineEmits(['update:modelValue'])
 
 const {t} = useI18n({useScope: 'global'})
 
-const list: IList = reactive(new ListModel())
+const project: IProject = reactive(new ProjectModel())
 
 watch(
 	() => props.modelValue,
-	(newList) => Object.assign(list, newList),
+	(newProject) => Object.assign(project, newProject),
 	{
 		immediate: true,
 		deep: true,
 	},
 )
 
-const listStore = useListStore()
+const projectStore = useProjectStore()
 const namespaceStore = useNamespaceStore()
-const foundLists = ref<IList[]>([])
-function findLists(query: string) {
+const foundProjects = ref<IProject[]>([])
+function findProjects(query: string) {
 	if (query === '') {
 		select(null)
 	}
-	foundLists.value = listStore.searchList(query)
+	foundProjects.value = projectStore.searchProject(query)
 }
 
-function select(l: IList | null) {
+function select(l: IProject | null) {
 	if (l === null) {
 		return
 	}
-	Object.assign(list, l)
-	emit('update:modelValue', list)
+	Object.assign(project, l)
+	emit('update:modelValue', project)
 }
 
 function namespace(namespaceId: INamespace['id']) {
 	const namespace = namespaceStore.getNamespaceById(namespaceId)
 	return namespace !== null
 		? namespace.title
-		: t('list.shared')
+		: t('project.shared')
 }
 </script>
 
 <style lang="scss" scoped>
-.list-namespace-title {
+.project-namespace-title {
 	color: var(--grey-500);
 }
 </style>

src/components/tasks/partials/quick-add-magic.vue

@@ -37,14 +37,14 @@
 					{{ $t('task.quickAddMagic.multiple') }}
 				</p>
 
-				<h3>{{ $t('list.list.title') }}</h3>
+				<h3>{{ $t('project.list.title') }}</h3>
 				<p>
-					{{ $t('task.quickAddMagic.list1', {prefix: prefixes.list}) }}
-					{{ $t('task.quickAddMagic.list2') }}
+					{{ $t('task.quickAddMagic.project1', {prefix: prefixes.project}) }}
+					{{ $t('task.quickAddMagic.project2') }}
 				</p>
 				<p>
-					{{ $t('task.quickAddMagic.list3') }}
-					{{ $t('task.quickAddMagic.list4', {prefix: prefixes.list}) }}
+					{{ $t('task.quickAddMagic.project3') }}
+					{{ $t('task.quickAddMagic.project4', {prefix: prefixes.project}) }}
 				</p>
 
 				<h3>{{ $t('task.quickAddMagic.dateAndTime') }}</h3>

src/components/tasks/partials/relatedTasks.vue

@@ -43,8 +43,8 @@
 								:class="{'is-strikethrough': task.done}"
 							>
 								<span
-									class="different-list"
-									v-if="task.listId !== listId"
+									class="different-project"
+									v-if="task.projectId !== projectId"
 								>
 									<span
 										v-if="task.differentNamespace !== null"
@@ -52,9 +52,9 @@
 										{{ task.differentNamespace }} >
 									</span>
 									<span
-										v-if="task.differentList !== null"
-										v-tooltip="$t('task.relation.differentList')">
-										{{ task.differentList }} >
+										v-if="task.differentProject !== null"
+										v-tooltip="$t('task.relation.differentProject')">
+										{{ task.differentProject }} >
 									</span>
 								</span>
 								{{ task.title }}
@@ -98,8 +98,8 @@
 							:class="{ 'is-strikethrough': t.done}"
 						>
 							<span
-								class="different-list"
-								v-if="t.listId !== listId"
+								class="different-project"
+								v-if="t.projectId !== projectId"
 							>
 								<span
 									v-if="t.differentNamespace !== null"
@@ -107,9 +107,9 @@
 									{{ t.differentNamespace }} >
 								</span>
 								<span
-									v-if="t.differentList !== null"
-									v-tooltip="$t('task.relation.differentList')">
-									{{ t.differentList }} >
+									v-if="t.differentProject !== null"
+									v-tooltip="$t('task.relation.differentProject')">
+									{{ t.differentProject }} >
 								</span>
 							</span>
 							{{ t.title }}
@@ -186,7 +186,7 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
-	listId: {
+	projectId: {
 		type: Number,
 		default: 0,
 	},
@@ -230,17 +230,17 @@ async function findTasks(newQuery: string) {
 	foundTasks.value = await taskService.getAll({}, {s: newQuery})
 }
 
-const getListAndNamespaceById = (listId: number) => namespaceStore.getListAndNamespaceById(listId, true)
+const getProjectAndNamespaceById = (projectId: number) => namespaceStore.getProjectAndNamespaceById(projectId, true)
 
-const namespace = computed(() => getListAndNamespaceById(props.listId)?.namespace)
+const namespace = computed(() => getProjectAndNamespaceById(props.projectId)?.namespace)
 
 function mapRelatedTasks(tasks: ITask[]) {
 	return tasks.map(task => {
 		// by doing this here once we can save a lot of duplicate calls in the template
 		const {
-			list,
+			project,
 			namespace: taskNamespace,
-		} = getListAndNamespaceById(task.listId) || {list: null, namespace: null}
+		} = getProjectAndNamespaceById(task.projectId) || {project: null, namespace: null}
 
 		return {
 			...task,
@@ -248,10 +248,10 @@ function mapRelatedTasks(tasks: ITask[]) {
 				(taskNamespace !== null &&
 					taskNamespace.id !== namespace.value.id &&
 					taskNamespace?.title) || null,
-			differentList:
-				(list !== null &&
-					task.listId !== props.listId &&
-					list?.title) || null,
+			differentProject:
+				(project !== null &&
+					task.projectId !== props.projectId &&
+					project?.title) || null,
 		}
 	})
 }
@@ -343,7 +343,7 @@ async function removeTaskRelation() {
 }
 
 async function createAndRelateTask(title: string) {
-	const newTask = await taskService.create(new TaskModel({title, listId: props.listId}))
+	const newTask = await taskService.create(new TaskModel({title, projectId: props.projectId}))
 	newTaskRelation.task = newTask
 	await addTaskRelation()
 }
@@ -351,7 +351,7 @@ async function createAndRelateTask(title: string) {
 async function toggleTaskDone(task: ITask) {
 	await taskStore.update(task)
 	
-	// Find the task in the list and update it so that it is correctly strike through
+	// Find the task in the project and update it so that it is correctly strike through
 	Object.entries(relatedTasks.value).some(([kind, tasks]) => {
 		return (tasks as ITask[]).some((t, key) => {
 			const found = t.id === task.id
@@ -379,7 +379,7 @@ async function toggleTaskDone(task: ITask) {
 	}
 }
 
-.different-list {
+.different-project {
 	color: var(--grey-500);
 	width: auto;
 }
@@ -442,5 +442,6 @@ async function toggleTaskDone(task: ITask) {
 .task-done-checkbox {
 	padding: 0;
 	height: 18px; // The exact height of the checkbox in the container
+	margin-right: .75rem;
 }
 </style>

src/components/tasks/partials/singleTaskInProject.vue

@@ -1,33 +1,30 @@
 <template>
-	<router-link
-		:to="taskDetailRoute"
-		:class="{'is-loading': taskService.loading}"
-		class="task loader-container"
-	>
+	<div :class="{'is-loading': taskService.loading}" class="task loader-container">
 		<fancycheckbox
 			:disabled="(isArchived || disabled) && !canMarkAsDone"
-			@change="markAsDone"
+			@update:model-value="markAsDone"
 			v-model="task.done"
 		/>
-		
+
 		<ColorBubble
-			v-if="showListColor && listColor !== '' && currentList.id !== task.listId"
-			:color="listColor"
+			v-if="showProjectColor && projectColor !== '' && currentProject.id !== task.projectId"
+			:color="projectColor"
 			class="mr-1"
 		/>
-		
-		<div
-			:class="{ 'done': task.done, 'show-list': showList && taskList !== null}"
+
+		<router-link
+			:to="taskDetailRoute"
+			:class="{ 'done': task.done, 'show-project': showProject && project !== null}"
 			class="tasktext"
 		>
 			<span>
 				<router-link
-					v-if="showList && taskList !== null"
-					:to="{ name: 'list.list', params: { listId: task.listId } }"
-					class="task-list"
+					v-if="showProject && project !== null"
+					:to="{ name: 'project.list', params: { projectId: task.projectId } }"
+					class="task-project"
 					:class="{'mr-2': task.hexColor !== ''}"
-					v-tooltip="$t('task.detail.belongsToList', {list: taskList.title})">
-					{{ taskList.title }}
+					v-tooltip="$t('task.detail.belongsToProject', {project: project.title})">
+					{{ project.title }}
 				</router-link>
 
 				<ColorBubble
@@ -84,19 +81,19 @@
 			<priority-label :priority="task.priority" :done="task.done"/>
 
 			<span>
-				<span class="list-task-icon" v-if="task.attachments.length > 0">
+				<span class="project-task-icon" v-if="task.attachments.length > 0">
 					<icon icon="paperclip"/>
 				</span>
-				<span class="list-task-icon" v-if="task.description">
+				<span class="project-task-icon" v-if="task.description">
 					<icon icon="align-left"/>
 				</span>
-				<span class="list-task-icon" v-if="task.repeatAfter.amount > 0">
+				<span class="project-task-icon" v-if="task.repeatAfter.amount > 0">
 					<icon icon="history"/>
 				</span>
 			</span>
 
 			<checklist-summary :task="task"/>
-		</div>
+		</router-link>
 
 		<progress
 			class="progress is-small"
@@ -107,24 +104,24 @@
 		</progress>
 
 		<router-link
-			v-if="!showList && currentList.id !== task.listId && taskList !== null"
-			:to="{ name: 'list.list', params: { listId: task.listId } }"
-			class="task-list"
-			v-tooltip="$t('task.detail.belongsToList', {list: taskList.title})"
+			v-if="!showProject && currentProject.id !== task.projectId && project !== null"
+			:to="{ name: 'project.list', params: { projectId: task.projectId } }"
+			class="task-project"
+			v-tooltip="$t('task.detail.belongsToProject', {project: project.title})"
 		>
-			{{ taskList.title }}
+			{{ project.title }}
 		</router-link>
 
 		<BaseButton
 			:class="{'is-favorite': task.isFavorite}"
-			@click.prevent="toggleFavorite"
+			@click="toggleFavorite"
 			class="favorite"
 		>
 			<icon icon="star" v-if="task.isFavorite"/>
 			<icon :icon="['far', 'star']" v-else/>
 		</BaseButton>
 		<slot />
-	</router-link>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -151,7 +148,7 @@ import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import {formatDateSince, formatISO, formatDateLong} from '@/helpers/time/formatDate'
 import {success} from '@/message'
 
-import {useListStore} from '@/stores/lists'
+import {useProjectStore} from '@/stores/projects'
 import {useNamespaceStore} from '@/stores/namespaces'
 import {useBaseStore} from '@/stores/base'
 import {useTaskStore} from '@/stores/tasks'
@@ -165,7 +162,7 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
-	showList: {
+	showProject: {
 		type: Boolean,
 		default: false,
 	},
@@ -173,7 +170,7 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
-	showListColor: {
+	showProjectColor: {
 		type: Boolean,
 		default: true,
 	},
@@ -210,18 +207,18 @@ onBeforeUnmount(() => {
 })
 
 const baseStore = useBaseStore()
-const listStore = useListStore()
+const projectStore = useProjectStore()
 const taskStore = useTaskStore()
 const namespaceStore = useNamespaceStore()
 
-const taskList = computed(() => listStore.getListById(task.value.listId))
-const listColor = computed(() => taskList.value !== null ? taskList.value.hexColor : '')
+const project = computed(() => projectStore.getProjectById(task.value.projectId))
+const projectColor = computed(() => project.value !== null ? project.value.hexColor : '')
 
-const currentList = computed(() => {
-	return typeof baseStore.currentList === 'undefined' ? {
+const currentProject = computed(() => {
+	return typeof baseStore.currentProject === 'undefined' ? {
 		id: 0,
 		title: '',
-	} : baseStore.currentList
+	} : baseStore.currentProject
 })
 
 const taskDetailRoute = computed(() => ({
@@ -242,7 +239,7 @@ async function markAsDone(checked: boolean) {
 				t('task.doneSuccess') :
 				t('task.undoneSuccess'),
 		}, [{
-			title: 'Undo',
+			title: t('task.undo'),
 			callback: () => undoDone(checked),
 		}])
 	}
@@ -287,12 +284,8 @@ function hideDeferDueDatePopup(e) {
 	cursor: pointer;
 	border-radius: $radius;
 	border: 2px solid transparent;
-	
-	color: var(--text);
-	transition: color ease $transition-duration;
 
 	&:hover {
-		color: var(--grey-900);
 		background-color: var(--grey-100);
 	}
 
@@ -314,7 +307,7 @@ function hideDeferDueDatePopup(e) {
 		}
 	}
 
-	.task-list {
+	.task-project {
 		width: auto;
 		color: var(--grey-400);
 		font-size: .9rem;
@@ -329,7 +322,7 @@ function hideDeferDueDatePopup(e) {
 		width: 27px;
 	}
 
-	.list-task-icon {
+	.project-task-icon {
 		margin-left: 6px;
 
 		&:not(:first-of-type) {
@@ -338,8 +331,17 @@ function hideDeferDueDatePopup(e) {
 
 	}
 
+	a {
+		color: var(--text);
+		transition: color ease $transition-duration;
+
+		&:hover {
+			color: var(--grey-900);
+		}
+	}
+
 	.favorite {
-		opacity: 0;
+		opacity: 1;
 		text-align: center;
 		width: 27px;
 		transition: opacity $transition, color $transition;
@@ -354,21 +356,26 @@ function hideDeferDueDatePopup(e) {
 		}
 	}
 
-	&:hover .favorite {
-		opacity: 1;
-	}
-
 	.handle {
-		opacity: 0;
+		opacity: 1;
 		transition: opacity $transition;
 		margin-right: .25rem;
 		cursor: grab;
 	}
 
-	&:hover .handle {
-		opacity: 1;
+	@media(hover: hover) and (pointer: fine) {
+		& .favorite,
+		& .handle {
+			opacity: 0;
+		}
+
+		&:hover .favorite,
+		&:hover .handle {
+			opacity: 1;
+		}
 	}
 
+
 	:deep(.fancycheckbox) {
 		height: 18px;
 		padding-top: 0;
@@ -389,7 +396,7 @@ function hideDeferDueDatePopup(e) {
 		width: auto;
 	}
 
-	.show-list .parent-tasks {
+	.show-project .parent-tasks {
 		padding-left: .25rem;
 	}
 
@@ -420,4 +427,4 @@ function hideDeferDueDatePopup(e) {
 		margin-bottom: 0;
 	}
 }
-</style>
+</style>

src/composables/useDaytimeSalutation.ts

@@ -1,6 +1,5 @@
-import {computed} from 'vue'
+import {computed, onActivated, ref} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {useNow} from '@vueuse/core'
 
 import {useAuthStore} from '@/stores/auth'
 import {hourToDaytime} from '@/helpers/hourToDaytime'
@@ -9,7 +8,8 @@ export type Daytime = 'night' | 'morning' | 'day' | 'evening'
 
 export function useDaytimeSalutation() {
 	const {t} = useI18n({useScope: 'global'})
-	const now = useNow()
+	const now = ref(new Date())
+	onActivated(() => now.value = new Date())
 	const authStore = useAuthStore()
 
 	const name = computed(() => authStore.userDisplayName)

src/composables/useMenuActive.ts

@@ -1,5 +1,6 @@
 import {ref, watch, readonly} from 'vue'
 import {useLocalStorage, useMediaQuery} from '@vueuse/core'
+import {useRoute} from 'vue-router'
 
 const BULMA_MOBILE_BREAKPOINT = 768
 
@@ -15,7 +16,8 @@ export function useMenuActive() {
 	)
 
 	const menuActive = ref(false)
-	
+	const route = useRoute()
+
 	// set to prefered value
 	watch(isMobile, (current) => {
 		menuActive.value = current
@@ -31,6 +33,9 @@ export function useMenuActive() {
 		}
 	})
 
+	// Hide the menu on mobile when the route changes (e.g. when the user taps a menu item)
+	watch(() => route.fullPath, () => isMobile.value && setMenuActive(false))
+
 	function setMenuActive(newMenuActive: boolean) {
 		menuActive.value = newMenuActive
 	}
@@ -44,4 +49,4 @@ export function useMenuActive() {
 		setMenuActive,
 		toggleMenu,
 	}
-}
+}

src/composables/useTaskList.ts

@@ -5,6 +5,22 @@ import TaskCollectionService from '@/services/taskCollection'
 import type {ITask} from '@/modelTypes/ITask'
 import {error} from '@/message'
 
+export type Order = 'asc' | 'desc' | 'none'
+
+export interface SortBy {
+	id?: Order
+	index?: Order
+	done?: Order
+	title?: Order
+	priority?: Order
+	due_date?: Order
+	start_date?: Order
+	end_date?: Order
+	percent_done?: Order
+	created?: Order
+	updated?: Order
+}
+
 // FIXME: merge with DEFAULT_PARAMS in filters.vue
 export const getDefaultParams = () => ({
 	sort_by: ['position', 'id'],
@@ -15,7 +31,7 @@ export const getDefaultParams = () => ({
 	filter_concat: 'and',
 })
 
-const SORT_BY_DEFAULT = {
+const SORT_BY_DEFAULT: SortBy = {
 	id: 'desc',
 }
 
@@ -42,9 +58,9 @@ const SORT_BY_DEFAULT = {
 	}
 
 /**
- * This mixin provides a base set of methods and properties to get tasks on a list.
+ * This mixin provides a base set of methods and properties to get tasks.
  */
-export function useTaskList(listId, sortByDefault = SORT_BY_DEFAULT) {
+export function useTaskList(projectId, sortByDefault: SortBy = SORT_BY_DEFAULT) {
 	const params = ref({...getDefaultParams()})
 	
 	const search = ref('')
@@ -64,7 +80,7 @@ export function useTaskList(listId, sortByDefault = SORT_BY_DEFAULT) {
 		loadParams = formatSortOrder(sortBy.value, loadParams)
 
 		return [
-			{listId: listId.value},
+			{projectId: projectId.value},
 			loadParams,
 			page.value || 1,
 		]

src/composables/useTitle.ts

@@ -1,7 +1,7 @@
-import { computed } from 'vue'
-import type { Ref } from 'vue'
+import {computed} from 'vue'
+import type {Ref} from 'vue'
 
-import {useTitle as useTitleVueUse, resolveRef} from '@vueuse/core'
+import {useTitle as useTitleVueUse, toRef} from '@vueuse/core'
 
 type UseTitleParameters = Parameters<typeof useTitleVueUse>
 
@@ -9,12 +9,12 @@ export function useTitle(...args: UseTitleParameters) {
 
 	const [newTitle, ...restArgs] = args
 
-  const pageTitle = resolveRef(newTitle) as Ref<string>
+	const pageTitle = toRef(newTitle) as Ref<string>
 
-	const completeTitle = computed(() => 
+	const completeTitle = computed(() =>
 		(typeof pageTitle.value === 'undefined' || pageTitle.value === '')
-		? 'Vikunja'
-		: `${pageTitle.value} | Vikunja`,
+			? 'Vikunja'
+			: `${pageTitle.value} | Vikunja`,
 	)
 
 	return useTitleVueUse(completeTitle, ...restArgs)

src/directives/cypress.ts

@@ -6,13 +6,11 @@ declare global {
 	}
 }
 
-const cypressDirective: Directive = {
-	mounted(el, {value}) {
-		if (
-			(window.Cypress || import.meta.env.DEV) &&
-			value
-		) {
-			el.setAttribute('data-cy', value)
+const cypressDirective = <Directive<HTMLElement,string>>{
+	mounted(el, {arg, value}) {
+		const testingId = arg || value
+		if ((window.Cypress || import.meta.env.DEV) && testingId) {
+			el.setAttribute('data-cy', testingId)
 		}
 	},
 	beforeUnmount(el) {

src/helpers/checkAndSetApiUrl.ts

@@ -6,16 +6,16 @@ export const ERROR_NO_API_URL = 'noApiUrlProvided'
 
 
 export const checkAndSetApiUrl = (url: string): Promise<string> => {
-	if(url.startsWith('/')) {
+	if (url.startsWith('/')) {
 		url = window.location.host + url
 	}
-	
-	// Check if the url has an http prefix
+
+	// Check if the url has a http prefix
 	if (
 		!url.startsWith('http://') &&
 		!url.startsWith('https://')
 	) {
-		url = `http://${url}`
+		url = `${window.location.protocol}//${url}`
 	}
 
 	const urlToCheck: URL = new URL(url)
@@ -41,15 +41,6 @@ export const checkAndSetApiUrl = (url: string): Promise<string> => {
 			}
 			throw e
 		})
-		.catch(e => {
-			// Check if it has a port and if not check if it is reachable at https
-			if (urlToCheck.protocol === 'http:') {
-				urlToCheck.protocol = 'https:'
-				window.API_URL = urlToCheck.toString()
-				return updateConfig()
-			}
-			throw e
-		})
 		.catch(e => {
 			// Check if it is reachable at /api/v1 and https
 			urlToCheck.pathname = origUrlToCheck.pathname
@@ -66,7 +57,6 @@ export const checkAndSetApiUrl = (url: string): Promise<string> => {
 		.catch(e => {
 			// Check if it is reachable at port API_DEFAULT_PORT and https
 			if (urlToCheck.port !== API_DEFAULT_PORT) {
-				urlToCheck.protocol = 'https:'
 				urlToCheck.port = API_DEFAULT_PORT
 				window.API_URL = urlToCheck.toString()
 				return updateConfig()
@@ -74,30 +64,7 @@ export const checkAndSetApiUrl = (url: string): Promise<string> => {
 			throw e
 		})
 		.catch(e => {
-			// Check if it is reachable at :API_DEFAULT_PORT and /api/v1 and https
-			urlToCheck.pathname = origUrlToCheck.pathname
-			if (
-				!urlToCheck.pathname.endsWith('/api/v1') &&
-				!urlToCheck.pathname.endsWith('/api/v1/')
-			) {
-				urlToCheck.pathname = `${urlToCheck.pathname}api/v1`
-				window.API_URL = urlToCheck.toString()
-				return updateConfig()
-			}
-			throw e
-		})
-		.catch(e => {
-			// Check if it is reachable at port API_DEFAULT_PORT and http
-			if (urlToCheck.port !== API_DEFAULT_PORT) {
-				urlToCheck.protocol = 'http:'
-				urlToCheck.port = API_DEFAULT_PORT
-				window.API_URL = urlToCheck.toString()
-				return updateConfig()
-			}
-			throw e
-		})
-		.catch(e => {
-			// Check if it is reachable at :API_DEFAULT_PORT and /api/v1 and http
+			// Check if it is reachable at :API_DEFAULT_PORT and /api/v1
 			urlToCheck.pathname = origUrlToCheck.pathname
 			if (
 				!urlToCheck.pathname.endsWith('/api/v1') &&
@@ -113,12 +80,12 @@ export const checkAndSetApiUrl = (url: string): Promise<string> => {
 			window.API_URL = oldUrl
 			throw e
 		})
-		.then(r => {
-			if (typeof r !== 'undefined') {
+		.then(success => {
+			if (success) {
 				localStorage.setItem('API_URL', window.API_URL)
 				return window.API_URL
 			}
-			
+
 			throw new Error(ERROR_NO_API_URL)
 		})
 }

src/helpers/getListTitle.ts

@@ -1,9 +0,0 @@
-import {i18n} from '@/i18n'
-import type {IList} from '@/modelTypes/IList'
-
-export function getListTitle(l: IList) {
-	if (l.id === -1) {
-		return i18n.global.t('list.pseudo.favorites.title')
-	}
-	return l.title
-}

src/helpers/getNamespaceTitle.ts

@@ -3,7 +3,7 @@ import type {INamespace} from '@/modelTypes/INamespace'
 
 export const getNamespaceTitle = (n: INamespace) => {
 	if (n.id === -1) {
-		return i18n.global.t('namespace.pseudo.sharedLists.title')
+		return i18n.global.t('namespace.pseudo.sharedProjects.title')
 	}
 	if (n.id === -2) {
 		return i18n.global.t('namespace.pseudo.favorites.title')

src/helpers/getProjectTitle.ts

@@ -0,0 +1,9 @@
+import {i18n} from '@/i18n'
+import type {IProject} from '@/modelTypes/IProject'
+
+export function getProjectTitle(l: IProject) {
+	if (l.id === -1) {
+		return i18n.global.t('project.pseudo.favorites.title')
+	}
+	return l.title
+}

src/helpers/parseSubtasksViaIndention.test.ts

@@ -113,8 +113,8 @@ task two`)
   sub task 2`)
 		
 		expect(tasks).to.have.length(3)
-		expect(tasks[0].list).to.eq('list')
-		expect(tasks[1].list).to.eq('list')
-		expect(tasks[2].list).to.eq('list')
+		expect(tasks[0].project).to.eq('list')
+		expect(tasks[1].project).to.eq('list')
+		expect(tasks[2].project).to.eq('list')
 	})
 })

src/helpers/parseSubtasksViaIndention.ts

@@ -1,9 +1,9 @@
-import {getListFromPrefix} from '@/modules/parseTaskText'
+import {getProjectFromPrefix} from '@/modules/parseTaskText'
 
 export interface TaskWithParent {
 	title: string,
 	parent: string | null,
-	list: string | null,
+	project: string | null,
 }
 
 function cleanupTitle(title: string) {
@@ -23,10 +23,10 @@ export function parseSubtasksViaIndention(taskTitles: string): TaskWithParent[]
 		const task: TaskWithParent = {
 			title: cleanupTitle(title),
 			parent: null,
-			list: null,
+			project: null,
 		}
 
-		task.list = getListFromPrefix(task.title)
+		task.project = getProjectFromPrefix(task.title)
 
 		if (index === 0) {
 			return task
@@ -47,9 +47,9 @@ export function parseSubtasksViaIndention(taskTitles: string): TaskWithParent[]
 			} while (parentSpaces >= matchedSpaces)
 			task.title = cleanupTitle(title.replace(spaceRegex, ''))
 			task.parent = task.parent.replace(spaceRegex, '')
-			if (task.list === null) {
-				// This allows to specify a list once for the parent task and inherit it to all subtasks
-				task.list = getListFromPrefix(task.parent)
+			if (task.project === null) {
+				// This allows to specify a project once for the parent task and inherit it to all subtasks
+				task.project = getProjectFromPrefix(task.parent)
 			}
 		}
 

src/helpers/projectView.ts

@@ -0,0 +1,100 @@
+import type { RouteRecordName } from 'vue-router'
+import router from '@/router'
+
+import type {IProject} from '@/modelTypes/IProject'
+
+export type ProjectRouteName = Extract<RouteRecordName, string>
+export type ProjectViewSettings = Record<
+	IProject['id'],
+	Extract<RouteRecordName, ProjectRouteName>
+>
+
+const SETTINGS_KEY_PROJECT_VIEW = 'projectView'
+
+// TODO: remove migration when releasing 1.0 
+type ListViewSettings = ProjectViewSettings
+const SETTINGS_KEY_DEPRECATED_LIST_VIEW = 'listView'
+function migrateStoredProjectRouteSettings() {
+	try {
+		const listViewSettingsString = localStorage.getItem(SETTINGS_KEY_DEPRECATED_LIST_VIEW)
+		if (listViewSettingsString === null) {
+			return 
+		}
+
+		// A) the first version stored one setting for all lists in a string
+		if (listViewSettingsString.startsWith('list.')) {
+			const projectView = listViewSettingsString.replace('list.', 'project.')
+
+			if (!router.hasRoute(projectView)) {
+				return
+			}
+			return projectView as RouteRecordName
+		}
+
+		// B) the last version used a 'list.' prefix
+		const listViewSettings: ListViewSettings = JSON.parse(listViewSettingsString)
+
+		const projectViewSettingEntries = Object.entries(listViewSettings).map(([id, value]) => {
+			return [id, value.replace('list.', 'project.')]
+		})
+		const projectViewSettings = Object.fromEntries(projectViewSettingEntries)
+
+		localStorage.setItem(SETTINGS_KEY_PROJECT_VIEW, JSON.stringify(projectViewSettings))
+	} catch(e) {
+		// 
+	} finally {
+		localStorage.removeItem(SETTINGS_KEY_DEPRECATED_LIST_VIEW)
+	}
+}
+
+/**
+ * Save the current project view to local storage
+ */
+export function saveProjectView(projectId: IProject['id'], routeName: string) {
+	if (routeName.includes('settings.')) {
+		return
+	}
+	
+	if (!projectId) {
+		return
+	}
+	
+	// We use local storage and not the store here to make it persistent across reloads.
+	const savedProjectView = localStorage.getItem(SETTINGS_KEY_PROJECT_VIEW)
+	let savedProjectViewSettings: ProjectViewSettings | false = false
+	if (savedProjectView !== null) {
+		savedProjectViewSettings = JSON.parse(savedProjectView) as ProjectViewSettings
+	}
+
+	let projectViewSettings: ProjectViewSettings = {}
+	if (savedProjectViewSettings) {
+		projectViewSettings = savedProjectViewSettings
+	}
+
+	projectViewSettings[projectId] = routeName
+	localStorage.setItem(SETTINGS_KEY_PROJECT_VIEW, JSON.stringify(projectViewSettings))
+}
+
+export const getProjectView = (projectId: IProject['id']) => {
+	// TODO: remove migration when releasing 1.0 
+	const migratedProjectView = migrateStoredProjectRouteSettings()
+
+	if (migratedProjectView !== undefined && router.hasRoute(migratedProjectView))  {
+		return migratedProjectView
+	}
+
+	try {	
+		const projectViewSettingsString = localStorage.getItem(SETTINGS_KEY_PROJECT_VIEW)
+		if (!projectViewSettingsString) {
+			throw new Error()
+		}
+		
+		const projectViewSettings = JSON.parse(projectViewSettingsString) as ProjectViewSettings
+		if (!router.hasRoute(projectViewSettings[projectId])) {
+			throw new Error()
+		}
+		return projectViewSettings[projectId]
+	} catch (e) {
+		return
+	}	
+}

src/helpers/saveCollapsedBucketState.ts

@@ -1,5 +1,5 @@
 import type {IBucket} from '@/modelTypes/IBucket'
-import type {IList} from '@/modelTypes/IList'
+import type {IProject} from '@/modelTypes/IProject'
 
 const key = 'collapsedBuckets'
 
@@ -13,22 +13,22 @@ function getAllState() {
 }
 
 export const saveCollapsedBucketState = (
-	listId: IList['id'],
+	projectId: IProject['id'],
 	collapsedBuckets: CollapsedBuckets,
 ) => {
 	const state = getAllState()
-	state[listId] = collapsedBuckets
-	for (const bucketId in state[listId]) {
-		if (!state[listId][bucketId]) {
-			delete state[listId][bucketId]
+	state[projectId] = collapsedBuckets
+	for (const bucketId in state[projectId]) {
+		if (!state[projectId][bucketId]) {
+			delete state[projectId][bucketId]
 		}
 	}
 	localStorage.setItem(key, JSON.stringify(state))
 }
 
-export function getCollapsedBucketState(listId : IList['id']) {
+export function getCollapsedBucketState(projectId : IProject['id']) {
 	const state = getAllState()
-	return typeof state[listId] !== 'undefined'
-		? state[listId]
+	return typeof state[projectId] !== 'undefined'
+		? state[projectId]
 		: {}
 }

src/helpers/saveListView.ts

@@ -1,53 +0,0 @@
-import type { IList } from '@/modelTypes/IList'
-
-type ListView = Record<IList['id'], string>
-
-const DEFAULT_LIST_VIEW = 'list.list' as const
-
-/**
- * Save the current list view to local storage
- */
-export function saveListView(listId: IList['id'], routeName: string) {
-	if (routeName.includes('settings.')) {
-		return
-	}
-	
-	if (!listId) {
-		return
-	}
-	
-	// We use local storage and not the store here to make it persistent across reloads.
-	const savedListView = localStorage.getItem('listView')
-	let savedListViewJson: ListView | false = false
-	if (savedListView !== null) {
-		savedListViewJson = JSON.parse(savedListView) as ListView
-	}
-
-	let listView: ListView = {}
-	if (savedListViewJson) {
-		listView = savedListViewJson
-	}
-
-	listView[listId] = routeName
-	localStorage.setItem('listView', JSON.stringify(listView))
-}
-
-export const getListView = (listId: IList['id']) => {
-	// Remove old stored settings
-	const savedListView = localStorage.getItem('listView')
-	if (savedListView !== null && savedListView.startsWith('list.')) {
-		localStorage.removeItem('listView')
-	}
-
-	if (!savedListView) {
-		return DEFAULT_LIST_VIEW
-	}
-
-	const savedListViewJson: ListView = JSON.parse(savedListView)
-
-	if (!savedListViewJson[listId]) {
-		return DEFAULT_LIST_VIEW
-	}
-
-	return savedListViewJson[listId]
-}

src/helpers/time/parseDate.ts

@@ -129,7 +129,7 @@ const addTimeToDate = (text: string, date: Date, previousMatch: string | null):
 }
 
 export const getDateFromText = (text: string, now: Date = new Date()) => {
-	const fullDateRegex = / ([0-9][0-9]?\/[0-9][0-9]?\/[0-9][0-9]([0-9][0-9])?|[0-9][0-9][0-9][0-9]\/[0-9][0-9]?\/[0-9][0-9]?|[0-9][0-9][0-9][0-9]-[0-9][0-9]?-[0-9][0-9]?)/ig
+	const fullDateRegex = /(^| )([0-9][0-9]?\/[0-9][0-9]?\/[0-9][0-9]([0-9][0-9])?|[0-9][0-9][0-9][0-9]\/[0-9][0-9]?\/[0-9][0-9]?|[0-9][0-9][0-9][0-9]-[0-9][0-9]?-[0-9][0-9]?)/ig
 
 	// 1. Try parsing the text as a "usual" date, like 2021-06-24 or 06/24/2021
 	let results: string[] | null = fullDateRegex.exec(text)
@@ -138,7 +138,7 @@ export const getDateFromText = (text: string, now: Date = new Date()) => {
 	let containsYear = true
 	if (result === null) {
 		// 2. Try parsing the date as something like "jan 21" or "21 jan"
-		const monthRegex = new RegExp(` (${monthsRegexGroup} [0-9][0-9]?|[0-9][0-9]? ${monthsRegexGroup})`, 'ig')
+		const monthRegex = new RegExp(`(^| )(${monthsRegexGroup} [0-9][0-9]?|[0-9][0-9]? ${monthsRegexGroup})`, 'ig')
 		results = monthRegex.exec(text)
 		result = results === null ? null : `${results[0]} ${now.getFullYear()}`.trim()
 		foundText = results === null ? '' : results[0].trim()
@@ -146,7 +146,7 @@ export const getDateFromText = (text: string, now: Date = new Date()) => {
 
 		if (result === null) {
 			// 3. Try parsing the date as "27/01" or "01/27"
-			const monthNumericRegex = / ([0-9][0-9]?\/[0-9][0-9]?)/ig
+			const monthNumericRegex = /(^| )([0-9][0-9]?\/[0-9][0-9]?)/ig
 			results = monthNumericRegex.exec(text)
 
 			// Put the year before or after the date, depending on what works
@@ -299,7 +299,7 @@ const getDateFromWeekday = (text: string): dateFoundResult => {
 }
 
 const getDayFromText = (text: string) => {
-	const matcher = /($| )(([1-2][0-9])|(3[01])|(0?[1-9]))(st|nd|rd|th|\.)($| )/ig
+	const matcher = /(^| )(([1-2][0-9])|(3[01])|(0?[1-9]))(st|nd|rd|th|\.)($| )/ig
 	const results = matcher.exec(text)
 	if (results === null) {
 		return {