fix(task): task link focus style

This reverts commit fe764a46e9.

.drone.yml

@@ -15,7 +15,6 @@ trigger:
 services:
   - name: api
     image: vikunja/api:unstable
-    pull: always
     environment:
       VIKUNJA_SERVICE_TESTINGTOKEN: averyLongSecretToSe33dtheDB
       VIKUNJA_LOG_LEVEL: DEBUG
@@ -42,12 +41,11 @@ steps:
 #        - .cache
 
   - name: dependencies
-    image: node:20-alpine
+    image: node:18-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
@@ -55,7 +53,7 @@ steps:
 #      - restore-cache
 
   - name: lint
-    image: node:20-alpine
+    image: node:18-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
@@ -66,7 +64,7 @@ steps:
       - dependencies
 
   - name: build-prod
-    image: node:20-alpine
+    image: node:18-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
@@ -77,7 +75,7 @@ steps:
       - dependencies
 
   - name: test-unit
-    image: node:20-alpine
+    image: node:18-alpine
     pull: always
     commands:
       - corepack enable && pnpm config set store-dir .cache/pnpm
@@ -87,7 +85,7 @@ steps:
 
   - name: typecheck
     failure: ignore
-    image: node:20-alpine
+    image: node:18-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
@@ -137,9 +135,8 @@ steps:
 #      - dependencies
 
   - name: deploy-preview
-    image: williamjackson/netlify-cli
+    image: node:18-alpine
     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
@@ -202,14 +199,10 @@ steps:
 #        - .cache
 
   - name: build
-    image: node:20-alpine
+    image: node:18-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
@@ -283,14 +276,10 @@ steps:
 #        - .cache
 
   - name: build
-    image: node:20-alpine
+    image: node:18-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
@@ -357,7 +346,8 @@ type: docker
 name: docker-release
 
 depends_on:
-  - build
+  - release-latest
+  - release-version
 
 trigger:
   ref:
@@ -385,7 +375,8 @@ steps:
       repo: vikunja/frontend
       tags: unstable
       build_args:
-        - USE_RELEASE=false
+        - USE_RELEASE=true
+        - RELEASE_VERSION=unstable
       platforms:
         - linux/386
         - linux/amd64
@@ -419,7 +410,8 @@ steps:
         from_secret: docker_password
       repo: vikunja/frontend
       build_args:
