adapt checks in team views to check whether team.oidcId is present and not empty

Setting an actual reminder date (not a relative one) flowed only from the component to the outside when setting it. When editing it, the reminder date would not be populated, causing the datepicker date to stay at the current date.

.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.11.0-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.11.0-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.11.0-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.11.0-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.11.0-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,10 +202,15 @@ steps:
 #        - .cache
 
   - name: build
-    image: node:18-alpine
+    image: node:20.11.0-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
+      SENTRY_AUTH_TOKEN:
+        from_secret: sentry_auth_token
+      SENTRY_ORG: vikunja
+      SENTRY_PROJECT: frontend-oss
+      PUPPETEER_SKIP_DOWNLOAD: true
     commands:
       - apk add git
       - corepack enable && pnpm config set store-dir .cache/pnpm
@@ -218,6 +226,7 @@ steps:
     image: kolaente/zip
     pull: always
     commands:
+      - cp src/version.json dist
       - cd dist
       - zip -r ../vikunja-frontend-unstable.zip *
       - cd ..
@@ -276,10 +285,14 @@ steps:
 #        - .cache
 
   - name: build
-    image: node:18-alpine
+    image: node:20.11.0-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
+      SENTRY_AUTH_TOKEN:
+        from_secret: sentry_auth_token
+      SENTRY_ORG: vikunja
+      SENTRY_PROJECT: frontend-oss
     commands:
       - apk add git
       - corepack enable && pnpm config set store-dir .cache/pnpm
@@ -295,6 +308,7 @@ steps:
     image: kolaente/zip
     pull: always
     commands:
+      - cp src/version.json dist
       - cd dist
       - zip -r ../vikunja-frontend-${DRONE_TAG##v}.zip *
       - cd ..
@@ -346,8 +360,7 @@ type: docker
 name: docker-release
 
 depends_on:
-  - release-latest
-  - release-version
+  - build
 
 trigger:
   ref:
@@ -375,8 +388,7 @@ steps:
       repo: vikunja/frontend
       tags: unstable
       build_args:
-        - USE_RELEASE=true
-        - RELEASE_VERSION=unstable
+        - USE_RELEASE=false
       platforms:
         - linux/386
         - linux/amd64
@@ -410,8 +422,7 @@ steps:
         from_secret: docker_password
       repo: vikunja/frontend
       build_args:
-        - USE_RELEASE=true
-        - RELEASE_VERSION=${DRONE_TAG##v}
+        - USE_RELEASE=false
       platforms:
         - linux/386
         - linux/amd64
@@ -464,8 +475,10 @@ name: update-translations
 
 trigger:
   branch:
+    include:
       - main
   event:
+    include:
       - cron
   cron:
     - update_translations
@@ -473,15 +486,14 @@ trigger:
 steps:
   - name: download
     pull: always
-    image: jonasfranz/crowdin
+    image: ghcr.io/kolaente/kolaente/drone-crowdin-v2:latest
     settings:
-      download: true
-      export_dir: src/i18n/lang/
-      ignore_branch: true
-      project_identifier: vikunja
-    environment:
-      CROWDIN_KEY:
+      crowdin_key:
         from_secret: crowdin_key
+      project_id: 462614
+      target: download
+      download_to: src/i18n/lang/
+      download_export_approved_only: true
 
   - name: move-files
     pull: always
@@ -501,26 +513,25 @@ steps:
       author_name: Frederick [Bot]
       branch: main
       commit: true
-      commit_message: "[skip ci] Updated translations via Crowdin"
+      commit_message: "chore(i18n): update translations via Crowdin"
       remote: "ssh://git@kolaente.dev:9022/vikunja/frontend.git"
       ssh_key:
-        from_secret: translation_git_push_ssh_key
+        from_secret: git_push_ssh_key
 
   - name: upload
     pull: always
-    image: jonasfranz/crowdin
+    image: ghcr.io/kolaente/kolaente/drone-crowdin-v2:latest
     depends_on:
       - clone
     settings:
-      files:
-        en.json: src/i18n/lang/en.json
-      ignore_branch: true
-      project_identifier: vikunja
-    environment:
-      CROWDIN_KEY:
+      crowdin_key:
         from_secret: crowdin_key  
+      project_id: 462614
+      target: upload
+      upload_files:
+        src/i18n/lang/en.json: en.json
 ---
 kind: signature
-hmac: 971875b90c7bb1649d1b00d022d0b594ba9b68f927bf8f0dbe840190816d676b
+hmac: a044c7c4db3c2a11299d4d118397e9d25be36db241723a1bbd0a2f9cc90ffdac
 
 ...

.env.local.example

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

.eslintrc.cjs

@@ -1,5 +1,5 @@
 /* eslint-env node */
-require("@rushstack/eslint-patch/modern-module-resolution")
+require('@rushstack/eslint-patch/modern-module-resolution')
 
 module.exports = {
 	'root': true,
@@ -7,52 +7,54 @@ module.exports = {
 		'browser': true,
 		'es2022': true,
 		'node': true,
-		'vue/setup-compiler-macros': true,
 	},
 	'extends': [
 		'eslint:recommended',
-		'plugin:vue/vue3-essential',
+		'plugin:vue/vue3-recommended',
 		'@vue/eslint-config-typescript/recommended',
 	],
 	'rules': {
-		'vue/html-quotes': [
-			'error',
-			'double',
-		],
-		'quotes': [
-			'error',
-			'single',
-		],
-		'comma-dangle': [
-			'error',
-			'always-multiline',
-		],
-		'semi': [
-			'error',
-			'never',
-		],
+		'quotes': ['error', 'single'],
+		'comma-dangle': ['error', 'always-multiline'],
+		'semi': ['error', 'never'],
 
-		// see https://segmentfault.com/q/1010000040813116/a-1020000041134455 (original in chinese)
-		'no-unused-vars': 'off',
-		'@typescript-eslint/no-unused-vars': ['error', { vars: 'all', args: 'after-used', ignoreRestSiblings: true }],
+		'vue/v-on-event-hyphenation': ['warn', 'never', { 'autofix': true }],
+		'vue/multi-word-component-names': 'off',
 
-		'vue/multi-word-component-names': 0,
-		// disabled until we have support for reactivityTransform
-		// See https://github.com/vuejs/eslint-plugin-vue/issues/1948
-		// see also setting in `vite.config`
-		'vue/no-setup-props-destructure': 0,
+		// uncategorized rules:
+		'vue/component-api-style': ['error', ['script-setup']],
+		'vue/component-name-in-template-casing': ['warn', 'PascalCase'],
+		'vue/custom-event-name-casing': ['error', 'camelCase'],
+		'vue/define-macros-order': 'error',
+		'vue/match-component-file-name': ['error', {
+			'extensions': ['.js', '.jsx', '.ts', '.tsx', '.vue'],
+			'shouldMatchCase': true,
+		}],
+		'vue/no-boolean-default': ['warn', 'default-false'],
+		'vue/match-component-import-name': 'error',
+		'vue/prefer-separate-static-class': 'warn',
+
+		'vue/padding-line-between-blocks': 'error',
+		'vue/next-tick-style': ['error', 'promise'],
+		'vue/block-lang': [
+			'error',
+			{ 'script': { 'lang': 'ts' } },
+		],
+		'vue/no-required-prop-with-default': ['error', { 'autofix': true }],
+		'vue/no-duplicate-attr-inheritance': 'error',
+		'vue/no-empty-component-block': 'error',
+		'vue/html-indent': ['error', 'tab'],
+
+		// vue3
+		'vue/no-ref-object-destructure': 'error',
 	},
 	'parser': 'vue-eslint-parser',
 	'parserOptions': {
 		'parser': '@typescript-eslint/parser',
-		'ecmaVersion': 2022,
-		'sourceType': 'module',
+		'ecmaVersion': 'latest',
 	},
 	'ignorePatterns': [
 		'*.test.*',
 		'cypress/*',
 	],
-	'globals': {
-		'defineProps': 'readonly',
-	},
 }

.github/FUNDING.yml

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

.github/workflows/lockdown.yml

@@ -0,0 +1,23 @@
+name: 'Repo Lockdown'
+
+on:
+  pull_request_target:
+    types: opened
+
+permissions:
+  issues: write
+  pull-requests: write
+
+jobs:
+  action:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: dessant/repo-lockdown@v4
+        with:
+          pr-comment: 'Hi! Thank you for your contribution.
+
+          This repo is only a mirror and unfortunately we can''t accept PRs made here. Please re-submit your changes to [our Gitea instance](https://kolaente.dev/vikunja/frontend/pulls).
+
+          Also check out the [contribution guidelines](https://vikunja.io/docs/development/#pull-requests).
+
+          Thank you for your understanding.'

.npmrc

@@ -1,2 +1,14 @@
-auto-install-peers=true
 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
+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 @@
-v18
+20.11.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"
   ]
 }

.vscode.example/settings.json

@@ -18,6 +18,12 @@
     "javascriptreact",
     "vue"
   ],
+
+  "volar.completion.preferredTagNameCase": "pascal",
+
+  // disable vetur in case it is installed
+  "vetur.validation.template": false,
+
   // i18n ally
   "i18n-ally.localesPaths": [
     "src/i18n/lang"

Dockerfile

@@ -3,16 +3,18 @@
 #  │─││ │││  │ │
 #  ┘─┘┘─┘┘┘─┘┘─┘
 
-FROM node:18-alpine AS builder
+FROM --platform=$BUILDPLATFORM node:20.11.0-alpine AS builder
 
 WORKDIR /build
 
 ARG USE_RELEASE=false
-ARG RELEASE_VERSION=main
+ARG RELEASE_VERSION=unstable
 ENV PNPM_CACHE_FOLDER .cache/pnpm/
+ENV PUPPETEER_SKIP_DOWNLOAD true
 
 COPY package.json ./
 COPY pnpm-lock.yaml ./
+COPY patches ./patches/
 
 RUN if [ "$USE_RELEASE" != true ]; then \
       # https://pnpm.io/installation#using-corepack
@@ -51,11 +53,15 @@ LABEL maintainer="maintainers@vikunja.io"
 ENV VIKUNJA_HTTP_PORT 80
 ENV VIKUNJA_HTTP2_PORT 81
 ENV VIKUNJA_LOG_FORMAT main
-ENV VIKUNJA_API_URL http://localhost:3456/api/v1
+ENV VIKUNJA_API_URL /api/v1
 ENV VIKUNJA_SENTRY_ENABLED false
 ENV VIKUNJA_SENTRY_DSN https://85694a2d757547cbbc90cd4b55c5a18d@o1047380.ingest.sentry.io/6024480
+ENV VIKUNJA_PROJECT_INFINITE_NESTING_ENABLED false
+ENV VIKUNJA_ALLOW_ICON_CHANGES true
+ENV VIKUNJA_CUSTOM_LOGO_URL "''"
 
 COPY docker/injector.sh /docker-entrypoint.d/50-injector.sh
+COPY docker/ipv6-disable.sh /docker-entrypoint.d/60-ipv6-disable.sh
 COPY docker/nginx.conf /etc/nginx/nginx.conf
 COPY docker/templates/. /etc/nginx/templates/
 # copy compiled files from stage 1
@@ -63,6 +69,5 @@ COPY --from=builder /build/dist ./
 # manage permissions
 RUN chmod 0755 /docker-entrypoint.d/*.sh /etc/nginx/templates && \
     chmod -R 0644 /etc/nginx/nginx.conf && \
-    chown -R nginx:nginx ./ /etc/nginx/conf.d /etc/nginx/templates
-# unprivileged user
-USER nginx
+    chown -R nginx:nginx ./ /etc/nginx/conf.d /etc/nginx/templates && \
+    rm -f /docker-entrypoint.d/10-listen-on-ipv6-by-default.sh

README.md

@@ -1,10 +1,14 @@
+# This repository was merged with the api and is now archived
+
+You can find the new (old) code over on [vikunja/vikunja](https://kolaente.dev/vikunja/vikunja).
+
 # Web frontend for Vikunja
 
 > The todo app to organize your life.
 
 [![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.22.1-brightgreen.svg)](https://dl.vikunja.io)
 [![Translation](https://badges.crowdin.net/vikunja/localized.svg)](https://crowdin.com/project/vikunja)
 
 This is the web frontend for Vikunja, written in Vue.js.
@@ -25,7 +29,7 @@ export DOCKER_BUILDKIT=1
 docker build -t vikunja/frontend .
 ```
 
-Refer to Refer [to multi-platform documentation](https://docs.docker.com/build/building/multi-platform/) in order to build for the different platform.
+Refer to [multi-platform documentation](https://docs.docker.com/build/building/multi-platform/) in order to build for different platforms.
 
 ## Project setup
 
@@ -50,7 +54,3 @@ pnpm run build
 ```shell
 pnpm run lint
 ```
-
-## Sponsors
-
-[![Relm](https://vikunja.io/images/sponsors/relm.png)](https://relm.us)

cypress.config.js

@@ -24,4 +24,5 @@ export default defineConfig({
 	},
 	viewportWidth: 1600,
 	viewportHeight: 900,
+	experimentalMemoryManagement: true,
 })

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/list.spec.ts

@@ -1,122 +0,0 @@
-import {createFakeUserAndLogin} from '../../support/authenticateUser'
-
-import {TaskFactory} from '../../factories/task'
-import {prepareLists} from './prepareLists'
-
-describe('Lists', () => {
-	createFakeUserAndLogin()
-
-	let lists
-	prepareLists((newLists) => (lists = newLists))
-
-	it('Should create a new list', () => {
-		cy.visit('/')
-		cy.get('.namespace-title .dropdown-trigger')
-			.click()
-		cy.get('.namespace-title .dropdown .dropdown-item')
-			.contains('New list')
-			.click()
-		cy.url()
-			.should('contain', '/lists/new/1')
-		cy.get('.card-header-title')
-			.contains('New list')
-		cy.get('input.input')
-			.type('New List')
-		cy.get('.button')
-			.contains('Create')
-			.click()
-
-		cy.get('.global-notification', { timeout: 1000 }) // Waiting until the request to create the new list is done
-			.should('contain', 'Success')
-		cy.url()
-			.should('contain', '/lists/')
-		cy.get('.list-title h1')
-			.should('contain', 'New List')
-	})
-
-	it('Should redirect to a specific list view after visited', () => {
-		cy.visit('/lists/1/kanban')
-		cy.url()
-			.should('contain', '/lists/1/kanban')
-		cy.visit('/lists/1')
-		cy.url()
-			.should('contain', '/lists/1/kanban')
-	})
-
-	it('Should rename the list in all places', () => {
-		TaskFactory.create(5, {
-			id: '{increment}',
-			list_id: 1,
-		})
-		const newListName = 'New list name'
-
-		cy.visit('/lists/1')
-		cy.get('.list-title h1')
-			.should('contain', 'First List')
-
-		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .menu-list-dropdown-trigger')
-			.click()
-		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-content')
-			.contains('Edit')
-			.click()
-		cy.get('#title')
-			.type(`{selectall}${newListName}`)
-		cy.get('footer.card-footer .button')
-			.contains('Save')
-			.click()
-
-		cy.get('.global-notification')
-			.should('contain', 'Success')
-		cy.get('.list-title h1')
-			.should('contain', newListName)
-			.should('not.contain', lists[0].title)
-		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child')
-			.should('contain', newListName)
-			.should('not.contain', lists[0].title)
-		cy.visit('/')
-		cy.get('.card-content')
-			.should('contain', newListName)
-			.should('not.contain', lists[0].title)
-	})
-
-	it('Should remove a list', () => {
-		cy.visit(`/lists/${lists[0].id}`)
-
-		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .menu-list-dropdown-trigger')
-			.click()
-		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-content')
-			.contains('Delete')
-			.click()
-		cy.url()
-			.should('contain', '/settings/delete')
-		cy.get('[data-cy="modalPrimary"]')
-			.contains('Do it')
-			.click()
-
-		cy.get('.global-notification')
-			.should('contain', 'Success')
-		cy.get('.namespace-container .menu.namespaces-lists .menu-list')
-			.should('not.contain', lists[0].title)
-		cy.location('pathname')
-			.should('equal', '/')
-	})
-	
-	it('Should archive a list', () => {
-		cy.visit(`/lists/${lists[0].id}`)
-		
-		cy.get('.list-title .dropdown')
-			.click()
-		cy.get('.list-title .dropdown .dropdown-menu .dropdown-item')
-			.contains('Archive')
-			.click()
-		cy.get('.modal-content')
-			.should('contain.text', 'Archive this list')
-		cy.get('.modal-content [data-cy=modalPrimary]')
-			.click()
-		
-		cy.get('.namespace-container .menu.namespaces-lists .menu-list')
-			.should('not.contain', lists[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.')
-	})
-})

cypress/e2e/list/namespaces.spec.ts

@@ -1,145 +0,0 @@
-import {createFakeUserAndLogin} from '../../support/authenticateUser'
-
-import {ListFactory} from '../../factories/list'
-import {NamespaceFactory} from '../../factories/namespace'
-
-describe('Namepaces', () => {
-	createFakeUserAndLogin()
-
-	let namespaces
-
-	beforeEach(() => {
-		namespaces = NamespaceFactory.create(1)
-		ListFactory.create(1)
-	})
-
-	it('Should be all there', () => {
-		cy.visit('/namespaces')
-		cy.get('[data-cy="namespace-title"]')
-			.should('contain', namespaces[0].title)
-	})
-
-	it('Should create a new Namespace', () => {
-		const newNamespaceTitle = 'New Namespace'
-
-		cy.visit('/namespaces')
-		cy.get('[data-cy="new-namespace"]')
-			.should('contain', 'New namespace')
-			.click()
-
-		cy.url()
-			.should('contain', '/namespaces/new')
-		cy.get('.card-header-title')
-			.should('contain', 'New namespace')
-		cy.get('input.input')
-			.type(newNamespaceTitle)
-		cy.get('.button')
-			.contains('Create')
-			.click()
-
-		cy.get('.global-notification')
-			.should('contain', 'Success')
-		cy.get('.namespace-container')
-			.should('contain', newNamespaceTitle)
-		cy.url()
-			.should('contain', '/namespaces')
-	})
-
-	it('Should rename the namespace all places', () => {
-		const newNamespaces = NamespaceFactory.create(5)
-		const newNamespaceName = 'New namespace name'
-
-		cy.visit('/namespaces')
-
-		cy.get(`.namespace-container .menu.namespaces-lists .namespace-title:contains(${newNamespaces[0].title}) .dropdown .dropdown-trigger`)
-			.click()
-		cy.get('.namespace-container .menu.namespaces-lists .namespace-title .dropdown .dropdown-content')
-			.contains('Edit')
-			.click()
-		cy.url()
-			.should('contain', '/settings/edit')
-		cy.get('#namespacetext')
-			.invoke('val')
-			.should('equal', newNamespaces[0].title) // wait until the namespace data is loaded
-		cy.get('#namespacetext')
-			.type(`{selectall}${newNamespaceName}`)
-		cy.get('footer.card-footer .button')
-			.contains('Save')
-			.click()
-
-		cy.get('.global-notification', { timeout: 1000 })
-			.should('contain', 'Success')
-		cy.get('.namespace-container .menu.namespaces-lists')
-			.should('contain', newNamespaceName)
-			.should('not.contain', newNamespaces[0].title)
-		cy.get('[data-cy="namespaces-list"]')
-			.should('contain', newNamespaceName)
-			.should('not.contain', newNamespaces[0].title)
-	})
-
-	it('Should remove a namespace when deleting it', () => {
-		const newNamespaces = NamespaceFactory.create(5)
-
-		cy.visit('/')
-
-		cy.get(`.namespace-container .menu.namespaces-lists .namespace-title:contains(${newNamespaces[0].title}) .dropdown .dropdown-trigger`)
-			.click()
-		cy.get('.namespace-container .menu.namespaces-lists .namespace-title .dropdown .dropdown-content')
-			.contains('Delete')
-			.click()
-		cy.url()
-			.should('contain', '/settings/delete')
-		cy.get('[data-cy="modalPrimary"]')
-			.contains('Do it')
-			.click()
-
-		cy.get('.global-notification')
-			.should('contain', 'Success')
-		cy.get('.namespace-container .menu.namespaces-lists')
-			.should('not.contain', newNamespaces[0].title)
-	})
-
-	it('Should not show archived lists & namespaces if the filter is not checked', () => {
-		const n = NamespaceFactory.create(1, {
-			id: 2,
-			is_archived: true,
-		}, false)
-		ListFactory.create(1, {
-			id: 2,
-			namespace_id: n[0].id,
-		}, false)
-
-		ListFactory.create(1, {
-			id: 3,
-			is_archived: true,
-		}, false)
-
-		// Initial
-		cy.visit('/namespaces')
-		cy.get('.namespace')
-			.should('not.contain', 'Archived')
-
-		// Show archived
-		cy.get('[data-cy="show-archived-check"] label.check span')
-			.should('be.visible')
-			.click()
-		cy.get('[data-cy="show-archived-check"] input')
-			.should('be.checked')
-		cy.get('.namespace')
-			.should('contain', 'Archived')
-
-		// Don't show archived
-		cy.get('[data-cy="show-archived-check"] label.check span')
-			.should('be.visible')
-			.click()
-		cy.get('[data-cy="show-archived-check"] input')
-			.should('not.be.checked')
-
-		// Second time visiting after unchecking
-		cy.visit('/namespaces')
-		cy.get('[data-cy="show-archived-check"] input')
-			.should('not.be.checked')
-		cy.get('.namespace')
-			.should('not.contain', 'Archived')
-	})
-})

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 = () => {}) {
-	beforeEach(() => {
-		const lists = createLists()
-		setLists(lists)
-	})
-}

cypress/e2e/misc/editor.spec.ts

@@ -1,39 +0,0 @@
-import {createFakeUserAndLogin} from '../../support/authenticateUser'
-
-import {TaskFactory} from '../../factories/task'
-import {ListFactory} from '../../factories/list'
-import {NamespaceFactory} from '../../factories/namespace'
-import {UserListFactory} from '../../factories/users_list'
-
-describe('Editor', () => {
-	createFakeUserAndLogin()
-	
-	beforeEach(() => {
-		NamespaceFactory.create(1)
-		ListFactory.create(1)
-		TaskFactory.truncate()
-		UserListFactory.truncate()
-	})
-
-	it('Has a preview with checkable checkboxes', () => {
-		const tasks = TaskFactory.create(1, {
-			description: `# Test Heading
-* Bullet 1
-* Bullet 2
-
-* [ ] Checklist
-* [x] Checklist checked
-`,
-		})
-
-		cy.visit(`/tasks/${tasks[0].id}`)
-		cy.get('input[type=checkbox][data-checkbox-num=0]')
-			.click()
-
-		cy.get('.task-view .details.content.description h3 span.is-small.has-text-success')
-			.contains('Saved!')
-			.should('exist')
-		cy.get('.preview.content')
-			.should('contain', 'Test Heading')
-	})
-})

cypress/e2e/misc/menu.spec.ts

@@ -8,20 +8,20 @@ describe('The Menu', () => {
 	})
 
 	it('Is visible by default on desktop', () => {
-		cy.get('.namespace-container')
+		cy.get('.menu-container')
 			.should('have.class', 'is-active')
 	})
 
 	it('Can be hidden on desktop', () => {
 		cy.get('button.menu-show-button:visible')
 			.click()
-		cy.get('.namespace-container')
+		cy.get('.menu-container')
 			.should('not.have.class', 'is-active')
 	})
 
 	it('Is hidden by default on mobile', () => {
 		cy.viewport('iphone-8')
-		cy.get('.namespace-container')
+		cy.get('.menu-container')
 			.should('not.have.class', 'is-active')
 	})
 
@@ -29,7 +29,7 @@ describe('The Menu', () => {
 		cy.viewport('iphone-8')
 		cy.get('button.menu-show-button:visible')
 			.click()
-		cy.get('.namespace-container')
+		cy.get('.menu-container')
 			.should('have.class', 'is-active')
 	})
 })

cypress/e2e/project/prepareProjects.ts

@@ -0,0 +1,17 @@
+import {ProjectFactory} from '../../factories/project'
+import {TaskFactory} from '../../factories/task'
+
+export function createProjects() {
+	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,50 @@
+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') + '/projects*').as('loadProjectArray')
+		cy.intercept(Cypress.env('API_URL') + '/projects/*').as('loadProject')
+		
+		const projects = ProjectFactory.create(6)
+
+		cy.visit('/')
+		cy.wait('@loadProjectArray')
+		cy.get('body')
+			.should('not.contain', 'Last viewed')
+
+		cy.visit(`/projects/${projects[0].id}`)
+		cy.wait('@loadProject')
+		cy.visit(`/projects/${projects[1].id}`)
+		cy.wait('@loadProject')
+		cy.visit(`/projects/${projects[2].id}`)
+		cy.wait('@loadProject')
+		cy.visit(`/projects/${projects[3].id}`)
+		cy.wait('@loadProject')
+		cy.visit(`/projects/${projects[4].id}`)
+		cy.wait('@loadProject')
+		cy.visit(`/projects/${projects[5].id}`)
+		cy.wait('@loadProject')
+
+		// cy.visit('/')
+		// 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,26 @@
 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', () => {
+function createSingleTaskInBucket(count = 1, attrs = {}) {
+	const projects = ProjectFactory.create(1)
+	const buckets = BucketFactory.create(2, {
+		project_id: projects[0].id,
+	})
+	const tasks = TaskFactory.create(count, {
+		project_id: projects[0].id,
+		bucket_id: buckets[0].id,
+		...attrs,
+	})
+	return tasks[0]
+}
+
+describe('Project View Kanban', () => {
 	createFakeUserAndLogin()
-	prepareLists()
+	prepareProjects()
 	
 	let buckets
 	beforeEach(() => {
@@ -16,10 +29,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 +47,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 +68,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 +82,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 +103,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 +114,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 +138,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 +157,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 +171,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 +193,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 +210,18 @@ 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 buckets = BucketFactory.create(2, {
-			list_id: lists[0].id,
-		})
-		const tasks = TaskFactory.create(5, {
-			list_id: 1,
-			bucket_id: buckets[0].id,
-		})
-		const task = tasks[0]
-		cy.visit('/lists/1/kanban')
+		const task = createSingleTaskInBucket(5)
+		cy.visit('/projects/1/kanban')
 
 		cy.get('.kanban .bucket .tasks .task')
 			.contains(task.title)
@@ -238,4 +243,43 @@ describe('List View Kanban', () => {
 		cy.get('.kanban .bucket .tasks')
 			.should('not.contain', task.title)
 	})
+
+	it('Should show a task description icon if the task has a description', () => {
+		cy.intercept(Cypress.env('API_URL') + '/projects/1/buckets**').as('loadTasks')
+		const task = createSingleTaskInBucket(1, {
+			description: 'Lorem Ipsum',
+		})
+
+		cy.visit(`/projects/${task.project_id}/kanban`)
+		cy.wait('@loadTasks')
+
+		cy.get('.bucket .tasks .task .footer .icon svg')
+			.should('exist')
+	})
+
+	it('Should not show a task description icon if the task has an empty description', () => {
+		cy.intercept(Cypress.env('API_URL') + '/projects/1/buckets**').as('loadTasks')
+		const task = createSingleTaskInBucket(1, {
+			description: '',
+		})
+
+		cy.visit(`/projects/${task.project_id}/kanban`)
+		cy.wait('@loadTasks')
+
+		cy.get('.bucket .tasks .task .footer .icon svg')
+			.should('not.exist')
+	})
+
+	it('Should not show a task description icon if the task has a description containing only an empty p tag', () => {
+		cy.intercept(Cypress.env('API_URL') + '/projects/1/buckets**').as('loadTasks')
+		const task = createSingleTaskInBucket(1, {
+			description: '<p></p>',
+		})
+
+		cy.visit(`/projects/${task.project_id}/kanban`)
+		cy.wait('@loadTasks')
+
+		cy.get('.bucket .tasks .task .footer .icon svg')
+			.should('not.exist')
+	})
 })

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 h1')
-			.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,32 @@ 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 .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 +86,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

@@ -0,0 +1,171 @@
+import {createFakeUserAndLogin} from '../../support/authenticateUser'
+
+import {TaskFactory} from '../../factories/task'
+import {ProjectFactory} from '../../factories/project'
+import {prepareProjects} from './prepareProjects'
+
+describe('Projects', () => {
+	createFakeUserAndLogin()
+
+	let projects
+	prepareProjects((newProjects) => (projects = newProjects))
+
+	it('Should create a new project', () => {
+		cy.visit('/projects')
+		cy.get('.project-header [data-cy=new-project]')
+			.click()
+		cy.url()
+			.should('contain', '/projects/new')
+		cy.get('.card-header-title')
+			.contains('New project')
+		cy.get('input[name=projectTitle]')
+			.type('New Project')
+		cy.get('.button')
+			.contains('Create')
+			.click()
+
+		cy.get('.global-notification', {timeout: 1000}) // Waiting until the request to create the new project is done
+			.should('contain', 'Success')
+		cy.url()
+			.should('contain', '/projects/')
+		cy.get('.project-title')
+			.should('contain', 'New Project')
+	})
+
+	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', '/projects/1/kanban')
+		cy.wait('@loadBuckets')
+		cy.visit('/projects/1')
+		cy.url()
+			.should('contain', '/projects/1/kanban')
+	})
+
+	it('Should rename the project in all places', () => {
+		TaskFactory.create(5, {
+			id: '{increment}',
+			project_id: 1,
+		})
+		const newProjectName = 'New project name'
+
+		cy.visit('/projects/1')
+		cy.get('.project-title')
+			.should('contain', 'First Project')
+
+		cy.get('.menu-container .menu-list li:first-child .dropdown .menu-list-dropdown-trigger')
+			.click()
+		cy.get('.menu-container .menu-list li:first-child .dropdown .dropdown-content')
+			.contains('Edit')
+			.click()
+		cy.get('#title')
+			.type(`{selectall}${newProjectName}`)
+		cy.get('footer.card-footer .button')
+			.contains('Save')
+			.click()
+
+		cy.get('.global-notification')
+			.should('contain', 'Success')
+		cy.get('.project-title')
+			.should('contain', newProjectName)
+			.should('not.contain', projects[0].title)
+		cy.get('.menu-container .menu-list li:first-child')
+			.should('contain', newProjectName)
+			.should('not.contain', projects[0].title)
+		cy.visit('/')
+		cy.get('.project-grid')
+			.should('contain', newProjectName)
+			.should('not.contain', projects[0].title)
+	})
+
+	it('Should remove a project when deleting it', () => {
+		cy.visit(`/projects/${projects[0].id}`)
+
+		cy.get('.menu-container .menu-list li:first-child .dropdown .menu-list-dropdown-trigger')
+			.click()
+		cy.get('.menu-container .menu-list li:first-child .dropdown .dropdown-content')
+			.contains('Delete')
+			.click()
+		cy.url()
+			.should('contain', '/settings/delete')
+		cy.get('[data-cy="modalPrimary"]')
+			.contains('Do it')
+			.click()
+
+		cy.get('.global-notification')
+			.should('contain', 'Success')
+		cy.get('.menu-container .menu-list')
+			.should('not.contain', projects[0].title)
+		cy.location('pathname')
+			.should('equal', '/')
+	})
+
+	it('Should archive a project', () => {
+		cy.visit(`/projects/${projects[0].id}`)
+
+		cy.get('.project-title-dropdown')
+			.click()
+		cy.get('.project-title-dropdown .dropdown-menu .dropdown-item')
+			.contains('Archive')
+			.click()
+		cy.get('.modal-content')
+			.should('contain.text', 'Archive this project')
+		cy.get('.modal-content [data-cy=modalPrimary]')
+			.click()
+
+		cy.get('.menu-container .menu-list')
+			.should('not.contain', projects[0].title)
+		cy.get('main.app-content')
+			.should('contain.text', 'This project is archived. It is not possible to create new or edit tasks for it.')
+	})
+
+	it('Should show all projects on the projects page', () => {
+		const projects = ProjectFactory.create(10)
+
+		cy.visit('/projects')
+
+		projects.forEach(p => {
+			cy.get('[data-cy="projects-list"]')
+				.should('contain', p.title)
+		})
+	})
+
+	it('Should not show archived projects if the filter is not checked', () => {
+		ProjectFactory.create(1, {
+			id: 2,
+		}, false)
+		ProjectFactory.create(1, {
+			id: 3,
+			is_archived: true,
+		}, false)
+
+		// Initial
+		cy.visit('/projects')
+		cy.get('.project-grid')
+			.should('not.contain', 'Archived')
+
+		// Show archived
+		cy.get('[data-cy="show-archived-check"] label span')
+			.should('be.visible')
+			.click()
+		cy.get('[data-cy="show-archived-check"] input')
+			.should('be.checked')
+		cy.get('.project-grid')
+			.should('contain', 'Archived')
+
+		// Don't show archived
+		cy.get('[data-cy="show-archived-check"] label span')
+			.should('be.visible')
+			.click()
+		cy.get('[data-cy="show-archived-check"] input')
+			.should('not.be.checked')
+
+		// Second time visiting after unchecking
+		cy.visit('/projects')
+		cy.get('[data-cy="show-archived-check"] input')
+			.should('not.be.checked')
+		cy.get('.project-grid')
+			.should('not.contain', 'Archived')
+	})
+})

cypress/e2e/sharing/linkShare.spec.ts

@@ -1,25 +1,59 @@
 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)
+function prepareLinkShare() {
+	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`)
+	return {
+		share: linkShares[0],
+		project: projects[0],
+		tasks,
+	}
+}
+
+describe('Link shares', () => {
+	it('Can view a link share', () => {
+		const {share, project, tasks} = prepareLinkShare()
+
+		cy.visit(`/share/${share.hash}/auth`)
 
 		cy.get('h1.title')
-			.should('contain', lists[0].title)
+			.should('contain', project.title)
+		cy.get('input.input[placeholder="Add a new task..."')
+			.should('not.exist')
+		cy.get('.tasks')
+			.should('contain', tasks[0].title)
+		
+		cy.url().should('contain', `/projects/${project.id}/list#share-auth-token=${share.hash}`)
+	})
+
+	it('Should work when directly viewing a project with share hash present', () => {
+		const {share, project, tasks} = prepareLinkShare()
+
+		cy.visit(`/projects/${project.id}/list#share-auth-token=${share.hash}`)
+
+		cy.get('h1.title')
+			.should('contain', project.title)
 		cy.get('input.input[placeholder="Add a new task..."')
 			.should('not.exist')
 		cy.get('.tasks')
 			.should('contain', tasks[0].title)
 	})
+	
+	it('Should work when directly viewing a task with share hash present', () => {
+		const {share, project, tasks} = prepareLinkShare()
+
+		cy.visit(`/tasks/${tasks[0].id}#share-auth-token=${share.hash}`)
+
+		cy.get('h1.title')
+			.should('contain', tasks[0].title)
+	})
 })

cypress/e2e/task/overview.spec.ts

@@ -1,17 +1,15 @@
 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'
 import {BucketFactory} from '../../factories/bucket'
 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 +18,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 +29,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 +71,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 +88,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 +111,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 +129,22 @@ 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', '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,17 +1,17 @@
 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'
 import {BucketFactory} from '../../factories/bucket'
 
 import {TaskAttachmentFactory} from '../../factories/task_attachments'
+import {TaskReminderFactory} from '../../factories/task_reminders'
 
 function addLabelToTaskAndVerify(labelTitle: string) {
 	cy.get('.task-view .action-buttons .button')
@@ -24,7 +24,7 @@ function addLabelToTaskAndVerify(labelTitle: string) {
 		.first()
 		.click()
 
-	cy.get('.global-notification', { timeout: 4000 })
+	cy.get('.global-notification', {timeout: 4000})
 		.should('contain', 'Success')
 	cy.get('.task-view .details.labels-list .multiselect .input-wrapper span.tag')
 		.should('exist')
@@ -36,7 +36,7 @@ function uploadAttachmentAndVerify(taskId: number) {
 	cy.get('.task-view .action-buttons .button')
 		.contains('Add Attachments')
 		.click()
-	cy.get('input[type=file]', {timeout: 1000})
+	cy.get('input[type=file]#files', {timeout: 1000})
 		.selectFile('cypress/fixtures/image.jpg', {force: true}) // The input is not visible, but on purpose
 	cy.wait('@uploadAttachment')
 
@@ -47,23 +47,21 @@ function uploadAttachmentAndVerify(taskId: number) {
 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 +72,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 +93,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,25 +104,65 @@ 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()
-		cy.get('.menu.namespaces-lists')
+		cy.get('.menu-container')
 			.should('contain', 'Favorites')
 	})
 
+	it('Should show a task description icon if the task has a description', () => {
+		cy.intercept(Cypress.env('API_URL') + '/projects/1/tasks**').as('loadTasks')
+		TaskFactory.create(1, {
+			description: 'Lorem Ipsum',
+		})
+
+		cy.visit('/projects/1/list')
+		cy.wait('@loadTasks')
+
+		cy.get('.tasks .task .project-task-icon')
+			.should('exist')
+	})
+
+	it('Should not show a task description icon if the task has an empty description', () => {
+		cy.intercept(Cypress.env('API_URL') + '/projects/1/tasks**').as('loadTasks')
+		TaskFactory.create(1, {
+			description: '',
+		})
+
+		cy.visit('/projects/1/list')
+		cy.wait('@loadTasks')
+
+		cy.get('.tasks .task .project-task-icon')
+			.should('not.exist')
+	})
+
+	it('Should not show a task description icon if the task has a description containing only an empty p tag', () => {
+		cy.intercept(Cypress.env('API_URL') + '/projects/1/tasks**').as('loadTasks')
+		TaskFactory.create(1, {
+			description: '<p></p>',
+		})
+
+		cy.visit('/projects/1/list')
+		cy.wait('@loadTasks')
+
+		cy.get('.tasks .task .project-task-icon')
+			.should('not.exist')
+	})
+
 	describe('Task Detail View', () => {
 		beforeEach(() => {
 			TaskCommentFactory.truncate()
 			LabelTaskFactory.truncate()
+			TaskAttachmentFactory.truncate()
 		})
 
 		it('Shows all task details', () => {
 			const tasks = TaskFactory.create(1, {
 				id: 1,
 				index: 1,
-				description: 'Lorem ipsum dolor sit amet.'
+				description: 'Lorem ipsum dolor sit amet.',
 			})
 			cy.visit(`/tasks/${tasks[0].id}`)
 
@@ -133,8 +171,7 @@ describe('Task', () => {
 			cy.get('.task-view h1.title.task-id')
 				.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')
@@ -146,7 +183,7 @@ describe('Task', () => {
 				id: 1,
 				index: 1,
 				done: true,
-				done_at: new Date().toISOString()
+				done_at: new Date().toISOString(),
 			})
 			cy.visit(`/tasks/${tasks[0].id}`)
 
@@ -179,33 +216,33 @@ 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', () => {
 			const tasks = TaskFactory.create(1, {
 				id: 1,
-				description: 'Lorem ipsum dolor sit amet.'
+				description: 'Lorem ipsum dolor sit amet.',
 			})
 			cy.visit(`/tasks/${tasks[0].id}`)
 
-			cy.get('.task-view .details.content.description .editor button')
+			cy.get('.task-view .details.content.description .tiptap button.done-edit')
 				.click()
-			cy.get('.task-view .details.content.description .editor .vue-easymde .EasyMDEContainer .CodeMirror-scroll')
+			cy.get('.task-view .details.content.description .tiptap__editor .tiptap.ProseMirror')
 				.type('{selectall}New Description')
 			cy.get('[data-cy="saveEditor"]')
 				.contains('Save')
@@ -216,13 +253,52 @@ describe('Task', () => {
 				.should('exist')
 		})
 
+		it('Shows an empty editor when the description of a task is empty', () => {
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+				description: '',
+			})
+			cy.visit(`/tasks/${tasks[0].id}`)
+
+			cy.get('.task-view .details.content.description .tiptap.ProseMirror p')
+				.should('have.attr', 'data-placeholder')
+			cy.get('.task-view .details.content.description .tiptap button.done-edit')
+				.should('not.exist')
+		})
+
+		it('Shows a preview editor when the description of a task is not empty', () => {
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+				description: 'Lorem Ipsum dolor sit amet',
+			})
+			cy.visit(`/tasks/${tasks[0].id}`)
+
+			cy.get('.task-view .details.content.description .tiptap.ProseMirror p')
+				.should('not.have.attr', 'data-placeholder')
+			cy.get('.task-view .details.content.description .tiptap button.done-edit')
+				.should('exist')
+		})
+
+		it('Shows a preview editor when the description of a task contains html', () => {
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+				description: '<p>Lorem Ipsum dolor sit amet</p>',
+			})
+			cy.visit(`/tasks/${tasks[0].id}`)
+
+			cy.get('.task-view .details.content.description .tiptap.ProseMirror p')
+				.should('not.have.attr', 'data-placeholder')
+			cy.get('.task-view .details.content.description .tiptap button.done-edit')
+				.should('exist')
+		})
+
 		it('Can add a new comment', () => {
 			const tasks = TaskFactory.create(1, {
 				id: 1,
 			})
 			cy.visit(`/tasks/${tasks[0].id}`)
 
-			cy.get('.task-view .comments .media.comment .editor .vue-easymde .EasyMDEContainer .CodeMirror-scroll')
+			cy.get('.task-view .comments .media.comment .tiptap__editor .tiptap.ProseMirror')
 				.should('be.visible')
 				.type('{selectall}New Comment')
 			cy.get('.task-view .comments .media.comment .button:not([disabled])')
@@ -230,20 +306,20 @@ describe('Task', () => {
 				.should('be.visible')
 				.click()
 
-			cy.get('.task-view .comments .media.comment .editor')
+			cy.get('.task-view .comments .media.comment .tiptap__editor')
 				.should('contain', 'New Comment')
 			cy.get('.global-notification')
 				.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 +327,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')
@@ -260,8 +336,7 @@ describe('Task', () => {
 				.click()
 
 			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 +344,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 +361,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 +396,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 +422,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 +450,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 +463,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 +487,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, {
@@ -466,6 +541,234 @@ describe('Task', () => {
 				.should('contain', 'Success')
 		})
 
+		it('Can set a due date to a specific date for a task', () => {
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+				done: false,
+			})
+			cy.visit(`/tasks/${tasks[0].id}`)
+
+			cy.get('.task-view .action-buttons .button')
+				.contains('Set Due Date')
+				.click()
+			cy.get('.task-view .columns.details .column')
+				.contains('Due Date')
+				.get('.date-input .datepicker .show')
+				.click()
+			cy.get('.datepicker-popup .flatpickr-innerContainer .flatpickr-days .flatpickr-day.today')
+				.click()
+			cy.get('[data-cy="closeDatepicker"]')
+				.contains('Confirm')
+				.click()
+
+			const today = new Date()
+			const day = today.toLocaleString('default', {day: 'numeric'})
+			const month = today.toLocaleString('default', {month: 'short'})
+			const year = today.toLocaleString('default', {year: 'numeric'})
+			const date = `${day} ${month} ${year}, 12:00:00`
+			cy.get('.task-view .columns.details .column')
+				.contains('Due Date')
+				.get('.date-input .datepicker-popup')
+				.should('not.exist')
+			cy.get('.task-view .columns.details .column')
+				.contains('Due Date')
+				.get('.date-input')
+				.should('contain.text', date)
+			cy.get('.global-notification')
+				.should('contain', 'Success')
+		})
+
+		it('Can change a due date to a specific date for a task', () => {
+			const dueDate = new Date()
+			dueDate.setHours(12)
+			dueDate.setMinutes(0)
+			dueDate.setSeconds(0)
+			dueDate.setDate(1)
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+				done: false,
+				due_date: dueDate.toISOString(),
+			})
+			cy.visit(`/tasks/${tasks[0].id}`)
+
+			cy.get('.task-view .action-buttons .button')
+				.contains('Set Due Date')
+				.click()
+			cy.get('.task-view .columns.details .column')
+				.contains('Due Date')
+				.get('.date-input .datepicker .show')
+				.click()
+			cy.get('.datepicker-popup .flatpickr-innerContainer .flatpickr-days .flatpickr-day.today')
+				.click()
+			cy.get('[data-cy="closeDatepicker"]')
+				.contains('Confirm')
+				.click()
+
+			const today = new Date()
+			const day = today.toLocaleString('default', {day: 'numeric'})
+			const month = today.toLocaleString('default', {month: 'short'})
+			const year = today.toLocaleString('default', {year: 'numeric'})
+			const date = `${day} ${month} ${year}, 12:00:00`
+			cy.get('.task-view .columns.details .column')
+				.contains('Due Date')
+				.get('.date-input .datepicker-popup')
+				.should('not.exist')
+			cy.get('.task-view .columns.details .column')
+				.contains('Due Date')
+				.get('.date-input')
+				.should('contain.text', date)
+			cy.get('.global-notification')
+				.should('contain', 'Success')
+		})
+
+		it('Can set a reminder', () => {
+			TaskReminderFactory.truncate()
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+				done: false,
+			})
+			cy.visit(`/tasks/${tasks[0].id}`)
+
+			cy.get('.task-view .action-buttons .button')
+				.contains('Set Reminders')
+				.click()
+			cy.get('.task-view .columns.details .column button')
+				.contains('Add a new reminder')
+				.click()
+			cy.get('.datepicker__quick-select-date')
+				.contains('Tomorrow')
+				.click()
+
+			cy.get('.reminder-options-popup')
+				.should('not.be.visible')
+			cy.get('.global-notification')
+				.should('contain', 'Success')
+		})
+
+		it('Allows to set a relative reminder when the task already has a due date', () => {
+			TaskReminderFactory.truncate()
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+				done: false,
+				due_date: (new Date()).toISOString(),
+			})
+			cy.visit(`/tasks/${tasks[0].id}`)
+
+			cy.get('.task-view .action-buttons .button')
+				.contains('Set Reminders')
+				.click()
+			cy.get('.task-view .columns.details .column button')
+				.contains('Add a new reminder')
+				.click()
+			cy.get('.datepicker__quick-select-date')
+				.should('not.exist')
+			cy.get('.reminder-options-popup .card-content')
+				.should('contain', '1 day before Due Date')
+			cy.get('.reminder-options-popup .card-content')
+				.contains('1 day before Due Date')
+				.click()
+
+			cy.get('.reminder-options-popup')
+				.should('not.be.visible')
+			cy.get('.global-notification')
+				.should('contain', 'Success')
+		})
+
+		it('Allows to set a relative reminder when the task already has a start date', () => {
+			TaskReminderFactory.truncate()
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+				done: false,
+				start_date: (new Date()).toISOString(),
+			})
+			cy.visit(`/tasks/${tasks[0].id}`)
+
+			cy.get('.task-view .action-buttons .button')
+				.contains('Set Reminders')
+				.click()
+			cy.get('.task-view .columns.details .column button')
+				.contains('Add a new reminder')
+				.click()
+			cy.get('.datepicker__quick-select-date')
+				.should('not.exist')
+			cy.get('.reminder-options-popup .card-content')
+				.should('contain', '1 day before Start Date')
+			cy.get('.reminder-options-popup .card-content')
+				.contains('1 day before Start Date')
+				.click()
+
+			cy.get('.reminder-options-popup')
+				.should('not.be.visible')
+			cy.get('.global-notification')
+				.should('contain', 'Success')
+		})
+
+		it('Allows to set a custom relative reminder when the task already has a due date', () => {
+			TaskReminderFactory.truncate()
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+				done: false,
+				due_date: (new Date()).toISOString(),
+			})
+			cy.visit(`/tasks/${tasks[0].id}`)
+
+			cy.get('.task-view .action-buttons .button')
+				.contains('Set Reminders')
+				.click()
+			cy.get('.task-view .columns.details .column button')
+				.contains('Add a new reminder')
+				.click()
+			cy.get('.datepicker__quick-select-date')
+				.should('not.exist')
+			cy.get('.reminder-options-popup .card-content')
+				.contains('Custom')
+				.click()
+			cy.get('.reminder-options-popup .card-content .reminder-period input')
+				.first()
+				.type('{selectall}10')
+			cy.get('.reminder-options-popup .card-content .reminder-period select')
+				.first()
+				.select('days')
+			cy.get('.reminder-options-popup .card-content button')
+				.contains('Confirm')
+				.click()
+
+			cy.get('.reminder-options-popup')
+				.should('not.be.visible')
+			cy.get('.global-notification')
+				.should('contain', 'Success')
+		})
+
+		it('Allows to set a fixed reminder when the task already has a due date', () => {
+			TaskReminderFactory.truncate()
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+				done: false,
+				due_date: (new Date()).toISOString(),
+			})
+			cy.visit(`/tasks/${tasks[0].id}`)
+
+			cy.get('.task-view .action-buttons .button')
+				.contains('Set Reminders')
+				.click()
+			cy.get('.task-view .columns.details .column button')
+				.contains('Add a new reminder')
+				.click()
+			cy.get('.datepicker__quick-select-date')
+				.should('not.exist')
+			cy.get('.reminder-options-popup .card-content')
+				.contains('Date and time')
+				.click()
+			cy.get('.datepicker__quick-select-date')
+				.contains('Tomorrow')
+				.click()
+
+			cy.get('.reminder-options-popup')
+				.should('not.be.visible')
+			cy.get('.global-notification')
+				.should('contain', 'Success')
+		})
+
 		it('Can set a priority for a task', () => {
 			const tasks = TaskFactory.create(1, {
 				id: 1,
@@ -527,13 +830,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)
@@ -552,30 +855,114 @@ describe('Task', () => {
 			const tasks = TaskFactory.create(1, {
 				id: 1,
 				description: `
-This is a checklist:
-
-* [ ] one item
-* [ ] another item
-* [ ] third item
-* [ ] fourth item
-* [x] and this one is already done
-`,
+<ul data-type="taskList">
+	<li data-checked="false" data-type="taskItem"><label><input type="checkbox"><span></span></label>
+		<div><p>First Item</p></div>
+	</li>
+	<li data-checked="false" data-type="taskItem"><label><input type="checkbox"><span></span></label>
+		<div><p>Second Item</p></div>
+	</li>
+	<li data-checked="false" data-type="taskItem"><label><input type="checkbox"><span></span></label>
+		<div><p>Third Item</p></div>
+	</li>
+	<li data-checked="false" data-type="taskItem"><label><input type="checkbox"><span></span></label>
+		<div><p>Fourth Item</p></div>
+	</li>
+	<li data-checked="true" data-type="taskItem"><label><input type="checkbox"><span></span></label>
+		<div><p>Fifth Item</p></div>
+	</li>
+</ul>`,
 			})
 			cy.visit(`/tasks/${tasks[0].id}`)
 
 			cy.get('.task-view .checklist-summary')
 				.should('contain.text', '1 of 5 tasks')
-			cy.get('.editor .content ul > li input[type=checkbox]')
+			cy.get('.tiptap__editor ul > li input[type=checkbox]')
 				.eq(2)
 				.click()
 
-			cy.get('.editor .content ul > li input[type=checkbox]')
+			cy.get('.task-view .details.content.description h3 span.is-small.has-text-success')
+				.contains('Saved!')
+				.should('exist')
+			cy.get('.tiptap__editor ul > li input[type=checkbox]')
 				.eq(2)
 				.should('be.checked')
-			cy.get('.editor .content input[type=checkbox]')
+			cy.get('.tiptap__editor input[type=checkbox]')
 				.should('have.length', 5)
 			cy.get('.task-view .checklist-summary')
 				.should('contain.text', '2 of 5 tasks')
 		})
+
+		it('Should use the editor to render description', () => {
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+				description: `
+<h1>Lorem Ipsum</h1>
+<p>Dolor sit amet</p>
+<ul data-type="taskList">
+	<li data-checked="false" data-type="taskItem"><label><input type="checkbox"><span></span></label>
+		<div><p>First Item</p></div>
+	</li>
+	<li data-checked="false" data-type="taskItem"><label><input type="checkbox"><span></span></label>
+		<div><p>Second Item</p></div>
+	</li>
+</ul>`,
+			})
+			cy.visit(`/tasks/${tasks[0].id}`)
+
+			cy.get('.tiptap__editor ul > li input[type=checkbox]')
+				.should('exist')
+			cy.get('.tiptap__editor h1')
+				.contains('Lorem Ipsum')
+				.should('exist')
+			cy.get('.tiptap__editor p')
+				.contains('Dolor sit amet')
+				.should('exist')
+		})
+
+		it('Should render an image from attachment', async () => {
+
+			TaskAttachmentFactory.truncate()
+
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+				description: '',
+			})
+
+			cy.readFile('cypress/fixtures/image.jpg', null).then(file => {
+
+				const formData = new FormData()
+				formData.append('files', new Blob([file]), 'image.jpg')
+
+				cy.request({
+					method: 'PUT',
+					url: `${Cypress.env('API_URL')}/tasks/${tasks[0].id}/attachments`,
+					headers: {
+						'Authorization': `Bearer ${window.localStorage.getItem('token')}`,
+						'Content-Type': 'multipart/form-data',
+					},
+					body: formData,
+				})
+					.then(({body}) => {
+						const dec = new TextDecoder('utf-8')
+						const {success} = JSON.parse(dec.decode(body))
+
+						TaskFactory.create(1, {
+							id: 1,
+							description: `<img src="${Cypress.env('API_URL')}/tasks/${tasks[0].id}/attachments/${success[0].id}" alt="test image">`,
+						})
+
+						cy.visit(`/tasks/${tasks[0].id}`)
+
+						cy.get('.tiptap__editor img')
+							.should('be.visible')
+							.and(($img) => {
+								// "naturalWidth" and "naturalHeight" are set when the image loads
+								expect($img[0].naturalWidth).to.be.greaterThan(0)
+							})
+
+					})
+			})
+		})
 	})
 })

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,36 +1,41 @@
 import {UserFactory} from '../../factories/user'
+import {ProjectFactory} from '../../factories/project'
 
 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.')
 }
 
-const username = 'test'
+const credentials = {
+	username: 'test',
+	password: '1234',
+}
+
+function login() {
+	cy.get('input[id=username]').type(credentials.username)
+	cy.get('input[id=password]').type(credentials.password)
+	cy.get('.button').contains('Login').click()
+	cy.url().should('include', '/')
+}
 
 context('Login', () => {
 	beforeEach(() => {
-		UserFactory.create(1, {username})
+		UserFactory.create(1, {username: credentials.username})
 	})
 
 	it('Should log in with the right credentials', () => {
-		const fixture = {
-			username: 'test',
-			password: '1234',
-		}
-
 		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.url().should('include', '/')
+		login()
 		cy.clock(1625656161057) // 13:00
-		cy.get('h2').should('contain', `Hi ${fixture.username}!`)
+		cy.get('h2').should('contain', `Hi ${credentials.username}!`)
 	})
 
 	it('Should fail with a bad password', () => {
@@ -55,4 +60,15 @@ context('Login', () => {
 		cy.visit('/')
 		cy.url().should('include', '/login')
 	})
+	
+	it('Should redirect to the previous route after logging in', () => {
+		const projects = ProjectFactory.create(1)
+		cy.visit(`/projects/${projects[0].id}/list`)
+
+		cy.url().should('include', '/login')
+		
+		login()
+
+		cy.url().should('include', `/projects/${projects[0].id}/list`)
+	})
 })

cypress/e2e/user/logout.spec.ts

@@ -1,10 +1,10 @@
 import {createFakeUserAndLogin} from '../../support/authenticateUser'
-import {createLists} from '../list/prepareLists'
+import {createProjects} from '../project/prepareProjects'
 
 function logout() {
-	cy.get('.navbar .user .username')
+	cy.get('.navbar .username-dropdown-trigger')
 		.click()
-	cy.get('.navbar .user .dropdown-menu .dropdown-item')
+	cy.get('.navbar .dropdown-item')
 		.contains('Logout')
 		.click()
 }
@@ -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/e2e/user/registration.spec.ts

@@ -17,7 +17,7 @@ context('Registration', () => {
 	it('Should work without issues', () => {
 		const fixture = {
 			username: 'testuser',
-			password: '123456',
+			password: '12345678',
 			email: 'testuser@example.com',
 		}
 
@@ -31,10 +31,10 @@ context('Registration', () => {
 		cy.get('h2').should('contain', `Hi ${fixture.username}!`)
 	})
 
-	it.only('Should fail', () => {
+	it('Should fail', () => {
 		const fixture = {
 			username: 'test',
-			password: '123456',
+			password: '12345678',
 			email: 'testuser@example.com',
 		}
 

cypress/e2e/user/settings.spec.ts

@@ -37,7 +37,7 @@ describe('User Settings', () => {
 
 		cy.get('.global-notification')
 			.should('contain', 'Success')
-		cy.get('.navbar .user .username')
+		cy.get('.navbar .username-dropdown-trigger .username')
 			.should('contain', 'Lorem Ipsum')
 	})
 })

cypress/factories/bucket.ts

@@ -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/list.ts

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

cypress/factories/project.ts

@@ -1,8 +1,8 @@
-import {faker} from '@faker-js/faker'
 import {Factory} from '../support/factory'
+import {faker} from '@faker-js/faker'
 
-export class NamespaceFactory extends Factory {
-	static table = 'namespaces'
+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/task_reminders.ts

@@ -0,0 +1,18 @@
+import {Factory} from '../support/factory'
+
+export class TaskReminderFactory extends Factory {
+	static table = 'task_reminders'
+
+	static factory() {
+		const now = new Date()
+
+		return {
+			id: '{increment}',
+			task_id: 1,
+			reminder: now.toISOString(),
+			created: now.toISOString(),
+			relative_to: '',
+			relative_period: 0,
+		}
+	}
+}

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(),

cypress/support/factory.ts

@@ -4,7 +4,7 @@ import {seed} from './seed'
  * A factory makes it easy to seed the database with data.
  */
 export class Factory {
-	static table = null
+	static table: string | null = null
 
 	static factory() {
 		return {}

docker/injector.sh

@@ -11,5 +11,8 @@ VIKUNJA_SENTRY_DSN="$(echo "$VIKUNJA_SENTRY_DSN" | sed -r 's/([:;])/\\\1/g')"
 sed -ri "s:^(\s*window.API_URL\s*=)\s*.+:\1 '${VIKUNJA_API_URL}':g" /usr/share/nginx/html/index.html
 sed -ri "s:^(\s*window.SENTRY_ENABLED\s*=)\s*.+:\1 ${VIKUNJA_SENTRY_ENABLED}:g" /usr/share/nginx/html/index.html
 sed -ri "s:^(\s*window.SENTRY_DSN\s*=)\s*.+:\1 '${VIKUNJA_SENTRY_DSN}':g" /usr/share/nginx/html/index.html
+sed -ri "s:^(\s*window.PROJECT_INFINITE_NESTING_ENABLED\s*=)\s*.+:\1 '${VIKUNJA_PROJECT_INFINITE_NESTING_ENABLED}':g" /usr/share/nginx/html/index.html
+sed -ri "s:^(\s*window.ALLOW_ICON_CHANGES\s*=)\s*.+:\1 ${VIKUNJA_ALLOW_ICON_CHANGES}:g" /usr/share/nginx/html/index.html
+sed -ri "s:^(\s*window.CUSTOM_LOGO_URL\s*=)\s*.+:\1 ${VIKUNJA_CUSTOM_LOGO_URL}:g" /usr/share/nginx/html/index.html
 
 date -uIseconds | xargs echo 'info: started at'

docker/ipv6-disable.sh

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

docker/nginx.conf

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

docker/templates/default.conf.template

@@ -29,6 +29,20 @@ server {
     try_files $uri /index.html =404;
   }
   
+  # Disable caching for sw
+  location = /sw.js {
+    autoindex off;
+    expires off;
+    add_header Cache-Control "public, max-age=0, s-maxage=0, must-revalidate" always;
+  }
+
+  # Disable caching for webmanifest
+  location = /manifest.webmanifest {
+    autoindex off;
+    expires off;
+    add_header Cache-Control "public, max-age=0, s-maxage=0, must-revalidate" always;
+  }
+
   # favicon.ico
   location = /favicon.ico {
     log_not_found off;

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,7 +3,28 @@
 /// <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 VIKUNJA_API_URL?: string
+	readonly VIKUNJA_HTTP_PORT?: number
+	readonly VIKUNJA_HTTPS_PORT?: number
+
+	readonly VIKUNJA_SENTRY_ENABLED?: boolean
+	readonly VIKUNJA_SENTRY_DSN?: string
+
+	readonly SENTRY_AUTH_TOKEN?: string
+	readonly SENTRY_ORG?: string
+	readonly SENTRY_PROJECT?: string
+
 	readonly VITE_IS_ONLINE: boolean
 }
 

flake.lock

@@ -2,11 +2,11 @@
   "nodes": {
     "nixpkgs": {
       "locked": {
-        "lastModified": 1664753041,
-        "narHash": "sha256-0ogaD8PaGHluARFeupofvk1Nq9gpVeZdlFM0Kcwguys=",
+        "lastModified": 1701336116,
+        "narHash": "sha256-kEmpezCR/FpITc6yMbAh4WrOCiT2zg5pSjnKrq51h5Y=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "a62844b302507c7531ad68a86cb7aa54704c9cb4",
+        "rev": "f5c27c6136db4d76c30e533c20517df6864c46ee",
         "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',
 	},
 })

index.html

@@ -27,6 +27,13 @@
 	// our sentry instance to notify us of potential problems.
 	window.SENTRY_ENABLED = false
 	window.SENTRY_DSN = 'https://85694a2d757547cbbc90cd4b55c5a18d@o1047380.ingest.sentry.io/6024480'
+	// If enabled, allows the user to nest projects infinitely, instead of the default 2 levels.
+	// This setting might change in the future or be removed completely.
+	window.PROJECT_INFINITE_NESTING_ENABLED = false
+	// Allow changing the logo and other icons based on various occasions throughout the year.
+	window.ALLOW_ICON_CHANGES = true
+	// Allow using a custom logo via external URL.
+	window.CUSTOM_LOGO_URL = ''
 </script>
 </body>
 </html>

package.json

@@ -13,7 +13,7 @@
   },
   "homepage": "https://vikunja.io/",
   "funding": "https://opencollective.com/vikunja",
-  "packageManager": "pnpm@7.26.2",
+  "packageManager": "pnpm@8.15.1",
   "keywords": [
     "todo",
     "productivity",
@@ -22,6 +22,7 @@
     "gantt",
     "kanban"
   ],
+  "type": "module",
   "scripts": {
     "serve": "vite",
     "preview": "vite preview --port 4173",
@@ -29,7 +30,8 @@
     "build": "vite build && workbox copyLibraries dist/",
     "build:modern-only": "BUILD_MODERN_ONLY=true vite build && workbox copyLibraries dist/",
     "build:dev": "vite build --mode development --outDir dist-dev/",
-    "lint": "eslint --ignore-pattern '*.test.*' ./src --ext .vue,.js,.ts",
+    "lint": "eslint 'src/**/*.{js,ts,vue}'",
+    "lint:fix": "pnpm run lint --fix",
     "test:e2e": "start-server-and-test preview http://127.0.0.1:4173 'cypress run --e2e --browser chrome'",
     "test:e2e-record": "start-server-and-test preview http://127.0.0.1:4173 'cypress run --e2e --browser chrome --record'",
     "test:e2e-dev-dev": "start-server-and-test preview:dev http://127.0.0.1:4173 'cypress open --e2e'",
@@ -45,103 +47,141 @@
     "story:preview": "histoire preview"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.2.1",
-    "@fortawesome/free-regular-svg-icons": "6.2.1",
-    "@fortawesome/free-solid-svg-icons": "6.2.1",
-    "@fortawesome/vue-fontawesome": "3.0.3",
-    "@github/hotkey": "2.0.1",
-    "@infectoone/vue-ganttastic": "2.1.4",
-    "@intlify/unplugin-vue-i18n": "0.8.1",
-    "@kyvg/vue3-notification": "2.8.0",
-    "@sentry/tracing": "7.34.0",
-    "@sentry/vue": "7.34.0",
-    "@types/is-touch-device": "1.0.0",
-    "@types/lodash.clonedeep": "4.5.7",
-    "@types/sortablejs": "1.15.0",
-    "@vueuse/core": "9.12.0",
-    "axios": "1.2.6",
-    "blurhash": "2.0.4",
+    "@fortawesome/fontawesome-svg-core": "6.5.1",
+    "@fortawesome/free-regular-svg-icons": "6.5.1",
+    "@fortawesome/free-solid-svg-icons": "6.5.1",
+    "@fortawesome/vue-fontawesome": "3.0.6",
+    "@github/hotkey": "3.1.0",
+    "@infectoone/vue-ganttastic": "2.2.0",
+    "@intlify/unplugin-vue-i18n": "2.0.0",
+    "@kyvg/vue3-notification": "3.1.4",
+    "@sentry/tracing": "7.100.1",
+    "@sentry/vue": "7.100.1",
+    "@tiptap/core": "2.2.1",
+    "@tiptap/extension-blockquote": "2.2.1",
+    "@tiptap/extension-bold": "2.2.1",
+    "@tiptap/extension-bullet-list": "2.2.1",
+    "@tiptap/extension-code": "2.2.1",
+    "@tiptap/extension-code-block-lowlight": "2.2.1",
+    "@tiptap/extension-document": "2.2.1",
+    "@tiptap/extension-dropcursor": "2.2.1",
+    "@tiptap/extension-gapcursor": "2.2.1",
+    "@tiptap/extension-hard-break": "2.2.1",
+    "@tiptap/extension-heading": "2.2.1",
+    "@tiptap/extension-history": "2.2.1",
+    "@tiptap/extension-horizontal-rule": "2.2.1",
+    "@tiptap/extension-image": "2.2.1",
+    "@tiptap/extension-italic": "2.2.1",
+    "@tiptap/extension-link": "2.2.1",
+    "@tiptap/extension-list-item": "2.2.1",
+    "@tiptap/extension-ordered-list": "2.2.1",
+    "@tiptap/extension-paragraph": "2.2.1",
+    "@tiptap/extension-placeholder": "2.2.1",
+    "@tiptap/extension-strike": "2.2.1",
+    "@tiptap/extension-table": "2.2.1",
+    "@tiptap/extension-table-cell": "2.2.1",
+    "@tiptap/extension-table-header": "2.2.1",
+    "@tiptap/extension-table-row": "2.2.1",
+    "@tiptap/extension-task-item": "2.2.1",
+    "@tiptap/extension-task-list": "2.2.1",
+    "@tiptap/extension-text": "2.2.1",
+    "@tiptap/extension-typography": "2.2.1",
+    "@tiptap/extension-underline": "2.2.1",
+    "@tiptap/pm": "2.2.1",
+    "@tiptap/suggestion": "2.2.1",
+    "@tiptap/vue-3": "2.2.1",
+    "@types/is-touch-device": "1.0.2",
+    "@types/lodash.clonedeep": "4.5.9",
+    "@vueuse/core": "10.7.2",
+    "@vueuse/router": "10.7.2",
+    "axios": "1.6.7",
+    "blurhash": "2.0.5",
     "bulma-css-variables": "0.9.33",
     "camel-case": "4.1.2",
-    "codemirror": "5.65.11",
-    "date-fns": "2.29.3",
-    "dayjs": "1.11.7",
-    "dompurify": "2.4.3",
-    "easymde": "2.18.0",
+    "date-fns": "3.3.1",
+    "dayjs": "1.11.10",
+    "dompurify": "3.0.8",
     "fast-deep-equal": "3.1.3",
     "flatpickr": "4.6.13",
-    "flexsearch": "0.7.21",
-    "floating-vue": "2.0.0-beta.20",
-    "focus-within": "3.0.2",
-    "highlight.js": "11.7.0",
+    "flexsearch": "0.7.31",
+    "floating-vue": "5.2.2",
     "is-touch-device": "1.0.1",
-    "lodash.clonedeep": "4.5.0",
+    "klona": "2.0.6",
     "lodash.debounce": "4.0.8",
-    "marked": "4.2.12",
-    "minimist": "1.2.7",
-    "pinia": "2.0.29",
+    "lowlight": "2.9.0",
+    "pinia": "2.1.7",
     "register-service-worker": "1.7.2",
     "snake-case": "3.0.4",
-    "sortablejs": "1.15.0",
-    "ufo": "1.0.1",
-    "vue": "3.2.45",
+    "sortablejs": "1.15.2",
+    "tippy.js": "6.3.7",
+    "ufo": "1.4.0",
+    "vue": "3.4.15",
     "vue-advanced-cropper": "2.8.8",
-    "vue-flatpickr-component": "11.0.1",
-    "vue-i18n": "9.2.2",
-    "vue-router": "4.1.6",
-    "workbox-precaching": "6.5.4",
+    "vue-flatpickr-component": "11.0.3",
+    "vue-i18n": "9.9.1",
+    "vue-router": "4.2.5",
+    "workbox-precaching": "7.0.0",
     "zhyswan-vuedraggable": "4.1.3"
   },
   "devDependencies": {
-    "@4tw/cypress-drag-drop": "2.2.3",
-    "@cypress/vite-dev-server": "5.0.2",
-    "@cypress/vue": "5.0.3",
-    "@faker-js/faker": "7.6.0",
-    "@histoire/plugin-screenshot": "0.12.4",
-    "@histoire/plugin-vue": "0.12.4",
-    "@rushstack/eslint-patch": "1.2.0",
-    "@types/codemirror": "5.60.7",
-    "@types/dompurify": "2.4.0",
-    "@types/flexsearch": "0.7.3",
-    "@types/focus-within": "1.0.1",
-    "@types/lodash.debounce": "4.0.7",
-    "@types/marked": "4.0.8",
-    "@types/node": "18.11.18",
+    "@4tw/cypress-drag-drop": "2.2.5",
+    "@cypress/vite-dev-server": "5.0.7",
+    "@cypress/vue": "6.0.0",
+    "@faker-js/faker": "8.4.0",
+    "@histoire/plugin-screenshot": "0.17.8",
+    "@histoire/plugin-vue": "0.17.9",
+    "@rushstack/eslint-patch": "1.7.2",
+    "@tsconfig/node18": "18.2.2",
+    "@types/codemirror": "5.60.15",
+    "@types/dompurify": "3.0.5",
+    "@types/flexsearch": "0.7.6",
+    "@types/is-touch-device": "1.0.2",
+    "@types/lodash.debounce": "4.0.9",
+    "@types/marked": "5.0.2",
+    "@types/node": "20.11.10",
     "@types/postcss-preset-env": "7.7.0",
-    "@typescript-eslint/eslint-plugin": "5.49.0",
-    "@typescript-eslint/parser": "5.49.0",
-    "@vitejs/plugin-legacy": "3.0.2",
-    "@vitejs/plugin-vue": "4.0.0",
-    "@vue/eslint-config-typescript": "11.0.2",
-    "@vue/test-utils": "2.2.8",
-    "@vue/tsconfig": "0.1.3",
-    "autoprefixer": "10.4.13",
-    "browserslist": "4.21.4",
-    "caniuse-lite": "1.0.30001449",
-    "csstype": "3.1.1",
-    "cypress": "12.4.1",
-    "esbuild": "0.17.5",
-    "eslint": "8.33.0",
-    "eslint-plugin-vue": "9.9.0",
-    "happy-dom": "8.2.0",
-    "histoire": "0.12.4",
-    "netlify-cli": "12.10.0",
-    "postcss": "8.4.21",
+    "@types/sortablejs": "1.15.7",
+    "@typescript-eslint/eslint-plugin": "6.20.0",
+    "@typescript-eslint/parser": "6.20.0",
+    "@vitejs/plugin-legacy": "5.3.0",
+    "@vitejs/plugin-vue": "5.0.3",
+    "@vue/eslint-config-typescript": "12.0.0",
+    "@vue/test-utils": "2.4.4",
+    "@vue/tsconfig": "0.5.1",
+    "autoprefixer": "10.4.17",
+    "browserslist": "4.22.3",
+    "caniuse-lite": "1.0.30001581",
+    "css-has-pseudo": "6.0.1",
+    "csstype": "3.1.3",
+    "cypress": "13.6.3",
+    "esbuild": "0.20.0",
+    "eslint": "8.56.0",
+    "eslint-plugin-vue": "9.20.1",
+    "happy-dom": "13.3.5",
+    "histoire": "0.17.9",
+    "postcss": "8.4.33",
     "postcss-easing-gradients": "3.0.1",
-    "postcss-easings": "3.0.1",
-    "postcss-preset-env": "7.8.3",
-    "rollup": "3.12.0",
-    "rollup-plugin-visualizer": "5.9.0",
-    "sass": "1.57.1",
-    "start-server-and-test": "1.15.3",
-    "typescript": "4.9.4",
-    "vite": "4.0.4",
-    "vite-plugin-inject-preload": "1.2.0",
-    "vite-plugin-pwa": "0.14.1",
-    "vite-svg-loader": "4.0.0",
-    "vitest": "0.28.3",
-    "vue-tsc": "1.0.24",
-    "wait-on": "7.0.1",
-    "workbox-cli": "6.5.4"
+    "postcss-easings": "4.0.0",
+    "postcss-focus-within": "8.0.1",
+    "postcss-preset-env": "9.3.0",
+    "rollup": "4.9.6",
+    "rollup-plugin-visualizer": "5.12.0",
+    "sass": "1.70.0",
+    "start-server-and-test": "2.0.3",
+    "typescript": "5.3.3",
+    "vite": "5.0.12",
+    "vite-plugin-inject-preload": "1.3.3",
+    "vite-plugin-pwa": "0.17.5",
+    "vite-plugin-sentry": "1.3.0",
+    "vite-svg-loader": "5.1.0",
+    "vitest": "1.2.2",
+    "vue-tsc": "1.8.27",
+    "wait-on": "7.2.0",
+    "workbox-cli": "7.0.0"
+  },
+  "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

@@ -2,11 +2,16 @@
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
   "labels": ["dependencies"],
   "extends": [
-    "config:base"
+    "config:js-app"
+  ],
+  "hostRules": [
+    {
+      "timeout": 600000
+    }
   ],
   "packageRules": [
     {
-      "matchPackageNames": ["netlify-cli", "happy-dom"],
+      "matchPackageNames": ["happy-dom"],
       "extends": ["schedule:weekly"]
     },
     {
@@ -20,11 +25,24 @@
         "@vueuse/"
       ]
     },
+    {
+      "groupName": "histoire",
+      "matchPackagePrefixes": [
+        "@histoire/",
+        "histoire"
+      ]
+    },
+    {
+      "groupName": "tiptap",
+      "matchPackagePrefixes": [
+        "@tiptap/",
+        "tiptap"
+      ]
+    },
     {
       "matchDepTypes": ["devDependencies"],
-      "automerge": true,
-      "automergeStrategy": "squash",
-      "automergeType": "pr"
+      "groupName": "dev-dependencies",
+      "extends": ["schedule:daily"]
     }
   ]
 }

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

@@ -1,17 +1,23 @@
 <template>
-	<ready>
+	<Ready>
 		<template v-if="authUser">
-			<TheNavigation/>
-			<content-auth/>
+			<TheNavigation />
+			<ContentAuth />
 		</template>
-		<content-link-share v-else-if="authLinkShare"/>
-		<no-auth-wrapper v-else>
-			<router-view/>
-		</no-auth-wrapper>
-		<Notification/>
+		<ContentLinkShare v-else-if="authLinkShare" />
+		<NoAuthWrapper v-else>
+			<router-view />
+		</NoAuthWrapper>
 		
-		<keyboard-shortcuts v-if="keyboardShortcutsActive"/>
-	</ready>
+		<KeyboardShortcuts v-if="keyboardShortcutsActive" />
+		
+		<Teleport to="body">
+			<AddToHomeScreen />
+			<UpdateNotification />
+			<Notification />
+			<DemoMode />
+		</Teleport>
+	</Ready>
 </template>
 
 <script lang="ts" setup>
@@ -19,23 +25,29 @@ import {computed, watch} from 'vue'
 import {useRoute, useRouter} from 'vue-router'
 import {useI18n} from 'vue-i18n'
 import isTouchDevice from 'is-touch-device'
-import {success} from '@/message'
 
 import Notification from '@/components/misc/notification.vue'
-import KeyboardShortcuts from './components/misc/keyboard-shortcuts/index.vue'
+import UpdateNotification from '@/components/home/UpdateNotification.vue'
+import KeyboardShortcuts from '@/components/misc/keyboard-shortcuts/index.vue'
+
 import TheNavigation from '@/components/home/TheNavigation.vue'
-import ContentAuth from './components/home/contentAuth.vue'
-import ContentLinkShare from './components/home/contentLinkShare.vue'
+import ContentAuth from '@/components/home/contentAuth.vue'
+import ContentLinkShare from '@/components/home/contentLinkShare.vue'
 import NoAuthWrapper from '@/components/misc/no-auth-wrapper.vue'
 import Ready from '@/components/misc/ready.vue'
 
-import {setLanguage} from './i18n'
-import AccountDeleteService from '@/services/accountDelete'
+import {setLanguage} from '@/i18n'
 
+import {useAuthStore} from '@/stores/auth'
 import {useBaseStore} from '@/stores/base'
+
 import {useColorScheme} from '@/composables/useColorScheme'
 import {useBodyClass} from '@/composables/useBodyClass'
-import {useAuthStore} from './stores/auth'
+import AddToHomeScreen from '@/components/home/AddToHomeScreen.vue'
+import DemoMode from '@/components/home/DemoMode.vue'
+
+const importAccountDeleteService = () => import('@/services/accountDelete')
+const importMessage = () => import('@/message')
 
 const baseStore = useBaseStore()
 const authStore = useAuthStore()
@@ -57,8 +69,11 @@ watch(accountDeletionConfirm, async (accountDeletionConfirm) => {
 		return
 	}
 
+	const messageP = importMessage()
+	const AccountDeleteService = (await importAccountDeleteService()).default
 	const accountDeletionService = new AccountDeleteService()
 	await accountDeletionService.confirm(accountDeletionConfirm)
+	const {success} = await messageP
 	success({message: t('user.deletion.confirmSuccess')})
 	authStore.refreshUserInfo()
 }, { immediate: true })