-        - USE_RELEASE=false
+        - USE_RELEASE=true
+        - RELEASE_VERSION=${DRONE_TAG##v}
       platforms:
         - linux/386
         - linux/amd64
@@ -529,6 +521,6 @@ steps:
         from_secret: crowdin_key
 ---
 kind: signature
-hmac: 6a566550cac03e9f3f9bbccab95fda4b342233bd63a1409cb5f634b1c744c326
+hmac: 971875b90c7bb1649d1b00d022d0b594ba9b68f927bf8f0dbe840190816d676b
 
 ...

.npmrc

@@ -1,14 +1,2 @@
-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
+fetch-timeout=100000

.nvmrc

@@ -1 +1 @@
-18.17.0
+18.14.2

.vscode.example/extensions.json

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

Dockerfile

@@ -3,17 +3,16 @@
 #  │─││ │││  │ │
 #  ┘─┘┘─┘┘┘─┘┘─┘
 
-FROM --platform=$BUILDPLATFORM node:20-alpine AS builder
+FROM --platform=$BUILDPLATFORM node:18-alpine AS builder
 
 WORKDIR /build
 
 ARG USE_RELEASE=false
-ARG RELEASE_VERSION=unstable
+ARG RELEASE_VERSION=main
 ENV PNPM_CACHE_FOLDER .cache/pnpm/
 
 COPY package.json ./
 COPY pnpm-lock.yaml ./
-COPY patches ./patches/
 
 RUN if [ "$USE_RELEASE" != true ]; then \
       # https://pnpm.io/installation#using-corepack
@@ -55,8 +54,6 @@ ENV VIKUNJA_LOG_FORMAT main
 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
 
 COPY docker/injector.sh /docker-entrypoint.d/50-injector.sh
 COPY docker/ipv6-disable.sh /docker-entrypoint.d/60-ipv6-disable.sh
@@ -69,3 +66,5 @@ RUN chmod 0755 /docker-entrypoint.d/*.sh /etc/nginx/templates && \
     chmod -R 0644 /etc/nginx/nginx.conf && \
     chown -R nginx:nginx ./ /etc/nginx/conf.d /etc/nginx/templates && \
     rm -f /docker-entrypoint.d/10-listen-on-ipv6-by-default.sh
+# unprivileged user
+USER nginx

README.md

@@ -4,7 +4,7 @@
 
 [![Build Status](https://drone.kolaente.de/api/badges/vikunja/frontend/status.svg)](https://drone.kolaente.de/vikunja/frontend)
 [![License: AGPL v3](https://img.shields.io/badge/License-AGPL%20v3-blue.svg)](LICENSE)
-[![Download](https://img.shields.io/badge/download-v0.21.0-brightgreen.svg)](https://dl.vikunja.io)
+[![Download](https://img.shields.io/badge/download-v0.20.3-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.
@@ -50,3 +50,4 @@ pnpm run build
 ```shell
 pnpm run lint
 ```
+

cypress.config.ts

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

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

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

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

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

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

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

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

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

cypress/e2e/list/list.spec.ts

@@ -0,0 +1,122 @@
+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')
+			.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')
+			.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')
+			.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

@@ -0,0 +1,145 @@
+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

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

cypress/e2e/misc/editor.spec.ts

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

cypress/e2e/misc/menu.spec.ts

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

cypress/e2e/project/prepareProjects.ts

@@ -1,17 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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.spec.ts

@@ -1,171 +0,0 @@
-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,59 +1,25 @@
 import {LinkShareFactory} from '../../factories/link_sharing'
-import {ProjectFactory} from '../../factories/project'
+import {ListFactory} from '../../factories/list'
 import {TaskFactory} from '../../factories/task'
 
-function prepareLinkShare() {
-	const projects = ProjectFactory.create(1)
-	const tasks = TaskFactory.create(10, {
-		project_id: projects[0].id
-	})
-	const linkShares = LinkShareFactory.create(1, {
-		project_id: projects[0].id,
-		right: 0,
-	})
-	
-	return {
-		share: linkShares[0],
-		project: projects[0],
-		tasks,
-	}
-}
-
 describe('Link shares', () => {
 	it('Can view a link share', () => {
-		const {share, project, tasks} = prepareLinkShare()
+		const lists = ListFactory.create(1)
+		const tasks = TaskFactory.create(10, {
+			list_id: lists[0].id
+		})
+		const linkShares = LinkShareFactory.create(1, {
+			list_id: lists[0].id,
+			right: 0,
+		})
 
-		cy.visit(`/share/${share.hash}/auth`)
+		cy.visit(`/share/${linkShares[0].hash}/auth`)
 
 		cy.get('h1.title')
-			.should('contain', project.title)
+			.should('contain', lists[0].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,15 +1,17 @@
 import {createFakeUserAndLogin} from '../../support/authenticateUser'
 
-import {ProjectFactory} from '../../factories/project'
+import {ListFactory} from '../../factories/list'
 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()) {
-	const project = ProjectFactory.create()[0]
+	NamespaceFactory.create(1)
+	const list = ListFactory.create()[0]
 	BucketFactory.create(1, {
-		project_id: project.id,
+		list_id: list.id,
 	})
 	const tasks = []
 	let dueDate = startDueDate
@@ -18,7 +20,7 @@ function seedTasks(numberOfTasks = 50, startDueDate = new Date()) {
 		dueDate = new Date(new Date(dueDate).setDate(dueDate.getDate() + 2))
 		tasks.push({
 			id: i + 1,
-			project_id: project.id,
+			list_id: list.id,
 			done: false,
 			created_by_id: 1,
 			title: 'Test Task ' + i,
@@ -29,7 +31,7 @@ function seedTasks(numberOfTasks = 50, startDueDate = new Date()) {
 		})
 	}
 	seed(TaskFactory.table, tasks)
-	return {tasks, project}
+	return {tasks, list}
 }
 
 describe('Home Page Task Overview', () => {
@@ -71,7 +73,7 @@ describe('Home Page Task Overview', () => {
 			due_date: new Date().toISOString(),
 		}, false)
 		
-		cy.visit(`/projects/${tasks[0].project_id}/list`)
+		cy.visit(`/lists/${tasks[0].list_id}/list`)
 		cy.get('.tasks .task')
 			.first()
 			.should('contain.text', newTaskTitle)
@@ -88,7 +90,7 @@ describe('Home Page Task Overview', () => {
 
 		cy.visit('/')
 
-		cy.visit(`/projects/${tasks[0].project_id}/list`)
+		cy.visit(`/lists/${tasks[0].list_id}/list`)
 		cy.get('.task-add textarea')
 			.type(newTaskTitle+'{enter}')
 		cy.visit('/')
@@ -111,10 +113,10 @@ describe('Home Page Task Overview', () => {
 			.should('contain.text', newTaskTitle)
 	})
 	
-	it('Should show a task without a due date added via default project at the bottom', () => {
-		const {project} = seedTasks(40)
+	it('Should show a task without a due date added via default list at the bottom', () => {
+		const {list} = seedTasks(40)
 		updateUserSettings({
-			default_project_id: project.id,
+			default_list_id: list.id,
 			overdue_tasks_reminders_time: '9:00',
 		})
 		
@@ -129,22 +131,23 @@ describe('Home Page Task Overview', () => {
 			.should('contain.text', newTaskTitle)
 	})
 	
-	it('Should show the cta buttons for new project when there are no tasks', () => {
+	it('Should show the cta buttons for new list when there are no tasks', () => {
 		TaskFactory.truncate()
 		
 		cy.visit('/')
 		
 		cy.get('.home.app-content .content')
-			.should('contain.text', 'Import your projects and tasks from other services into Vikunja:')
+			.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:')
 	})
 	
-	it('Should not show the cta buttons for new project when there are tasks', () => {
+	it('Should not show the cta buttons for new list when there are tasks', () => {
 		seedTasks()
 
 		cy.visit('/')
 
 		cy.get('.home.app-content .content')
-			.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:')
+			.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:')
 	})
 })

cypress/e2e/task/task.spec.ts

@@ -1,17 +1,17 @@
 import {createFakeUserAndLogin} from '../../support/authenticateUser'
 
 import {TaskFactory} from '../../factories/task'
-import {ProjectFactory} from '../../factories/project'
+import {ListFactory} from '../../factories/list'
 import {TaskCommentFactory} from '../../factories/task_comment'
 import {UserFactory} from '../../factories/user'
-import {UserProjectFactory} from '../../factories/users_project'
+import {NamespaceFactory} from '../../factories/namespace'
+import {UserListFactory} from '../../factories/users_list'
 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')
@@ -47,21 +47,23 @@ function uploadAttachmentAndVerify(taskId: number) {
 describe('Task', () => {
 	createFakeUserAndLogin()
 
-	let projects
+	let namespaces
+	let lists
 	let buckets
 
 	beforeEach(() => {
 		// UserFactory.create(1)
-		projects = ProjectFactory.create(1)
+		namespaces = NamespaceFactory.create(1)
+		lists = ListFactory.create(1)
 		buckets = BucketFactory.create(1, {
-			project_id: projects[0].id,
+			list_id: lists[0].id,
 		})
 		TaskFactory.truncate()
-		UserProjectFactory.truncate()
+		UserListFactory.truncate()
 	})
 
 	it('Should be created new', () => {
-		cy.visit('/projects/1/list')
+		cy.visit('/lists/1/list')
 		cy.get('.input[placeholder="Add a new task…"')
 			.type('New Task')
 		cy.get('.button')
@@ -72,11 +74,11 @@ describe('Task', () => {
 			.should('contain', 'New Task')
 	})
 
-	it('Inserts new tasks at the top of the project', () => {
+	it('Inserts new tasks at the top of the list', () => {
 		TaskFactory.create(1)
 
-		cy.visit('/projects/1/list')
-		cy.get('.project-is-empty-notice')
+		cy.visit('/lists/1/list')
+		cy.get('.list-is-empty-notice')
 			.should('not.exist')
 		cy.get('.input[placeholder="Add a new task…"')
 			.type('New Task')
@@ -93,8 +95,8 @@ describe('Task', () => {
 	it('Marks a task as done', () => {
 		TaskFactory.create(1)
 
-		cy.visit('/projects/1/list')
-		cy.get('.tasks .task .fancycheckbox')
+		cy.visit('/lists/1/list')
+		cy.get('.tasks .task .fancycheckbox label.check')
 			.first()
 			.click()
 		cy.get('.global-notification')
@@ -104,11 +106,11 @@ describe('Task', () => {
 	it('Can add a task to favorites', () => {
 		TaskFactory.create(1)
 
-		cy.visit('/projects/1/list')
+		cy.visit('/lists/1/list')
 		cy.get('.tasks .task .favorite')
 			.first()
 			.click()
-		cy.get('.menu-container')
+		cy.get('.menu.namespaces-lists')
 			.should('contain', 'Favorites')
 	})
 
@@ -131,7 +133,8 @@ describe('Task', () => {
 			cy.get('.task-view h1.title.task-id')
 				.should('contain', '#1')
 			cy.get('.task-view h6.subtitle')
-				.should('contain', projects[0].title)
+				.should('contain', namespaces[0].title)
+				.should('contain', lists[0].title)
 			cy.get('.task-view .details.content.description')
 				.should('contain', tasks[0].description)
 			cy.get('.task-view .action-buttons p.created')
@@ -176,21 +179,21 @@ describe('Task', () => {
 				.should('contain', 'Mark as undone')
 		})
 
-		it('Shows a task identifier since the project has one', () => {
-			const projects = ProjectFactory.create(1, {
+		it('Shows a task identifier since the list has one', () => {
+			const lists = ListFactory.create(1, {
 				id: 1,
 				identifier: 'TEST',
 			})
 			const tasks = TaskFactory.create(1, {
 				id: 1,
-				project_id: projects[0].id,
+				list_id: lists[0].id,
 				index: 1,
 			})
 
 			cy.visit(`/tasks/${tasks[0].id}`)
 
 			cy.get('.task-view h1.title.task-id')
-				.should('contain', `${projects[0].identifier}-${tasks[0].index}`)
+				.should('contain', `${lists[0].identifier}-${tasks[0].index}`)
 		})
 
 		it('Can edit the description', () => {
@@ -233,14 +236,14 @@ describe('Task', () => {
 				.should('contain', 'Success')
 		})
 
-		it('Can move a task to another project', () => {
-			const projects = ProjectFactory.create(2)
+		it('Can move a task to another list', () => {
+			const lists = ListFactory.create(2)
 			BucketFactory.create(2, {
-				project_id: '{increment}'
+				list_id: '{increment}'
 			})
 			const tasks = TaskFactory.create(1, {
 				id: 1,
-				project_id: projects[0].id,
+				list_id: lists[0].id,
 			})
 			cy.visit(`/tasks/${tasks[0].id}`)
 
@@ -248,7 +251,7 @@ describe('Task', () => {
 				.contains('Move')
 				.click()
 			cy.get('.task-view .content.details .field .multiselect.control .input-wrapper input')
-				.type(`${projects[1].title}{enter}`)
+				.type(`${lists[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')
@@ -257,7 +260,8 @@ describe('Task', () => {
 				.click()
 
 			cy.get('.task-view h6.subtitle')
-				.should('contain', projects[1].title)
+				.should('contain', namespaces[0].title)
+				.should('contain', lists[1].title)
 			cy.get('.global-notification')
 				.should('contain', 'Success')
 		})
@@ -265,7 +269,7 @@ describe('Task', () => {
 		it('Can delete a task', () => {
 			const tasks = TaskFactory.create(1, {
 				id: 1,
-				project_id: 1,
+				list_id: 1,
 			})
 			cy.visit(`/tasks/${tasks[0].id}`)
 
@@ -282,17 +286,17 @@ describe('Task', () => {
 			cy.get('.global-notification')
 				.should('contain', 'Success')
 			cy.url()
-				.should('contain', `/projects/${tasks[0].project_id}/`)
+				.should('contain', `/lists/${tasks[0].list_id}/`)
 		})
 
 		it('Can add an assignee to a task', () => {
 			const users = UserFactory.create(5)
 			const tasks = TaskFactory.create(1, {
 				id: 1,
-				project_id: 1,
+				list_id: 1,
 			})
-			UserProjectFactory.create(5, {
-				project_id: 1,
+			UserListFactory.create(5, {
+				list_id: 1,
 				user_id: '{increment}',
 			})
 
@@ -317,10 +321,10 @@ describe('Task', () => {
 			const users = UserFactory.create(2)
 			const tasks = TaskFactory.create(1, {
 				id: 1,
-				project_id: 1,
+				list_id: 1,
 			})
-			UserProjectFactory.create(5, {
-				project_id: 1,
+			UserListFactory.create(5, {
+				list_id: 1,
 				user_id: '{increment}',
 			})
 			TaskAssigneeFactory.create(1, {
@@ -343,7 +347,7 @@ describe('Task', () => {
 		it('Can add a new label to a task', () => {
 			const tasks = TaskFactory.create(1, {
 				id: 1,
-				project_id: 1,
+				list_id: 1,
 			})
 			LabelFactory.truncate()
 			const newLabelText = 'some new label'
@@ -371,7 +375,7 @@ describe('Task', () => {
 		it('Can add an existing label to a task', () => {
 			const tasks = TaskFactory.create(1, {
 				id: 1,
-				project_id: 1,
+				list_id: 1,
 			})
 			const labels = LabelFactory.create(1)
 			LabelTaskFactory.truncate()
@@ -384,13 +388,13 @@ describe('Task', () => {
 		it('Can add a label to a task and it shows up on the kanban board afterwards', () => {
 			const tasks = TaskFactory.create(1, {
 				id: 1,
-				project_id: projects[0].id,
+				list_id: lists[0].id,
 				bucket_id: buckets[0].id,
 			})
 			const labels = LabelFactory.create(1)
 			LabelTaskFactory.truncate()
 			
-			cy.visit(`/projects/${projects[0].id}/kanban`)
+			cy.visit(`/lists/${lists[0].id}/kanban`)
 			
 			cy.get('.bucket .task')
 				.contains(tasks[0].title)
@@ -408,7 +412,7 @@ describe('Task', () => {
 		it('Can remove a label from a task', () => {
 			const tasks = TaskFactory.create(1, {
 				id: 1,
-				project_id: 1,
+				list_id: 1,
 			})
 			const labels = LabelFactory.create(1)
 			LabelTaskFactory.create(1, {
@@ -462,154 +466,6 @@ describe('Task', () => {
 				.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('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,
@@ -671,13 +527,13 @@ describe('Task', () => {
 			TaskAttachmentFactory.truncate()
 			const tasks = TaskFactory.create(1, {
 				id: 1,
-				project_id: projects[0].id,
+				list_id: lists[0].id,
 				bucket_id: buckets[0].id,
 			})
 			const labels = LabelFactory.create(1)
 			LabelTaskFactory.truncate()
 
-			cy.visit(`/projects/${projects[0].id}/kanban`)
+			cy.visit(`/lists/${lists[0].id}/kanban`)
 
 			cy.get('.bucket .task')
 				.contains(tasks[0].title)

cypress/e2e/tsconfig.json

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

cypress/e2e/user/login.spec.ts

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

cypress/e2e/user/logout.spec.ts

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

cypress/factories/bucket.ts

@@ -10,7 +10,7 @@ export class BucketFactory extends Factory {
 		return {
 			id: '{increment}',
 			title: faker.lorem.words(3),
-			project_id: 1,
+			list_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),
-			project_id: 1,
+			list_id: 1,
 			right: 0,
 			sharing_type: 0,
 			shared_by_id: 1,

cypress/factories/list.ts

@@ -0,0 +1,19 @@
+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/namespace.ts

@@ -1,8 +1,8 @@
-import {Factory} from '../support/factory'
 import {faker} from '@faker-js/faker'
+import {Factory} from '../support/factory'
 
-export class ProjectFactory extends Factory {
-	static table = 'projects'
+export class NamespaceFactory extends Factory {
+	static table = 'namespaces'
 
 	static factory() {
 		const now = new Date()
@@ -15,4 +15,4 @@ export class ProjectFactory extends Factory {
 			updated: now.toISOString(),
 		}
 	}
-}
+}

cypress/factories/task.ts

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

cypress/factories/task_reminders.ts

@@ -1,18 +0,0 @@
-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_list.ts

@@ -1,14 +1,14 @@
 import {Factory} from '../support/factory'
 
-export class UserProjectFactory extends Factory {
-	static table = 'users_projects'
+export class UserListFactory extends Factory {
+	static table = 'users_lists'
 
 	static factory() {
 		const now = new Date()
 
 		return {
 			id: '{increment}',
-			project_id: 1,
+			list_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: string | null = null
+	static table = null
 
 	static factory() {
 		return {}

docker/injector.sh

@@ -11,7 +11,5 @@ 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
 
 date -uIseconds | xargs echo 'info: started at'

docker/nginx.conf

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

docs/models-services.md

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

env.d.ts

@@ -3,32 +3,10 @@
 /// <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_WORKBOX_DEBUG?: boolean
-	readonly VITE_IS_ONLINE: boolean
+  readonly VITE_IS_ONLINE: boolean
 }
 
 interface ImportMeta {
-	readonly env: ImportMetaEnv
+  readonly env: ImportMetaEnv
 }

flake.lock

@@ -2,11 +2,11 @@
   "nodes": {
     "nixpkgs": {
       "locked": {
-        "lastModified": 1685498995,
-        "narHash": "sha256-rdyjnkq87tJp+T2Bm1OD/9NXKSsh/vLlPeqCc/mm7qs=",
+        "lastModified": 1664753041,
+        "narHash": "sha256-0ogaD8PaGHluARFeupofvk1Nq9gpVeZdlFM0Kcwguys=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "9cfaa8a1a00830d17487cb60a19bb86f96f09b27",
+        "rev": "a62844b302507c7531ad68a86cb7aa54704c9cb4",
         "type": "github"
       },
       "original": {

histoire.config.ts

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

index.html

@@ -18,20 +18,15 @@
 <div id="app"></div>
 <script type="module" src="/src/main.ts"></script>
 <script>
-	//
+    //
 	// This variable points the frontend to the api.
 	// It has to be the full url, including the last /api/v1 part and port.
 	// You can change this if your api is not reachable on the same port as the frontend.
 	window.API_URL = 'http://localhost:3456/api/v1'
-	// Enable error tracking with sentry. If this is set to true, will send anonymized data to 
+    // Enable error tracking with sentry. If this is set to true, will send anonymized data to 
 	// 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
 </script>
 </body>
 </html>

package.json

@@ -13,7 +13,7 @@
   },
   "homepage": "https://vikunja.io/",
   "funding": "https://opencollective.com/vikunja",
-  "packageManager": "pnpm@8.6.9",
+  "packageManager": "pnpm@7.28.0",
   "keywords": [
     "todo",
     "productivity",
@@ -45,107 +45,102 @@
     "story:preview": "histoire preview"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.4.0",
-    "@fortawesome/free-regular-svg-icons": "6.4.0",
-    "@fortawesome/free-solid-svg-icons": "6.4.0",
+    "@fortawesome/fontawesome-svg-core": "6.3.0",
+    "@fortawesome/free-regular-svg-icons": "6.3.0",
+    "@fortawesome/free-solid-svg-icons": "6.3.0",
     "@fortawesome/vue-fontawesome": "3.0.3",
     "@github/hotkey": "2.0.1",
     "@infectoone/vue-ganttastic": "2.1.4",
-    "@intlify/unplugin-vue-i18n": "0.12.2",
-    "@kyvg/vue3-notification": "2.9.1",
-    "@sentry/tracing": "7.60.0",
-    "@sentry/vue": "7.60.0",
-    "@vueuse/core": "10.2.1",
-    "axios": "1.4.0",
+    "@intlify/unplugin-vue-i18n": "0.8.2",
+    "@kyvg/vue3-notification": "2.9.0",
+    "@sentry/tracing": "7.39.0",
+    "@sentry/vue": "7.39.0",
+    "@types/is-touch-device": "1.0.0",
+    "@types/lodash.clonedeep": "4.5.7",
+    "@types/sortablejs": "1.15.0",
+    "@vueuse/core": "9.13.0",
+    "axios": "1.3.4",
     "blurhash": "2.0.5",
     "bulma-css-variables": "0.9.33",
     "camel-case": "4.1.2",
-    "codemirror": "5.65.14",
-    "date-fns": "2.30.0",
-    "dayjs": "1.11.9",
-    "dompurify": "3.0.5",
+    "codemirror": "5.65.12",
+    "date-fns": "2.29.3",
+    "dayjs": "1.11.7",
+    "dompurify": "3.0.0",
     "easymde": "2.18.0",
     "fast-deep-equal": "3.1.3",
     "flatpickr": "4.6.13",
-    "flexsearch": "0.7.31",
-    "floating-vue": "2.0.0-beta.24",
-    "highlight.js": "11.8.0",
+    "flexsearch": "0.7.21",
+    "floating-vue": "2.0.0-beta.20",
+    "focus-within": "3.0.2",
+    "highlight.js": "11.7.0",
     "is-touch-device": "1.0.1",
     "klona": "2.0.6",
     "lodash.debounce": "4.0.8",
-    "marked": "5.1.1",
-    "pinia": "2.1.4",
+    "marked": "4.2.12",
+    "pinia": "2.0.32",
     "register-service-worker": "1.7.2",
     "snake-case": "3.0.4",
     "sortablejs": "1.15.0",
-    "ufo": "1.1.2",
-    "vue": "3.3.4",
+    "ufo": "1.1.0",
+    "vue": "3.2.47",
     "vue-advanced-cropper": "2.8.8",
-    "vue-flatpickr-component": "11.0.3",
+    "vue-flatpickr-component": "11.0.2",
     "vue-i18n": "9.2.2",
-    "vue-router": "4.2.4",
-    "workbox-precaching": "7.0.0",
+    "vue-router": "4.1.6",
+    "workbox-precaching": "6.5.4",
     "zhyswan-vuedraggable": "4.1.3"
   },
   "devDependencies": {
-    "@4tw/cypress-drag-drop": "2.2.4",
-    "@cypress/vite-dev-server": "5.0.5",
-    "@cypress/vue": "5.0.5",
-    "@faker-js/faker": "8.0.2",
-    "@histoire/plugin-screenshot": "0.16.1",
-    "@histoire/plugin-vue": "0.16.1",
-    "@rushstack/eslint-patch": "1.3.2",
-    "@tsconfig/node18": "18.2.0",
-    "@types/codemirror": "5.60.8",
-    "@types/dompurify": "3.0.2",
+    "@4tw/cypress-drag-drop": "2.2.3",
+    "@cypress/vite-dev-server": "5.0.4",
+    "@cypress/vue": "5.0.4",
+    "@faker-js/faker": "7.6.0",
+    "@histoire/plugin-screenshot": "0.15.8",
+    "@histoire/plugin-vue": "0.15.8",
+    "@rushstack/eslint-patch": "1.2.0",
+    "@types/codemirror": "5.60.7",
+    "@types/dompurify": "2.4.0",
     "@types/flexsearch": "0.7.3",
-    "@types/is-touch-device": "1.0.0",
+    "@types/focus-within": "1.0.1",
     "@types/lodash.debounce": "4.0.7",
-    "@types/marked": "5.0.1",
-    "@types/node": "18.17.0",
+    "@types/marked": "4.0.8",
+    "@types/node": "18.14.2",
     "@types/postcss-preset-env": "7.7.0",
-    "@types/sortablejs": "1.15.1",
-    "@typescript-eslint/eslint-plugin": "6.1.0",
-    "@typescript-eslint/parser": "6.1.0",
-    "@vitejs/plugin-legacy": "4.1.1",
-    "@vitejs/plugin-vue": "4.2.3",
-    "@vue/eslint-config-typescript": "11.0.3",
-    "@vue/test-utils": "2.4.1",
-    "@vue/tsconfig": "0.4.0",
-    "autoprefixer": "10.4.14",
-    "browserslist": "4.21.9",
-    "caniuse-lite": "1.0.30001517",
-    "css-has-pseudo": "6.0.0",
-    "csstype": "3.1.2",
-    "cypress": "12.17.2",
-    "esbuild": "0.18.15",
-    "eslint": "8.45.0",
-    "eslint-plugin-vue": "9.15.1",
-    "happy-dom": "10.5.2",
-    "histoire": "0.16.2",
-    "postcss": "8.4.27",
+    "@typescript-eslint/eslint-plugin": "5.53.0",
+    "@typescript-eslint/parser": "5.53.0",
+    "@vitejs/plugin-legacy": "4.0.1",
+    "@vitejs/plugin-vue": "4.0.0",
+    "@vue/eslint-config-typescript": "11.0.2",
+    "@vue/test-utils": "2.3.0",
+    "@vue/tsconfig": "0.1.3",
+    "autoprefixer": "10.4.13",
+    "browserslist": "4.21.5",
+    "caniuse-lite": "1.0.30001458",
+    "csstype": "3.1.1",
+    "cypress": "12.7.0",
+    "esbuild": "0.17.10",
+    "eslint": "8.35.0",
+    "eslint-plugin-vue": "9.9.0",
+    "happy-dom": "8.9.0",
+    "histoire": "0.15.8",
+    "netlify-cli": "13.0.0",
+    "postcss": "8.4.21",
     "postcss-easing-gradients": "3.0.1",
-    "postcss-easings": "4.0.0",
-    "postcss-focus-within": "8.0.0",
-    "postcss-preset-env": "9.0.0",
-    "rollup": "3.26.3",
-    "rollup-plugin-visualizer": "5.9.2",
-    "sass": "1.64.1",
+    "postcss-easings": "3.0.1",
+    "postcss-preset-env": "8.0.1",
+    "rollup": "3.17.3",
+    "rollup-plugin-visualizer": "5.9.0",
+    "sass": "1.58.3",
     "start-server-and-test": "2.0.0",
-    "typescript": "5.1.6",
-    "vite": "4.4.6",
-    "vite-plugin-inject-preload": "1.3.1",
-    "vite-plugin-pwa": "0.16.4",
-    "vite-plugin-sentry": "1.3.0",
+    "typescript": "4.9.5",
+    "vite": "4.1.4",
+    "vite-plugin-inject-preload": "1.3.0",
+    "vite-plugin-pwa": "0.14.4",
     "vite-svg-loader": "4.0.0",
-    "vitest": "0.33.0",
-    "vue-tsc": "1.8.6",
+    "vitest": "0.29.1",
+    "vue-tsc": "1.2.0",
     "wait-on": "7.0.1",
-    "workbox-cli": "7.0.0"
-  },
-  "pnpm": {
-    "patchedDependencies": {
-      "flexsearch@0.7.31": "patches/flexsearch@0.7.31.patch"
-    }
+    "workbox-cli": "6.5.4"
   }
 }

patches/flexsearch@0.7.31.patch

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

renovate.json

@@ -6,7 +6,7 @@
   ],
   "packageRules": [
     {
-      "matchPackageNames": ["happy-dom"],
+      "matchPackageNames": ["netlify-cli", "happy-dom"],
       "extends": ["schedule:weekly"]
     },
     {
@@ -29,8 +29,9 @@
     },
     {
       "matchDepTypes": ["devDependencies"],
-      "groupName": "dev-dependencies",
-      "extends": ["schedule:daily"]
+      "automerge": true,
+      "automergeStrategy": "squash",
+      "automergeType": "pr"
     }
   ]
-}
+}

scripts/deploy-preview-netlify.mjs

@@ -33,9 +33,9 @@ const promiseExec = cmd => {
 }
 
 (async function () {
-	let stdout = await promiseExec(`/home/node/docker-netlify-cli/node_modules/.bin/netlify link --id ${siteId}`)
+	let stdout = await promiseExec(`./node_modules/.bin/netlify link --id ${siteId}`)
 	console.log(stdout)
-	stdout = await promiseExec(`/home/node/docker-netlify-cli/node_modules/.bin/netlify deploy --alias ${alias}`)
+	stdout = await promiseExec(`./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 @@
-4a7c1293c7b12e9ab476cdf35251a407c6a1cd005d22c06df994222cccfb25cde5f47d15866a098c9d739778fee4dc19  ./scripts/deploy-preview-netlify.mjs
+57af69409e66bc87f4f2fc5822dd8d3c2eb47c601f81af1ac4a56f3e2d80837b1a2de06f4ff57695ec379b7c15b881e3  ./scripts/deploy-preview-netlify.mjs

src/App.vue

@@ -12,7 +12,6 @@
 		<keyboard-shortcuts v-if="keyboardShortcutsActive"/>
 		
 		<Teleport to="body">
-			<AddToHomeScreen/>
 			<UpdateNotification/>
 			<Notification/>
 		</Teleport>
@@ -44,7 +43,6 @@ import {useBaseStore} from '@/stores/base'
 
 import {useColorScheme} from '@/composables/useColorScheme'
 import {useBodyClass} from '@/composables/useBodyClass'
-import AddToHomeScreen from '@/components/home/AddToHomeScreen.vue'
 
 const baseStore = useBaseStore()
 const authStore = useAuthStore()
@@ -94,7 +92,7 @@ watch(userEmailConfirm, (userEmailConfirm) => {
 	router.push({name: 'user.login'})
 }, { immediate: true })
 
-setLanguage(authStore.settings.language)
+setLanguage()
 useColorScheme()
 </script>
 

src/assets/checkbox.svg

@@ -1,4 +0,0 @@
-<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.vue

@@ -63,7 +63,7 @@ import {unrefElement} from '@vueuse/core'
 import {ref, type HTMLAttributes} from 'vue'
 import type {RouteLocationRaw} from 'vue-router'
 
-export interface BaseButtonProps extends /* @vue-ignore */ HTMLAttributes {
+export interface BaseButtonProps extends HTMLAttributes {
 	type?: BaseButtonTypes
 	disabled?: boolean
 	to?: RouteLocationRaw

src/components/base/BaseCheckbox.vue

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

src/components/base/Expandable.vue

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

src/components/date/datemathHelp.story.vue

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

src/components/home/AddToHomeScreen.vue

@@ -1,80 +0,0 @@
-<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 @click="() => hideMessage = true" class="hide-button">
-			<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/Logo.vue

@@ -4,12 +4,9 @@ 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({
-	interval: MILLISECONDS_A_HOUR,
-})
-const Logo = computed(() => window.ALLOW_ICON_CHANGES && now.value.getMonth() === 5 ? LogoFullPride : LogoFull)
+const now = useNow()
+const Logo = computed(() => now.value.getMonth() === 5 ? LogoFullPride : LogoFull)
 </script>
 
 <template>

src/components/home/ProjectsNavigation.vue

@@ -1,109 +0,0 @@
-<template>
-	<draggable
-		v-model="availableProjects"
-		animation="100"
-		ghostClass="ghost"
-		group="projects"
-		@start="() => drag = true"
-		@end="saveProjectPosition"
-		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 }
-			],
-		}"
-	>
-		<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

@@ -1,178 +0,0 @@
-<template>
-	<li
-		class="list-menu loader-container is-loading-small"
-		:class="{'is-loading': isLoading}"
-	>
-		<div>
-			<BaseButton
-				v-if="canCollapse && childProjects?.length > 0"
-				@click="childProjectsOpen = !childProjectsOpen"
-				class="collapse-project-button"
-			>
-				<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"
-				></span>
-				<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 lines-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
-				v-if="project.id > 0"
-				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>
-			<span class="list-setting-spacer" v-else></span>
-		</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;
-	}
-}
-
-.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;
-}
-</style>

src/components/home/TheNavigation.vue

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

src/components/home/UpdateNotification.vue

@@ -12,12 +12,9 @@
 </template>
 
 <script lang="ts" setup>
-import {computed, ref} from 'vue'
-import {useBaseStore} from '@/stores/base'
+import {ref} from 'vue'
 
-const baseStore = useBaseStore()
-
-const updateAvailable = computed(() => baseStore.updateAvailable)
+const updateAvailable = ref(false)
 const registration = ref(null)
 const refreshing = ref(false)
 
@@ -34,11 +31,11 @@ navigator?.serviceWorker?.addEventListener(
 function showRefreshUI(e: Event) {
 	console.log('recieved refresh event', e)
 	registration.value = e.detail
-	baseStore.setUpdateAvailable(true)
+	updateAvailable.value = true
 }
 
 function refreshApp() {
-	baseStore.setUpdateAvailable(false)
+	updateAvailable.value = false
 	if (!registration.value || !registration.value.waiting) {
 		return
 	}
@@ -63,11 +60,12 @@ function refreshApp() {
 	align-items: center;
 	justify-content: space-between;
 	gap: 1rem;
-	padding: .5rem .5rem .5rem 1rem;
+	padding: .5rem;
 	background: $warning;
 	border-radius: $radius;
 	font-size: .9rem;
-	color: hsl(220.9, 39.3%, 11%); // color copied to avoid it changing in dark mode
+	color: var(--grey-900);
+
 }
 
 .update-notification__message {

src/components/home/contentAuth.vue

@@ -33,7 +33,7 @@
 				<quick-actions/>
 
 				<router-view :route="routeWithModal" v-slot="{ Component }">
-					<keep-alive :include="['project.list', 'project.gantt', 'project.table', 'project.kanban']">
+					<keep-alive :include="['list.list', 'list.gantt', 'list.table', 'list.kanban']">
 						<component :is="Component"/>
 					</keep-alive>
 				</router-view>
@@ -69,7 +69,6 @@ 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'
@@ -88,25 +87,26 @@ function showKeyboardShortcuts() {
 const route = useRoute()
 
 // FIXME: this is really error prone
-// Reset the current project highlight in menu if the current route is not project related.
+// Reset the current list highlight in menu if the current route is not list related.
 watch(() => route.name as string, (routeName) => {
 	if (
 		routeName &&
 		(
 			[
 				'home',
+				'namespace.edit',
 				'teams.index',
 				'teams.edit',
 				'tasks.range',
 				'labels.index',
 				'migrate.start',
 				'migrate.wunderlist',
-				'projects.index',
+				'namespaces.index',
 			].includes(routeName) ||
 			routeName.startsWith('user.settings')
 		)
 	) {
-		baseStore.handleSetCurrentProject({project: null})
+		baseStore.handleSetCurrentList({list: null})
 	}
 })
 
@@ -116,9 +116,6 @@ useRenewTokenOnFocus()
 
 const labelStore = useLabelStore()
 labelStore.loadAllLabels()
-
-const projectStore = useProjectStore()
-projectStore.loadProjects()
 </script>
 
 <style lang="scss" scoped>
@@ -159,8 +156,6 @@ projectStore.loadProjects()
 	z-index: 10;
 	position: relative;
 	padding: 1.5rem 0.5rem 1rem;
-	// TODO refactor: DRY `transition-timing-function` with `./navigation.vue`.
-	transition: margin-left $transition-duration;
 
 	@media screen and (max-width: $tablet) {
 		margin-left: 0;

src/components/home/contentLinkShare.vue

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

src/components/home/navigation.vue

@@ -1,10 +1,10 @@
 <template>
-	<aside :class="{'is-active': baseStore.menuActive}" class="menu-container">
+	<aside :class="{'is-active': menuActive}" class="namespace-container">
 		<nav class="menu top-menu">
 			<router-link :to="{name: 'home'}" class="logo">
 				<Logo width="164" height="48"/>
 			</router-link>
-			<menu class="menu-list other-menu-items">
+			<ul class="menu-list">
 				<li>
 					<router-link :to="{ name: 'home'}" v-shortcut="'g o'">
 						<span class="menu-item-icon icon">
@@ -22,11 +22,11 @@
 					</router-link>
 				</li>
 				<li>
-					<router-link :to="{ name: 'projects.index'}" v-shortcut="'g p'">
+					<router-link :to="{ name: 'namespaces.index'}" v-shortcut="'g n'">
 						<span class="menu-item-icon icon">
 							<icon icon="layer-group"/>
 						</span>
-						{{ $t('project.projects') }}
+						{{ $t('namespace.title') }}
 					</router-link>
 				</li>
 				<li>
@@ -45,55 +45,238 @@
 						{{ $t('team.title') }}
 					</router-link>
 				</li>
-			</menu>
+			</ul>
 		</nav>
 
-		<Loading
-			v-if="projectStore.isLoading"
-			variant="small"
-		/>
-		<template v-else>
-			<nav class="menu" v-if="favoriteProjects">
-				<ProjectsNavigation
-					:model-value="favoriteProjects" 
-					: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>
-
+		<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"
+						/>
+						<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}"
+						>
+							<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"
+									/>
+									<span class="list-menu-title">{{ getListTitle(l) }}</span>
+								</BaseButton>
+								<BaseButton
+									v-if="l.id > 0"
+									class="favorite"
+									:class="{'is-favorite': l.isFavorite}"
+									@click="listStore.toggleListFavorite(l)"
+								>
+									<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
+								</BaseButton>
+								<list-settings-dropdown class="menu-list-dropdown" :list="l" v-if="l.id > 0">
+									<template #trigger="{toggleOpen}">
+										<BaseButton class="menu-list-dropdown-trigger" @click="toggleOpen">
+											<icon icon="ellipsis-h" class="icon"/>
+										</BaseButton>
+									</template>
+								</list-settings-dropdown>
+								<span class="list-setting-spacer" v-else></span>
+							</li>
+						</template>
+					</draggable>
+			</template>
+		</nav>
 		<PoweredByLink/>
 	</aside>
 </template>
 
 <script setup lang="ts">
-import {computed} from 'vue'
+import {ref, computed, onBeforeMount} from 'vue'
+import draggable from 'zhyswan-vuedraggable'
+import type {SortableEvent} from 'sortablejs'
 
+import BaseButton from '@/components/base/BaseButton.vue'
+import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
+import NamespaceSettingsDropdown from '@/components/namespace/namespace-settings-dropdown.vue'
 import PoweredByLink from '@/components/home/PoweredByLink.vue'
 import Logo from '@/components/home/Logo.vue'
-import Loading from '@/components/misc/loading.vue'
+
+import {calculateItemPosition} from '@/helpers/calculateItemPosition'
+import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
+import {getListTitle} from '@/helpers/getListTitle'
+import type {IList} from '@/modelTypes/IList'
+import type {INamespace} from '@/modelTypes/INamespace'
+import ColorBubble from '@/components/misc/colorBubble.vue'
 
 import {useBaseStore} from '@/stores/base'
-import {useProjectStore} from '@/stores/projects'
-import ProjectsNavigation from '@/components/home/ProjectsNavigation.vue'
+import {useListStore} from '@/stores/lists'
+import {useNamespaceStore} from '@/stores/namespaces'
+
+const drag = ref(false)
+const dragOptions = {
+	animation: 100,
+	ghostClass: 'ghost',
+}
 
 const baseStore = useBaseStore()
-const projectStore = useProjectStore()
+const namespaceStore = useNamespaceStore()
+const currentList = computed(() => baseStore.currentList)
+const menuActive = computed(() => baseStore.menuActive)
+const loading = computed(() => namespaceStore.isLoading)
 
-const projects = computed(() => projectStore.notArchivedRootProjects)
-const favoriteProjects = computed(() => projectStore.favoriteProjects)
+
+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)
+})
+
+const listStore = useListStore()
+
+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
+	}
+}
 </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;
 