@@ -85,7 +100,7 @@ watch(userEmailConfirm, (userEmailConfirm) => {
 	router.push({name: 'user.login'})
 }, { immediate: true })
 
-setLanguage()
+setLanguage(authStore.settings.language)
 useColorScheme()
 </script>
 

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/BaseButton.story.vue

@@ -21,10 +21,16 @@ const state = reactive({
 </script>
 
 <template>
-	<Story :setup-app="setupApp" :layout="{ type: 'grid', width: '200px' }">
+	<Story
+		:setup-app="setupApp"
+		:layout="{ type: 'grid', width: '200px' }"
+	>
 		<Variant title="custom">
 			<template #controls>
-				<HstCheckbox v-model="state.disabled" title="Disabled" />
+				<HstCheckbox
+					v-model="state.disabled"
+					title="Disabled"
+				/>
 			</template>
 			<BaseButton :disabled="state.disabled">
 				Hello!

src/components/base/BaseButton.vue

@@ -6,38 +6,39 @@
 <template>
 	<div
 		v-if="disabled === true && (to !== undefined || href !== undefined)"
+		ref="button"
 		class="base-button"
 		:aria-disabled="disabled || undefined"
-		ref="button"
 	>
-		<slot/>
+		<slot />
 	</div>
 	<router-link
 		v-else-if="to !== undefined"
+		ref="button"
 		:to="to"
 		class="base-button"
-		ref="button"
 	>
-		<slot/>
+		<slot />
 	</router-link>
-	<a v-else-if="href !== undefined"
+	<a
+		v-else-if="href !== undefined"
+		ref="button"
 		class="base-button"
 		:href="href"
 		rel="noreferrer noopener nofollow"
 		target="_blank"
-		ref="button"
 	>
-		<slot/>
+		<slot />
 	</a>
 	<button
 		v-else
+		ref="button"
 		:type="type"
 		class="base-button base-button--type-button"
 		:disabled="disabled || undefined"
-		ref="button"
 		@click="(event: MouseEvent) => emit('click', event)"
 	>
-		<slot/>
+		<slot />
 	</button>
 </template>
 
@@ -63,7 +64,7 @@ import {unrefElement} from '@vueuse/core'
 import {ref, type HTMLAttributes} from 'vue'
 import type {RouteLocationRaw} from 'vue-router'
 
-export interface BaseButtonProps extends HTMLAttributes {
+export interface BaseButtonProps extends /* @vue-ignore */ HTMLAttributes {
 	type?: BaseButtonTypes
 	disabled?: boolean
 	to?: RouteLocationRaw

src/components/base/BaseCheckbox.vue

@@ -0,0 +1,63 @@
+<template>
+	<div
+		v-cy="'checkbox'"
+		class="base-checkbox"
+	>
+		<input
+			:id="checkboxId"
+			type="checkbox"
+			class="is-sr-only"
+			:checked="modelValue"
+			:disabled="disabled || undefined"
+			@change="(event) => emit('update:modelValue', (event.target as HTMLInputElement).checked)"
+		>
+
+		<slot
+			name="label"
+			:checkbox-id="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

@@ -1,14 +1,14 @@
 <template>
 	<transition
 		name="expandable-slide"
-    @before-enter="beforeEnter"
+		@beforeEnter="beforeEnter"
 		@enter="enter"
-    @after-enter="afterEnter"
-    @enter-cancelled="enterCancelled"
-    @before-leave="beforeLeave"
+		@afterEnter="afterEnter"
+		@enterCancelled="enterCancelled"
+		@beforeLeave="beforeLeave"
 		@leave="leave"
-    @after-leave="afterLeave"
-    @leave-cancelled="leaveCancelled"
+		@afterLeave="afterLeave"
+		@leaveCancelled="leaveCancelled"
 	>
 		<div
 			v-if="initialHeight"
@@ -18,7 +18,10 @@
 		>
 			<slot />
 		</div>
-    <div v-else-if="open" class="expandable">
+		<div
+			v-else-if="open"
+			class="expandable"
+		>
 			<slot />
 		</div>
 	</transition>
@@ -32,7 +35,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,37 +1,46 @@
 <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>
 		<p>
-			<i18n-t keypath="input.datemathHelp.expression" scope="global">
+			<i18n-t
+				keypath="input.datemathHelp.expression"
+				scope="global"
+			>
 				<code>now</code>
 				<code>||</code>
 			</i18n-t>
 		</p>
 		<p>
-			<i18n-t keypath="input.datemathHelp.similar" scope="global">
+			<i18n-t
+				keypath="input.datemathHelp.similar"
+				scope="global"
+			>
 				<BaseButton
 					href="https://grafana.com/docs/grafana/latest/dashboards/time-range-controls/"
-					target="_blank">
+					target="_blank"
+				>
 					Grafana
 				</BaseButton>
 				<BaseButton
 					href="https://www.elastic.co/guide/en/elasticsearch/reference/7.3/common-options.html#date-math"
-					target="_blank">
+					target="_blank"
+				>
 					Elasticsearch
 				</BaseButton>
 			</i18n-t>
 		</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 +78,7 @@
 			</tbody>
 		</table>
 
-		<p>{{ $t('input.datemathHelp.someExamples') }}</p>
+		<h3>{{ $t('input.datemathHelp.someExamples') }}</h3>
 		<table class="table">
 			<tbody>
 				<tr>
@@ -99,8 +108,11 @@
 				<tr>
 					<td><code>{{ exampleDate }}||+1M/d</code></td>
 					<td>
-					<i18n-t keypath="input.datemathHelp.examples.datePlusMonth" scope="global">
-						<code>{{ exampleDate }}</code>
+						<i18n-t
+							keypath="input.datemathHelp.examples.datePlusMonth"
+							scope="global"
+						>
+							<strong>{{ exampleDate }}</strong>
 						</i18n-t>
 					</td>
 				</tr>
@@ -110,13 +122,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/date/datepickerWithRange.vue

@@ -1,20 +1,31 @@
 <template>
 	<div class="datepicker-with-range-container">
-		<popup>
+		<Popup>
 			<template #trigger="{toggle}">
-				<slot name="trigger" :toggle="toggle" :buttonText="buttonText"></slot>
+				<slot
+					name="trigger"
+					:toggle="toggle"
+					:button-text="buttonText"
+				/>
 			</template>
 			<template #content="{isOpen}">
-				<div class="datepicker-with-range" :class="{'is-open': isOpen}">
+				<div
+					class="datepicker-with-range"
+					:class="{'is-open': isOpen}"
+				>
 					<div class="selections">
-						<BaseButton @click="setDateRange(null)" :class="{'is-active': customRangeActive}">
+						<BaseButton
+							:class="{'is-active': customRangeActive}"
+							@click="setDateRange(null)"
+						>
 							{{ $t('misc.custom') }}
 						</BaseButton>
 						<BaseButton
 							v-for="(value, text) in DATE_RANGES"
 							:key="text"
+							:class="{'is-active': from === value[0] && to === value[1]}"
 							@click="setDateRange(value)"
-							:class="{'is-active': from === value[0] && to === value[1]}">
+						>
 							{{ $t(`input.datepickerRange.ranges.${text}`) }}
 						</BaseButton>
 					</div>
@@ -23,10 +34,18 @@
 							{{ $t('input.datepickerRange.from') }}
 							<div class="field has-addons">
 								<div class="control is-fullwidth">
-									<input class="input" type="text" v-model="from"/>
+									<input
+										v-model="from"
+										class="input"
+										type="text"
+									>
 								</div>
 								<div class="control">
-									<x-button icon="calendar" variant="secondary" data-toggle/>
+									<x-button
+										icon="calendar"
+										variant="secondary"
+										data-toggle
+									/>
 								</div>
 							</div>
 						</label>
@@ -34,38 +53,49 @@
 							{{ $t('input.datepickerRange.to') }}
 							<div class="field has-addons">
 								<div class="control is-fullwidth">
-									<input class="input" type="text" v-model="to"/>
+									<input
+										v-model="to"
+										class="input"
+										type="text"
+									>
 								</div>
 								<div class="control">
-									<x-button icon="calendar" variant="secondary" data-toggle/>
+									<x-button
+										icon="calendar"
+										variant="secondary"
+										data-toggle
+									/>
 								</div>
 							</div>
 						</label>
 						<flat-pickr
-							:config="flatPickerConfig"
 							v-model="flatpickrRange"
+							:config="flatPickerConfig"
 						/>
 
 						<p>
 							{{ $t('input.datemathHelp.canuse') }}
-							<BaseButton class="has-text-primary" @click="showHowItWorks = true">
+							<BaseButton
+								class="has-text-primary"
+								@click="showHowItWorks = true"
+							>
 								{{ $t('input.datemathHelp.learnhow') }}
 							</BaseButton>
 						</p>
 
 						<modal
 							:enabled="showHowItWorks"
-							@close="() => showHowItWorks = false"
 							transition-name="fade"
 							:overflow="true"
 							variant="hint-modal"
+							@close="() => showHowItWorks = false"
 						>
-							<DatemathHelp/>
+							<DatemathHelp />
 						</modal>
 					</div>
 				</div>
 			</template>
-		</popup>
+		</Popup>
 	</div>
 </template>
 
@@ -75,25 +105,24 @@ import {useI18n} from 'vue-i18n'
 
 import flatPickr from 'vue-flatpickr-component'
 import 'flatpickr/dist/flatpickr.css'
+import {parseDateOrString} from '@/helpers/time/parseDateOrString'
 
 import Popup from '@/components/misc/popup.vue'
 import {DATE_RANGES} from '@/components/date/dateRanges'
 import BaseButton from '@/components/base/BaseButton.vue'
 import DatemathHelp from '@/components/date/datemathHelp.vue'
-import {useAuthStore} from '@/stores/auth'
+import { getFlatpickrLanguage } from '@/helpers/flatpickrLanguage'
 
-const authStore = useAuthStore()
-const {t} = useI18n({useScope: 'global'})
-
-const emit = defineEmits(['update:modelValue'])
 const props = defineProps({
 	modelValue: {
 		required: false,
 	},
 })
 
-// FIXME: This seems to always contain the default value - that breaks the picker
-const weekStart = computed(() => authStore.settings.weekStart ?? 0)
+const emit = defineEmits(['update:modelValue'])
+
+const {t} = useI18n({useScope: 'global'})
+
 const flatPickerConfig = computed(() => ({
 	altFormat: t('date.altFormatLong'),
 	altInput: true,
@@ -101,9 +130,7 @@ const flatPickerConfig = computed(() => ({
 	enableTime: false,
 	wrap: true,
 	mode: 'range',
-	locale: {
-		firstDayOf7Days: weekStart.value,
-	},
+	locale: getFlatpickrLanguage(),
 }))
 
 const showHowItWorks = ref(false)
@@ -120,9 +147,9 @@ watch(
 		to.value = newValue.dateTo
 		// Only set the date back to flatpickr when it's an actual date.
 		// Otherwise flatpickr runs in an endless loop and slows down the browser.
-		const dateFrom = new Date(from.value)
-		const dateTo = new Date(to.value)
-		if (dateTo.getTime() === dateTo.getTime() && dateFrom.getTime() === dateFrom.getTime()) {
+		const dateFrom = parseDateOrString(from.value, false)
+		const dateTo = parseDateOrString(to.value, false)
+		if (dateFrom instanceof Date && dateTo instanceof Date) {
 			flatpickrRange.value = `${from.value} to ${to.value}`
 		}
 	},

src/components/home/AddToHomeScreen.vue

@@ -0,0 +1,86 @@
+<template>
+	<div
+		v-if="shouldShowMessage"
+		class="add-to-home-screen"
+		:class="{'has-update-available': hasUpdateAvailable}"
+	>
+		<icon
+			icon="arrow-up-from-bracket"
+			class="add-icon"
+		/>
+		<p>
+			{{ $t('home.addToHomeScreen') }}
+		</p>
+		<BaseButton
+			class="hide-button"
+			@click="() => hideMessage = true"
+		>
+			<icon icon="x" />
+		</BaseButton>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import BaseButton from '@/components/base/BaseButton.vue'
+import {useLocalStorage} from '@vueuse/core'
+import {computed} from 'vue'
+import {useBaseStore} from '@/stores/base'
+
+const baseStore = useBaseStore()
+
+const hideMessage = useLocalStorage('hideAddToHomeScreenMessage', false)
+const hasUpdateAvailable = computed(() => baseStore.updateAvailable)
+
+const shouldShowMessage = computed(() => {
+	if (hideMessage.value) {
+		return false
+	}
+
+	if (typeof window !== 'undefined' && window.matchMedia('(display-mode: standalone)').matches) {
+		return false
+	}
+
+	return true
+})
+</script>
+
+<style lang="scss" scoped>
+.add-to-home-screen {
+	position: fixed;
+	// FIXME: We should prevent usage of z-index or
+	// at least define it centrally
+	// the highest z-index of a modal is .hint-modal with 4500
+	z-index: 5000;
+	bottom: 1rem;
+	inset-inline: 1rem;
+	max-width: max-content;
+	margin-inline: auto;
+
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 1rem;
+	padding: .5rem 1rem;
+	background: var(--grey-900);
+	border-radius: $radius;
+	font-size: .9rem;
+	color: var(--grey-200);
+
+	@media screen and (min-width: $tablet) {
+		display: none;
+	}
+	
+	&.has-update-available {
+		bottom: 5rem;
+	}
+}
+
+.add-icon {
+	color: var(--primary-light);
+}
+
+.hide-button {
+	padding: .25rem .5rem;
+	cursor: pointer;
+}
+</style>

src/components/home/DemoMode.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import {computed, ref} from 'vue'
+import {useConfigStore} from '@/stores/config'
+import BaseButton from '@/components/base/BaseButton.vue'
+
+const configStore = useConfigStore()
+const hide = ref(false)
+const enabled = computed(() => configStore.demoModeEnabled && !hide.value)
+</script>
+
+<template>
+	<div
+		v-if="enabled"
+		class="demo-mode-banner"
+	>
+		<p>
+			{{ $t('demo.title') }}
+			<strong class="is-uppercase">{{ $t('demo.everythingWillBeDeleted') }}</strong>
+		</p>
+		<BaseButton
+			class="hide-button"
+			@click="() => hide = true"
+		>
+			<icon icon="times" />
+		</BaseButton>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.demo-mode-banner {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background: var(--danger);
+	z-index: 100;
+	padding: .5rem;
+	text-align: center;
+	
+	&, strong {
+		color: hsl(220, 13%, 91%) !important; // --grey-200 in light mode, hardcoded because the color should not change
+	}
+}
+
+.hide-button {
+	padding: .25rem .5rem;
+	cursor: pointer;
+	position: absolute;
+	right: .5rem;
+	top: .25rem;
+}
+</style>

src/components/home/Logo.vue

@@ -4,17 +4,35 @@ 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 Logo = computed(() => now.value.getMonth() === 5 ? LogoFullPride : LogoFull)
+const now = useNow({
+	interval: MILLISECONDS_A_HOUR,
+})
+const Logo = computed(() => window.ALLOW_ICON_CHANGES && now.value.getMonth() === 6 ? LogoFullPride : LogoFull)
+const CustomLogo = computed(() => window.CUSTOM_LOGO_URL)
 </script>
 
 <template>
-	<Logo alt="Vikunja" class="logo" />
+	<div>
+		<Logo
+			v-if="!CustomLogo"
+			alt="Vikunja"
+			class="logo"
+		/>
+		<img
+			v-show="CustomLogo"
+			:src="CustomLogo"
+			alt="Vikunja"
+			class="logo"
+		>
+	</div>
 </template>
 
 <style lang="scss" scoped>
 .logo {
 	color: var(--logo-text-color);
+	max-width: 168px;
+	max-height: 48px;
 }
 </style>

src/components/home/MenuButton.vue

@@ -1,11 +1,11 @@
 <template>
 	<BaseButton
+		v-shortcut="'Mod+e'"
 		class="menu-show-button"
-		@click="baseStore.toggleMenu()"
-		@shortkey="() => baseStore.toggleMenu()"
-		v-shortcut="'Control+e'"
 		:title="$t('keyboardShortcuts.toggleMenu')"
 		:aria-label="menuActive ? $t('misc.hideMenu') : $t('misc.showMenu')"
+		@click="baseStore.toggleMenu()"
+		@shortkey="() => baseStore.toggleMenu()"
 	/>
 </template>
 

src/components/home/PoweredByLink.vue

@@ -1,5 +1,9 @@
 <template>
-    <BaseButton class="menu-bottom-link" :href="poweredByUrl" target="_blank">
+	<BaseButton
+		class="menu-bottom-link"
+		:href="poweredByUrl"
+		target="_blank"
+	>
 		{{ $t('misc.poweredBy') }}
 	</BaseButton>
 </template>

src/components/home/ProjectsNavigation.vue

@@ -0,0 +1,109 @@
+<template>
+	<draggable
+		v-model="availableProjects"
+		animation="100"
+		ghost-class="ghost"
+		group="projects"
+		handle=".handle"
+		tag="menu"
+		item-key="id"
+		:disabled="!canEditOrder"
+		filter=".drag-disabled"
+		:component-data="{
+			type: 'transition-group',
+			name: !drag ? 'flip-list' : null,
+			class: [
+				'menu-list can-be-hidden',
+				{ 'dragging-disabled': !canEditOrder }
+			],
+		}"
+		@start="() => drag = true"
+		@end="saveProjectPosition"
+	>
+		<template #item="{element: project}">
+			<ProjectsNavigationItem
+				:class="{'drag-disabled': project.id < 0}"
+				:project="project"
+				:is-loading="projectUpdating[project.id]"
+				:can-collapse="canCollapse"
+				:level="level"
+				:data-project-id="project.id"
+			/>
+		</template>
+	</draggable>
+</template>
+
+<script lang="ts" setup>
+import {ref, watch} from 'vue'
+import draggable from 'zhyswan-vuedraggable'
+import type {SortableEvent} from 'sortablejs'
+
+import ProjectsNavigationItem from '@/components/home/ProjectsNavigationItem.vue'
+
+import {calculateItemPosition} from '@/helpers/calculateItemPosition'
+import type {IProject} from '@/modelTypes/IProject'
+
+import {useProjectStore} from '@/stores/projects'
+
+const props = defineProps<{
+	modelValue?: IProject[],
+	canEditOrder: boolean,
+	canCollapse?: boolean,
+	level?: number,
+}>()
+const emit = defineEmits<{
+	(e: 'update:modelValue', projects: IProject[]): void
+}>()
+
+const drag = ref(false)
+
+const projectStore = useProjectStore()
+
+// Vue draggable will modify the projects list as it changes their position which will not work on a prop.
+// Hence, we'll clone the prop and work on the clone.
+const availableProjects = ref<IProject[]>([])
+watch(
+	() => props.modelValue,
+	projects => {
+		availableProjects.value = projects || []
+	},
+	{immediate: true},
+)
+
+const projectUpdating = ref<{ [id: IProject['id']]: boolean }>({})
+
+async function saveProjectPosition(e: SortableEvent) {
+	if (!e.newIndex && e.newIndex !== 0) return
+
+	const projectsActive = availableProjects.value
+	// 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 === projectsActive.length ? e.newIndex - 1 : e.newIndex
+
+	const projectId = parseInt(e.item.dataset.projectId)
+	const project = projectStore.projects[projectId]
+
+	const parentProjectId = e.to.parentNode.dataset.projectId ? parseInt(e.to.parentNode.dataset.projectId) : 0
+	const projectBefore = projectsActive[newIndex - 1] ?? null
+	const projectAfter = projectsActive[newIndex + 1] ?? null
+	projectUpdating.value[project.id] = true
+
+	const position = calculateItemPosition(
+		projectBefore !== null ? projectBefore.position : null,
+		projectAfter !== null ? projectAfter.position : null,
+	)
+
+	try {
+		// create a copy of the project in order to not violate pinia manipulation
+		await projectStore.updateProject({
+			...project,
+			position,
+			parentProjectId,
+		})
+		emit('update:modelValue', availableProjects.value)
+	} finally {
+		projectUpdating.value[project.id] = false
+	}
+}
+</script>

src/components/home/ProjectsNavigationItem.vue

@@ -0,0 +1,199 @@
+<template>
+	<li
+		class="list-menu loader-container is-loading-small"
+		:class="{'is-loading': isLoading}"
+	>
+		<div>
+			<BaseButton
+				v-if="canCollapse && childProjects?.length > 0"
+				class="collapse-project-button"
+				@click="childProjectsOpen = !childProjectsOpen"
+			>
+				<icon
+					icon="chevron-down"
+					:class="{ 'project-is-collapsed': !childProjectsOpen }"
+				/>
+			</BaseButton>
+			<BaseButton
+				:to="{ name: 'project.index', params: { projectId: project.id} }"
+				class="list-menu-link"
+				:class="{'router-link-exact-active': currentProject?.id === project.id}"
+			>
+				<span
+					v-if="!canCollapse || childProjects?.length === 0"
+					class="collapse-project-button-placeholder"
+				/>
+				<div
+					class="color-bubble-handle-wrapper"
+					:class="{'is-draggable': project.id > 0}"
+				>
+					<ColorBubble
+						v-if="project.hexColor !== ''"
+						:color="project.hexColor"
+					/>
+					<span
+						v-else-if="project.id < -1"
+						class="saved-filter-icon icon menu-item-icon"
+					>
+						<icon icon="filter" />
+					</span>
+					<span
+						v-if="project.id > 0"
+						class="icon menu-item-icon handle"
+						:class="{'has-color-bubble': project.hexColor !== ''}"
+					>
+						<icon icon="grip-lines" />
+					</span>
+				</div>
+				<span class="project-menu-title">{{ getProjectTitle(project) }}</span>
+			</BaseButton>
+			<BaseButton
+				v-if="project.id > 0"
+				class="favorite"
+				:class="{'is-favorite': project.isFavorite}"
+				@click="projectStore.toggleProjectFavorite(project)"
+			>
+				<icon :icon="project.isFavorite ? 'star' : ['far', 'star']" />
+			</BaseButton>
+			<ProjectSettingsDropdown
+				class="menu-list-dropdown"
+				:project="project"
+				:level="level"
+			>
+				<template #trigger="{toggleOpen}">
+					<BaseButton
+						class="menu-list-dropdown-trigger"
+						@click="toggleOpen"
+					>
+						<icon
+							icon="ellipsis-h"
+							class="icon"
+						/>
+					</BaseButton>
+				</template>
+			</ProjectSettingsDropdown>
+		</div>
+		<ProjectsNavigation
+			v-if="canNestDeeper && childProjectsOpen && canCollapse"
+			:model-value="childProjects"
+			:can-edit-order="true"
+			:can-collapse="canCollapse"
+			:level="level + 1"
+		/>
+	</li>
+</template>
+
+<script setup lang="ts">
+import {computed, ref} from 'vue'
+import {useProjectStore} from '@/stores/projects'
+import {useBaseStore} from '@/stores/base'
+
+import type {IProject} from '@/modelTypes/IProject'
+
+import BaseButton from '@/components/base/BaseButton.vue'
+import ProjectSettingsDropdown from '@/components/project/project-settings-dropdown.vue'
+import {getProjectTitle} from '@/helpers/getProjectTitle'
+import ColorBubble from '@/components/misc/colorBubble.vue'
+import ProjectsNavigation from '@/components/home/ProjectsNavigation.vue'
+import {canNestProjectDeeper} from '@/helpers/canNestProjectDeeper'
+
+const {
+	project,
+	isLoading,
+	canCollapse,
+	level = 0,
+} = defineProps<{
+	project: IProject,
+	isLoading?: boolean,
+	canCollapse?: boolean,
+	level?: number,
+}>()
+
+const projectStore = useProjectStore()
+const baseStore = useBaseStore()
+const currentProject = computed(() => baseStore.currentProject)
+
+const childProjectsOpen = ref(true)
+
+const childProjects = computed(() => {
+	if (!canNestDeeper.value) {
+		return []
+	}
+
+	return projectStore.getChildProjects(project.id)
+		.filter(p => !p.isArchived)
+		.sort((a, b) => a.position - b.position)
+})
+
+const canNestDeeper = computed(() => canNestProjectDeeper(level))
+</script>
+
+<style lang="scss" scoped>
+.list-setting-spacer {
+	width: 5rem;
+	flex-shrink: 0;
+}
+
+.project-is-collapsed {
+	transform: rotate(-90deg);
+}
+
+.favorite {
+	transition: opacity $transition, color $transition;
+	opacity: 0;
+
+	&:hover,
+	&.is-favorite {
+		opacity: 1;
+		color: var(--warning);
+	}
+}
+
+.list-menu:hover > div > .favorite {
+	opacity: 1;
+}
+
+.list-menu:hover > div > a > .color-bubble-handle-wrapper.is-draggable > {
+	.saved-filter-icon,
+	.color-bubble {
+		opacity: 0;
+	}
+}
+
+.is-touch .color-bubble {
+	opacity: 1 !important;
+}
+
+.color-bubble-handle-wrapper {
+	position: relative;
+	width: 1rem;
+	height: 1rem;
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	margin-right: .25rem;
+	flex-shrink: 0;
+
+	.color-bubble, .icon {
+		transition: all $transition;
+		position: absolute;
+		width: 12px;
+		margin: 0 !important;
+		padding: 0 !important;
+	}
+}
+
+.project-menu-title {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.saved-filter-icon {
+	color: var(--grey-300) !important;
+	font-size: .75rem;
+}
+
+.is-touch .handle.has-color-bubble {
+	display: none !important;
+}
+</style>

src/components/home/TheNavigation.vue

@@ -1,119 +1,138 @@
 <template>
 	<header
-		:class="{'has-background': background, 'menu-active': menuActive}"
+		:class="{ 'has-background': background, 'menu-active': menuActive }"
 		aria-label="main navigation"
-		class="navbar main-theme is-fixed-top d-print-none"
+		class="navbar d-print-none"
 	>
-		<router-link :to="{name: 'home'}" class="logo-link">
-			<Logo width="164" height="48"/>
+		<router-link
+			:to="{ name: 'home' }"
+			class="logo-link"
+		>
+			<Logo
+				width="164"
+				height="48"
+			/>
 		</router-link>
-		<MenuButton class="menu-button"/>
-		<div class="list-title" ref="listTitle" v-show="currentList.id">
-			<template v-if="currentList.id">
-				<h1
-					:style="{ 'opacity': currentList.title === '' ? '0': '1' }"
-					class="title">
-					{{ currentList.title === '' ? $t('misc.loading') : getListTitle(currentList) }}
+
+		<MenuButton class="menu-button" />
+
+		<div
+			v-if="currentProject?.id"
+			class="project-title-wrapper"
+		>
+			<h1 class="project-title">
+				{{ currentProject.title === '' ? $t('misc.loading') : getProjectTitle(currentProject) }}
 			</h1>
 
-				<BaseButton :to="{name: 'list.info', params: {listId: currentList.id}}" class="info-button">
-					<icon icon="circle-info"/>
+			<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" :list="currentList"/>
+			<ProjectSettingsDropdown
+				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>
+			</ProjectSettingsDropdown>
 		</div>
 
 		<div class="navbar-end">
-			<update/>
+			<OpenQuickActions />
+			<Notifications />
+			<Dropdown>
+				<template #trigger="{ toggleOpen, open }">
 					<BaseButton
-				@click="openQuickActions"
-				class="trigger-button pr-0"
-				v-shortcut="'Control+k'"
-				:title="$t('keyboardShortcuts.quickSearch')"
-			>
-				<icon icon="search"/>
-			</BaseButton>
-			<notifications/>
-			<div class="user">
-				<dropdown class="is-right" ref="usernameDropdown">
-					<template #trigger="{toggleOpen}">
-						<x-button
 						class="username-dropdown-trigger"
-							@click="toggleOpen()"
 						variant="secondary"
 						:shadow="false"
+						@click="toggleOpen"
+					>
+						<img
+							:src="authStore.avatarUrl"
+							alt=""
+							class="avatar"
+							width="40"
+							height="40"
 						>
-							<img :src="authStore.avatarUrl" alt="" class="avatar" width="40" height="40"/>
 						<span class="username">{{ authStore.userDisplayName }}</span>
-							<span class="icon is-small">
-								<icon icon="chevron-down"/>
+						<span
+							class="icon is-small"
+							:style="{
+								transform: open ? 'rotate(180deg)' : 'rotate(0)',
+							}"
+						>
+							<icon icon="chevron-down" />
 						</span>
-						</x-button>
+					</BaseButton>
 				</template>
 
-					<dropdown-item
-						:to="{name: 'user.settings'}"
-					>
+				<DropdownItem :to="{ name: 'user.settings' }">
 					{{ $t('user.settings.title') }}
-					</dropdown-item>
-					<dropdown-item
+				</DropdownItem>
+				<DropdownItem
 					v-if="imprintUrl"
 					:href="imprintUrl"
 				>
 					{{ $t('navigation.imprint') }}
-					</dropdown-item>
-					<dropdown-item
+				</DropdownItem>
+				<DropdownItem
 					v-if="privacyPolicyUrl"
 					:href="privacyPolicyUrl"
 				>
 					{{ $t('navigation.privacy') }}
-					</dropdown-item>
-					<dropdown-item
-						@click="baseStore.setKeyboardShortcutsActive(true)"
-					>
+				</DropdownItem>
+				<DropdownItem @click="baseStore.setKeyboardShortcutsActive(true)">
 					{{ $t('keyboardShortcuts.title') }}
-					</dropdown-item>
-					<dropdown-item
-						:to="{name: 'about'}"
-					>
+				</DropdownItem>
+				<DropdownItem :to="{ name: 'about' }">
 					{{ $t('about.title') }}
-					</dropdown-item>
-					<dropdown-item
-						@click="authStore.logout()"
-					>
+				</DropdownItem>
+				<DropdownItem @click="authStore.logout()">
 					{{ $t('user.auth.logout') }}
-					</dropdown-item>
-				</dropdown>
-			</div>
+				</DropdownItem>
+			</Dropdown>
 		</div>
 	</header>
 </template>
 
 <script setup lang="ts">
-import {ref, computed, onMounted, nextTick} from 'vue'
+import { computed } from 'vue'
 
-import {RIGHTS as Rights} from '@/constants/rights'
+import { RIGHTS as Rights } from '@/constants/rights'
 
-import Update from '@/components/home/update.vue'
-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'
 import Logo from '@/components/home/Logo.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 import MenuButton from '@/components/home/MenuButton.vue'
+import OpenQuickActions from '@/components/misc/OpenQuickActions.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()
@@ -121,183 +140,149 @@ const authStore = useAuthStore()
 const configStore = useConfigStore()
 const imprintUrl = computed(() => configStore.legal.imprintUrl)
 const privacyPolicyUrl = computed(() => configStore.legal.privacyPolicyUrl)
-
-const usernameDropdown = ref()
-const listTitle = ref()
-onMounted(async () => {
-	await nextTick()
-	if (typeof usernameDropdown.value === 'undefined' || typeof listTitle.value === 'undefined') {
-		return
-	}
-
-	const usernameWidth = usernameDropdown.value.$el.clientWidth
-	listTitle.value.style.setProperty('--nav-username-width', `${usernameWidth}px`)
-})
-
-function openQuickActions() {
-	baseStore.setQuickActionsActive(true)
-}
 </script>
 
 <style lang="scss" scoped>
-$vikunja-nav-logo-full-width: 164px;
 $user-dropdown-width-mobile: 5rem;
 
-$hamburger-menu-icon-spacing: 1rem;
-$hamburger-menu-icon-width: 28px;
+.navbar {
+	--navbar-button-min-width: 40px;
+	--navbar-gap-width: 1rem;
+	--navbar-icon-size: 1.25rem;
+
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+
+	display: flex;
+	justify-content: space-between;
+	gap: var(--navbar-gap-width);
+
+	background: var(--site-background);
+
+	@media screen and (max-width: $tablet) {
+		padding-right: .5rem;
+	}
+
+	@media screen and (min-width: $tablet) {
+		padding-left: 2rem;
+		padding-right: 1rem;
+		align-items: stretch;
+	}
+
+	&.menu-active {
+		@media screen and (max-width: $tablet) {
+			z-index: 0;
+		}
+	}
+
+	// FIXME: notifications should provide a slot for the icon instead, so that we can style it as we want
+	:deep() {
+		.trigger-button {
+			color: var(--grey-400);
+			font-size: var(--navbar-icon-size);
+		}
+	}
+}
 
 .logo-link {
 	display: none;
-	padding: 0.5rem 0.75rem;
 
 	@media screen and (min-width: $tablet) {
 		align-self: stretch;
 		display: flex;
 		align-items: center;
-		padding-left: 2rem;
-		margin-right: 1.5rem;
+		margin-right: .5rem;
 	}
 }
 
 .menu-button {
-	align-self: stretch;
 	margin-right: auto;
+	align-self: stretch;
+	flex: 0 0 auto;
 
 	@media screen and (max-width: $tablet) {
-		margin-left: $hamburger-menu-icon-spacing;
+		margin-left: 1rem;
 	}
 }
 
-.navbar.main-theme {
-	background: var(--site-background);
-	justify-content: space-between;
+.project-title-wrapper {
+	margin-inline: auto;
+	display: flex;
 	align-items: center;
 
-	@media screen and (max-width: $desktop) {
-		display: flex;
-		justify-content: space-between;
-	}
+	// this makes the truncated text of the project title work
+	// inside the flexbox parent
+	min-width: 0;
 
-	.title {
-		margin: 0;
-		font-size: 1.75rem;
+	@media screen and (min-width: $tablet) {
+		padding-inline: var(--navbar-gap-width);
+	}
+}
+
+.project-title {
+	font-size: 1rem;
+	// We need the following for overflowing ellipsis to work
 	text-overflow: ellipsis;
 	overflow: hidden;
 	white-space: nowrap;
-	}
 
-	.navbar-end {
-		margin-left: 0;
-		align-items: center;
-		display: flex;
-	}
-
-	@media screen and (max-width: $tablet) {
-		&.menu-active {
-			z-index: 0;
-		}
-
-		.user {
-			width: $user-dropdown-width-mobile;
-
-			.username-dropdown-trigger {
-				line-height: 1;
-				padding: 0 0.25rem;
-				height: 1rem;
-
-				.icon {
-					width: .5rem;
-				}
-			}
-
-			.username {
-				display: none;
-			}
-		}
+	@media screen and (min-width: $tablet) {
+		font-size: 1.75rem;
 	}
 }
 
-.navbar {
-	// FIXME: notifications should provide a slot for the icon instead, so that we can style it as we want
-	:deep() {
-		.trigger-button {
-			cursor: pointer;
-			color: var(--grey-400);
-			padding: .5rem;
-			font-size: 1.25rem;
-			position: relative;
-		}
+.project-title-dropdown {
+	align-self: stretch;
 
-		> * > .trigger-button {
-			width: $navbar-icon-width;
-		}
+	.project-title-button {
+		flex-grow: 1;
 	}
+}
 
-	.user {
+.project-title-button {
+	align-self: stretch;
+	min-width: var(--navbar-button-min-width);
 	display: flex;
-		align-items: center;
+	place-items: center;
+	justify-content: center;
+	font-size: var(--navbar-icon-size);
+	color: var(--grey-400);
+}
 
-		span {
-			font-family: $vikunja-font;
+.navbar-end {
+	margin-left: auto;
+	flex: 0 0 auto;
+	display: flex;
+	align-items: stretch;
+
+	>* {
+		min-width: var(--navbar-button-min-width);
 	}
+}
 
-		.avatar {
+.username-dropdown-trigger {
+	padding-left: 1rem;
+	display: inline-flex;
+	align-items: center;
+	text-transform: uppercase;
+	font-size: .85rem;
+	font-weight: 700;
+}
+
+.username {
+	font-family: $vikunja-font;
+
+	@media screen and (max-width: $tablet) {
+		display: none;
+	}
+}
+
+.avatar {
 	border-radius: 100%;
 	vertical-align: middle;
 	height: 40px;
 	margin-right: .5rem;
-		}
-
-		.username-dropdown-trigger {
-			background: none;
-
-			&:focus:not(:active), &:active {
-				outline: none !important;
-				box-shadow: none !important;
-			}
-		}
-	}
-}
-
-.list-title {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	$edit-icon-width: 1rem;
-
-	@media screen and (min-width: $tablet) {
-		// We need a fixed width for overflowing ellipsis to work
-		--nav-username-width: 0;
-		width: calc(100vw - #{$user-dropdown-width-mobile} - #{2 * $hamburger-menu-icon-spacing} - #{$hamburger-menu-icon-width} - #{$edit-icon-width} - #{2 * $navbar-icon-width} - #{$vikunja-nav-logo-full-width} - var(--nav-username-width));
-	}
-
-	@media screen and (max-width: $tablet) {
-		// We need a fixed width for overflowing ellipsis to work
-		width: calc(100vw - #{$user-dropdown-width-mobile} - #{2 * $hamburger-menu-icon-spacing} - #{$hamburger-menu-icon-width} - #{$edit-icon-width} - #{2 * $navbar-icon-width});
-	}
-
-	h1 {
-		margin: 0;
-	}
-
-	:deep(.dropdown-trigger) {
-		color: var(--grey-400);
-		margin-left: .5rem;
-		height: 1rem;
-		width: 1rem;
-		cursor: pointer;
-	}
-}
-
-.info-button {
-	text-align: center;
-	height: 1.25rem;
-	line-height: 1.25rem;
-	width: 2rem;
-	margin-top: .25rem;
-	padding: 0 .5rem;
-	color: var(--grey-400);
-	margin-left: .5rem;
 }
 </style>

src/components/home/UpdateNotification.vue

@@ -0,0 +1,82 @@
+<template>
+	<div
+		v-if="updateAvailable"
+		class="update-notification"
+	>
+		<p class="update-notification__message">
+			{{ $t('update.available') }}
+		</p>
+		<x-button
+			:shadow="false"
+			:wrap="false"
+			@click="refreshApp()"
+		>
+			{{ $t('update.do') }}
+		</x-button>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import {computed, ref} from 'vue'
+import {useBaseStore} from '@/stores/base'
+
+const baseStore = useBaseStore()
+
+const updateAvailable = computed(() => baseStore.updateAvailable)
+const registration = ref(null)
+const refreshing = ref(false)
+
+document.addEventListener('swUpdated', showRefreshUI, {once: true})
+
+navigator?.serviceWorker?.addEventListener(
+	'controllerchange', () => {
+		if (refreshing.value) return
+		refreshing.value = true
+		window.location.reload()
+	},
+)
+
+function showRefreshUI(e: Event) {
+	console.log('recieved refresh event', e)
+	registration.value = e.detail
+	baseStore.setUpdateAvailable(true)
+}
+
+function refreshApp() {
+	baseStore.setUpdateAvailable(false)
+	if (!registration.value || !registration.value.waiting) {
+		return
+	}
+	// Notify the service worker to actually do the update
+	registration.value.waiting.postMessage('skipWaiting')
+}
+</script>
+
+<style lang="scss" scoped>
+.update-notification {
+	position: fixed;
+	// FIXME: We should prevent usage of z-index or
+	// at least define it centrally
+	// the highest z-index of a modal is .hint-modal with 4500
+	z-index: 5000;
+	bottom: 1rem;
+	inset-inline: 1rem;
+	max-width: max-content;
+	margin-inline: auto;
+
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 1rem;
+	padding: .5rem .5rem .5rem 1rem;
+	background: $warning;
+	border-radius: $radius;
+	font-size: .9rem;
+	color: hsl(220.9, 39.3%, 11%); // color copied to avoid it changing in dark mode
+}
+
+.update-notification__message {
+	width: 100%;
+	text-align: center;
+}
+</style>

src/components/home/contentAuth.vue

@@ -2,10 +2,10 @@
 	<div class="content-auth">
 		<BaseButton
 			v-show="menuActive"
-			@click="baseStore.setMenuActive(false)"
 			class="menu-hide-button d-print-none"
+			@click="baseStore.setMenuActive(false)"
 		>
-			<icon icon="times"/>
+			<icon icon="times" />
 		</BaseButton>
 		<div
 			class="app-container"
@@ -15,8 +15,9 @@
 			<div
 				:class="{'is-visible': background}"
 				class="app-container-background background-fade-in d-print-none"
-				:style="{'background-image': background && `url(${background})`}"></div>
-			<navigation class="d-print-none"/>
+				:style="{'background-image': background && `url(${background})`}"
+			/>
+			<Navigation class="d-print-none" />
 			<main
 				class="app-content"
 				:class="[
@@ -26,33 +27,36 @@
 			>
 				<BaseButton
 					v-show="menuActive"
-					@click="baseStore.setMenuActive(false)"
 					class="mobile-overlay d-print-none"
+					@click="baseStore.setMenuActive(false)"
 				/>
 
-				<quick-actions/>
+				<QuickActions />
 
-				<router-view :route="routeWithModal" v-slot="{ Component }">
-					<keep-alive :include="['list.list', 'list.gantt', 'list.table', 'list.kanban']">
-						<component :is="Component"/>
+				<router-view
+					v-slot="{ Component }"
+					:route="routeWithModal"
+				>
+					<keep-alive :include="['project.list', 'project.gantt', 'project.table', 'project.kanban']">
+						<component :is="Component" />
 					</keep-alive>
 				</router-view>
 
 				<modal
-					:enabled="Boolean(currentModal)"
-					@close="closeModal()"
+					:enabled="typeof currentModal !== 'undefined'"
 					variant="scrolling"
 					class="task-detail-view-modal"
+					@close="closeModal()"
 				>
-					<component :is="currentModal"/>
+					<component :is="currentModal" />
 				</modal>
 
 				<BaseButton
+					v-shortcut="'?'"
 					class="keyboard-shortcuts-button d-print-none"
 					@click="showKeyboardShortcuts()"
-					v-shortcut="'?'"
 				>
-					<icon icon="keyboard"/>
+					<icon icon="keyboard" />
 				</BaseButton>
 			</main>
 		</div>
@@ -69,6 +73,7 @@ import BaseButton from '@/components/base/BaseButton.vue'
 
 import {useBaseStore} from '@/stores/base'
 import {useLabelStore} from '@/stores/labels'
+import {useProjectStore} from '@/stores/projects'
 
 import {useRouteWithModal} from '@/composables/useRouteWithModal'
 import {useRenewTokenOnFocus} from '@/composables/useRenewTokenOnFocus'
@@ -86,30 +91,26 @@ function showKeyboardShortcuts() {
 
 const route = useRoute()
 
-// hide menu on mobile
-watch(() => route.fullPath, () => window.innerWidth < 769 && baseStore.setMenuActive(false))
-
 // 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 &&
 		(
 			[
 				'home',
-				'namespace.edit',
 				'teams.index',
 				'teams.edit',
 				'tasks.range',
 				'labels.index',
 				'migrate.start',
 				'migrate.wunderlist',
-				'namespaces.index',
+				'projects.index',
 			].includes(routeName) ||
 			routeName.startsWith('user.settings')
 		)
 	) {
-		baseStore.handleSetCurrentList({list: null})
+		baseStore.handleSetCurrentProject({project: null})
 	}
 })
 
@@ -119,6 +120,9 @@ useRenewTokenOnFocus()
 
 const labelStore = useLabelStore()
 labelStore.loadAllLabels()
+
+const projectStore = useProjectStore()
+projectStore.loadProjects()
 </script>
 
 <style lang="scss" scoped>
@@ -159,6 +163,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;
@@ -224,9 +230,4 @@ labelStore.loadAllLabels()
 	position: relative;
 	z-index: 1;
 }
-
-.is-touch .content-auth,
-.content-auth.z-unset {
-	z-index: unset;
-}
 </style>

src/components/home/contentLinkShare.vue

@@ -6,16 +6,20 @@
 	>
 		<div class="container has-text-centered link-share-view">
 			<div class="column is-10 is-offset-1">
-				<Logo class="logo" v-if="logoVisible"/>
+				<Logo
+					v-if="logoVisible"
+					class="logo"
+				/>
 				<h1
 					:class="{'m-0': !logoVisible}"
-					:style="{ 'opacity': currentList.title === '' ? '0': '1' }"
-					class="title">
-					{{ currentList.title === '' ? $t('misc.loading') : currentList.title }}
+					:style="{ 'opacity': currentProject?.title === '' ? '0': '1' }"
+					class="title"
+				>
+					{{ currentProject?.title === '' ? $t('misc.loading') : currentProject?.title }}
 				</h1>
 				<div class="box has-text-left view">
-					<router-view/>
-					<PoweredByLink/>
+					<router-view />
+					<PoweredByLink />
 				</div>
 			</div>
 		</div>
@@ -31,7 +35,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

@@ -1,291 +1,138 @@
 <template>
-	<aside :class="{'is-active': menuActive}" class="namespace-container">
+	<aside
+		:class="{'is-active': baseStore.menuActive}"
+		class="menu-container"
+	>
 		<nav class="menu top-menu">
-			<router-link :to="{name: 'home'}" class="logo">
-				<Logo width="164" height="48"/>
+			<router-link
+				:to="{name: 'home'}"
+				class="logo"
+			>
+				<Logo
+					width="164"
+					height="48"
+				/>
 			</router-link>
-			<ul class="menu-list">
+			<menu class="menu-list other-menu-items">
 				<li>
-					<router-link :to="{ name: 'home'}" v-shortcut="'g o'">
+					<router-link
+						v-shortcut="'g o'"
+						:to="{ name: 'home'}"
+					>
 						<span class="menu-item-icon icon">
-							<icon icon="calendar"/>
+							<icon icon="calendar" />
 						</span>
 						{{ $t('navigation.overview') }}
 					</router-link>
 				</li>
 				<li>
-					<router-link :to="{ name: 'tasks.range'}" v-shortcut="'g u'">
+					<router-link
+						v-shortcut="'g u'"
+						:to="{ name: 'tasks.range'}"
+					>
 						<span class="menu-item-icon icon">
-							<icon :icon="['far', 'calendar-alt']"/>
+							<icon :icon="['far', 'calendar-alt']" />
 						</span>
 						{{ $t('navigation.upcoming') }}
 					</router-link>
 				</li>
 				<li>
-					<router-link :to="{ name: 'namespaces.index'}" v-shortcut="'g n'">
+					<router-link
+						v-shortcut="'g p'"
+						:to="{ name: 'projects.index'}"
+					>
 						<span class="menu-item-icon icon">
-							<icon icon="layer-group"/>
+							<icon icon="layer-group" />
 						</span>
-						{{ $t('namespace.title') }}
+						{{ $t('project.projects') }}
 					</router-link>
 				</li>
 				<li>
-					<router-link :to="{ name: 'labels.index'}" v-shortcut="'g a'">
+					<router-link
+						v-shortcut="'g a'"
+						:to="{ name: 'labels.index'}"
+					>
 						<span class="menu-item-icon icon">
-							<icon icon="tags"/>
+							<icon icon="tags" />
 						</span>
 						{{ $t('label.title') }}
 					</router-link>
 				</li>
 				<li>
-					<router-link :to="{ name: 'teams.index'}" v-shortcut="'g m'">
+					<router-link
+						v-shortcut="'g m'"
+						:to="{ name: 'teams.index'}"
+					>
 						<span class="menu-item-icon icon">
-							<icon icon="users"/>
+							<icon icon="users" />
 						</span>
 						{{ $t('team.title') }}
 					</router-link>
 				</li>
-			</ul>
+			</menu>
 		</nav>
 
-		<nav class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}">
-			<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)"
-						class="menu-label"
-						v-tooltip="namespaceTitles[nk]"
-					>
-						<ColorBubble
-							v-if="n.hexColor !== ''"
-							:color="n.hexColor"
-							class="mr-1"
+		<Loading
+			v-if="projectStore.isLoading"
+			variant="small"
 		/>
-						<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}"
+		<template v-else>
+			<nav
+				v-if="favoriteProjects"
+				class="menu"
 			>
-							<icon icon="chevron-down"/>
-						</div>
-						<span class="count" :class="{'ml-2 mr-0': n.id > 0}">
-							({{ namespaceListsCount[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"
-						v-bind="dragOptions"
-						:modelValue="activeLists[nk]"
-						@update:modelValue="(lists) => updateActiveLists(n, lists)"
-						group="namespace-lists"
-						@start="() => drag = true"
-						@end="saveListPosition"
-						handle=".handle"
-						:disabled="n.id < 0 || undefined"
-						tag="ul"
-						item-key="id"
-						:data-namespace-id="n.id"
-						:data-namespace-index="nk"
-						:component-data="{
-							type: 'transition-group',
-							name: !drag ? 'flip-list' : null,
-							class: [
-								'menu-list can-be-hidden',
-								{ 'dragging-disabled': n.id < 0 }
-							]
-						}"
-					>
-						<template #item="{element: l}">
-							<li
-								class="list-menu loader-container is-loading-small"
-								:class="{'is-loading': listUpdating[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
-										v-if="l.hexColor !== ''"
-										:color="l.hexColor"
-										class="mr-1"
+				<ProjectsNavigation
+					:model-value="favoriteProjects" 
+					:can-edit-order="false"
+					:can-collapse="false"
 				/>
-									<span class="list-menu-title">{{ getListTitle(l) }}</span>
-								</BaseButton>
-								<BaseButton
-									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>
-			</template>
 			</nav>
-		<PoweredByLink/>
+			
+			<nav
+				v-if="savedFilterProjects"
+				class="menu"
+			>
+				<ProjectsNavigation
+					:model-value="savedFilterProjects"
+					:can-edit-order="false"
+					:can-collapse="false"
+				/>
+			</nav>
+
+			<nav class="menu">
+				<ProjectsNavigation
+					:model-value="projects"
+					:can-edit-order="true"
+					:can-collapse="true"
+					:level="1"
+				/>
+			</nav>
+		</template>
+
+		<PoweredByLink />
 	</aside>
 </template>
 
 <script setup lang="ts">
-import {ref, computed, onMounted, onBeforeMount} from 'vue'
-import draggable from 'zhyswan-vuedraggable'
-import type {SortableEvent} from 'sortablejs'
+import {computed} from 'vue'
 
-import BaseButton from '@/components/base/BaseButton.vue'
-import ListSettingsDropdown from '@/components/list/list-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 {useEventListener} from '@vueuse/core'
-import type {IList} from '@/modelTypes/IList'
-import type {INamespace} from '@/modelTypes/INamespace'
-import ColorBubble from '@/components/misc/colorBubble.vue'
+import Loading from '@/components/misc/loading.vue'
 
 import {useBaseStore} from '@/stores/base'
-import {useListStore} from '@/stores/lists'
-import {useNamespaceStore} from '@/stores/namespaces'
-
-const drag = ref(false)
-const dragOptions = {
-	animation: 100,
-	ghostClass: 'ghost',
-}
+import {useProjectStore} from '@/stores/projects'
+import ProjectsNavigation from '@/components/home/ProjectsNavigation.vue'
 
 const baseStore = useBaseStore()
-const namespaceStore = useNamespaceStore()
-const currentList = computed(() => baseStore.currentList)
-const menuActive = computed(() => baseStore.menuActive)
-const loading = computed(() => namespaceStore.isLoading)
+const projectStore = useProjectStore()
 
-
-const namespaces = computed(() => {
-	return namespaceStore.namespaces.filter(n => !n.isArchived)
-})
-const activeLists = computed(() => {
-	return namespaces.value.map(({lists}) => {
-		return lists?.filter(item => {
-			return typeof item !== 'undefined' && !item.isArchived
-		})
-	})
-})
-
-const namespaceTitles = computed(() => {
-	return namespaces.value.map((namespace) => getNamespaceTitle(namespace))
-})
-
-const namespaceListsCount = computed(() => {
-	return namespaces.value.map((_, index) => activeLists.value[index]?.length ?? 0)
-})
-
-
-useEventListener('resize', resize)
-onMounted(() => resize())
-
-const listStore = useListStore()
-
-function resize() {
-	// Hide the menu by default on mobile
-	baseStore.setMenuActive(window.innerWidth >= 770)
-}
-
-function toggleLists(namespaceId: INamespace['id']) {
-	listsVisible.value[namespaceId] = !listsVisible.value[namespaceId]
-}
-
-const listsVisible = 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
-		}
-	})
-})
-
-function updateActiveLists(namespace: INamespace, activeLists: IList[]) {
-	// 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 
-	// later when showing them anyway, and it makes the merging happening here a lot easier.
-	const lists = [
-		...activeLists,
-		...namespace.lists.filter(l => l.isArchived),
-	]
-
-	namespaceStore.setNamespaceById({
-		...namespace,
-		lists,
-	})
-}
-
-const listUpdating = ref<{ [id: INamespace['id']]: boolean }>({})
-
-async function saveListPosition(e: SortableEvent) {
-	if (!e.newIndex && e.newIndex !== 0) return
-
-	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.
-	// 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 position = calculateItemPosition(
-		listBefore !== null ? listBefore.position : null,
-		listAfter !== null ? listAfter.position : null,
-	)
-
-	try {
-		// create a copy of the list in order to not violate pinia manipulation
-		await listStore.updateList({
-			...list,
-			position,
-			namespaceId,
-		})
-	} finally {
-		listUpdating.value[list.id] = false
-	}
-}
+const projects = computed(() => projectStore.notArchivedRootProjects)
+const favoriteProjects = computed(() => projectStore.favoriteProjects)
+const savedFilterProjects = computed(() => projectStore.savedFilterProjects)
 </script>
 
 <style lang="scss" scoped>
-$navbar-padding: 2rem;
-$vikunja-nav-background: var(--site-background);
-$vikunja-nav-color: var(--grey-700);
-$vikunja-nav-selected-width: 0.4rem;
-
 .logo {
 	display: block;
 
@@ -298,10 +145,10 @@ $vikunja-nav-selected-width: 0.4rem;
 	}
 }
 
-.namespace-container {
-	background: $vikunja-nav-background;
+.menu-container {
+	background: var(--site-background);
 	color: $vikunja-nav-color;
-	padding: 0 0 1rem;
+	padding: 1rem 0;
 	transition: transform $transition-duration ease-in;
 	position: fixed;
 	top: $navbar-height;
@@ -323,117 +170,7 @@ $vikunja-nav-selected-width: 0.4rem;
 	}
 }
 
-// these are general menu styles
-// should be in own components
-.menu {
-	.menu-label,
-	.menu-list .list-menu-link,
-	.menu-list a {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		cursor: pointer;
-
-		.color-bubble {
-			height: 12px;
-			flex: 0 0 12px;
-		}
-	}
-
-	.menu-list {
-		li {
-			height: 44px;
-			display: flex;
-			align-items: center;
-
-			&:hover {
-				background: var(--white);
-			}
-
-			.menu-list-dropdown {
-				opacity: 0;
-				transition: $transition;
-			}
-
-			&:hover .menu-list-dropdown {
-				opacity: 1;
-			}
-		}
-
-		.menu-item-icon {
-			color: var(--grey-400);
-		}
-
-		.menu-list-dropdown-trigger {
-			display: flex;
-			padding: 0.5rem;
-		}
-
-		.flip-list-move {
-			transition: transform $transition-duration;
-		}
-
-		.ghost {
-			background: var(--grey-200);
-
-			* {
-				opacity: 0;
-			}
-		}
-
-		a:hover {
-			background: transparent;
-		}
-
-		.list-menu-link,
-		li > a {
-			color: $vikunja-nav-color;
-			padding: 0.75rem .5rem 0.75rem ($navbar-padding * 1.5 - 1.75rem);
-			transition: all 0.2s ease;
-
-			border-radius: 0;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			overflow: hidden;
-			width: 100%;
-			border-left: $vikunja-nav-selected-width solid transparent;
-
-			&:hover {
-				border-left: $vikunja-nav-selected-width solid var(--primary);
-			}
-
-			&.router-link-exact-active {
-				color: var(--primary);
-				border-left: $vikunja-nav-selected-width solid var(--primary);
-			}
-
-			.icon {
-				height: 1rem;
-				vertical-align: middle;
-				padding-right: 0.5rem;
-			}
-
-			&.router-link-exact-active .icon:not(.handle) {
-				color: var(--primary);
-			}
-
-			.handle {
-				opacity: 0;
-				transition: opacity $transition;
-				margin-right: .25rem;
-				cursor: grab;
-			}
-			&:hover .handle {
-				opacity: 1;
-			}
-		}
-	}
-}
-
-.top-menu {
-	margin-top: math.div($navbar-padding, 2);
- 
-	.menu-list {
+.top-menu .menu-list {
 	li {
 		font-weight: 600;
 		font-family: $vikunja-font;
@@ -448,110 +185,9 @@ $vikunja-nav-selected-width: 0.4rem;
 			padding-bottom: .25rem;
 		}
 	}
-	}
 }
 
-.namespaces-lists {
+.menu + .menu {
 	padding-top: math.div($navbar-padding, 2);
-
-	.menu-label {
-		font-size: 1rem;
-		font-weight: 700;
-		font-weight: bold;
-		font-family: $vikunja-font;
-		color: $vikunja-nav-color;
-		font-weight: 600;
-		min-height: 2.5rem;
-		padding-top: 0;
-		padding-left: $navbar-padding;
-
-		overflow: hidden;
-		margin-bottom: 0;
-		flex: 1 1 auto;
-
-		.name {
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			margin-right: auto;
-		}
-
-		.count {
-			color: var(--grey-500);
-			margin-right: .5rem;
-			// align brackets with number
-			font-feature-settings: "case";
-		}
-	}
-
-	.favorite {
-		margin-left: .25rem;
-		transition: opacity $transition, color $transition;
-		opacity: 0;
-
-		&:hover,
-		&.is-favorite {
-			color: var(--warning);
-		}
-	}
-
-	.favorite.is-favorite,
-	.list-menu:hover .favorite {
-		opacity: 1;
-	}
-
-	.list-menu-title {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		width: 100%;
-	}
-
-	.color-bubble {
-		width: 14px;
-		height: 14px;
-		flex-basis: auto;
-	}
-
-	.is-archived {
-		min-width: 85px;
-	}
-}
-
-.namespace-title {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	color: $vikunja-nav-color;
-	padding: 0 .25rem;
-
-	.toggle-lists-icon {
-		svg {
-			transition: all $transition;
-			transform: rotate(90deg);
-			opacity: 1;
-		}
-
-		&.active svg {
-			transform: rotate(0deg);
-			opacity: 0;
-		}
-	}
-
-	&:hover .toggle-lists-icon svg {
-		opacity: 1;
-	}
-
-	&:not(.has-menu) .toggle-lists-icon {
-		padding-right: 1rem;
-	}
-}
-
-.list-setting-spacer {
-	width: 2.5rem;
-	flex-shrink: 0;
-}
-
-.namespaces-list.loader-container.is-loading {
-	min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem + 1.5rem});
 }
 </style>

src/components/home/update.vue

@@ -1,81 +0,0 @@
-<template>
-	<div class="update-notification" v-if="updateAvailable">
-		<p>{{ $t('update.available') }}</p>
-		<x-button @click="refreshApp()" :shadow="false" class="has-no-text-wrap">
-			{{ $t('update.do') }}
-		</x-button>
-	</div>
-</template>
-
-<script lang="ts" setup>
-import {ref} from 'vue'
-
-const updateAvailable = ref(false)
-const registration = ref(null)
-const refreshing = ref(false)
-
-document.addEventListener('swUpdated', showRefreshUI, {once: true})
-
-if (navigator && navigator.serviceWorker) {
-	navigator.serviceWorker.addEventListener(
-		'controllerchange', () => {
-			if (refreshing.value) return
-			refreshing.value = true
-			window.location.reload()
-		},
-	)
-}
-
-function showRefreshUI(e: Event) {
-	console.log('recieved refresh event', e)
-	registration.value = e.detail
-	updateAvailable.value = true
-}
-
-function refreshApp() {
-	if (!registration.value || !registration.value.waiting) {
-		return
-	}
-	// Notify the service worker to actually do the update
-	registration.value.waiting.postMessage('skipWaiting')
-}
-</script>
-
-<style lang="scss" scoped>
-.update-notification {
-	display: flex;
-	align-items: center;
-	background: $warning;
-	padding: .5rem;
-	border-radius: $radius;
-	font-size: .9rem;
-	color: var(--grey-900);
-	justify-content: space-between;
-
-	position: fixed;
-	bottom: 1rem;
-	width: 450px;
-	left: calc(50vw - 225px);
-
-	@media screen and (max-width: $tablet) {
-		position: fixed;
-		left: 1rem;
-		right: 1rem;
-		bottom: 1rem;
-		width: auto;
-	}
-
-	p {
-		text-align: center;
-		width: 100%;
-	}
-
-	> * + * {
-		margin-left: .5rem;
-	}
-}
-
-.dark .update-notification {
-	color: var(--grey-200);
-}
-</style>

src/components/input/AsyncEditor.ts

@@ -1,3 +1,5 @@
 import {createAsyncComponent} from '@/helpers/createAsyncComponent'
 
-export default createAsyncComponent(() => import('@/components/input/editor.vue'))
+const TipTap = createAsyncComponent(() => import('@/components/input/editor/TipTap.vue'))
+
+export default TipTap

src/components/input/Button.story.vue

@@ -6,19 +6,28 @@ import XButton from './button.vue'
 <template>
 	<Story :layout="{ type: 'grid', width: '200px' }">
 		<Variant title="primary">
-			<XButton @click="logEvent('Click', $event)" variant="primary">
+			<XButton
+				variant="primary"
+				@click="logEvent('Click', $event)"
+			>
 				Order pizza!
 			</XButton>
 		</Variant>
 
 		<Variant title="secondary">
-			<XButton @click="logEvent('Click', $event)" variant="secondary">
+			<XButton
+				variant="secondary"
+				@click="logEvent('Click', $event)"
+			>
 				Order spaghetti!
 			</XButton>
 		</Variant>
 
 		<Variant title="tertiary">
-			<XButton @click="logEvent('Click', $event)" variant="tertiary">
+			<XButton
+				variant="tertiary"
+				@click="logEvent('Click', $event)"
+			>
 				Order tortellini!
 			</XButton>
 		</Variant>

src/components/input/ColorPicker.vue

@@ -1,44 +1,83 @@
 <template>
 	<div class="color-picker-container">
 		<datalist :id="colorListID">
-			<option v-for="defaultColor in defaultColors" :key="defaultColor" :value="defaultColor" />
+			<option
+				v-for="defaultColor in defaultColors"
+				:key="defaultColor"
+				:value="defaultColor"
+			/>
 		</datalist>
 		
 		<div class="picker">
 			<input
+				v-model="color"
 				class="picker__input"
 				type="color"
-				v-model="color"
 				:list="colorListID"
 				:class="{'is-empty': isEmpty}"
+			>
+			<svg
+				v-show="isEmpty"
+				class="picker__pattern"
+				viewBox="0 0 22 22"
+				fill="fff"
+			>
+				<pattern
+					id="checker"
+					width="11"
+					height="11"
+					patternUnits="userSpaceOnUse"
+					fill="FFF"
+				>
+					<rect
+						fill="#cccccc"
+						x="0"
+						width="5.5"
+						height="5.5"
+						y="0"
+					/>
+					<rect
+						fill="#cccccc"
+						x="5.5"
+						width="5.5"
+						height="5.5"
+						y="5.5"
 					/>
-			<svg class="picker__pattern" v-show="isEmpty" viewBox="0 0 22 22" fill="fff">
-				<pattern id="checker" width="11" height="11" patternUnits="userSpaceOnUse" fill="FFF">
-					<rect fill="#cccccc" x="0" width="5.5" height="5.5" y="0"></rect>
-					<rect fill="#cccccc" x="5.5" width="5.5" height="5.5" y="5.5"></rect>
 				</pattern>
-				<rect width="22" height="22" fill="url(#checker)"></rect>
+				<rect
+					width="22"
+					height="22"
+					fill="url(#checker)"
+				/>
 			</svg>
 		</div>
 
-		<x-button
+		<XButton
 			v-if="!isEmpty"
 			:disabled="isEmpty"
-			@click="reset"
 			class="is-small ml-2"
 			:shadow="false"
 			variant="secondary"
+			@click="reset"
 		>
 			{{ $t('input.resetColor') }}
-		</x-button>
+		</XButton>
 	</div>
 </template>
 
 <script setup lang="ts">
-import {computed, ref, toRef, watch} from 'vue'
+import {computed, ref, watch} from 'vue'
 import {createRandomID} from '@/helpers/randomId'
 import XButton from '@/components/input/button.vue'
 
+const {
+	modelValue,
+} = defineProps<{
+	modelValue: string,
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
 const DEFAULT_COLORS = [
 	'#1973ff',
 	'#7F23FF',
@@ -53,23 +92,18 @@ const lastChangeTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
 const defaultColors = ref(DEFAULT_COLORS)
 const colorListID = ref(createRandomID())
 
-const props = defineProps({
-	modelValue: {
-		type: String,
-		required: true,
-	},
-	menuPosition: {
-		type: String,
-		default: 'top',
-	},
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const modelValue = toRef(props, 'modelValue')
 watch(
-	modelValue,
+	() => modelValue,
 	(newValue) => {
+		if (newValue === '' || newValue.startsWith('var(')) {
+			color.value = ''
+			return
+		}
+
+		if (!newValue.startsWith('#') && (newValue.length === 6 || newValue.length === 3)) {
+			newValue = `#${newValue}`
+		}
+
 		color.value = newValue
 	},
 	{immediate: true},

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

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

src/components/input/SelectProject.vue

@@ -0,0 +1,74 @@
+<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'
+
+type ProjectFilterFunc = (p: IProject) => boolean
+
+const props = defineProps({
+	modelValue: {
+		type: Array as PropType<IProject[]>,
+		default: () => [],
+	},
+	projectFilter: {
+		type: Function as PropType<ProjectFilterFunc>,
+		default: () => {
+			// eslint-disable-next-line @typescript-eslint/no-unused-vars
+			return (_: IProject) => true
+		},
+	},
+})
+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))
+		.filter(props.projectFilter)
+}
+</script>

src/components/input/SelectUser.vue

@@ -1,5 +1,5 @@
 <template>
-	<multiselect
+	<Multiselect
 		v-model="selectedUsers"
 		:search-results="foundUsers"
 		:loading="userService.loading"

src/components/input/SimpleButton.vue

@@ -0,0 +1,26 @@
+<template>
+	<BaseButton class="simple-button">
+		<slot />
+	</BaseButton>
+</template>
+
+<script lang="ts" setup>
+import BaseButton from '@/components/base/BaseButton.vue'
+</script>
+
+<style lang="scss" scoped>
+.simple-button {
+	color: var(--text);
+	padding: .25rem .5rem;
+	transition: background-color $transition;
+	border-radius: $radius;
+	display: block;
+	margin: .1rem 0;
+	width: 100%;
+	text-align: left;
+
+	&:hover {
+		background: var(--white);
+	}
+}
+</style>

src/components/input/button.vue

@@ -8,17 +8,23 @@
 				'has-no-shadow': !shadow || variant === 'tertiary',
 			}
 		]"
+		:style="{
+			'--button-white-space': wrap ? 'break-spaces' : 'nowrap',
+		}"
 	>
 		<template v-if="icon">
 			<icon 
 				v-if="showIconOnly"
 				:icon="icon"
-				:style="{'color': iconColor !== '' ? iconColor : false}"
+				:style="{'color': iconColor !== '' ? iconColor : undefined}"
 			/>
-			<span class="icon is-small" v-else>
+			<span
+				v-else
+				class="icon is-small"
+			>
 				<icon 
 					:icon="icon"
-					:style="{'color': iconColor !== '' ? iconColor : false}"
+					:style="{'color': iconColor !== '' ? iconColor : undefined}"
 				/>
 			</span>
 		</template>
@@ -35,7 +41,7 @@ const BUTTON_TYPES_MAP = {
 
 export type ButtonTypes = keyof typeof BUTTON_TYPES_MAP
 
-export default { name: 'x-button' }
+export default { name: 'XButton' }
 </script>
 
 <script setup lang="ts">
@@ -44,12 +50,13 @@ import BaseButton, {type BaseButtonProps} from '@/components/base/BaseButton.vue
 import type { IconProp } from '@fortawesome/fontawesome-svg-core'
 
 // extending the props of the BaseButton
-export interface ButtonProps extends BaseButtonProps {
+export interface ButtonProps extends /* @vue-ignore */ BaseButtonProps {
 	variant?: ButtonTypes
 	icon?: IconProp
 	iconColor?: string
 	loading?: boolean
 	shadow?: boolean
+	wrap?: boolean
 }
 
 const {
@@ -58,6 +65,7 @@ const {
 	iconColor = '',
 	loading = false,
 	shadow = true,
+	wrap = true,
 } = defineProps<ButtonProps>()
 
 const variantClass = computed(() => BUTTON_TYPES_MAP[variant])
@@ -77,7 +85,7 @@ const showIconOnly = computed(() => icon !== '' && typeof slots.default === 'und
   min-height: $button-height;
   box-shadow: var(--shadow-sm);
   display: inline-flex;
-  white-space: break-spaces;
+  white-space: var(--button-white-space);
 
   &:hover {
     box-shadow: var(--shadow-md);
@@ -99,7 +107,6 @@ const showIconOnly = computed(() => icon !== '' && typeof slots.default === 'und
   &.is-primary.is-outlined:hover {
     color: var(--white);
   }
-
 }
 
 .is-small {

src/components/input/datepicker.vue

@@ -1,85 +1,29 @@
 <template>
 	<div class="datepicker">
-		<BaseButton @click.stop="toggleDatePopup" class="show" :disabled="disabled || undefined">
+		<SimpleButton
+			class="show"
+			:disabled="disabled || undefined"
+			@click.stop="toggleDatePopup"
+		>
 			{{ date === null ? chooseDateLabel : formatDateShort(date) }}
-		</BaseButton>
+		</SimpleButton>
 
 		<CustomTransition name="fade">
-			<div v-if="show" class="datepicker-popup" ref="datepickerPopup">
-
-				<BaseButton
-					v-if="(new Date()).getHours() < 21"
-					class="datepicker__quick-select-date"
-					@click.stop="setDate('today')"
+			<div
+				v-if="show"
+				ref="datepickerPopup"
+				class="datepicker-popup"
 			>
-					<span class="icon"><icon :icon="['far', 'calendar-alt']"/></span>
-					<span class="text">
-						<span>{{ $t('input.datepicker.today') }}</span>
-						<span class="weekday">{{ getWeekdayFromStringInterval('today') }}</span>
-					</span>
-				</BaseButton>
-				<BaseButton
-					class="datepicker__quick-select-date"
-					@click.stop="setDate('tomorrow')"
-				>
-					<span class="icon"><icon :icon="['far', 'sun']"/></span>
-					<span class="text">
-						<span>{{ $t('input.datepicker.tomorrow') }}</span>
-						<span class="weekday">{{ getWeekdayFromStringInterval('tomorrow') }}</span>
-					</span>
-				</BaseButton>
-				<BaseButton
-					class="datepicker__quick-select-date"
-					@click.stop="setDate('nextMonday')"
-				>
-					<span class="icon"><icon icon="coffee"/></span>
-					<span class="text">
-						<span>{{ $t('input.datepicker.nextMonday') }}</span>
-						<span class="weekday">{{ getWeekdayFromStringInterval('nextMonday') }}</span>
-					</span>
-				</BaseButton>
-				<BaseButton
-					class="datepicker__quick-select-date"
-					@click.stop="setDate('thisWeekend')"
-				>
-					<span class="icon"><icon icon="cocktail"/></span>
-					<span class="text">
-						<span>{{ $t('input.datepicker.thisWeekend') }}</span>
-						<span class="weekday">{{ getWeekdayFromStringInterval('thisWeekend') }}</span>
-					</span>
-				</BaseButton>
-				<BaseButton
-					class="datepicker__quick-select-date"
-					@click.stop="setDate('laterThisWeek')"
-				>
-					<span class="icon"><icon icon="chess-knight"/></span>
-					<span class="text">
-						<span>{{ $t('input.datepicker.laterThisWeek') }}</span>
-						<span class="weekday">{{ getWeekdayFromStringInterval('laterThisWeek') }}</span>
-					</span>
-				</BaseButton>
-				<BaseButton
-					class="datepicker__quick-select-date"
-					@click.stop="setDate('nextWeek')"
-				>
-					<span class="icon"><icon icon="forward"/></span>
-					<span class="text">
-						<span>{{ $t('input.datepicker.nextWeek') }}</span>
-						<span class="weekday">{{ getWeekdayFromStringInterval('nextWeek') }}</span>
-					</span>
-				</BaseButton>
-
-				<flat-pickr
-					:config="flatPickerConfig"
-					class="input"
-					v-model="flatPickrDate"
+				<DatepickerInline
+					v-model="date"
+					@update:modelValue="updateData"
 				/>
 
 				<x-button
+					v-cy="'closeDatepicker'"
 					class="datepicker__close-button"
 					:shadow="false"
 					@click="close"
-					v-cy="'closeDatepicker'"
 				>
 					{{ $t('misc.confirm') }}
 				</x-button>
@@ -89,19 +33,15 @@
 </template>
 
 <script setup lang="ts">
-import {ref, onMounted, onBeforeUnmount, toRef, watch, computed, type PropType} from 'vue'
-import flatPickr from 'vue-flatpickr-component'
-import 'flatpickr/dist/flatpickr.css'
+import {ref, onMounted, onBeforeUnmount, toRef, watch, type PropType} from 'vue'
 
-import BaseButton from '@/components/base/BaseButton.vue'
 import CustomTransition from '@/components/misc/CustomTransition.vue'
+import DatepickerInline from '@/components/input/datepickerInline.vue'
+import SimpleButton from '@/components/input/SimpleButton.vue'
 
-import {formatDate, formatDateShort} from '@/helpers/time/formatDate'
-import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
-import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
+import {formatDateShort} from '@/helpers/time/formatDate'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import {createDateFromString} from '@/helpers/time/createDateFromString'
-import {useAuthStore} from '@/stores/auth'
 import {useI18n} from 'vue-i18n'
 
 const props = defineProps({
@@ -123,9 +63,7 @@ const props = defineProps({
 	},
 })
 
-const emit = defineEmits(['update:modelValue', 'close', 'close-on-change'])
-
-const {t} = useI18n({useScope: 'global'})
+const emit = defineEmits(['update:modelValue', 'close', 'closeOnChange'])
 
 const date = ref<Date | null>()
 const show = ref(false)
@@ -141,37 +79,6 @@ watch(
 	{immediate: true},
 )
 
-const authStore = useAuthStore()
-const weekStart = computed(() => authStore.settings.weekStart)
-const flatPickerConfig = computed(() => ({
-	altFormat: t('date.altFormatLong'),
-	altInput: true,
-	dateFormat: 'Y-m-d H:i',
-	enableTime: true,
-	time_24hr: true,
-	inline: true,
-	locale: {
-		firstDayOfWeek: weekStart.value,
-	},
-}))
-
-// Since flatpickr dates are strings, we need to convert them to native date objects.
-// To make that work, we need a separate variable since flatpickr does not have a change event.
-const flatPickrDate = computed({
-	set(newValue: string | Date) {
-		date.value = createDateFromString(newValue)
-		updateData()
-	},
-	get() {
-		if (!date.value) {
-			return ''
-		}
-
-		return formatDate(date.value, 'yyy-LL-dd H:mm')
-	},
-})
-
-
 function setDateValue(dateString: string | Date | null) {
 	if (dateString === null) {
 		date.value = null
@@ -208,33 +115,10 @@ function close() {
 		emit('close', changed.value)
 		if (changed.value) {
 			changed.value = false
-			emit('close-on-change', changed.value)
+			emit('closeOnChange', changed.value)
 		}
 	}, 200)
 }
-
-function setDate(dateString: string) {
-	if (date.value === null) {
-		date.value = new Date()
-	}
-
-	const interval = calculateDayInterval(dateString)
-	const newDate = new Date()
-	newDate.setDate(newDate.getDate() + interval)
-	newDate.setHours(calculateNearestHours(newDate))
-	newDate.setMinutes(0)
-	newDate.setSeconds(0)
-	date.value = newDate
-	flatPickrDate.value = newDate
-	updateData()
-}
-
-function getWeekdayFromStringInterval(dateString: string) {
-	const interval = calculateDayInterval(dateString)
-	const newDate = new Date()
-	newDate.setDate(newDate.getDate() + interval)
-	return formatDate(newDate, 'E')
-}
 </script>
 
 <style lang="scss" scoped>
@@ -257,42 +141,6 @@ function getWeekdayFromStringInterval(dateString: string) {
 	}
 }
 
-.datepicker__quick-select-date {
-	display: flex;
-	align-items: center;
-	padding: 0 .5rem;
-	width: 100%;
-	height: 2.25rem;
-	color: var(--text);
-	transition: all $transition;
-
-	&:first-child {
-		border-radius: $radius $radius 0 0;
-	}
-
-	&:hover {
-		background: var(--grey-100);
-	}
-
-	.text {
-		width: 100%;
-		font-size: .85rem;
-		display: flex;
-		justify-content: space-between;
-		padding-right: .25rem;
-
-		.weekday {
-			color: var(--text-light);
-			text-transform: capitalize;
-		}
-	}
-
-	.icon {
-		width: 2rem;
-		text-align: center;
-	}
-}
-	
 .datepicker__close-button {
 	margin: 1rem;
 	width: calc(100% - 2rem);

src/components/input/datepickerInline.vue

@@ -0,0 +1,225 @@
+<template>
+	<BaseButton
+		v-if="(new Date()).getHours() < 21"
+		class="datepicker__quick-select-date"
+		@click.stop="setDate('today')"
+	>
+		<span class="icon"><icon :icon="['far', 'calendar-alt']" /></span>
+		<span class="text">
+			<span>{{ $t('input.datepicker.today') }}</span>
+			<span class="weekday">{{ getWeekdayFromStringInterval('today') }}</span>
+		</span>
+	</BaseButton>
+	<BaseButton
+		class="datepicker__quick-select-date"
+		@click.stop="setDate('tomorrow')"
+	>
+		<span class="icon"><icon :icon="['far', 'sun']" /></span>
+		<span class="text">
+			<span>{{ $t('input.datepicker.tomorrow') }}</span>
+			<span class="weekday">{{ getWeekdayFromStringInterval('tomorrow') }}</span>
+		</span>
+	</BaseButton>
+	<BaseButton
+		class="datepicker__quick-select-date"
+		@click.stop="setDate('nextMonday')"
+	>
+		<span class="icon"><icon icon="coffee" /></span>
+		<span class="text">
+			<span>{{ $t('input.datepicker.nextMonday') }}</span>
+			<span class="weekday">{{ getWeekdayFromStringInterval('nextMonday') }}</span>
+		</span>
+	</BaseButton>
+	<BaseButton
+		class="datepicker__quick-select-date"
+		@click.stop="setDate('thisWeekend')"
+	>
+		<span class="icon"><icon icon="cocktail" /></span>
+		<span class="text">
+			<span>{{ $t('input.datepicker.thisWeekend') }}</span>
+			<span class="weekday">{{ getWeekdayFromStringInterval('thisWeekend') }}</span>
+		</span>
+	</BaseButton>
+	<BaseButton
+		class="datepicker__quick-select-date"
+		@click.stop="setDate('laterThisWeek')"
+	>
+		<span class="icon"><icon icon="chess-knight" /></span>
+		<span class="text">
+			<span>{{ $t('input.datepicker.laterThisWeek') }}</span>
+			<span class="weekday">{{ getWeekdayFromStringInterval('laterThisWeek') }}</span>
+		</span>
+	</BaseButton>
+	<BaseButton
+		class="datepicker__quick-select-date"
+		@click.stop="setDate('nextWeek')"
+	>
+		<span class="icon"><icon icon="forward" /></span>
+		<span class="text">
+			<span>{{ $t('input.datepicker.nextWeek') }}</span>
+			<span class="weekday">{{ getWeekdayFromStringInterval('nextWeek') }}</span>
+		</span>
+	</BaseButton>
+
+	<div class="flatpickr-container">
+		<flat-pickr
+			v-model="flatPickrDate"
+			:config="flatPickerConfig"
+		/>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import {ref, toRef, watch, computed, type PropType} from 'vue'
+import flatPickr from 'vue-flatpickr-component'
+import 'flatpickr/dist/flatpickr.css'
+
+import BaseButton from '@/components/base/BaseButton.vue'
+
+import {formatDate} from '@/helpers/time/formatDate'
+import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
+import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
+import {createDateFromString} from '@/helpers/time/createDateFromString'
+import {useI18n} from 'vue-i18n'
+import { getFlatpickrLanguage } from '@/helpers/flatpickrLanguage'
+
+const props = defineProps({
+	modelValue: {
+		type: [Date, null, String] as PropType<Date | null | string>,
+		validator: prop => prop instanceof Date || prop === null || typeof prop === 'string',
+		default: null,
+	},
+})
+
+const emit = defineEmits(['update:modelValue', 'close-on-change'])
+
+const {t} = useI18n({useScope: 'global'})
+
+const date = ref<Date | null>()
+const changed = ref(false)
+
+const modelValue = toRef(props, 'modelValue')
+watch(
+	modelValue,
+	setDateValue,
+	{immediate: true},
+)
+
+const flatPickerConfig = computed(() => ({
+	altFormat: t('date.altFormatLong'),
+	altInput: true,
+	dateFormat: 'Y-m-d H:i',
+	enableTime: true,
+	time_24hr: true,
+	inline: true,
+	locale: getFlatpickrLanguage(),
+}))
+
+// Since flatpickr dates are strings, we need to convert them to native date objects.
+// To make that work, we need a separate variable since flatpickr does not have a change event.
+const flatPickrDate = computed({
+	set(newValue: string | Date | null) {
+		if (newValue === null) {
+			date.value = null
+			return
+		}
+
+		if (date.value !== null) {
+			const oldDate = formatDate(date.value, 'yyy-LL-dd H:mm')
+			if (oldDate === newValue) {
+				return
+			}
+		}
+		date.value = createDateFromString(newValue)
+		updateData()
+	},
+	get() {
+		if (!date.value) {
+			return ''
+		}
+
+		return formatDate(date.value, 'yyy-LL-dd H:mm')
+	},
+})
+
+
+function setDateValue(dateString: string | Date | null) {
+	if (dateString === null) {
+		date.value = null
+		return
+	}
+	date.value = createDateFromString(dateString)
+}
+
+function updateData() {
+	changed.value = true
+	emit('update:modelValue', date.value)
+}
+
+function setDate(dateString: string) {
+	const interval = calculateDayInterval(dateString)
+	const newDate = new Date()
+	newDate.setDate(newDate.getDate() + interval)
+	newDate.setHours(calculateNearestHours(newDate))
+	newDate.setMinutes(0)
+	newDate.setSeconds(0)
+	date.value = newDate
+	updateData()
+}
+
+function getWeekdayFromStringInterval(dateString: string) {
+	const interval = calculateDayInterval(dateString)
+	const newDate = new Date()
+	newDate.setDate(newDate.getDate() + interval)
+	return formatDate(newDate, 'E')
+}
+</script>
+
+<style lang="scss" scoped>
+.datepicker__quick-select-date {
+	display: flex;
+	align-items: center;
+	padding: 0 .5rem;
+	width: 100%;
+	height: 2.25rem;
+	color: var(--text);
+	transition: all $transition;
+
+	&:first-child {
+		border-radius: $radius $radius 0 0;
+	}
+
+	&:hover {
+		background: var(--grey-100);
+	}
+
+	.text {
+		width: 100%;
+		font-size: .85rem;
+		display: flex;
+		justify-content: space-between;
+		padding-right: .25rem;
+
+		.weekday {
+			color: var(--text-light);
+			text-transform: capitalize;
+		}
+	}
+
+	.icon {
+		width: 2rem;
+		text-align: center;
+	}
+}
+
+.flatpickr-container {
+	:deep(.flatpickr-calendar) {
+		margin: 0 auto 8px;
+		box-shadow: none;
+	}
+
+	:deep(.input) {
+		border: none;
+	}
+}
+</style>

src/components/input/editor.vue

@@ -1,446 +0,0 @@
-<template>
-	<div class="editor">
-		<div class="clear"></div>
-
-		<vue-easymde
-			:configs="config"
-			@change="() => bubble()"
-			@update:modelValue="handleInput"
-			class="content"
-			v-if="isEditActive"
-			v-model="text"/>
-
-		<div class="preview content" v-html="preview" v-if="isPreviewActive && text !== ''">
-		</div>
-
-		<p class="has-text-centered has-text-grey is-italic my-5" v-if="showPreviewText">
-			{{ emptyText }}
-			<template v-if="isEditEnabled">
-				<ButtonLink
-					@click="toggleEdit"
-					v-shortcut="editShortcut"
-					class="d-print-none">
-					{{ $t('input.editor.edit') }}
-				</ButtonLink>.
-			</template>
-		</p>
-
-		<ul class="actions d-print-none" v-if="bottomActions.length > 0">
-			<li v-if="isEditEnabled && !showPreviewText && showSave">
-				<BaseButton
-					v-if="showEditButton"
-					@click="toggleEdit"
-					v-shortcut="editShortcut">
-					{{ $t('input.editor.edit') }}
-				</BaseButton>
-				<BaseButton
-					v-else-if="isEditActive"
-					@click="toggleEdit"
-					class="done-edit">
-					{{ $t('misc.save') }}
-				</BaseButton>
-			</li>
-			<li v-for="(action, k) in bottomActions" :key="k">
-				<BaseButton @click="action.action">{{ action.title }}</BaseButton>
-			</li>
-		</ul>
-		<template v-else-if="isEditEnabled && showSave">
-			<ul v-if="showEditButton" class="actions d-print-none">
-				<li>
-					<BaseButton
-						@click="toggleEdit"
-						v-shortcut="editShortcut">
-						{{ $t('input.editor.edit') }}
-					</BaseButton>
-				</li>
-			</ul>
-			<x-button
-				v-else-if="isEditActive"
-				@click="toggleEdit"
-				variant="secondary"
-				:shadow="false"
-				v-cy="'saveEditor'">
-				{{ $t('misc.save') }}
-			</x-button>
-		</template>
-	</div>
-</template>
-
-<script setup lang="ts">
-import {computed, nextTick, onMounted, ref, toRefs, watch} from 'vue'
-
-import VueEasymde from './vue-easymde.vue'
-import {marked} from 'marked'
-import DOMPurify from 'dompurify'
-
-import {createEasyMDEConfig} from './editorConfig'
-
-import AttachmentModel from '@/models/attachment'
-import AttachmentService from '@/services/attachment'
-
-import {setupMarkdownRenderer} from '@/helpers/markdownRenderer'
-import {findCheckboxesInText} from '@/helpers/checklistFromText'
-import {createRandomID} from '@/helpers/randomId'
-
-import BaseButton from '@/components/base/BaseButton.vue'
-import ButtonLink from '@/components/misc/ButtonLink.vue'
-import type { IAttachment } from '@/modelTypes/IAttachment'
-import type { ITask } from '@/modelTypes/ITask'
-
-const props = defineProps({
-	modelValue: {
-		type: String,
-		default: '',
-	},
-	placeholder: {
-		type: String,
-		default: '',
-	},
-	uploadEnabled: {
-		type: Boolean,
-		default: false,
-	},
-	uploadCallback: {
-		type: Function,
-	},
-	hasPreview: {
-		type: Boolean,
-		default: true,
-	},
-	previewIsDefault: {
-		type: Boolean,
-		default: true,
-	},
-	isEditEnabled: {
-		default: true,
-	},
-	bottomActions: {
-		type: Array, 
-		default: () => [],
-	},
-	emptyText: {
-		type: String,
-		default: '',
-	},
-	showSave: {
-		type: Boolean,
-		default: false,
-	},
-	// If a key is passed the editor will go in "edit" mode when the key is pressed.
-	// Disabled if an empty string is passed.
-	editShortcut: {
-		type: String,
-		default: '',
-	},
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const text = ref('')
-const changeTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
-const isEditActive = ref(false)
-const isPreviewActive = ref(true)
-
-const showPreviewText = computed(() => isPreviewActive.value && text.value === '' && props.emptyText !== '')
-const showEditButton = computed(() => !isEditActive.value && text.value !== '')
-
-const preview = ref('')
-const attachmentService = new AttachmentService()
-
-type CacheKey = `${ITask['id']}-${IAttachment['id']}`
-const loadedAttachments = ref<{[key: CacheKey]: string}>({})
-const config = ref(createEasyMDEConfig({
-	placeholder: props.placeholder,
-	uploadImage: props.uploadEnabled,
-	imageUploadFunction: props.uploadCallback,
-}))
-
-const checkboxId = ref(createRandomID())
-
-const {modelValue} = toRefs(props)
-
-watch(
-	modelValue,
-	async (value) => {
-		text.value = value
-		await nextTick()
-		renderPreview()
-	},
-)
-
-watch(
-	text,
-	(newVal, oldVal) => {
-		// Only bubble the new value if it actually changed, but not if the component just got mounted and the text changed from the outside.
-		if (oldVal === '' && text.value === modelValue.value) {
-			return
-		}
-		bubble()
-	},
-)
-
-
-onMounted(() => {
-	if (modelValue.value !== '') {
-		text.value = modelValue.value
-	}
-
-	if (props.previewIsDefault && props.hasPreview) {
-		nextTick(() => renderPreview())
-		return
-	}
-
-	isPreviewActive.value = false
-	isEditActive.value = true
-})
-
-
-// This gets triggered when only pasting content into the editor.
-// A change event would not get generated by that, an input event does.
-// Therefore, we're using this handler to catch paste events.
-// But because this also gets triggered when typing into the editor, we give
-// it a higher timeout to make the timouts cancel each other in that case so
-// that in the end, only one change event is triggered to the outside per change.
-function handleInput(val: string) {
-	// Don't bubble if the text is up to date
-	if (val === text.value) {
-		return
-	}
-
-	text.value = val
-	bubble(1000)
-}
-
-function bubble(timeout = 500) {
-	if (changeTimeout.value !== null) {
-		clearTimeout(changeTimeout.value)
-	}
-
-	changeTimeout.value = setTimeout(() => {
-		emit('update:modelValue', text.value)
-	}, timeout)
-}
-
-function replaceAt(str: string, index: number, replacement: string) {
-	return str.slice(0, index) + replacement + str.slice(index + replacement.length)
-}
-
-function findNthIndex(str: string, n: number) {
-	const checkboxes = findCheckboxesInText(str)
-	return checkboxes[n]
-}
-
-function renderPreview() {
-	setupMarkdownRenderer(checkboxId.value)
-
-	preview.value = DOMPurify.sanitize(marked(text.value), {ADD_ATTR: ['target']})
-
-	// Since the render function is synchronous, we can't do async http requests in it.
-	// Therefore, we can't resolve the blob url at (markdown) compile time.
-	// To work around this, we modify the url after rendering it in the vue component.
-	// We're doing the whole thing in the next tick to ensure the image elements are available in the
-	// dom tree. If we're calling this right after setting this.preview it could be the images were
-	// not already made available.
-	// Some docs at https://stackoverflow.com/q/62865160/10924593
-	nextTick().then(async () => {
-		const attachmentImage = document.querySelectorAll<HTMLImageElement>('.attachment-image')
-		if (attachmentImage) {
-			Array.from(attachmentImage).forEach(async (img) => {
-				// The url is something like /tasks/<id>/attachments/<id>
-				const parts = img.dataset.src?.slice(window.API_URL.length + 1).split('/')
-				const taskId = Number(parts[1])
-				const attachmentId = Number(parts[3])
-				const cacheKey: CacheKey = `${taskId}-${attachmentId}`
-
-				if (typeof loadedAttachments.value[cacheKey] !== 'undefined') {
-					img.src = loadedAttachments.value[cacheKey]
-					return
-				}
-
-				const attachment = new AttachmentModel({taskId: taskId, id: attachmentId})
-
-				const url = await attachmentService.getBlobUrl(attachment)
-				img.src = url
-				loadedAttachments.value[cacheKey] = url
-			})
-		}
-
-		const textCheckbox = document.querySelectorAll<HTMLInputElement>(`.text-checkbox-${checkboxId.value}`)
-		if (textCheckbox) {
-			Array.from(textCheckbox).forEach(check => {
-				check.removeEventListener('change', handleCheckboxClick)
-				check.addEventListener('change', handleCheckboxClick)
-				check.parentElement?.classList.add('has-checkbox')
-			})
-		}
-	})
-}
-
-function handleCheckboxClick(e: Event) {
-	// Find the original markdown checkbox this is targeting
-	const checked = (e.target as HTMLInputElement).checked
-	const numMarkdownCheck = Number((e.target as HTMLInputElement).dataset.checkboxNum)
-
-	const index = findNthIndex(text.value, numMarkdownCheck)
-	if (index < 0 || typeof index === 'undefined') {
-		console.debug('no index found')
-		return
-	}
-	const listPrefix = text.value.substring(index, index + 1)
-	
-	console.debug({index, listPrefix, checked, text: text.value})
-
-	text.value = replaceAt(text.value, index, `${listPrefix} ${checked ? '[x]' : '[ ]'} `)
-	bubble()
-	renderPreview()
-}
-
-function toggleEdit() {
-	if (isEditActive.value) {
-		isPreviewActive.value = true
-		isEditActive.value = false
-		renderPreview()
-		bubble(0) // save instantly
-	} else {
-		isPreviewActive.value = false
-		isEditActive.value = true
-	}
-}
-</script>
-
-<style lang="scss">
-@import 'codemirror/lib/codemirror.css';
-@import 'highlight.js/scss/base16/equilibrium-gray-light';
-
-.editor {
-	.clear {
-		clear: both;
-	}
-
-	.preview.content {
-		margin-bottom: .5rem;
-		overflow-wrap: anywhere; // Safari does not understand "break-word" so we put that first to make sure it at least is able to show it somewhat properly there.
-		overflow-wrap: break-word;
-
-		ul li {
-			input[type="checkbox"] {
-				margin-right: .5rem;
-			}
-
-			&.has-checkbox {
-				margin-left: -1.25rem;
-				list-style: none;
-			}
-		}
-	}
-}
-
-.CodeMirror {
-	padding: .5rem;
-	border: 1px solid var(--grey-200) !important;
-	background: var(--white);
-
-	&-lines pre {
-		margin: 0 !important;
-	}
-
-	&-placeholder {
-		color: var(--grey-400) !important;
-		font-style: italic;
-	}
-
-	&-cursor {
-		border-color: var(--grey-700);
-	}
-}
-
-.editor-preview {
-	padding: 0;
-
-	&-side {
-		padding: .5rem;
-	}
-}
-
-.editor-toolbar {
-	background: var(--grey-50);
-	border: 1px solid var(--grey-200);
-	border-bottom: none;
-
-	button {
-		color: var(--grey-700);
-
-		&.active {
-			background: var(--grey-200);
-		}
-
-		svg {
-			vertical-align: middle;
-
-			&, rect {
-				width: 20px;
-				height: 20px;
-			}
-		}
-
-		&::after {
-			position: absolute;
-			top: 24px;
-			margin-left: -3px;
-		}
-
-		&:hover {
-			background: var(--grey-200);
-			border-color: var(--grey-300);
-		}
-	}
-
-	i.separator {
-		border-color: var(--grey-200) !important;
-	}
-}
-
-pre.CodeMirror-line {
-	margin-bottom: 0 !important;
-	color: var(--grey-700) !important;
-}
-
-.cm-header {
-	font-family: $vikunja-font;
-	font-weight: 400;
-}
-
-ul.actions {
-	font-size: .8rem;
-	margin: 0;
-
-	li {
-		display: inline-block;
-
-		&::after {
-			content: '·';
-			padding: 0 .25rem;
-		}
-
-		&:last-child:after {
-			content: '';
-		}
-	}
-
-	&, a {
-		color: var(--grey-500);
-
-		&.done-edit {
-			color: var(--primary);
-		}
-	}
-
-	a:hover {
-		text-decoration: underline;
-	}
-}
-
-.vue-easymde.content {
-	margin-bottom: 0 !important;
-}
-</style>

src/components/input/editor/CommandsList.vue

@@ -0,0 +1,149 @@
+<template>
+	<div class="items">
+		<template v-if="items.length">
+			<button
+				v-for="(item, index) in items"
+				:key="index"
+				class="item"
+				:class="{ 'is-selected': index === selectedIndex }"
+				@click="selectItem(index)"
+			>
+				<icon :icon="item.icon" />
+				<div class="description">
+					<p>{{ item.title }}</p>
+					<p>{{ item.description }}</p>
+				</div>
+			</button>
+		</template>
+		<div
+			v-else
+			class="item"
+		>
+			No result
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+/* eslint-disable vue/component-api-style */
+export default {
+	props: {
+		items: {
+			type: Array,
+			required: true,
+		},
+
+		command: {
+			type: Function,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			selectedIndex: 0,
+		}
+	},
+
+	watch: {
+		items() {
+			this.selectedIndex = 0
+		},
+	},
+
+	methods: {
+		onKeyDown({event}) {
+			if (event.key === 'ArrowUp') {
+				this.upHandler()
+				return true
+			}
+
+			if (event.key === 'ArrowDown') {
+				this.downHandler()
+				return true
+			}
+
+			if (event.key === 'Enter') {
+				this.enterHandler()
+				return true
+			}
+
+			return false
+		},
+
+		upHandler() {
+			this.selectedIndex = ((this.selectedIndex + this.items.length) - 1) % this.items.length
+		},
+
+		downHandler() {
+			this.selectedIndex = (this.selectedIndex + 1) % this.items.length
+		},
+
+		enterHandler() {
+			this.selectItem(this.selectedIndex)
+		},
+
+		selectItem(index) {
+			const item = this.items[index]
+
+			if (item) {
+				this.command(item)
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.items {
+	padding: 0.2rem;
+	position: relative;
+	border-radius: 0.5rem;
+	background: var(--white);
+	color: var(--grey-900);
+	overflow: hidden;
+	font-size: 0.9rem;
+	box-shadow: var(--shadow-md);
+}
+
+.item {
+	display: flex;
+	align-items: center;
+	margin: 0;
+	width: 100%;
+	text-align: left;
+	background: transparent;
+	border-radius: $radius;
+	border: 0;
+	padding: 0.2rem 0.4rem;
+	transition: background-color $transition;
+
+	&.is-selected, &:hover {
+		background: var(--grey-100);
+		cursor: pointer;
+	}
+	
+	> svg {
+		box-sizing: border-box;
+		width: 2rem;
+		height: 2rem;
+		border: 1px solid var(--grey-300);
+		padding: .5rem;
+		margin-right: .5rem;
+		border-radius: $radius;
+		color: var(--grey-700);
+	}
+}
+
+.description {
+	display: flex;
+	flex-direction: column;
+	font-size: .9rem;
+	color: var(--grey-800);
+	
+	p:last-child {
+		font-size: .75rem;
+		color: var(--grey-500);
+	}
+}
+</style>

src/components/input/editor/EditorToolbar.vue

@@ -0,0 +1,422 @@
+<template>
+	<div class="editor-toolbar">
+		<div class="editor-toolbar__segment">
+			<BaseButton
+				v-tooltip="$t('input.editor.heading1')"
+				class="editor-toolbar__button"
+				:class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
+				@click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
+			>
+				<span class="icon">
+					<icon :icon="['fa', 'fa-header']" />
+					<span class="icon__lower-text">1</span>
+				</span>
+			</BaseButton>
+			<BaseButton
+				v-tooltip="$t('input.editor.heading2')"
+				class="editor-toolbar__button"
+				:class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
+				@click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
+			>
+				<span class="icon">
+					<icon :icon="['fa', 'fa-header']" />
+					<span class="icon__lower-text">2</span>
+				</span>
+			</BaseButton>
+			<BaseButton
+				v-tooltip="$t('input.editor.heading3')"
+				class="editor-toolbar__button"
+				:class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
+				@click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
+			>
+				<span class="icon">
+					<icon :icon="['fa', 'fa-header']" />
+					<span class="icon__lower-text">3</span>
+				</span>
+			</BaseButton>
+		</div>
+
+		<div class="editor-toolbar__segment">
+			<BaseButton
+				v-tooltip="$t('input.editor.bold')"
+				class="editor-toolbar__button"
+				:class="{ 'is-active': editor.isActive('bold') }"
+				@click="editor.chain().focus().toggleBold().run()"
+			>
+				<span class="icon">
+					<icon :icon="['fa', 'fa-bold']" />
+				</span>
+			</BaseButton>
+			<BaseButton
+				v-tooltip="$t('input.editor.italic')"
+				class="editor-toolbar__button"
+				:class="{ 'is-active': editor.isActive('italic') }"
+				@click="editor.chain().focus().toggleItalic().run()"
+			>
+				<span class="icon">
+					<icon :icon="['fa', 'fa-italic']" />
+				</span>
+			</BaseButton>
+			<BaseButton
+				v-tooltip="$t('input.editor.underline')"
+				class="editor-toolbar__button"
+				:class="{ 'is-active': editor.isActive('underline') }"
+				@click="editor.chain().focus().toggleUnderline().run()"
+			>
+				<span class="icon">
+					<icon :icon="['fa', 'fa-underline']" />
+				</span>
+			</BaseButton>
+			<BaseButton
+				v-tooltip="$t('input.editor.strikethrough')"
+				class="editor-toolbar__button"
+				:class="{ 'is-active': editor.isActive('strike') }"
+				@click="editor.chain().focus().toggleStrike().run()"
+			>
+				<span class="icon">
+					<icon :icon="['fa', 'fa-strikethrough']" />
+				</span>
+			</BaseButton>
+		</div>
+
+		<div class="editor-toolbar__segment">
+			<BaseButton
+				v-tooltip="$t('input.editor.code')"
+				class="editor-toolbar__button"
+				:class="{ 'is-active': editor.isActive('codeBlock') }"
+				@click="editor.chain().focus().toggleCodeBlock().run()"
+			>
+				<span class="icon">
+					<icon :icon="['fa', 'fa-code']" />
+				</span>
+			</BaseButton>
+			<BaseButton
+				v-tooltip="$t('input.editor.quote')"
+				class="editor-toolbar__button"
+				:class="{ 'is-active': editor.isActive('blockquote') }"
+				@click="editor.chain().focus().toggleBlockquote().run()"
+			>
+				<span class="icon">
+					<icon :icon="['fa', 'fa-quote-right']" />
+				</span>
+			</BaseButton>
+		</div>
+
+		<div class="editor-toolbar__segment">
+			<BaseButton
+				v-tooltip="$t('input.editor.bulletList')"
+				class="editor-toolbar__button"
+				:class="{ 'is-active': editor.isActive('bulletList') }"
+				@click="editor.chain().focus().toggleBulletList().run()"
+			>
+				<span class="icon">
+					<icon :icon="['fa', 'fa-list-ul']" />
+				</span>
+			</BaseButton>
+			<BaseButton
+				v-tooltip="$t('input.editor.orderedList')"
+				class="editor-toolbar__button"
+				:class="{ 'is-active': editor.isActive('orderedList') }"
+				@click="editor.chain().focus().toggleOrderedList().run()"
+			>
+				<span class="icon">
+					<icon :icon="['fa', 'fa-list-ol']" />
+				</span>
+			</BaseButton>
+			<BaseButton
+				v-tooltip="$t('input.editor.taskList')"
+				class="editor-toolbar__button"
+				:class="{ 'is-active': editor.isActive('taskList') }"
+				@click="editor.chain().focus().toggleTaskList().run()"
+			>
+				<span class="icon">
+					<icon icon="fa-list-check" />
+				</span>
+			</BaseButton>
+		</div>
+
+		<div class="editor-toolbar__segment">
+			<BaseButton
+				v-tooltip="$t('input.editor.image')" 
+				class="editor-toolbar__button" 
+				@click="openImagePicker"
+			>
+				<span class="icon">
+					<icon icon="fa-image" />
+				</span>
+			</BaseButton>
+		</div>
+
+		<div class="editor-toolbar__segment">
+			<BaseButton
+				v-tooltip="$t('input.editor.link')"
+				class="editor-toolbar__button"
+				:class="{ 'is-active': editor.isActive('link') }"
+				title="set link"
+				@click="setLink"
+			>
+				<span class="icon">
+					<icon :icon="['fa', 'fa-link']" />
+				</span>
+			</BaseButton>
+			<BaseButton
+				v-tooltip="$t('input.editor.text')"
+				class="editor-toolbar__button"
+				:class="{ 'is-active': editor.isActive('paragraph') }"
+				title="paragraph"
+				@click="editor.chain().focus().setParagraph().run()"
+			>
+				<span class="icon">
+					<icon :icon="['fa', 'fa-paragraph']" />
+				</span>
+			</BaseButton>
+
+			<BaseButton
+				v-tooltip="$t('input.editor.horizontalRule')"
+				class="editor-toolbar__button"
+				@click="editor.chain().focus().setHorizontalRule().run()"
+			>
+				<span class="icon">
+					<icon :icon="['fa', 'fa-ruler-horizontal']" />
+				</span>
+			</BaseButton>
+		</div>
+
+		<div class="editor-toolbar__segment">
+			<BaseButton
+				v-tooltip="$t('input.editor.undo')"
+				class="editor-toolbar__button"
+				@click="editor.chain().focus().undo().run()"
+			>
+				<span class="icon">
+					<icon :icon="['fa', 'fa-undo']" />
+				</span>
+			</BaseButton>
+			<BaseButton
+				v-tooltip="$t('input.editor.redo')"
+				class="editor-toolbar__button"
+				@click="editor.chain().focus().redo().run()"
+			>
+				<span class="icon">
+					<icon :icon="['fa', 'fa-redo']" />
+				</span>
+			</BaseButton>
+		</div>
+
+		<div class="editor-toolbar__segment">
+			<!-- table -->
+			<BaseButton
+				v-tooltip="$t('input.editor.table.title')"
+				class="editor-toolbar__button"
+				:class="{ 'is-active': editor.isActive('table') }"
+				@click="toggleTableMode"
+			>
+				<span class="icon">
+					<icon :icon="['fa', 'fa-table']" />
+				</span>
+			</BaseButton>
+			<div
+				v-if="tableMode"
+				class="editor-toolbar__table-buttons"
+			>
+				<BaseButton
+					class="editor-toolbar__button"
+					@click="
+						editor
+							.chain()
+							.focus()
+							.insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+							.run()
+					"
+				>
+					{{ $t('input.editor.table.insert') }}
+				</BaseButton>
+				<BaseButton
+					class="editor-toolbar__button"
+					:disabled="!editor.can().addColumnBefore"
+					@click="editor.chain().focus().addColumnBefore().run()"
+				>
+					{{ $t('input.editor.table.addColumnBefore') }}
+				</BaseButton>
+				<BaseButton
+					class="editor-toolbar__button"
+					:disabled="!editor.can().addColumnAfter"
+					@click="editor.chain().focus().addColumnAfter().run()"
+				>
+					{{ $t('input.editor.table.addColumnAfter') }}
+				</BaseButton>
+				<BaseButton
+					class="editor-toolbar__button"
+					:disabled="!editor.can().deleteColumn"
+					@click="editor.chain().focus().deleteColumn().run()"
+				>
+					{{ $t('input.editor.table.deleteColumn') }}
+				</BaseButton>
+				<BaseButton
+					class="editor-toolbar__button"
+					:disabled="!editor.can().addRowBefore"
+					@click="editor.chain().focus().addRowBefore().run()"
+				>
+					{{ $t('input.editor.table.addRowBefore') }}
+				</BaseButton>
+				<BaseButton
+					class="editor-toolbar__button"
+					:disabled="!editor.can().addRowAfter"
+					@click="editor.chain().focus().addRowAfter().run()"
+				>
+					{{ $t('input.editor.table.addRowAfter') }}
+				</BaseButton>
+				<BaseButton
+					class="editor-toolbar__button"
+					:disabled="!editor.can().deleteRow"
+					@click="editor.chain().focus().deleteRow().run()"
+				>
+					{{ $t('input.editor.table.deleteRow') }}
+				</BaseButton>
+				<BaseButton
+					class="editor-toolbar__button"
+					:disabled="!editor.can().deleteTable"
+					@click="editor.chain().focus().deleteTable().run()"
+				>
+					{{ $t('input.editor.table.deleteTable') }}
+				</BaseButton>
+				<BaseButton
+					class="editor-toolbar__button"
+					:disabled="!editor.can().mergeCells"
+					@click="editor.chain().focus().mergeCells().run()"
+				>
+					{{ $t('input.editor.table.mergeCells') }}
+				</BaseButton>
+				<BaseButton
+					class="editor-toolbar__button"
+					:disabled="!editor.can().splitCell"
+					@click="editor.chain().focus().splitCell().run()"
+				>
+					{{ $t('input.editor.table.splitCell') }}
+				</BaseButton>
+				<BaseButton
+					class="editor-toolbar__button"
+					:disabled="!editor.can().toggleHeaderColumn"
+					@click="editor.chain().focus().toggleHeaderColumn().run()"
+				>
+					{{ $t('input.editor.table.toggleHeaderColumn') }}
+				</BaseButton>
+				<BaseButton
+					class="editor-toolbar__button"
+					:disabled="!editor.can().toggleHeaderRow"
+					@click="editor.chain().focus().toggleHeaderRow().run()"
+				>
+					{{ $t('input.editor.table.toggleHeaderRow') }}
+				</BaseButton>
+				<BaseButton
+					class="editor-toolbar__button"
+					:disabled="!editor.can().toggleHeaderCell"
+					@click="editor.chain().focus().toggleHeaderCell().run()"
+				>
+					{{ $t('input.editor.table.toggleHeaderCell') }}
+				</BaseButton>
+				<BaseButton
+					class="editor-toolbar__button"
+					:disabled="!editor.can().mergeOrSplit"
+					@click="editor.chain().focus().mergeOrSplit().run()"
+				>
+					{{ $t('input.editor.table.mergeOrSplit') }}
+				</BaseButton>
+				<BaseButton
+					class="editor-toolbar__button"
+					:disabled="!editor.can().fixTables"
+					@click="editor.chain().focus().fixTables().run()"
+				>
+					{{ $t('input.editor.table.fixTables') }}
+				</BaseButton>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import {Editor} from '@tiptap/vue-3'
+
+import BaseButton from '@/components/base/BaseButton.vue'
+import {setLinkInEditor} from '@/components/input/editor/setLinkInEditor'
+
+const {
+	editor = null,
+} = defineProps<{
+	editor: Editor,
+}>()
+
+const tableMode = ref(false)
+
+function toggleTableMode() {
+	tableMode.value = !tableMode.value
+}
+
+function openImagePicker() {
+	document.getElementById('tiptap__image-upload').click()
+}
+
+function setLink(event) {
+	setLinkInEditor(event.target.getBoundingClientRect(), editor)
+}
+</script>
+
+<style lang="scss" scoped>
+.editor-toolbar {
+	background: var(--white);
+	border: 1px solid var(--grey-200);
+	user-select: none;
+	padding: .5rem;
+	border-radius: $radius;
+	display: flex;
+	flex-wrap: wrap;
+
+	> * + * {
+		border-left: 1px solid var(--grey-200);
+		margin-left: 6px;
+		padding-left: 6px;
+	}
+}
+
+.editor-toolbar__button {
+	min-width: 2rem;
+	height: 2rem;
+	border-radius: $radius;
+	border: 1px solid transparent;
+	color: var(--grey-700);
+	transition: all $transition;
+	background: transparent;
+	margin-right: .25rem;
+
+	&:hover {
+		background: var(--grey-100);
+		border-color: var(--grey-200);
+	}
+	
+	.icon {
+		position: relative;
+		
+		.icon__lower-text {
+			font-size: .75rem;
+			position: absolute;
+			bottom: -3px;
+			right: -2px;
+			font-weight: bold;
+		}
+	}
+}
+
+.editor-toolbar__table-buttons {
+	margin-top: .5rem;
+	
+	> .editor-toolbar__button {
+		margin-right: .5rem;
+		margin-bottom: .5rem;
+		padding: 0 .25rem;
+		border: 1px solid var(--grey-400);
+		font-size: .75rem;
+		height: 1.5rem;
+	}
+}
+</style>

src/components/input/editor/TipTap.vue

@@ -0,0 +1,945 @@
+<template>
+	<div
+		ref="tiptapInstanceRef"
+		class="tiptap"
+	>
+		<EditorToolbar
+			v-if="editor && isEditing"
+			:editor="editor"
+			:upload-callback="uploadCallback"
+		/>
+		<BubbleMenu
+			v-if="editor && isEditing"
+			:editor="editor"
+			class="editor-bubble__wrapper"
+		>
+			<BaseButton
+				v-tooltip="$t('input.editor.bold')"
+				class="editor-bubble__button"
+				:class="{ 'is-active': editor.isActive('bold') }"
+				@click="editor.chain().focus().toggleBold().run()"
+			>
+				<icon :icon="['fa', 'fa-bold']" />
+			</BaseButton>
+			<BaseButton
+				v-tooltip="$t('input.editor.italic')"
+				class="editor-bubble__button"
+				:class="{ 'is-active': editor.isActive('italic') }"
+				@click="editor.chain().focus().toggleItalic().run()"
+			>
+				<icon :icon="['fa', 'fa-italic']" />
+			</BaseButton>
+			<BaseButton
+				v-tooltip="$t('input.editor.underline')"
+				class="editor-bubble__button"
+				:class="{ 'is-active': editor.isActive('underline') }"
+				@click="editor.chain().focus().toggleUnderline().run()"
+			>
+				<icon :icon="['fa', 'fa-underline']" />
+			</BaseButton>
+			<BaseButton
+				v-tooltip="$t('input.editor.strikethrough')"
+				class="editor-bubble__button"
+				:class="{ 'is-active': editor.isActive('strike') }"
+				@click="editor.chain().focus().toggleStrike().run()"
+			>
+				<icon :icon="['fa', 'fa-strikethrough']" />
+			</BaseButton>
+			<BaseButton
+				v-tooltip="$t('input.editor.code')"
+				class="editor-bubble__button"
+				:class="{ 'is-active': editor.isActive('code') }"
+				@click="editor.chain().focus().toggleCode().run()"
+			>
+				<icon :icon="['fa', 'fa-code']" />
+			</BaseButton>
+			<BaseButton
+				v-tooltip="$t('input.editor.link')"
+				class="editor-bubble__button"
+				:class="{ 'is-active': editor.isActive('link') }"
+				@click="setLink"
+			>
+				<icon :icon="['fa', 'fa-link']" />
+			</BaseButton>
+		</BubbleMenu>
+
+		<EditorContent
+			class="tiptap__editor"
+			:class="{'tiptap__editor-is-edit-enabled': isEditing}"
+			:editor="editor"
+			@click="focusIfEditing()"
+		/>
+
+		<input
+			v-if="isEditing"
+			id="tiptap__image-upload"
+			ref="uploadInputRef"
+			type="file"
+			class="is-hidden"
+			@change="addImage"
+		>
+
+		<ul
+			v-if="bottomActions.length === 0 && !isEditing && isEditEnabled"
+			class="tiptap__editor-actions d-print-none"
+		>
+			<li>
+				<BaseButton
+					class="done-edit"
+					@click="setEdit"
+				>
+					{{ $t('input.editor.edit') }}
+				</BaseButton>
+			</li>
+		</ul>
+		<ul
+			v-if="bottomActions.length > 0"
+			class="tiptap__editor-actions d-print-none"
+		>
+			<li v-if="isEditing && showSave">
+				<BaseButton
+					class="done-edit"
+					@click="bubbleSave"
+				>
+					{{ $t('misc.save') }}
+				</BaseButton>
+			</li>
+			<li v-if="!isEditing">
+				<BaseButton
+					class="done-edit"
+					@click="setEdit"
+				>
+					{{ $t('input.editor.edit') }}
+				</BaseButton>
+			</li>
+			<li
+				v-for="(action, k) in bottomActions"
+				:key="k"
+			>
+				<BaseButton @click="action.action">
+					{{ action.title }}
+				</BaseButton>
+			</li>
+		</ul>
+		<XButton
+			v-else-if="isEditing && showSave"
+			v-cy="'saveEditor'"
+			class="mt-4"
+			variant="secondary"
+			:shadow="false"
+			:disabled="!contentHasChanged"
+			@click="bubbleSave"
+		>
+			{{ $t('misc.save') }}
+		</XButton>
+	</div>
+</template>
+
+<script setup lang="ts">
+import {computed, nextTick, onBeforeUnmount, onMounted, ref, watch} from 'vue'
+
+import EditorToolbar from './EditorToolbar.vue'
+
+import Link from '@tiptap/extension-link'
+
+import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
+import Table from '@tiptap/extension-table'
+import TableCell from '@tiptap/extension-table-cell'
+import TableHeader from '@tiptap/extension-table-header'
+import TableRow from '@tiptap/extension-table-row'
+import Typography from '@tiptap/extension-typography'
+import Image from '@tiptap/extension-image'
+import Underline from '@tiptap/extension-underline'
+
+import TaskItem from '@tiptap/extension-task-item'
+import TaskList from '@tiptap/extension-task-list'
+
+import {Blockquote} from '@tiptap/extension-blockquote'
+import {Bold} from '@tiptap/extension-bold'
+import {BulletList} from '@tiptap/extension-bullet-list'
+import {Code} from '@tiptap/extension-code'
+import {Document} from '@tiptap/extension-document'
+import {Dropcursor} from '@tiptap/extension-dropcursor'
+import {Gapcursor} from '@tiptap/extension-gapcursor'
+import {HardBreak} from '@tiptap/extension-hard-break'
+import {Heading} from '@tiptap/extension-heading'
+import {History} from '@tiptap/extension-history'
+import {HorizontalRule} from '@tiptap/extension-horizontal-rule'
+import {Italic} from '@tiptap/extension-italic'
+import {ListItem} from '@tiptap/extension-list-item'
+import {OrderedList} from '@tiptap/extension-ordered-list'
+import {Paragraph} from '@tiptap/extension-paragraph'
+import {Strike} from '@tiptap/extension-strike'
+import {Text} from '@tiptap/extension-text'
+import {BubbleMenu, EditorContent, useEditor} from '@tiptap/vue-3'
+import {Node} from '@tiptap/pm/model'
+
+import Commands from './commands'
+import suggestionSetup from './suggestion'
+
+import {lowlight} from 'lowlight'
+
+import type {BottomAction, UploadCallback} from './types'
+import type {ITask} from '@/modelTypes/ITask'
+import type {IAttachment} from '@/modelTypes/IAttachment'
+import AttachmentModel from '@/models/attachment'
+import AttachmentService from '@/services/attachment'
+import {useI18n} from 'vue-i18n'
+import BaseButton from '@/components/base/BaseButton.vue'
+import XButton from '@/components/input/button.vue'
+import {Placeholder} from '@tiptap/extension-placeholder'
+import {eventToHotkeyString} from '@github/hotkey'
+import {mergeAttributes} from '@tiptap/core'
+import {isEditorContentEmpty} from '@/helpers/editorContentEmpty'
+import inputPrompt from '@/helpers/inputPrompt'
+import {setLinkInEditor} from '@/components/input/editor/setLinkInEditor'
+
+const {
+	modelValue,
+	uploadCallback,
+	isEditEnabled = true,
+	bottomActions = [],
+	showSave = false,
+	placeholder = '',
+	editShortcut = '',
+} = defineProps<{
+	modelValue: string,
+	uploadCallback?: UploadCallback,
+	isEditEnabled?: boolean,
+	bottomActions?: BottomAction[],
+	showSave?: boolean,
+	placeholder?: string,
+	editShortcut?: string,
+}>()
+
+const emit = defineEmits(['update:modelValue', 'save'])
+
+const tiptapInstanceRef = ref<HTMLInputElement | null>(null)
+
+const {t} = useI18n()
+
+const CustomTableCell = TableCell.extend({
+	addAttributes() {
+		return {
+			// extend the existing attributes …
+			...this.parent?.(),
+
+			// and add a new one …
+			backgroundColor: {
+				default: null,
+				parseHTML: (element: HTMLElement) => element.getAttribute('data-background-color'),
+				renderHTML: (attributes) => {
+					return {
+						'data-background-color': attributes.backgroundColor,
+						style: `background-color: ${attributes.backgroundColor}`,
+					}
+				},
+			},
+		}
+	},
+})
+
+type CacheKey = `${ITask['id']}-${IAttachment['id']}`
+const loadedAttachments = ref<{
+	[key: CacheKey]: string
+}>({})
+
+const CustomImage = Image.extend({
+	addAttributes() {
+		return {
+			src: {
+				default: null,
+			},
+			alt: {
+				default: null,
+			},
+			title: {
+				default: null,
+			},
+			id: {
+				default: null,
+			},
+			'data-src': {
+				default: null,
+			},
+		}
+	},
+	renderHTML({HTMLAttributes}) {
+		if (HTMLAttributes.src?.startsWith(window.API_URL) || HTMLAttributes['data-src']?.startsWith(window.API_URL)) {
+			const imageUrl = HTMLAttributes['data-src'] ?? HTMLAttributes.src
+
+			// The url is something like /tasks/<id>/attachments/<id>
+			const parts = imageUrl.slice(window.API_URL.length + 1).split('/')
+			const taskId = Number(parts[1])
+			const attachmentId = Number(parts[3])
+			const cacheKey: CacheKey = `${taskId}-${attachmentId}`
+			const id = 'tiptap-image-' + cacheKey
+
+			nextTick(async () => {
+
+				const img = document.getElementById(id)
+
+				if (!img) return
+
+				if (typeof loadedAttachments.value[cacheKey] === 'undefined') {
+
+					const attachment = new AttachmentModel({taskId: taskId, id: attachmentId})
+
+					const attachmentService = new AttachmentService()
+					loadedAttachments.value[cacheKey] = await attachmentService.getBlobUrl(attachment)
+				}
+
+				img.src = loadedAttachments.value[cacheKey]
+			})
+
+			return ['img', mergeAttributes(this.options.HTMLAttributes, {
+				'data-src': imageUrl,
+				src: '#',
+				alt: HTMLAttributes.alt,
+				title: HTMLAttributes.title,
+				id,
+			})]
+		}
+
+		return ['img', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)]
+	},
+})
+
+type Mode = 'edit' | 'preview'
+
+const internalMode = ref<Mode>('preview')
+const isEditing = computed(() => internalMode.value === 'edit' && isEditEnabled)
+const contentHasChanged = ref<boolean>(false)
+
+watch(
+	() => internalMode.value,
+	mode => {
+		if (mode === 'preview') {
+			contentHasChanged.value = false
+		}
+	},
+)
+
+const editor = useEditor({
+	// eslint-disable-next-line vue/no-ref-object-destructure
+	editable: isEditing.value,
+	extensions: [
+		// Starterkit:
+		Blockquote,
+		Bold,
+		BulletList,
+		Code,
+		CodeBlockLowlight.configure({
+			lowlight,
+		}),
+		Document,
+		Dropcursor,
+		Gapcursor,
+		HardBreak.extend({
+			addKeyboardShortcuts() {
+				return {
+					'Mod-Enter': () => {
+						if (contentHasChanged.value) {
+							bubbleSave()
+						}
+					},
+				}
+			},
+		}),
+		Heading,
+		History,
+		HorizontalRule,
+		Italic,
+		ListItem,
+		OrderedList,
+		Paragraph,
+		Strike,
+		Text,
+
+		Placeholder.configure({
+			placeholder: ({editor}) => {
+				if (!isEditing.value) {
+					return ''
+				}
+
+				if (editor.getText() !== '' && !editor.isFocused) {
+					return ''
+				}
+
+				return placeholder !== ''
+					? placeholder
+					: t('input.editor.placeholder')
+			},
+		}),
+		Typography,
+		Underline,
+		Link.configure({
+			openOnClick: true,
+			validate: (href: string) => /^https?:\/\//.test(href),
+		}),
+		Table.configure({
+			resizable: true,
+		}),
+		TableRow,
+		TableHeader,
+		// Custom TableCell with backgroundColor attribute
+		CustomTableCell,
+
+		CustomImage,
+
+		TaskList,
+		TaskItem.configure({
+			nested: true,
+			onReadOnlyChecked: (node: Node, checked: boolean): boolean => {
+				if (!isEditEnabled) {
+					return false
+				}
+
+				// The following is a workaround for this bug:
+				// https://github.com/ueberdosis/tiptap/issues/4521
+				// https://github.com/ueberdosis/tiptap/issues/3676
+
+				editor.value!.state.doc.descendants((subnode, pos) => {
+					if (node.eq(subnode)) {
+						const {tr} = editor.value!.state
+						tr.setNodeMarkup(pos, undefined, {
+							...node.attrs,
+							checked,
+						})
+						editor.value!.view.dispatch(tr)
+						bubbleSave()
+					}
+				})
+
+
+				return true
+			},
+		}),
+
+		Commands.configure({
+			suggestion: suggestionSetup(t),
+		}),
+		BubbleMenu,
+	],
+	onUpdate: () => {
+		bubbleNow()
+	},
+})
+
+watch(
+	() => isEditing.value,
+	() => {
+		editor.value?.setEditable(isEditing.value)
+	},
+	{immediate: true},
+)
+
+watch(
+	() => modelValue,
+	value => {
+		if (!editor?.value) return
+
+		if (editor.value.getHTML() === value) {
+			return
+		}
+
+		setModeAndValue(value)
+	},
+	{immediate: true},
+)
+
+function bubbleNow() {
+	if (editor.value?.getHTML() === modelValue) {
+		return
+	}
+
+	contentHasChanged.value = true
+	emit('update:modelValue', editor.value?.getHTML())
+}
+
+function bubbleSave() {
+	bubbleNow()
+	emit('save', editor.value?.getHTML())
+	if (isEditing.value) {
+		internalMode.value = 'preview'
+	}
+}
+
+function setEdit(focus: boolean = true) {
+	internalMode.value = 'edit'
+	if (focus) {
+		editor.value?.commands.focus()
+	}
+}
+
+onBeforeUnmount(() => editor.value?.destroy())
+
+const uploadInputRef = ref<HTMLInputElement | null>(null)
+
+function uploadAndInsertFiles(files: File[] | FileList) {
+	uploadCallback(files).then(urls => {
+		urls?.forEach(url => {
+			editor.value
+				?.chain()
+				.focus()
+				.setImage({src: url})
+				.run()
+		})
+		bubbleSave()
+	})
+}
+
+async function addImage(event) {
+
+	if (typeof uploadCallback !== 'undefined') {
+		const files = uploadInputRef.value?.files
+
+		if (!files || files.length === 0) {
+			return
+		}
+
+		uploadAndInsertFiles(files)
+
+		return
+	}
+
+	const url = await inputPrompt(event.target.getBoundingClientRect())
+
+	if (url) {
+		editor.value?.chain().focus().setImage({src: url}).run()
+		bubbleSave()
+	}
+}
+
+function setLink(event) {
+	setLinkInEditor(event.target.getBoundingClientRect(), editor.value)
+}
+
+onMounted(async () => {
+	if (editShortcut !== '') {
+		document.addEventListener('keydown', setFocusToEditor)
+	}
+
+	await nextTick()
+
+	const input = tiptapInstanceRef.value?.querySelectorAll('.tiptap__editor')[0]?.children[0]
+	input?.addEventListener('paste', handleImagePaste)
+
+	setModeAndValue(modelValue)
+})
+
+onBeforeUnmount(() => {
+	nextTick(() => {
+		const input = tiptapInstanceRef.value?.querySelectorAll('.tiptap__editor')[0]?.children[0]
+		input?.removeEventListener('paste', handleImagePaste)
+	})
+	if (editShortcut !== '') {
+		document.removeEventListener('keydown', setFocusToEditor)
+	}
+})
+
+function setModeAndValue(value: string) {
+	internalMode.value = isEditorContentEmpty(value) ? 'edit' : 'preview'
+	editor.value?.commands.setContent(value, false)
+}
+
+function handleImagePaste(event) {
+	if (event?.clipboardData?.items?.length === 0) {
+		return
+	}
+
+	event.preventDefault()
+
+	const image = event.clipboardData.items[0]
+	if (image.kind === 'file' && image.type.startsWith('image/')) {
+		uploadAndInsertFiles([image.getAsFile()])
+	}
+}
+
+// See https://github.com/github/hotkey/discussions/85#discussioncomment-5214660
+function setFocusToEditor(event) {
+	const hotkeyString = eventToHotkeyString(event)
+	if (!hotkeyString) return
+	if (hotkeyString !== editShortcut ||
+		event.target.tagName.toLowerCase() === 'input' ||
+		event.target.tagName.toLowerCase() === 'textarea' ||
+		event.target.contentEditable === 'true') {
+		return
+	}
+
+	event.preventDefault()
+
+	if (!isEditing.value && isEditEnabled) {
+		internalMode.value = 'edit'
+	}
+
+	editor.value?.commands.focus()
+}
+
+function focusIfEditing() {
+	if (isEditing.value) {
+		editor.value?.commands.focus()
+	}
+}
+
+function clickTasklistCheckbox(event) {
+	event.stopImmediatePropagation()
+
+	if (event.target.localName !== 'p') {
+		return
+	}
+
+	event.target.parentNode.parentNode.firstChild.click()
+}
+
+watch(
+	() => isEditing.value,
+	editing => {
+		nextTick(() => {
+			const checkboxes = tiptapInstanceRef.value?.querySelectorAll('[data-checked]')
+			if (typeof checkboxes === 'undefined' || checkboxes.length === 0) {
+				return
+			}
+
+			if (editing) {
+				checkboxes.forEach(check => {
+					if (check.children.length < 2) {
+						return
+					}
+
+					// We assume the first child contains the label element with the checkbox and the second child the actual label
+					// When the actual label is clicked, we forward that click to the checkbox.
+					check.children[1].removeEventListener('click', clickTasklistCheckbox)
+				})
+
+				return
+			}
+
+			checkboxes.forEach(check => {
+				if (check.children.length < 2) {
+					return
+				}
+
+				// We assume the first child contains the label element with the checkbox and the second child the actual label
+				// When the actual label is clicked, we forward that click to the checkbox.
+				check.children[1].addEventListener('click', clickTasklistCheckbox)
+			})
+		})
+	},
+	{immediate: true},
+)
+</script>
+
+<style lang="scss">
+.tiptap__editor {
+	&.tiptap__editor-is-edit-enabled {
+		min-height: 10rem;
+
+		.ProseMirror {
+			padding: .5rem;
+		}
+
+		&:focus-within, &:focus {
+			box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
+		}
+
+		ul[data-type='taskList'] li > div {
+			cursor: text;
+		}
+	}
+
+	transition: box-shadow $transition;
+	border-radius: $radius;
+}
+
+.tiptap p::before {
+	content: attr(data-placeholder);
+	color: var(--grey-400);
+	pointer-events: none;
+	height: 0;
+	float: left;
+}
+
+// Basic editor styles
+.ProseMirror {
+	padding: .5rem .5rem .5rem 0;
+
+	&:focus-within, &:focus {
+		box-shadow: none;
+	}
+
+	> * + * {
+		margin-top: 0.75em;
+	}
+
+	ul,
+	ol {
+		padding: 0 1rem;
+	}
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		line-height: 1.1;
+	}
+
+	code {
+		background-color: var(--grey-200);
+		color: var(--grey-700);
+	}
+
+	pre {
+		background: var(--grey-200);
+		color: var(--grey-700);
+		font-family: 'JetBrainsMono', monospace;
+		padding: 0.75rem 1rem;
+		border-radius: $radius;
+
+		code {
+			color: inherit;
+			padding: 0;
+			background: none;
+			font-size: 0.8rem;
+		}
+
+		.hljs-comment,
+		.hljs-quote {
+			color: var(--grey-500);
+		}
+
+		.hljs-variable,
+		.hljs-template-variable,
+		.hljs-attribute,
+		.hljs-tag,
+		.hljs-name,
+		.hljs-regexp,
+		.hljs-link,
+		.hljs-name,
+		.hljs-selector-id,
+		.hljs-selector-class {
+			color: var(--code-variable);
+		}
+
+		.hljs-number,
+		.hljs-meta,
+		.hljs-built_in,
+		.hljs-builtin-name,
+		.hljs-literal,
+		.hljs-type,
+		.hljs-params {
+			color: var(--code-literal);
+		}
+
+		.hljs-string,
+		.hljs-symbol,
+		.hljs-bullet {
+			color: var(--code-symbol);
+		}
+
+		.hljs-title,
+		.hljs-section {
+			color: var(--code-section);
+		}
+
+		.hljs-keyword,
+		.hljs-selector-tag {
+			color: var(--code-keyword);
+		}
+
+		.hljs-emphasis {
+			font-style: italic;
+		}
+
+		.hljs-strong {
+			font-weight: 700;
+		}
+	}
+
+	img {
+		max-width: 100%;
+		height: auto;
+
+		&.ProseMirror-selectednode {
+			outline: 3px solid var(--primary);
+		}
+	}
+
+	blockquote {
+		padding-left: 1rem;
+		border-left: 2px solid rgba(#0d0d0d, 0.1);
+	}
+
+	hr {
+		border: none;
+		border-top: 2px solid rgba(#0d0d0d, 0.1);
+		margin: 2rem 0;
+	}
+}
+
+.ProseMirror {
+	/* Table-specific styling */
+	table {
+		border-collapse: collapse;
+		table-layout: fixed;
+		width: 100%;
+		margin: 0;
+		overflow: hidden;
+
+		td,
+		th {
+			min-width: 1em;
+			border: 2px solid #ced4da;
+			padding: 3px 5px;
+			vertical-align: top;
+			box-sizing: border-box;
+			position: relative;
+
+			> * {
+				margin-bottom: 0;
+			}
+		}
+
+		th {
+			font-weight: bold;
+			text-align: left;
+			background-color: #f1f3f5;
+		}
+
+		.selectedCell:after {
+			z-index: 2;
+			position: absolute;
+			content: '';
+			left: 0;
+			right: 0;
+			top: 0;
+			bottom: 0;
+			background: rgba(200, 200, 255, 0.4);
+			pointer-events: none;
+		}
+
+		.column-resize-handle {
+			position: absolute;
+			right: -2px;
+			top: 0;
+			bottom: -2px;
+			width: 4px;
+			background-color: #adf;
+			pointer-events: none;
+		}
+
+		p {
+			margin: 0;
+		}
+	}
+
+	// Lists
+	ul {
+		margin-left: .5rem;
+		margin-top: 0 !important;
+
+		li {
+			margin-top: 0;
+		}
+
+		p {
+			margin-bottom: 0 !important;
+		}
+	}
+}
+
+.tableWrapper {
+	overflow-x: auto;
+}
+
+.resize-cursor {
+	cursor: ew-resize;
+	cursor: col-resize;
+}
+
+// tasklist
+ul[data-type='taskList'] {
+	list-style: none;
+	padding: 0;
+	margin-left: 0;
+
+	li {
+		display: flex;
+
+		> label {
+			flex: 0 0 auto;
+			margin-right: 0.5rem;
+			user-select: none;
+		}
+
+		> div {
+			flex: 1 1 auto;
+			cursor: pointer;
+		}
+	}
+
+	input[type='checkbox'] {
+		cursor: pointer;
+	}
+}
+
+.editor-bubble__wrapper {
+	background: var(--white);
+	border-radius: $radius;
+	border: 1px solid var(--grey-200);
+	box-shadow: var(--shadow-md);
+	display: flex;
+	overflow: hidden;
+}
+
+.editor-bubble__button {
+	color: var(--grey-700);
+	transition: all $transition;
+	background: transparent;
+
+	svg {
+		box-sizing: border-box;
+		display: block;
+		width: 1rem;
+		height: 1rem;
+		padding: .5rem;
+		margin: 0;
+	}
+
+	&:hover {
+		background: var(--grey-200);
+	}
+}
+
+ul.tiptap__editor-actions {
+	font-size: .8rem;
+	margin: 0;
+
+	li {
+		display: inline-block;
+
+		&::after {
+			content: '·';
+			padding: 0 .25rem;
+		}
+
+		&:last-child:after {
+			content: '';
+		}
+	}
+
+	&, a {
+		color: var(--grey-500);
+
+		&.done-edit {
+			color: var(--primary);
+		}
+	}
+
+	a:hover {
+		text-decoration: underline;
+	}
+}
+</style>

src/components/input/editor/commands.ts

@@ -0,0 +1,28 @@
+import {Extension} from '@tiptap/core'
+import Suggestion from '@tiptap/suggestion'
+
+// Copied and adjusted from https://github.com/ueberdosis/tiptap/tree/252acb32d27a0f9af14813eeed83d8a50059a43a/demos/src/Experiments/Commands/Vue
+
+export default Extension.create({
+    name: 'slash-menu-commands',
+
+    addOptions() {
+        return {
+            suggestion: {
+                char: '/',
+                command: ({editor, range, props}) => {
+                    props.command({editor, range})
+                },
+            },
+        }
+    },
+
+    addProseMirrorPlugins() {
+        return [
+            Suggestion({
+                editor: this.editor,
+                ...this.options.suggestion,
+            }),
+        ]
+    },
+})