@@ -106,10 +289,10 @@ const favoriteProjects = computed(() => projectStore.favoriteProjects)
 	}
 }
 
-.menu-container {
-	background: var(--site-background);
+.namespace-container {
+	background: $vikunja-nav-background;
 	color: $vikunja-nav-color;
-	padding: 1rem 0;
+	padding: 0 0 1rem;
 	transition: transform $transition-duration ease-in;
 	position: fixed;
 	top: $navbar-height;
@@ -131,24 +314,239 @@ const favoriteProjects = computed(() => projectStore.favoriteProjects)
 	}
 }
 
-.top-menu .menu-list {
-	li {
-		font-weight: 600;
-		font-family: $vikunja-font;
+// 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;
+		}
 	}
 
-	.list-menu-link,
-	li > a {
-		padding-left: 2rem;
-		display: inline-block;
+	.menu-list {
+		li {
+			height: 44px;
+			display: flex;
+			align-items: center;
 
-		.icon {
-			padding-bottom: .25rem;
+			&: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;
+			}
+
+			&:hover .handle {
+				opacity: 1;
+			}
+		}
+		
+		&:not(.dragging-disabled) .handle {
+			cursor: grab;
 		}
 	}
 }
 
-.menu + .menu {
+.top-menu {
+	margin-top: math.div($navbar-padding, 2);
+ 
+	.menu-list {
+		li {
+			font-weight: 600;
+			font-family: $vikunja-font;
+		}
+
+		.list-menu-link,
+		li > a {
+			padding-left: 2rem;
+			display: inline-block;
+
+			.icon {
+				padding-bottom: .25rem;
+			}
+		}
+	}
+}
+
+.namespaces-lists {
 	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/input/ColorPicker.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed, ref, watch} from 'vue'
+import {computed, ref, toRef, watch} from 'vue'
 import {createRandomID} from '@/helpers/randomId'
 import XButton from '@/components/input/button.vue'
 
@@ -53,16 +53,22 @@ const lastChangeTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
 const defaultColors = ref(DEFAULT_COLORS)
 const colorListID = ref(createRandomID())
 
-const {
-	modelValue,
-} = defineProps<{
-	modelValue: string,
-}>()
+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) => {
 		color.value = newValue
 	},

src/components/input/SelectList.vue

@@ -0,0 +1,63 @@
+<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

@@ -0,0 +1,63 @@
+<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

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

src/components/input/SimpleButton.vue

@@ -1,26 +0,0 @@
-<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

@@ -47,7 +47,7 @@ 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 /* @vue-ignore */ BaseButtonProps {
+export interface ButtonProps extends BaseButtonProps {
 	variant?: ButtonTypes
 	icon?: IconProp
 	iconColor?: string

src/components/input/datepicker.vue

@@ -1,15 +1,78 @@
 <template>
 	<div class="datepicker">
-		<SimpleButton @click.stop="toggleDatePopup" class="show" :disabled="disabled || undefined">
+		<BaseButton @click.stop="toggleDatePopup" class="show" :disabled="disabled || undefined">
 			{{ date === null ? chooseDateLabel : formatDateShort(date) }}
-		</SimpleButton>
+		</BaseButton>
 
 		<CustomTransition name="fade">
 			<div v-if="show" class="datepicker-popup" ref="datepickerPopup">
 
-				<DatepickerInline
-					v-model="date"
-					@update:model-value="updateData"
+				<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>
+
+				<flat-pickr
+					:config="flatPickerConfig"
+					class="input"
+					v-model="flatPickrDate"
 				/>
 
 				<x-button
@@ -26,15 +89,19 @@
 </template>
 
 <script setup lang="ts">
-import {ref, onMounted, onBeforeUnmount, toRef, watch, type PropType} from 'vue'
+import {ref, onMounted, onBeforeUnmount, 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 CustomTransition from '@/components/misc/CustomTransition.vue'
-import DatepickerInline from '@/components/input/datepickerInline.vue'
-import SimpleButton from '@/components/input/SimpleButton.vue'
 
-import {formatDateShort} from '@/helpers/time/formatDate'
+import {formatDate, formatDateShort} from '@/helpers/time/formatDate'
+import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
+import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import {createDateFromString} from '@/helpers/time/createDateFromString'
+import {useAuthStore} from '@/stores/auth'
 import {useI18n} from 'vue-i18n'
 
 const props = defineProps({
@@ -58,6 +125,8 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'close', 'close-on-change'])
 
+const {t} = useI18n({useScope: 'global'})
+
 const date = ref<Date | null>()
 const show = ref(false)
 const changed = ref(false)
@@ -72,6 +141,37 @@ 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
@@ -112,6 +212,29 @@ function close() {
 		}
 	}, 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>
@@ -134,6 +257,42 @@ function close() {
 	}
 }
 
+.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

@@ -1,228 +0,0 @@
-<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
-			:config="flatPickerConfig"
-			v-model="flatPickrDate"
-		/>
-	</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 {useAuthStore} from '@/stores/auth'
-import {useI18n} from 'vue-i18n'
-
-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 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 | null) {
-		if (newValue === null) {
-			date.value = null
-			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) {
-	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>
-.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

@@ -4,7 +4,7 @@
 
 		<vue-easymde
 			:configs="config"
-			@change="() => bubbleNow()"
+			@change="() => bubble()"
 			@update:modelValue="handleInput"
 			class="content"
 			v-if="isEditActive"
@@ -35,7 +35,7 @@
 				</BaseButton>
 				<BaseButton
 					v-else-if="isEditActive"
-					@click="bubbleSaveClick"
+					@click="toggleEdit"
 					class="done-edit">
 					{{ $t('misc.save') }}
 				</BaseButton>
@@ -56,7 +56,7 @@
 			</ul>
 			<x-button
 				v-else-if="isEditActive"
-				@click="bubbleSaveClick"
+				@click="toggleEdit"
 				variant="secondary"
 				:shadow="false"
 				v-cy="'saveEditor'">
@@ -84,8 +84,8 @@ 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'
+import type { IAttachment } from '@/modelTypes/IAttachment'
+import type { ITask } from '@/modelTypes/ITask'
 
 const props = defineProps({
 	modelValue: {
@@ -115,7 +115,7 @@ const props = defineProps({
 		default: true,
 	},
 	bottomActions: {
-		type: Array,
+		type: Array, 
 		default: () => [],
 	},
 	emptyText: {
@@ -134,9 +134,10 @@ const props = defineProps({
 	},
 })
 
-const emit = defineEmits(['update:modelValue', 'save'])
+const emit = defineEmits(['update:modelValue'])
 
 const text = ref('')
+const changeTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
 const isEditActive = ref(false)
 const isPreviewActive = ref(true)
 
@@ -147,7 +148,7 @@ const preview = ref('')
 const attachmentService = new AttachmentService()
 
 type CacheKey = `${ITask['id']}-${IAttachment['id']}`
-const loadedAttachments = ref<{ [key: CacheKey]: string }>({})
+const loadedAttachments = ref<{[key: CacheKey]: string}>({})
 const config = ref(createEasyMDEConfig({
 	placeholder: props.placeholder,
 	uploadImage: props.uploadEnabled,
@@ -174,7 +175,7 @@ watch(
 		if (oldVal === '' && text.value === modelValue.value) {
 			return
 		}
-		bubbleNow()
+		bubble()
 	},
 )
 
@@ -207,11 +208,17 @@ function handleInput(val: string) {
 	}
 
 	text.value = val
-	bubbleNow()
+	bubble(1000)
 }
 
-function bubbleNow() {
-	emit('update:modelValue', text.value)
+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) {
@@ -226,10 +233,7 @@ function findNthIndex(str: string, n: number) {
 function renderPreview() {
 	setupMarkdownRenderer(checkboxId.value)
 
-	preview.value = DOMPurify.sanitize(marked(text.value, {
-		mangle: false,
-		headerIds: false,
-	}), {ADD_ATTR: ['target']})
+	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.
@@ -282,27 +286,25 @@ function handleCheckboxClick(e: Event) {
 		console.debug('no index found')
 		return
 	}
-	const projectPrefix = text.value.substring(index, index + 1)
+	const listPrefix = text.value.substring(index, index + 1)
+	
+	console.debug({index, listPrefix, checked, text: text.value})
 
-	console.debug({index, projectPrefix, checked, text: text.value})
-
-	text.value = replaceAt(text.value, index, `${projectPrefix} ${checked ? '[x]' : '[ ]'} `)
-	bubbleNow()
-	emit('save', text.value)
+	text.value = replaceAt(text.value, index, `${listPrefix} ${checked ? '[x]' : '[ ]'} `)
+	bubble()
 	renderPreview()
 }
 
 function toggleEdit() {
-	isPreviewActive.value = false
-	isEditActive.value = true
-}
-
-function bubbleSaveClick() {
-	isPreviewActive.value = true
-	isEditActive.value = false
-	renderPreview()
-	bubbleNow()
-	emit('save', text.value)
+	if (isEditActive.value) {
+		isPreviewActive.value = true
+		isEditActive.value = false
+		renderPreview()
+		bubble(0) // save instantly
+	} else {
+		isPreviewActive.value = false
+		isEditActive.value = true
+	}
 }
 </script>
 

src/components/input/fancycheckbox.story.vue

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

src/components/input/fancycheckbox.vue

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

src/components/input/multiselect.vue

@@ -32,8 +32,6 @@
 					@keydown.down.exact.prevent="() => preSelect(0)"
 					ref="searchInput"
 					@focus="handleFocus"
-					:autocomplete="autocompleteEnabled ? undefined : 'off'"
-					:spellcheck="autocompleteEnabled ? undefined : 'false'"
 				/>
 			</div>
 		</div>
@@ -198,13 +196,6 @@ const props = defineProps({
 		type: Boolean,
 		default: true,
 	},
-	/**
-	 * If false, the search input will get the autocomplete="off" attributes attached to it.
-	 */
-	autocompleteEnabled: {
-		type: Boolean,
-		default: true,
-	},
 })
 
 const emit = defineEmits<{

src/components/list/ListWrapper.vue

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

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

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

src/components/list/partials/ListCard.vue

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

src/components/list/partials/ListCardGrid.vue

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

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

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

src/components/list/partials/filters.vue

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

src/components/list/partials/useListBackground.ts

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

src/components/misc/Icon.ts

@@ -4,7 +4,6 @@ import {
 	faAngleRight,
 	faArchive,
 	faArrowLeft,
-	faArrowUpFromBracket,
 	faBars,
 	faBell,
 	faCalendar,
@@ -57,7 +56,7 @@ import {
 	faTimes,
 	faTrashAlt,
 	faUser,
-	faUsers, faX,
+	faUsers,
 } from '@fortawesome/free-solid-svg-icons'
 import {
 	faBellSlash,
@@ -68,11 +67,10 @@ import {
 	faStar,
 	faSun,
 	faTimesCircle,
-	faCircleQuestion,
 } from '@fortawesome/free-regular-svg-icons'
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
 
-import type {FontAwesomeIcon as FontAwesomeIconFixedTypes} from '@/types/vue-fontawesome'
+import type { FontAwesomeIcon as FontAwesomeIconFixedTypes } from '@/types/vue-fontawesome'
 
 library.add(faAlignLeft)
 library.add(faAngleRight)
@@ -88,7 +86,6 @@ library.add(faCheckDouble)
 library.add(faChessKnight)
 library.add(faChevronDown)
 library.add(faCircleInfo)
-library.add(faCircleQuestion)
 library.add(faClock)
 library.add(faCloudDownloadAlt)
 library.add(faCloudUploadAlt)
@@ -140,8 +137,6 @@ library.add(faTimesCircle)
 library.add(faTrashAlt)
 library.add(faUser)
 library.add(faUsers)
-library.add(faArrowUpFromBracket)
-library.add(faX)
 
 // overwriting the wrong types
 export default FontAwesomeIcon as unknown as FontAwesomeIconFixedTypes

src/components/misc/card.vue

@@ -24,12 +24,12 @@
 			}"
 		>
 			<div :class="{'content': hasContent}">
-				<slot/>
+				<slot />
 			</div>
 		</div>
 
 		<footer v-if="$slots.footer" class="card-footer">
-			<slot name="footer"/>
+			<slot name="footer" />
 		</footer>
 	</div>
 </template>
@@ -76,27 +76,22 @@ defineEmits(['close'])
 
 <style lang="scss" scoped>
 .card {
-	background-color: var(--white);
-	border-radius: $radius;
-	margin-bottom: 1rem;
-	border: 1px solid var(--card-border-color);
-	box-shadow: var(--shadow-sm);
-
-	@media print {
-		box-shadow: none;
-		border: none;
-	}
+  background-color: var(--white);
+  border-radius: $radius;
+  margin-bottom: 1rem;
+  border: 1px solid var(--card-border-color);
+  box-shadow: var(--shadow-sm);
 }
 
 .card-header {
-	box-shadow: none;
-	border-bottom: 1px solid var(--card-border-color);
-	border-radius: $radius $radius 0 0;
+  box-shadow: none;
+  border-bottom: 1px solid var(--card-border-color);
+  border-radius: $radius $radius 0 0;
 }
 
 .card-footer {
-	background-color: var(--grey-50);
-	border-top: 0;
+  background-color: var(--grey-50);
+  border-top: 0;
 	padding: var(--modal-card-head-padding);
 	display: flex;
 	justify-content: flex-end;

src/components/misc/dropdown-item.vue

@@ -14,7 +14,7 @@ import BaseButton, { type BaseButtonProps } from '@/components/base//BaseButton.
 import Icon from '@/components/misc/Icon'
 import type { IconProp } from '@fortawesome/fontawesome-svg-core'
 
-export interface DropDownItemProps extends /* @vue-ignore */ BaseButtonProps {
+export interface DropDownItemProps extends BaseButtonProps {
 	icon?: IconProp,
 }
 

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

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

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

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

src/components/misc/loading.vue

@@ -1,21 +1,13 @@
 <template>
-	<div class="loader-container is-loading" :class="{'is-small': variant === 'small'}"></div>
+	<div class="loader-container is-loading"></div>
 </template>
 
 <script lang="ts">
 export default {
-	inheritAttrs: true,
+	inheritAttrs: false,
 }
 </script>
 
-<script lang="ts" setup>
-const {
-	variant = 'default',
-} = defineProps<{
-	variant?: 'default' | 'small'
-}>()
-</script>
-
 <style scoped lang="scss">
 .loader-container {
 	height: 100%;
@@ -28,18 +20,5 @@ const {
 		min-height: 50px;
 		min-width: 100px;
 	}
-
-	&.is-small {
-		min-width: 100%;
-		height: 150px;
-
-		&.is-loading::after {
-			width: 3rem;
-			height: 3rem;
-			top: calc(50% - 1.5rem);
-			left: calc(50% - 1.5rem);
-			border-width: 3px;
-		}
-	}
 }
 </style>

src/components/misc/modal.vue

@@ -75,19 +75,17 @@ import BaseButton from '@/components/base/BaseButton.vue'
 import {ref, useAttrs, watchEffect} from 'vue'
 import {useScrollLock} from '@vueuse/core'
 
-const {
-	enabled = true,
-	overflow,
-	wide,
-	transitionName = 'modal',
-	variant = 'default',
-} = defineProps<{
+const props = withDefaults(defineProps<{
 	enabled?: boolean,
 	overflow?: boolean,
 	wide?: boolean,
 	transitionName?: 'modal' | 'fade',
 	variant?: 'default' | 'hint-modal' | 'scrolling',
-}>()
+}>(), {
+	enabled: true,
+	transitionName: 'modal',
+	variant: 'default',
+})
 
 defineEmits(['close', 'submit'])
 
@@ -97,7 +95,7 @@ const modal = ref<HTMLElement | null>(null)
 const scrollLock = useScrollLock(modal)
 
 watchEffect(() => {
-	scrollLock.value = enabled
+	scrollLock.value = props.enabled
 })
 </script>
 
@@ -202,10 +200,10 @@ $modal-width: 1024px;
 	right: $close-button-padding;
 	color: var(--grey-900);
 	font-size: 2rem;
-
+	
 	@media screen and (min-width: $desktop) and (max-width: calc(#{$desktop	} + #{$close-button-min-space})) {
 		top: calc(5px + $modal-margin);
-		right: 50%;
+    right: 50%;
 		// we align the close button to the modal until there is enough space outside for it
 		transform: translateX(calc((#{$modal-width} / 2) - #{$close-button-padding}));
 	}

src/components/misc/no-auth-wrapper.vue

@@ -13,7 +13,7 @@
 			<section class="content">
 				<div>
 					<h2 class="title" v-if="title">{{ title }}</h2>
-					<api-config v-if="showApiConfig"/>
+					<api-config/>
 					<Message v-if="motd !== ''" class="is-hidden-tablet mb-4">
 						{{ motd }}
 					</Message>
@@ -45,12 +45,6 @@ const route = useRoute()
 const {t} = useI18n({useScope: 'global'})
 const title = computed(() => t(route.meta?.title as string || ''))
 useTitle(() => title.value)
-
-const {
-	showApiConfig = true,
-} = defineProps<{
-	showApiConfig?: boolean
-}>()
 </script>
 
 <style lang="scss" scoped>

src/components/misc/popup.vue

@@ -8,7 +8,7 @@
 		}"
 		ref="popup"
 	>
-		<slot name="content" :isOpen="open" :toggle="toggle"/>
+		<slot name="content" :isOpen="open"/>
 	</div>
 </template>
 
@@ -23,14 +23,11 @@ const props = defineProps({
 	},
 })
 
-const emit = defineEmits(['close'])
-
 const open = ref(false)
 const popup = ref<HTMLElement | null>(null)
 
 function close() {
 	open.value = false
-	emit('close')
 }
 
 function toggle() {

src/components/misc/ready.vue

@@ -11,20 +11,22 @@
 		<slot/>
 	</template>
 	<section v-else-if="error !== ''">
-		<no-auth-wrapper :show-api-config="false">
-			<p v-if="error === ERROR_NO_API_URL">
-				{{ $t('ready.noApiUrlConfigured') }}
-			</p>
-			<message variant="danger" v-else class="mb-4">
-				<p>
-					{{ $t('ready.errorOccured') }}<br/>
-					{{ error }}
+		<no-auth-wrapper>
+			<card>
+				<p v-if="error === ERROR_NO_API_URL">
+					{{ $t('ready.noApiUrlConfigured') }}
 				</p>
-				<p>
-					{{ $t('ready.checkApiUrl') }}
-				</p>
-			</message>
-			<api-config :configure-open="true" @found-api="load"/>
+				<message variant="danger" v-else>
+					<p>
+						{{ $t('ready.errorOccured') }}<br/>
+						{{ error }}
+					</p>
+					<p>
+						{{ $t('ready.checkApiUrl') }}
+					</p>
+				</message>
+				<api-config :configure-open="true" @found-api="load"/>
+			</card>
 		</no-auth-wrapper>
 	</section>
 	<CustomTransition name="fade">
@@ -54,13 +56,11 @@ import {useOnline} from '@/composables/useOnline'
 import {getAuthForRoute} from '@/router'
 
 import {useBaseStore} from '@/stores/base'
-import {useAuthStore} from '@/stores/auth'
 
 const router = useRouter()
 const route = useRoute()
 
 const baseStore = useBaseStore()
-const authStore = useAuthStore()
 
 const ready = computed(() => baseStore.ready)
 const online = useOnline()
@@ -72,7 +72,7 @@ async function load() {
 	try {
 		await baseStore.loadApp()
 		baseStore.setReady(true)
-		const redirectTo = await getAuthForRoute(route, authStore)
+		const redirectTo = await getAuthForRoute(route)
 		if (typeof redirectTo !== 'undefined') {
 			await router.push(redirectTo)
 		}

src/components/misc/subscription.vue

@@ -47,7 +47,7 @@ import {success} from '@/message'
 import type { IconProp } from '@fortawesome/fontawesome-svg-core'
 
 const props = defineProps({
-	entity: String as ISubscription['entity'],
+	entity: String,
 	entityId: Number,
 	isButton: {
 		type: Boolean,
@@ -73,18 +73,28 @@ const {t} = useI18n({useScope: 'global'})
 
 const tooltipText = computed(() => {
 	if (disabled.value) {
-		if (props.entity === 'task' && subscriptionEntity.value === 'project') {
-			return t('task.subscription.subscribedTaskThroughParentProject')
+		if (props.entity === 'list' && subscriptionEntity.value === 'namespace') {
+			return t('task.subscription.subscribedListThroughParentNamespace')
+		}
+		if (props.entity === 'task' && subscriptionEntity.value === 'namespace') {
+			return t('task.subscription.subscribedTaskThroughParentNamespace')
+		}
+		if (props.entity === 'task' && subscriptionEntity.value === 'list') {
+			return t('task.subscription.subscribedTaskThroughParentList')
 		}
 
 		return ''
 	}
 
 	switch (props.entity) {
-		case 'project':
+		case 'namespace':
 			return props.modelValue !== null ?
-				t('task.subscription.subscribedProject') :
-				t('task.subscription.notSubscribedProject')
+				t('task.subscription.subscribedNamespace') :
+				t('task.subscription.notSubscribedNamespace')
+		case 'list':
+			return props.modelValue !== null ?
+				t('task.subscription.subscribedList') :
+				t('task.subscription.notSubscribedList')
 		case 'task':
 			return props.modelValue !== null ?
 				t('task.subscription.subscribedTask') :
@@ -120,8 +130,11 @@ async function subscribe() {
 
 	let message = ''
 	switch (props.entity) {
-		case 'project':
-			message = t('task.subscription.subscribeSuccessProject')
+		case 'namespace':
+			message = t('task.subscription.subscribeSuccessNamespace')
+			break
+		case 'list':
+			message = t('task.subscription.subscribeSuccessList')
 			break
 		case 'task':
 			message = t('task.subscription.subscribeSuccessTask')
@@ -140,8 +153,11 @@ async function unsubscribe() {
 
 	let message = ''
 	switch (props.entity) {
-		case 'project':
-			message = t('task.subscription.unsubscribeSuccessProject')
+		case 'namespace':
+			message = t('task.subscription.unsubscribeSuccessNamespace')
+			break
+		case 'list':
+			message = t('task.subscription.unsubscribeSuccessList')
 			break
 		case 'task':
 			message = t('task.subscription.unsubscribeSuccessTask')

src/components/misc/user.vue

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