fix: correctly resolve kanban board in the background when moving a task

Resolves F-951

.drone.yml

@@ -42,11 +42,12 @@ steps:
 #        - .cache
 
   - name: dependencies
-    image: node:18-alpine
+    image: node:20-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
       CYPRESS_CACHE_FOLDER: .cache/cypress
+      PUPPETEER_SKIP_DOWNLOAD: true
     commands:
       - corepack enable && pnpm config set store-dir .cache/pnpm
       - pnpm install --fetch-timeout 100000
@@ -54,7 +55,7 @@ steps:
 #      - restore-cache
 
   - name: lint
-    image: node:18-alpine
+    image: node:20-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
@@ -65,7 +66,7 @@ steps:
       - dependencies
 
   - name: build-prod
-    image: node:18-alpine
+    image: node:20-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
@@ -76,7 +77,7 @@ steps:
       - dependencies
 
   - name: test-unit
-    image: node:18-alpine
+    image: node:20-alpine
     pull: always
     commands:
       - corepack enable && pnpm config set store-dir .cache/pnpm
@@ -86,7 +87,7 @@ steps:
 
   - name: typecheck
     failure: ignore
-    image: node:18-alpine
+    image: node:20-alpine
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
@@ -136,8 +137,9 @@ steps:
 #      - dependencies
 
   - name: deploy-preview
-    image: node:18-alpine
+    image: williamjackson/netlify-cli
     pull: always
+    user: root # The rest runs as root and thus the permissions wouldn't work
     environment:
       NETLIFY_AUTH_TOKEN:
         from_secret: netlify_auth_token
@@ -200,10 +202,14 @@ steps:
 #        - .cache
 
   - name: build
-    image: node:18-alpine
+    image: node:20-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
@@ -277,10 +283,14 @@ steps:
 #        - .cache
 
   - name: build
-    image: node:18-alpine
+    image: node:20-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
@@ -347,8 +357,7 @@ type: docker
 name: docker-release
 
 depends_on:
-  - release-latest
-  - release-version
+  - build
 
 trigger:
   ref:
@@ -376,8 +385,7 @@ steps:
       repo: vikunja/frontend
       tags: unstable
       build_args:
-        - USE_RELEASE=true
-        - RELEASE_VERSION=unstable
+        - USE_RELEASE=false
       platforms:
         - linux/386
         - linux/amd64
@@ -411,8 +419,7 @@ steps:
         from_secret: docker_password
       repo: vikunja/frontend
       build_args:
-        - USE_RELEASE=true
-        - RELEASE_VERSION=${DRONE_TAG##v}
+        - USE_RELEASE=false
       platforms:
         - linux/386
         - linux/amd64
@@ -522,6 +529,6 @@ steps:
         from_secret: crowdin_key
 ---
 kind: signature
-hmac: 303afeb09b75a57ba88720b45dc06c8bf2c7320e19d738d8299f325438246f75
+hmac: 6a566550cac03e9f3f9bbccab95fda4b342233bd63a1409cb5f634b1c744c326
 
 ...

.nvmrc

@@ -1 +1 @@
-18.15.0
+18.16.1

.vscode.example/extensions.json

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

CHANGELOG.md

@@ -9,6 +9,743 @@ All releases can be found on https://code.vikunja.io/frontend/releases.
 
 The releases aim at the api versions which is why there are missing versions.
 
+## [0.21.0] - 2023-07-07
+
+### Bug Fixes
+
+* *(Expandable)* Spelling
+* *(building)* Let the compiler ignore props interface
+* *(ci)* Always pull latest unstable api image for testing
+* *(ci)* Directly build docker images and not use releases to avoid caching issues
+* *(ci)* Disable puppeteer chrome download
+* *(docker)* Copy patches prior to installing dependencies so that the installation actually works
+* *(docker)* Don't set nginx worker rlimit
+* *(filters)* Load projects after creating a filter
+* *(filters)* Load projects after deleting a filter
+* *(filters)* Load projects after updating a filter
+* *(gantt)* Only update today value when changing to the gantt chart view
+* *(i18n)* OrderedList translationid
+* *(i18n)* Typo
+* *(kanban)* Decrease task count per bucket when deleting a task
+* *(kanban)* Don't export buckets as readonly because that makes it impossible to update them, even from within the store
+* *(link share)* Default share view should be list, not project
+* *(link share)* Redirect to list view after authenticating
+* *(navigation)* Favorites project
+* *(navigation)* Hide archived subprojects
+* *(navigation)* Hide left ul border
+* *(navigation)* Highlight saved filters in project view and prevent them from being dragged around
+* *(navigation)* Hover state of other menu items
+* *(navigation)* Make marking a project as favorite work
+* *(navigation)* Make sure the Favorites project shows up when marking or unmarking a task as favorite
+* *(navigation)* Make sure updating a project's state works for sub projects as well.
+* *(navigation)* Make the styles work again
+* *(navigation)* Menu item overflow
+* *(navigation)* Nav item width for items without sub projects
+* *(navigation)* Show text ellipsis for very long project titles
+* *(navigation)* Sidebar top spacing
+* *(navigation)* Watcher
+* *(project)* Correctly load background when switching from or to a project view
+* *(project)* Don't try to read title of undefined project
+* *(project)* Duplicate a project without new parent
+* *(project)* Make sure the correct tasks are loaded when switching between projects
+* *(project)* Set maxRight on projects after opening a task
+* *(projects)* Make sure the project hierarchy is properly updated when moving projects between parents
+* *(projects)* Update project duplicate api definitions
+* *(quick add magic)* Cleanup all assignee properties
+* *(quick add magic)* Date parsing with a date at the beginning
+* *(quick add magic)* Don't replace the prefix in every occurrence when it is present in the matched part
+* *(quick add magic)* Use the project user service to find assignees for quick add magic
+* *(reminders)* Align remove icon with the rest
+* *(reminders)* Assignment to const when changing a reminder
+* *(reminders)* Custom relative highlight now only when a custom relative reminder was actually selected
+* *(reminders)* Don't assigne the task
+* *(reminders)* Don't assume 30 days are always a month
+* *(reminders)* Don't sync negative relative reminder amounts in ui
+* *(reminders)* Duplicate reminder for each change
+* *(reminders)* Flatpickr styling improvements
+* *(reminders)* Properly parse relative reminders which don't have an amount
+* *(reminders)* Set date over relative reminder
+* *(reminders)* Style flatpickr so that it blends in more
+* *(repeat)* Prevent disappearing repeat mode settings when modes other than default repeat mode were selected
+* *(sentry)* Don't fail the build when sentry upload fails
+* *(sentry)* Use correct environment from vite env mode
+* *(settings)* Don't try to sort timezones if there are none
+* *(task detail view)* Make project display show the task's project
+* *(task)* Break long task titles after 4 lines only
+* *(task)* Call getting task identifier directly instead of using model function
+* *(task)* Make an attachment cover image
+* *(task)* Repeat mode now saves correctly
+* *(tests)* Make sure the task is created with a bucket
+* *(tests)* New project input field
+* *(tests)* Project archived filter checkbox selector
+* *(tests)* Wait for request instead of fixed time
+* *(user)* Fix flickering of default settings
+* *(user)* Lint* Fix comment
+* *(user)* Set the language when saving
+* Add await ([9d9fb95](9d9fb959d8f1c4a12110f1a988115116085b6aaf))
+* Add default for level ([9402344](9402344b7ea70359c592412b6c341897e45c6069))
+* Add interval to uses of useNow so that it uses less resources ([b77c7c2](b77c7c2f45495a0fe6d132b5f569e807074c6d12))
+* Add more padding to the textarea ([dfa6cd7](dfa6cd777bc5d03cf88d62db9008aa0b366aa806))
+* Add spacing between checkbox and title of related task ([62825d2](62825d2e6409e08ab3229bf693ed068198e18085))
+* Allow icon changes configuration via env (#3567) ([57218d1](57218d14548bf1d4cd59f6976e84cf178023305d))
+* Avoid crashing browser processes during tests ([7b05ed9](7b05ed9d3d24e07a6535f2462d215c47b6650be1))
+* Bottom margin of project header ([1a94496](1a9449680114212eeb93be2aba3f10c416f67e78))
+* Bubble changes from the editor immediately and move the delay to callers ([f4a7943](f4a79436809d13e1d2c5337f79358c15310d08d2))
+* Checkbox label size based on icon ([fd699ad](fd699ad777c47764b35345b7ec18a854957ff5d1))
+* Clarify user search setting ([ae025e3](ae025e30c659d43cce1e3f8361bd1c4c7cb860da))
+* Cleanup unused translation strings ([aaa9d55](aaa9d553d080a83a9fd1bcdece366fb5832831f1))
+* Collapsing child projects ([2250918](225091864f9088a07120cd3d36918f3060d57d30))
+* Correctly sync filters on upcoming tasks page ([faa6298](faa62985dff877afc54c3510be8d27d493717780))
+* Disable autocomplete in assignee search ([64f9f4f](64f9f4fd88a513cbc401aacbeab87695bb9f55bf))
+* Don't allow creating a new label from filter view ([4c969f0](4c969f0a427e98b491c49646aaf19e19cf9ec924))
+* Don't require variant prop on loading component as it already has a default one set ([01ac84c](01ac84ce1eda1de79fd752792115a71cb5c15698))
+* Don't set the current project when setting a project ([31b7c1f](31b7c1f217532bf388ba95a03f469508bee46f6a))
+* Don't show > for top-level projects ([03f4d0b](03f4d0b8bcba90b19302d6c6d2fbb92460b59957))
+* Don't show child projects when the project is only a favorite ([0a17df8](0a17df87e950b8043578dbb7e9f12d5937802169))
+* Don't try to convert a null date ([4ba02eb](4ba02ebbb6be4b96a42688b3ec8f29fe923aee0b))
+* Don't try to map data from empty responses ([a118580](a11858070496614c492da321fe461b72c31afe5a))
+* Don't try to map non-array data ([813d2b5](813d2b56a06cbd28a1bf0d01b64685a1b49188d0))
+* Don't try to set a user language if none is saved ([68fd469](68fd4698ac443345dc7dbbf8cfebf76ec467b6ec))
+* Don't try to set config from non-json responses ([7c1934a](7c1934aad0e5fcd0f785896d57efc34c6df935cd))
+* Ensure all matched quick add magic parts are correctly removed from the task ([7b6a13d](7b6a13dd52dfa06e6093ae30adad1b86b66610e1))
+* Ensure same protocol for configured api url (#3303) ([6c999ad](6c999ad14844b4f9ec74dc225895db6a12e4a781))
+* Follow the happy path ([34182b8](34182b8bbb7a7e8eeb0ce698dc6da79785d05fc9))
+* Force usage of @types for flexsearch instead of integrated types ([f60cebf](f60cebf42cb73d9fd2d9fea8de5bbeb96a724d47))
+* Has-pseudo-class polyfill ([4703f9c](4703f9c4d5e3902d0fc389d447aa9a7da2e2dd4a))
+* Ignore ts deprecations for now ([96e2c81](96e2c81b7ef2b7a0ff515dd01d9aeb28429cc0d5))
+* Improve projectView storing and add migration ([842f204](842f204123afc3b9b4633b68de58cffb3af4f912))
+* Improve the "pop" sound a bit ([3643ffe](3643ffe0d0357c89cb3517fafbb0c438188ac88d))
+* Improve tooltip icon contrast ([a6cdf6c](a6cdf6c4bdceb1168f20e9d049c2e66f40c98aa1))
+* Improve tooltip text ([2174608](21746088012f4fe0f750ed5e5cac916d506fb17b))
+* Increase default auto-save timeout to 5 seconds ([f7ba3bd](f7ba3bd08fa9181180f99f4e5ebd5ec916fbcf19))
+* Indention ([e25273d](e25273df4899867ee146159d3d18125d387f8524))
+* Lint ([292c904](292c90425ef96b99671702a0b28d87d660fa53dc))
+* Lint ([4ff0c81](4ff0c81e373696b0505c2c080d558a20071562f3))
+* Lint ([5d59392](5d593925666a09cbfda2f62577deb670033f93fb))
+* Lint ([9ec29ca](9ec29cad300fe1c25cb355fb86e165ca920df511))
+* Lint ([c294f9d](c294f9d28d3e793f8151265d5a16ed2fc53aea92))
+* Lint ([c74612f](c74612f24adeb4aceafe9fc9b3264b1dfe84d128))
+* Lint ([cd2b7fe](cd2b7fe185632253290838e405b8a2666b15ce24))
+* Lint ([ed8de7e](ed8de7e3eb78f6723d5f675cca18c014b252ed64))
+* List view: don't sort tasks after marking one "done" (#3285) ([6870db4](6870db4a72568f183134a6dd2d4af687dd7c839d))
+* Load the correct language ([6593380](6593380013ff6043b846126ac67e6f96442a1c5b))
+* Make check if projects are available work again ([5e65814](5e65814b8c5b37f3962856f2809f7cc85756da1e))
+* Make computed side-effect free ([26bec05](26bec0517417afc52db93f0fdc4c48d47ed5c131))
+* Make sure redirects to a saved view work as intended ([a64c0c1](a64c0c19e5a7da36ae4993fce443e4f37e3a4572))
+* Make sure the unread notifications indicator is correctly positioned ([8b90b45](8b90b45739418f447b885fc9b37438e325f61b32))
+* Make tests work again ([5685890](56858904938126dbfa8ade2e88e3ec6c4fff3a6f))
+* Make type singular ([bc416f2](bc416f282f13d2b81782aba4b0d68b71f26c83e8))
+* Make update available button use the correct text color all the time ([ae2b0f9](ae2b0f97c4bb50d4ff493af2af132f9740d16d49))
+* Missing await ([391992e](391992effbb424a107ff060e7175884740a28c62))
+* Missing variant prop for loading component ([2e9ade1](2e9ade11c3a3b6cb531d053f82a598a5ab851a93))
+* Move parent project child id mutation to store ([26e3d42](26e3d42ed527afd6bf695ba3ad291e1c2b545bba))
+* Move parent project handling out of useProject ([ba452ab](ba452ab88339b9ace987f1a18584a7950e00a776))
+* Move the collapsable placeholder to the button ([1344026](1344026494fe47ac5604bff07b537a2765e840f6))
+* Move types to dev dependencies ([739fe0c](739fe0caa13dc946e1801f290d8ab5f18cdc5faf))
+* Only bind child projects data down ([3eca9f6](3eca9f6180e64f892e94d27eaa192cea780563a0))
+* Only update daytime salutation when switching to home view ([c577626](c5776264c069000efbb62c64dfc2143d5fc4e0df))
+* Passing readonly projects data to navigation ([d85be26](d85be26761240164b6bdcbe0601b46585b74fafa))
+* Properly determine if there are projects ([a2cc9dd](a2cc9ddc8821a4b9b1ee1dd6109d1b3958a06ba6))
+* Rebase readd CustomTransition ([b93639e](b93639e14ecab06496086c3d2cc14f51d8f9f672))
+* Recreate project instead of editing before ([175e31c](175e31ca629660d8d683b35b8e7c8052a62cd17d))
+* Redundant ) ([6c2dc48](6c2dc483a20213f1f238e6224b9ecfb87faa2461))
+* Remove getProjectById and replace all usages of it ([78158bc](78158bcba52d152a2ebf465242e25a55e6764470))
+* Remove leftover suspense ([9d73ac6](9d73ac661fbf9315995c8a1f633708021591d2db))
+* Remove leftovers of childIds ([bbaddb9](bbaddb9406910106b7d476a6550acff025e72655))
+* Remove namespace routes ([10311b7](10311b79df36db44a8e96a446234c3c6d6aa6ec7))
+* Remove namespace store reference ([ad2690b](ad2690b21cfc9ccc658737a726cc6b110089b635))
+* Remove unnecessary fallback ([d414b65](d414b65e7d591f567067ce8085b9934207dc938a))
+* Rename getParentProjects method to make it clear what it does ([39f699a](39f699a61ae91eb93c364137f76b595e7cad7561))
+* Rename list to project for parsing subtasks via indention ([fc8711d](fc8711d6d841d11847cd8567999373145ce3398d))
+* Rename resolveRef ([f14e721](f14e721caf9434ac119f32c5e7f107bfbdd6746c))
+* Return redirect ([7c964c2](7c964c29d487b5bcd2c125f81731e3b37374641a))
+* Return updated project instead of the old one ([4ab5478](4ab547810c77e747e701ea865c13157d51aba461))
+* Review findings ([5fb45af](5fb45afb12479eb135323299409bd91d8be24e39))
+* Review findings ([85ffed4](85ffed4d9a26fc054fee51608bb83ccf2e3032f9))
+* Review findings ([fb14eca](fb14eca6340ac4c761b8f61027662328bf55ade4))
+* Route to create new project ([a5e710b](a5e710bfe594e06262b9ef46fa6b56ad637b8156))
+* Set and use correct type for destructured props ([dbe1ad9](dbe1ad9353e165fd1e314cc72c7a4dece1c47d38))
+* Set vue-ignore ([b6cd424](b6cd424aa30be3bd715c0b7555032fc80149ae7b))
+* Show favorite on hover ([0be83db](0be83db40fa96478bfdb4a69e8a995d6debb6f52))
+* Simplify sort ([85e882c](85e882cc5940067414004dabd01916f559fbd0ff))
+* Sort in store ([46e8258](46e825820c465ebb9f8087e3afe6d74fad8d5159))
+* SortBy type import ([d73b71a](d73b71a097755cdb075955a824c26bbaba222aaf))
+* Spacing ([9162002](9162002e55d9ebfd0a6c8dbe28aab0c15f95b7e2))
+* Style: "favorite" button being shown on projects without hovering ([ee4974a](ee4974a4948012b03adcedd956c0d907c57431c9))
+* Switching to view type now ([060a573](060a573fe9006441131fd98c4618c5d294cf39b7))
+* Tests ([69e94e5](69e94e58c451a5115c713696798f8fcbf8f787b3))
+* Translation string ([f13db92](f13db9268a8862204522a8d68ad7b51edb9d91e1))
+* Tsconfig as per https://github.com/vuejs/tsconfig#configuration-for-node-environments ([05b7063](05b70632c55ce34ee6471cc372334fc6e14c99a0))
+* Tsconfig as per https://github.com/vuejs/tsconfig#configuration-for-node-environments ([ca9fe6f](ca9fe6ff215351c3f4c8de65a333f5cfd5876488))
+* Undefined parent project when none was selected ([6cc11e6](6cc11e64ab392f8e8e69070000a748c04746e550))
+* Undo further nesting of interactive items ([0acf447](0acf44778d0ab2a317bcfb3e89aa0292e2d5c2ed))
+* Update logo change only every hour ([7126576](71265769cefb91be9a51fceff0a04095a9dd7e72))
+* Use correct shortcut to open projects overview ([326b6ed](326b6eda6fce6554ea6e215c681466374657902a))
+* Use menu tag everywhere ([0dd6f82](0dd6f82a0e198056724821c2bb56c6b9807ea451))
+* Use onActivated ([a33fb72](a33fb72ef86112c6f29017bb951ff4e1ee611ed6))
+* Use props destructuring everywhere ([3aa502e](3aa502e07d89314e885c252e1e3d4668fa64059b))
+* Use strict comparison ([91e9eef](91e9eef5829d2a5ae27099fbd54029ed0ca46818))
+* Use the color bubble as handle if the project has a color ([4857080](48570808e55e51751734ddaf4532ad651920d622))
+* Use time constant ([a13c16c](a13c16ca03698a24860f8453cdb231c420d0077b))
+* Wording ([985f998](985f998a821229d03c7d40d1a81f7fbe5121d585))
+
+
+### Dependencies
+
+* *(deps)* Install dependencies after rebase
+* *(deps)* Pin dependency @tsconfig/node18 to 2.0.0
+* *(deps)* Update all dev dependencies at once per day
+* *(deps)* Update caniuse-and-related
+* *(deps)* Update caniuse-and-related
+* *(deps)* Update dependency @4tw/cypress-drag-drop to v2.2.4
+* *(deps)* Update dependency @cypress/vite-dev-server to v5.0.5
+* *(deps)* Update dependency @cypress/vue to v5.0.5
+* *(deps)* Update dependency @faker-js/faker to v8
+* *(deps)* Update dependency @faker-js/faker to v8.0.1
+* *(deps)* Update dependency @faker-js/faker to v8.0.2
+* *(deps)* Update dependency @intlify/unplugin-vue-i18n to v0.10.0
+* *(deps)* Update dependency @intlify/unplugin-vue-i18n to v0.11.0
+* *(deps)* Update dependency @intlify/unplugin-vue-i18n to v0.12.0
+* *(deps)* Update dependency @intlify/unplugin-vue-i18n to v0.12.1
+* *(deps)* Update dependency @intlify/unplugin-vue-i18n to v0.9.2
+* *(deps)* Update dependency @intlify/unplugin-vue-i18n to v0.9.3
+* *(deps)* Update dependency @kyvg/vue3-notification to v2.9.1
+* *(deps)* Update dependency @rushstack/eslint-patch to v1.3.0
+* *(deps)* Update dependency @rushstack/eslint-patch to v1.3.1
+* *(deps)* Update dependency @rushstack/eslint-patch to v1.3.2
+* *(deps)* Update dependency @tsconfig/node18 to v18
+* *(deps)* Update dependency @tsconfig/node18 to v2.0.1
+* *(deps)* Update dependency @types/codemirror to v5.60.8
+* *(deps)* Update dependency @types/dompurify to v3
+* *(deps)* Update dependency @types/dompurify to v3.0.1
+* *(deps)* Update dependency @types/dompurify to v3.0.2
+* *(deps)* Update dependency @types/marked to v4.3.0
+* *(deps)* Update dependency @types/marked to v4.3.1
+* *(deps)* Update dependency @types/marked to v5
+* *(deps)* Update dependency @types/node to v18.15.1
+* *(deps)* Update dependency @types/node to v18.15.10
+* *(deps)* Update dependency @types/node to v18.15.11
+* *(deps)* Update dependency @types/node to v18.15.12
+* *(deps)* Update dependency @types/node to v18.15.13
+* *(deps)* Update dependency @types/node to v18.15.2
+* *(deps)* Update dependency @types/node to v18.15.3
+* *(deps)* Update dependency @types/node to v18.15.5
+* *(deps)* Update dependency @types/node to v18.15.6
+* *(deps)* Update dependency @types/node to v18.15.7
+* *(deps)* Update dependency @types/node to v18.15.8
+* *(deps)* Update dependency @types/node to v18.15.9
+* *(deps)* Update dependency @types/node to v18.16.0
+* *(deps)* Update dependency @types/node to v18.16.1
+* *(deps)* Update dependency @types/node to v18.16.10
+* *(deps)* Update dependency @types/node to v18.16.11
+* *(deps)* Update dependency @types/node to v18.16.14
+* *(deps)* Update dependency @types/node to v18.16.16
+* *(deps)* Update dependency @types/node to v18.16.17
+* *(deps)* Update dependency @types/node to v18.16.18
+* *(deps)* Update dependency @types/node to v18.16.19
+* *(deps)* Update dependency @types/node to v18.16.2
+* *(deps)* Update dependency @types/node to v18.16.3
+* *(deps)* Update dependency @types/node to v18.16.4
+* *(deps)* Update dependency @types/node to v18.16.5
+* *(deps)* Update dependency @types/node to v18.16.6
+* *(deps)* Update dependency @types/node to v18.16.7
+* *(deps)* Update dependency @types/node to v18.16.8
+* *(deps)* Update dependency @types/node to v18.16.9
+* *(deps)* Update dependency @types/sortablejs to v1.15.1
+* *(deps)* Update dependency @vitejs/plugin-legacy to v4.0.2
+* *(deps)* Update dependency @vitejs/plugin-legacy to v4.0.3
+* *(deps)* Update dependency @vitejs/plugin-legacy to v4.0.4
+* *(deps)* Update dependency @vitejs/plugin-legacy to v4.0.5
+* *(deps)* Update dependency @vitejs/plugin-vue to v4.1.0
+* *(deps)* Update dependency @vitejs/plugin-vue to v4.2.0
+* *(deps)* Update dependency @vitejs/plugin-vue to v4.2.1
+* *(deps)* Update dependency @vitejs/plugin-vue to v4.2.2
+* *(deps)* Update dependency @vitejs/plugin-vue to v4.2.3
+* *(deps)* Update dependency @vue/eslint-config-typescript to v11.0.3
+* *(deps)* Update dependency @vue/test-utils to v2.3.2
+* *(deps)* Update dependency @vue/test-utils to v2.4.0
+* *(deps)* Update dependency @vue/tsconfig to v0.3.2
+* *(deps)* Update dependency @vue/tsconfig to v0.4.0
+* *(deps)* Update dependency @vueuse/core to v10
+* *(deps)* Update dependency @vueuse/core to v10.0.2
+* *(deps)* Update dependency @vueuse/core to v10.1.0
+* *(deps)* Update dependency @vueuse/core to v10.1.2
+* *(deps)* Update dependency @vueuse/core to v10.2.0
+* *(deps)* Update dependency @vueuse/core to v10.2.1
+* *(deps)* Update dependency axios to v1.3.5
+* *(deps)* Update dependency axios to v1.3.6
+* *(deps)* Update dependency axios to v1.4.0
+* *(deps)* Update dependency caniuse-lite to v1.0.30001465
+* *(deps)* Update dependency caniuse-lite to v1.0.30001468
+* *(deps)* Update dependency caniuse-lite to v1.0.30001470
+* *(deps)* Update dependency caniuse-lite to v1.0.30001473
+* *(deps)* Update dependency caniuse-lite to v1.0.30001477
+* *(deps)* Update dependency caniuse-lite to v1.0.30001479
+* *(deps)* Update dependency caniuse-lite to v1.0.30001481
+* *(deps)* Update dependency caniuse-lite to v1.0.30001486
+* *(deps)* Update dependency caniuse-lite to v1.0.30001487
+* *(deps)* Update dependency caniuse-lite to v1.0.30001489
+* *(deps)* Update dependency caniuse-lite to v1.0.30001500
+* *(deps)* Update dependency caniuse-lite to v1.0.30001508
+* *(deps)* Update dependency caniuse-lite to v1.0.30001511
+* *(deps)* Update dependency codemirror to v5.65.13
+* *(deps)* Update dependency css-has-pseudo to v6
+* *(deps)* Update dependency csstype to v3.1.2
+* *(deps)* Update dependency cypress to v12.10.0
+* *(deps)* Update dependency cypress to v12.11.0
+* *(deps)* Update dependency cypress to v12.12.0
+* *(deps)* Update dependency cypress to v12.13.0
+* *(deps)* Update dependency cypress to v12.14.0
+* *(deps)* Update dependency cypress to v12.15.0
+* *(deps)* Update dependency cypress to v12.16.0
+* *(deps)* Update dependency cypress to v12.8.0
+* *(deps)* Update dependency cypress to v12.8.1
+* *(deps)* Update dependency cypress to v12.9.0
+* *(deps)* Update dependency date-fns to v2.30.0
+* *(deps)* Update dependency dayjs to v1.11.8
+* *(deps)* Update dependency dayjs to v1.11.9
+* *(deps)* Update dependency dompurify to v3.0.2
+* *(deps)* Update dependency dompurify to v3.0.3
+* *(deps)* Update dependency dompurify to v3.0.4
+* *(deps)* Update dependency esbuild to v0.17.12
+* *(deps)* Update dependency esbuild to v0.17.13
+* *(deps)* Update dependency esbuild to v0.17.14
+* *(deps)* Update dependency esbuild to v0.17.15
+* *(deps)* Update dependency esbuild to v0.17.16
+* *(deps)* Update dependency esbuild to v0.17.17
+* *(deps)* Update dependency esbuild to v0.17.18
+* *(deps)* Update dependency esbuild to v0.17.19
+* *(deps)* Update dependency esbuild to v0.18.0
+* *(deps)* Update dependency esbuild to v0.18.1
+* *(deps)* Update dependency esbuild to v0.18.10
+* *(deps)* Update dependency esbuild to v0.18.11
+* *(deps)* Update dependency esbuild to v0.18.2
+* *(deps)* Update dependency esbuild to v0.18.3
+* *(deps)* Update dependency esbuild to v0.18.4
+* *(deps)* Update dependency esbuild to v0.18.5
+* *(deps)* Update dependency esbuild to v0.18.6
+* *(deps)* Update dependency esbuild to v0.18.9
+* *(deps)* Update dependency eslint to v8.37.0
+* *(deps)* Update dependency eslint to v8.38.0
+* *(deps)* Update dependency eslint to v8.39.0
+* *(deps)* Update dependency eslint to v8.40.0
+* *(deps)* Update dependency eslint to v8.41.0
+* *(deps)* Update dependency eslint to v8.42.0
+* *(deps)* Update dependency eslint to v8.43.0
+* *(deps)* Update dependency eslint to v8.44.0
+* *(deps)* Update dependency eslint-plugin-vue to v9.10.0
+* *(deps)* Update dependency eslint-plugin-vue to v9.11.0
+* *(deps)* Update dependency eslint-plugin-vue to v9.11.1
+* *(deps)* Update dependency eslint-plugin-vue to v9.12.0
+* *(deps)* Update dependency eslint-plugin-vue to v9.13.0
+* *(deps)* Update dependency flexsearch to v0.7.31
+* *(deps)* Update dependency floating-vue to v2.0.0-beta.21
+* *(deps)* Update dependency floating-vue to v2.0.0-beta.22
+* *(deps)* Update dependency floating-vue to v2.0.0-beta.24
+* *(deps)* Update dependency happy-dom to v9
+* *(deps)* Update dependency happy-dom to v9.1.9
+* *(deps)* Update dependency happy-dom to v9.10.1
+* *(deps)* Update dependency happy-dom to v9.10.9
+* *(deps)* Update dependency happy-dom to v9.18.3
+* *(deps)* Update dependency happy-dom to v9.20.1
+* *(deps)* Update dependency happy-dom to v9.20.3
+* *(deps)* Update dependency happy-dom to v9.7.1
+* *(deps)* Update dependency happy-dom to v9.9.2
+* *(deps)* Update dependency highlight.js to v11.8.0
+* *(deps)* Update dependency histoire to v0.16.2
+* *(deps)* Update dependency marked to v4.3.0
+* *(deps)* Update dependency marked to v5
+* *(deps)* Update dependency marked to v5.0.1
+* *(deps)* Update dependency marked to v5.0.2
+* *(deps)* Update dependency marked to v5.0.3
+* *(deps)* Update dependency marked to v5.0.4
+* *(deps)* Update dependency marked to v5.0.5
+* *(deps)* Update dependency marked to v5.1.0
+* *(deps)* Update dependency netlify-cli to v13.1.2
+* *(deps)* Update dependency netlify-cli to v13.1.6
+* *(deps)* Update dependency netlify-cli to v13.2.1
+* *(deps)* Update dependency netlify-cli to v13.2.2
+* *(deps)* Update dependency netlify-cli to v14
+* *(deps)* Update dependency netlify-cli to v14.3.1
+* *(deps)* Update dependency pinia to v2.0.34
+* *(deps)* Update dependency pinia to v2.0.35
+* *(deps)* Update dependency pinia to v2.0.36
+* *(deps)* Update dependency pinia to v2.1.4
+* *(deps)* Update dependency postcss to v8.4.22
+* *(deps)* Update dependency postcss to v8.4.23
+* *(deps)* Update dependency postcss to v8.4.24
+* *(deps)* Update dependency postcss-preset-env to v8.1.0
+* *(deps)* Update dependency postcss-preset-env to v8.2.0
+* *(deps)* Update dependency postcss-preset-env to v8.3.0
+* *(deps)* Update dependency postcss-preset-env to v8.3.1
+* *(deps)* Update dependency postcss-preset-env to v8.3.2
+* *(deps)* Update dependency postcss-preset-env to v8.4.1
+* *(deps)* Update dependency postcss-preset-env to v8.4.2
+* *(deps)* Update dependency postcss-preset-env to v8.5.0
+* *(deps)* Update dependency postcss-preset-env to v8.5.1
+* *(deps)* Update dependency rollup to v3.20.0
+* *(deps)* Update dependency rollup to v3.20.1
+* *(deps)* Update dependency rollup to v3.20.2
+* *(deps)* Update dependency rollup to v3.20.3
+* *(deps)* Update dependency rollup to v3.20.4
+* *(deps)* Update dependency rollup to v3.20.5
+* *(deps)* Update dependency rollup to v3.20.6
+* *(deps)* Update dependency rollup to v3.20.7
+* *(deps)* Update dependency rollup to v3.21.0
+* *(deps)* Update dependency rollup to v3.21.1
+* *(deps)* Update dependency rollup to v3.21.2
+* *(deps)* Update dependency rollup to v3.21.3
+* *(deps)* Update dependency rollup to v3.21.4
+* *(deps)* Update dependency rollup to v3.21.5
+* *(deps)* Update dependency rollup to v3.21.6
+* *(deps)* Update dependency rollup to v3.21.7
+* *(deps)* Update dependency rollup to v3.21.8
+* *(deps)* Update dependency rollup to v3.22.0
+* *(deps)* Update dependency rollup to v3.23.0
+* *(deps)* Update dependency rollup to v3.23.1
+* *(deps)* Update dependency rollup to v3.24.0
+* *(deps)* Update dependency rollup to v3.24.1
+* *(deps)* Update dependency rollup to v3.25.0
+* *(deps)* Update dependency rollup to v3.25.1
+* *(deps)* Update dependency rollup to v3.25.2
+* *(deps)* Update dependency rollup to v3.25.3
+* *(deps)* Update dependency rollup to v3.26.0
+* *(deps)* Update dependency rollup-plugin-visualizer to v5.9.2
+* *(deps)* Update dependency sass to v1.59.3
+* *(deps)* Update dependency sass to v1.60.0
+* *(deps)* Update dependency sass to v1.61.0
+* *(deps)* Update dependency sass to v1.62.0
+* *(deps)* Update dependency sass to v1.62.1
+* *(deps)* Update dependency sass to v1.63.0
+* *(deps)* Update dependency sass to v1.63.2
+* *(deps)* Update dependency sass to v1.63.3
+* *(deps)* Update dependency sass to v1.63.4
+* *(deps)* Update dependency sass to v1.63.5
+* *(deps)* Update dependency sass to v1.63.6
+* *(deps)* Update dependency typescript to v5
+* *(deps)* Update dependency typescript to v5.0.3
+* *(deps)* Update dependency typescript to v5.0.4
+* *(deps)* Update dependency typescript to v5.1.3
+* *(deps)* Update dependency typescript to v5.1.5
+* *(deps)* Update dependency typescript to v5.1.6
+* *(deps)* Update dependency ufo to v1.1.2
+* *(deps)* Update dependency vite to v4.2.0
+* *(deps)* Update dependency vite to v4.2.1
+* *(deps)* Update dependency vite to v4.2.2
+* *(deps)* Update dependency vite to v4.3.0
+* *(deps)* Update dependency vite to v4.3.1
+* *(deps)* Update dependency vite to v4.3.2
+* *(deps)* Update dependency vite to v4.3.3
+* *(deps)* Update dependency vite to v4.3.4
+* *(deps)* Update dependency vite to v4.3.5
+* *(deps)* Update dependency vite to v4.3.6
+* *(deps)* Update dependency vite to v4.3.7
+* *(deps)* Update dependency vite to v4.3.8
+* *(deps)* Update dependency vite to v4.3.9
+* *(deps)* Update dependency vite-plugin-pwa to v0.14.5
+* *(deps)* Update dependency vite-plugin-pwa to v0.14.6
+* *(deps)* Update dependency vite-plugin-pwa to v0.14.7
+* *(deps)* Update dependency vite-plugin-pwa to v0.15.0
+* *(deps)* Update dependency vite-plugin-pwa to v0.15.1
+* *(deps)* Update dependency vite-plugin-pwa to v0.15.2
+* *(deps)* Update dependency vite-plugin-pwa to v0.16.1
+* *(deps)* Update dependency vite-plugin-pwa to v0.16.3
+* *(deps)* Update dependency vite-plugin-pwa to v0.16.4
+* *(deps)* Update dependency vite-plugin-sentry to v1.3.0
+* *(deps)* Update dependency vitest to v0.29.3
+* *(deps)* Update dependency vitest to v0.29.4
+* *(deps)* Update dependency vitest to v0.29.5
+* *(deps)* Update dependency vitest to v0.29.7
+* *(deps)* Update dependency vitest to v0.29.8
+* *(deps)* Update dependency vitest to v0.30.0
+* *(deps)* Update dependency vitest to v0.30.1
+* *(deps)* Update dependency vitest to v0.31.0
+* *(deps)* Update dependency vitest to v0.31.1
+* *(deps)* Update dependency vitest to v0.31.2
+* *(deps)* Update dependency vitest to v0.31.4
+* *(deps)* Update dependency vitest to v0.32.0
+* *(deps)* Update dependency vitest to v0.32.1
+* *(deps)* Update dependency vitest to v0.32.2
+* *(deps)* Update dependency vitest to v0.32.3
+* *(deps)* Update dependency vue to v3.3.4
+* *(deps)* Update dependency vue to v3.3.4
+* *(deps)* Update dependency vue-flatpickr-component to v11.0.3
+* *(deps)* Update dependency vue-router to v4.2.0
+* *(deps)* Update dependency vue-router to v4.2.1
+* *(deps)* Update dependency vue-router to v4.2.2
+* *(deps)* Update dependency vue-router to v4.2.3
+* *(deps)* Update dependency vue-router to v4.2.4
+* *(deps)* Update dependency vue-tsc to v1.4.0
+* *(deps)* Update dependency vue-tsc to v1.4.1
+* *(deps)* Update dependency vue-tsc to v1.4.2
+* *(deps)* Update dependency vue-tsc to v1.4.3
+* *(deps)* Update dependency vue-tsc to v1.4.4
+* *(deps)* Update dependency vue-tsc to v1.6.0
+* *(deps)* Update dependency vue-tsc to v1.6.1
+* *(deps)* Update dependency vue-tsc to v1.6.2
+* *(deps)* Update dependency vue-tsc to v1.6.3
+* *(deps)* Update dependency vue-tsc to v1.6.4
+* *(deps)* Update dependency vue-tsc to v1.6.5
+* *(deps)* Update dependency vue-tsc to v1.8.0
+* *(deps)* Update dependency vue-tsc to v1.8.1
+* *(deps)* Update dependency vue-tsc to v1.8.2
+* *(deps)* Update dependency vue-tsc to v1.8.3
+* *(deps)* Update dev-dependencies
+* *(deps)* Update dev-dependencies
+* *(deps)* Update dev-dependencies
+* *(deps)* Update dev-dependencies
+* *(deps)* Update dev-dependencies
+* *(deps)* Update flake
+* *(deps)* Update font awesome to v6.4.0
+* *(deps)* Update histoire to v0.15.9
+* *(deps)* Update histoire to v0.16.0
+* *(deps)* Update histoire to v0.16.1
+* *(deps)* Update lockfile
+* *(deps)* Update node.js to v18.16.0
+* *(deps)* Update node.js to v18.16.1
+* *(deps)* Update node.js to v20 (#3411)
+* *(deps)* Update pnpm to v7.29.3
+* *(deps)* Update pnpm to v7.30.0
+* *(deps)* Update pnpm to v7.30.1
+* *(deps)* Update pnpm to v7.30.2
+* *(deps)* Update pnpm to v7.30.3
+* *(deps)* Update pnpm to v7.30.5
+* *(deps)* Update pnpm to v7.31.0
+* *(deps)* Update pnpm to v7.32.0
+* *(deps)* Update pnpm to v8
+* *(deps)* Update pnpm to v8.3.0
+* *(deps)* Update pnpm to v8.3.1
+* *(deps)* Update pnpm to v8.4.0
+* *(deps)* Update pnpm to v8.5.0
+* *(deps)* Update pnpm to v8.5.1
+* *(deps)* Update pnpm to v8.6.0
+* *(deps)* Update pnpm to v8.6.1
+* *(deps)* Update pnpm to v8.6.2
+* *(deps)* Update pnpm to v8.6.3
+* *(deps)* Update pnpm to v8.6.4
+* *(deps)* Update pnpm to v8.6.5
+* *(deps)* Update pnpm to v8.6.6
+* *(deps)* Update sentry-javascript monorepo to v7.43.0
+* *(deps)* Update sentry-javascript monorepo to v7.44.0
+* *(deps)* Update sentry-javascript monorepo to v7.44.1
+* *(deps)* Update sentry-javascript monorepo to v7.44.2
+* *(deps)* Update sentry-javascript monorepo to v7.45.0
+* *(deps)* Update sentry-javascript monorepo to v7.46.0
+* *(deps)* Update sentry-javascript monorepo to v7.47.0
+* *(deps)* Update sentry-javascript monorepo to v7.48.0
+* *(deps)* Update sentry-javascript monorepo to v7.49.0
+* *(deps)* Update sentry-javascript monorepo to v7.50.0
+* *(deps)* Update sentry-javascript monorepo to v7.51.0
+* *(deps)* Update sentry-javascript monorepo to v7.51.2
+* *(deps)* Update sentry-javascript monorepo to v7.52.0
+* *(deps)* Update sentry-javascript monorepo to v7.52.1
+* *(deps)* Update sentry-javascript monorepo to v7.53.0
+* *(deps)* Update sentry-javascript monorepo to v7.53.1
+* *(deps)* Update sentry-javascript monorepo to v7.54.0
+* *(deps)* Update sentry-javascript monorepo to v7.55.0
+* *(deps)* Update sentry-javascript monorepo to v7.55.2
+* *(deps)* Update sentry-javascript monorepo to v7.56.0
+* *(deps)* Update sentry-javascript monorepo to v7.57.0
+* *(deps)* Update typescript-eslint monorepo to v5.55.0
+* *(deps)* Update typescript-eslint monorepo to v5.56.0
+* *(deps)* Update typescript-eslint monorepo to v5.57.0
+* *(deps)* Update typescript-eslint monorepo to v5.57.1
+* *(deps)* Update typescript-eslint monorepo to v5.58.0
+* *(deps)* Update typescript-eslint monorepo to v5.59.0
+* *(deps)* Update typescript-eslint monorepo to v5.59.1
+* *(deps)* Update typescript-eslint monorepo to v5.59.11
+* *(deps)* Update typescript-eslint monorepo to v5.59.2
+* *(deps)* Update typescript-eslint monorepo to v5.59.5
+* *(deps)* Update typescript-eslint monorepo to v5.59.6
+* *(deps)* Update typescript-eslint monorepo to v5.59.7
+* *(deps)* Update typescript-eslint monorepo to v5.59.8
+* *(deps)* Update typescript-eslint monorepo to v5.59.9
+* *(deps)* Update typescript-eslint monorepo to v5.60.0
+* *(deps)* Update typescript-eslint monorepo to v5.60.1
+* *(deps)* Update workbox monorepo to v6.6.0 (#3548)
+* *(deps)* Update workbox monorepo to v6.6.1 (#3553)
+* *(deps)* Update workbox monorepo to v7 (major) (#3556)
+
+### Features
+
+* *(assignees)* Show user avatar in search results
+* *(datepicker)* Separate datepicker popup and datepicker logic in different components
+* *(i18n)* Enable Danish translation
+* *(i18n)* Enable Japanese translation
+* *(i18n)* Enable Spanish translation
+* *(i18n)* Use chinese name for chinese translation
+* *(kanban)* Use total task count from the api instead of manually calculating it per bucket
+* *(link share)* Add e2e tests for link share hash
+* *(navigation)* Add hiding child projects
+* *(navigation)* Allow dragging a project out from its parent project
+* *(navigation)* Correctly show child projects
+* *(navigation)* Make dragging a project to a parent work
+* *(navigation)* Make dragging a project under another project work
+* *(navigation)* Show favorite projects on top
+* *(projects)* Allow setting a saved filter for tasks shown on the overview page
+* *(projects)* Move hasProjects check to store
+* *(quick add magic)* Allow fuzzy matching of assignees when the api results are unambigous
+* *(reminders)* Add confirm button
+* *(reminders)* Add e2e tests for task reminders
+* *(reminders)* Add more spacing
+* *(reminders)* Add on the due / start / end date as a reminder preset
+* *(reminders)* Add preset two hours before due / start / end date
+* *(reminders)* Add proper time picker for relative dates
+* *(reminders)* Highlight which preset or custom date is selected
+* *(reminders)* Make adding new reminders less confusing
+* *(reminders)* Make relative presets actually work
+* *(reminders)* Move reminder settings to a popup
+* *(reminders)* Only show relative reminders when there's a date to relate them to
+* *(reminders)* Show resolved reminder time in a tooltip and properly bubble updated task down to the reminder component
+* *(reminders)* Translate all reminder form strings
+* *(sentry)* Only load sentry when it's enabled
+* *(tests)* Add project tests derived from old namespace tests
+* *(user)* Migrate color scheme settings to persistance in db
+* *(user)* Migrate pop sound setting to store in api
+* *(user)* Persist frontend settings in the api (#3594)* Rename files with list to project ([b9d3b5c](b9d3b5c75635577321acc1791219aed40c6c14a4))
+* *(user)* Save quick add magic mode in api
+* *(user)* Set default settings when loading persisted
+* *(user)* Use user language from store after logging in
+* Abstract BaseCheckbox ([8fc254d](8fc254d2db5738e5d370c9f346c8d0d1e31bb9d0))
+* Add hotkeys for priority, delete and favorite on the `TaskDetailView` (#3400) ([e00c9bb](e00c9bb1afc8491039b5ffb50d4d8d9b38e6e086))
+* Add message to add to home screen on mobile ([3c9083b](3c9083b90dd3e5f97109ba2a23d2f2f8cc7d6c7c))
+* Add redirect for old list routes ([af523cf](af523cfcd71528c7e8d0b50874f4766f40f958d2))
+* Add setting for infinite nesting ([cb218ec](cb218ec0c31a41ba41a713a3757f71ad550dd71c))
+* Add transition to input icons ([abb5128](abb51284269d84de14d0a156c386c63dc596b9ab))
+* Add vite-plugin sentry (#1991) ([5ca31d0](5ca31d00eeff28f4728a4d07b96d761a6f174207))
+* Add vite-plugin sentry ([73947f0](73947f0ba4031cb0f9aff78f8a7e3316a36d59b4))
+* Allow creating a new project directly as a child project from another one ([b341184](b34118485cc056146682cd4592c90e4662b307eb))
+* Allow disabling icon changes ([efb3407](efb3407b8769a23f4352161d6db6267ce4b30eee))
+* Allow hiding the quick add magic help tooltip with a button ([7fb85da](7fb85dacecdae597180553036243ab845d50ede5))
+* Allow selecting a parent project when creating a project ([ce887c3](ce887c38f3a9e84c832bfbf62efa455df37a1a4f))
+* Allow selecting a parent project when duplicating a project ([799c0be](799c0be8306cfc5150611153c59701e96d56893a))
+* Allow selecting a parent project when editing a project ([ee8f80c](ee8f80cc70109a496959da167d14ffda4e2a6175))
+* Allow to edit existing relative reminders ([5d38b83](5d38b8327fc323c571fced33442bdb923d6d3baa))
+* Better vscode vitest integration ([314cbf4](314cbf471f8e9cff2a3fca6bbd969807401b5cda))
+* Change the link share hash name ([2066056](20660564c16283c77029bc3c3125c6c3febde47e))
+* Check link share auth from store instead ([c2ffe3a](c2ffe3a9dcfd1e067b8d92e1d69183c2a8acfa8f))
+* Don't handle child projects and instead only save the ids ([760efa8](760efa854dcc83e74f96782339b79b8d27b853b2))
+* Don't use child_projects property from api ([ebd9c47](ebd9c4702ed1c6920d47e5e42294e6d4fa3c73c0))
+* Edit relative reminders (#3248) ([3f8e457](3f8e457d5250df0b3af34d8f3bb0c053b15a97be))
+* Edit relative reminders ([14e2698](14e26988331ca72afae01b8264969458cdb4a509))
+* Hide quick add magic help behind a tooltip (#3353) ([a988565](a988565227f57dfc728319d433532f71e61d6424))
+* Highlight hint icon when hovering the input ([422d7fc](422d7fc693caf886a49d03ff48b56ae6ce825356))
+* Improve datemathHelp.vue ([795b26e](795b26e1dde781e152ab03fc31fd95f9f106a452))
+* Improve handling of an invalid api url ([24ad2f8](24ad2f892db0fce3458624c9dad8735130253fa0))
+* Improve user assignments via quick add magic (#3348) ([d9f608e](d9f608e8b4be4da380a535edcce1782c6d21926d))
+* Improve variable naming for ProjectCardGrid ([a4be973](a4be973e29e81db4e244427fc46a11b4c8c95f4c))
+* Load all projects earlier than in the navigation and use the loading state of the store ([1d93661](1d936618faecb0ddcb10f7c900096a3705614dbd))
+* Mark undone if task moved from isDoneBucket (#3291) ([30adad5](30adad5ae6568b5ef1125f206989d447fb999eee))
+* Move namespaces list to projects list ([e1bdabc](e1bdabc8d670f7342f4f0777a30a961e3fd4601d))
+* Move navigation item to component ([3db4e01](3db4e011d4b625cee940c58ee32d065b8c43f1bb))
+* Move quick add magic to a popup behind an icon ([6989558](69895589636ee6369c9778f529bf1df953acb7b1))
+* New image for the unauthenticated views ([bef25c4](bef25c49d535ff3940a0112a715f5b351e816468))
+* Optimize print view for project views ([8e2c76a](8e2c76a33eec573afab0b754d0707f84e2cca962))
+* Persist link share auth rule in url hash (#3336) ([da3eaf0](da3eaf0d357c24775ba8a4cf8f089e5042f73c00))
+* Persist link share auth rule in url hash ([f68bb26](f68bb2625e5f619f365fdd421aeda2b8af879aab))
+* Prepare for pnpm 8 (#3331) ([7d3b97d](7d3b97d422896e17ab9231c66e49da6c07967d7e))
+* Rebuild main navigation so that it works recursively with projects ([06e8cdb](06e8cdb9d2907c846ca7c555b31571b5c1798433))
+* Remove all namespace leftovers ([1bd17d6](1bd17d6e50034c159150095f1c51a966293a6726))
+* Remove namespaces, make projects infinitely nestable (#3323) ([ac1d374](ac1d374191fca764a70d9851d9828a78ae27c075))
+* Rename link share hash prefix ([b9f0635](b9f0635d9fcc764c7ee188c95ce59ac358f735cf))
+* Rename list to project everywhere ([befa6f2](befa6f27bb607a57eb8ed49d0152b85cdab4cb95))
+* Replace color dot with handle icon on hover ([a3e2cbe](a3e2cbeb27ad8b0d052df62c9f24f8dd3808ddda))
+* Set the current language to the one saved by the user on login ([acb212a](acb212ab241e1ed873c943e9c5fa3bcfb2c83a91))
+* Show all parent projects in project search ([6a8c656](6a8c656dbb0a4729035468aedc60fd06e80c17ed))
+* Show all parent projects in task detail view ([63ba298](63ba2982c92d495de6c7e3526c3693dcfe0e3fba))
+* Show avatar and full name in team overview ([b80f070](b80f07043104868d134761b34582b234d12274e1))
+* Show initial list of users when opening the assignees view ([59c942a](59c942af735a40f68cfd01caadb22694113da8ae))
+* Start adding relative reminder picker with more options ([9df6950](9df6950d1a4a361c075020319ce3037e19e0912d))
+* Translate inbox project title ([f2ca2d8](f2ca2d850de5b4b3b3d90e3a5c41adebca2dc1a5))
+* Type i18n improvements ([dea1789](dea1789a00981fb496f0c1f4c19a6f0749e4de70))
+* Use new Reminders API instead of reminder_dates ([f747d5b](f747d5b2fcadb7459c389372dca4507b75cdd4fa))
+* Wrap projects navigation in a <Suspense> so that we can use top level await ([2579c33](2579c33ee1d07234c3ad42d75f2c7a1f7bfdb149))
+
+
+### Miscellaneous Tasks
+
+* *(ci)* Remove netlify dependency (#3459)
+* *(ci)* Sign drone config
+* *(editor)* Disable deprecated marked options
+* *(i18n)* Clarify translation string
+* *(parseSubtasksViaIndention)* Fix comment (#3259)
+* *(reminders)* Remove reminderDates property
+* *(sentry)* Alwys use the same version
+* *(sentry)* Ignore missing commits
+* *(sentry)* Only load sentry when enabled
+* *(sentry)* Remove debug options
+* *(sentry)* Remove sourcemaps after upload via plugin
+* *(sentry)* Use correct chunks option
+* *(task)* Move toggleFavorite to store
+* *(task)* Use ref for task instead of reactive
+* *(tests)* Enable experimental memory managment for cypress tests
+* *(user)* Cleanup* Update JSDoc example ([bfbfd6a](bfbfd6a4212d493912406c1c505b6c0a24f0f014))
+* Add comment on overriding ([21ad830](21ad8301f28ba838c577acb72cb66ea00e176876))
+* Add types for emit ([c567874](c56787443f6f9f6be0f8d8501dd4e6e7a768648a))
+* Better function naming in password components ([a416d26](a416d26f7cfd163cadb0b6ded107b217ecad5d7c))
+* Catch error when trying to play pop sound ([929d4f4](929d4f402342de309dd8e453252d22fcb9f362a6))
+* Chore; extract code to reminder-period.vue ([0d6c0c8](0d6c0c8399c9fc73843bdbeb84ff19467edcaa90))
+* Clarify users when can still be found even if they disabled it ([302ba2b](302ba2bec7f592f6b0b1fba84a5a1a9fd5f994de))
+* Cleanup namespace leftovers ([2e33615](2e336150e086354b1623569aa98ab9c5be48c59a))
+* Don't recalculate everything ([9c3259c](9c3259c660e8436f41b5494c9567319090c03bd6))
+* Don't set the current project to null if it's undefined already ([e4d97e0](e4d97e05205e2c36143319ccf07ccac03f5de408))
+* Don't show selection for parent project when no projects are available ([c30dcff](c30dcff45157e5b89b7bb6c2442271c15da33fc4))
+* Don't wrap a computed in another computed ([afaf184](afaf1846ece65b8b2bbee971fafb31a535a4381b))
+* Export favorite projects from store ([131022d](131022da427616765f8109ca8ac8f6bad1bdcbbb))
+* Export not archived root projects ([b5d9afd](b5d9afd0f72aaf28b89f4877ce3ad2eabe6c3d7b))
+* Export projects as array directly from projects store ([e4379f0](e4379f0a229b7b8572fddb029658713a0bbfca1d))
+* Follow the happy path ([a33e2f6](a33e2f6c00f35f36aabb6b4d6e823396d29cdf3d))
+* Format ([4ad9773](4ad9773022b5873fff09b7afade02c026ac5332f))
+* Format ([638d187](638d187a24020d698327b0a0d04a5897672d3b79))
+* Formatting ([b92d780](b92d780cda3ab7222c4a6ab7323d1dd3f679b514))
+* Group return parameter ([5298706](52987060b11ac0418b6a88f1beabaee59165117d))
+* Import const instead of redeclaring it ([61baf02](61baf02e26b292e3f02816a483eb7d92fb49d8ab))
+* Improve prop type definition ([638f6be](638f6bea24980658d0f5fb3432d7b64c2ae06f75))
+* Make fuzzy matching a paramater ([aeb73a3](aeb73a374f84f6b01d4be4cc784336a214a4cdfa))
+* Move ProjectsNavigationWrapper back to navigation.vue ([65522a5](65522a57f1ceddfabeba235e17f8f81ee6bae47b))
+* Move all options to component props ([db1c6d6](db1c6d6a41591c8ee5df2d2ee400aaaeda0d02bb))
+* Move const ([0ce150a](0ce150af237985dda0cf44f24179ebae332e7585))
+* Move duplicate project logic to composable ([b69a056](b69a05689be6e2c833c838cde052702600d245c7))
+* Move loader class ([ac78e85](ac78e85e1726b6d7047db72ccbbaf29ac11d1696))
+* Move loading styles to variant into the component ([76814a2](76814a2d3f68876934c5791bb4901fca5f95c00f))
+* Move more logic to ProjectsNavigationItem.vue ([b567146](b567146d69f1c6a1eba6e37061bde7f627ff8654))
+* Move positioning css ([7110c9a](7110c9a5ceb58e6e9675c0f91ddb34c9ab8f2cbc))
+* Move styles to components ([25c3b7b](25c3b7bcbfb4ddc2163092ed7c1d5e4758967f1b))
+* Move v-if ([12ebefd](12ebefd86a61ca5c82b104b4155a4989c8622713))
+* Only apply padding where needed ([ddcd6a1](ddcd6a17dc659611910c2d4ed84fcff575e0ca3a))
+* Re-add top menu spacing ([086f50d](086f50d4feed90aac0c458d3f53cbe59ae7402c8))
+* Redirect to new project after creating from store ([6b824a4](6b824a49abe8854045c7670fcd6da50539c9fce5))
+* Reduce nesting ([06a1ff6](06a1ff6f4bea4cc7447d528423de54f14583dca4))
+* Refactor get parents project and move to projects store ([c32a198](c32a198a34edd3db7d6967010ce9dde401d1c864))
+* Remove nesting ([a4c8fcc](a4c8fccb115f019840025659c7a8a4bac31eee04))
+* Remove old comment ([4134fcb](4134fcbd752ab4cc7691907264b04cf64e11d012))
+* Remove old todo ([4e21b46](4e21b463df9af5aec9a5b45c8331f5a9f9e8aeb9))
+* Remove triggered notifications as it's not supported anywhere ([8a75790](8a75790453427287dc5a57ff3b59cd2b9cabd3f4))
+* Remove type annotation for computed ([a3e289c](a3e289c06c992b24dcff21b1c4f8871676101d98))
+* Remove unnecessary map ([336db56](336db56316dec7aeacf2174f5945764dc350769c))
+* Remove unused class ([d4e4525](d4e452545afe94ed2e860cd14982462e080a4d49))
+* Remove unused code ([652db56](652db56d42b39c05385ff7484fa43b0baa769759))
+* Remove user margin from the component ([57c64bb](57c64bbf71342b4e9e2e9e3808412b5e0cf01006))
+* Remove user margin from the component ([a1dd1d6](a1dd1d6664479e125e2f8ae87a9d2a57bf94fc9e))
+* Remove wrapper div ([2c9693a](2c9693a83eeca832d49d519c5676ae30569628ca))
+* Rename alias ([a803bc6](a803bc637e44893aa6921b70215a3206acdc5a91))
+* Rename archived message key ([4dee3a9](4dee3a90e9a76cdd190eb28b3327bef1bcc34787))
+* Rename flag ([6e09543](6e095436e9bfb6856c6aa469fc4cad93f239bad4))
+* Rename getRedirectRoute ([59b05e9](59b05e9836946ed8b9dbb3926fc694641d8508a1))
+* Rename prop ([2bb7ff1](2bb7ff1803d5a35bdd61a94e7a4d6fd03d5d1492))
+* Replace section with a div ([9b10693](9b1069317283fc20c834eac981e0b2a500e32dba))
+* Set project id from the outside ([6c9cbaa](6c9cbaadc821ab92e85b1f8e3fcb3fa85ea99670))
+* Update nix flake ([f40035d](f40035dc7943e8199c553acfec838f21ea212c3e))
+* Use <menu> instead of <ul> ([49fac7d](49fac7db1cbefce49712797869b956f31e8f541c))
+* Use klona to clone project objet ([55e9122](55e912221be4b4765cdb3a7bd0e3dc693478ac81))
+* Use long variable name ([6f1baa3](6f1baa3219093147842efe10f92482364516c84c))
+* Use long variable name ([a0d39e6](a0d39e6081f35e4ba6589b7840168b0c69b3210f))
+* Use project id type ([a342ae6](a342ae67de1c884895ce3304cf6eb1757a38573a))
+* Use startsWith for prefix matching ([10ac1ff](10ac1ff66a2bcd797f54c83dda13745fdf359f33))
+* Use stores directly ([a7440ed](a7440ed296ec0e99c9dc81e43617b3b54fc518a7))
+* [skip ci] Updated translations via Crowdin
+
+
 ## [0.20.5] - 2023-03-12
 
 ### Bug Fixes
@@ -4790,4 +5527,3 @@ Co-committed-by: renovate <renovatebot@kolaente.de>
 * Fixed loading tasks when the user was not authenticated
 
 ## [0.1] - 2018-09-20
-

Dockerfile

@@ -3,16 +3,17 @@
 #  │─││ │││  │ │
 #  ┘─┘┘─┘┘┘─┘┘─┘
 
-FROM --platform=$BUILDPLATFORM node:18-alpine AS builder
+FROM --platform=$BUILDPLATFORM node:20-alpine AS builder
 
 WORKDIR /build
 
 ARG USE_RELEASE=false
-ARG RELEASE_VERSION=main
+ARG RELEASE_VERSION=unstable
 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
@@ -54,6 +55,8 @@ 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

README.md

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

cypress.config.ts

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

cypress/e2e/misc/editor.spec.ts

@@ -2,7 +2,6 @@ import {createFakeUserAndLogin} from '../../support/authenticateUser'
 
 import {TaskFactory} from '../../factories/task'
 import {ProjectFactory} from '../../factories/project'
-import {NamespaceFactory} from '../../factories/namespace'
 import {UserProjectFactory} from '../../factories/users_project'
 import {BucketFactory} from '../../factories/bucket'
 
@@ -10,7 +9,6 @@ describe('Editor', () => {
 	createFakeUserAndLogin()
 	
 	beforeEach(() => {
-		NamespaceFactory.create(1)
 		ProjectFactory.create(1)
 		BucketFactory.create(1)
 		TaskFactory.truncate()

cypress/e2e/misc/menu.spec.ts

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

cypress/e2e/project/namespaces.spec.ts

@@ -1,145 +0,0 @@
-import {createFakeUserAndLogin} from '../../support/authenticateUser'
-
-import {ProjectFactory} from '../../factories/project'
-import {NamespaceFactory} from '../../factories/namespace'
-
-describe('Namepaces', () => {
-	createFakeUserAndLogin()
-
-	let namespaces
-
-	beforeEach(() => {
-		namespaces = NamespaceFactory.create(1)
-		ProjectFactory.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 projects & namespaces if the filter is not checked', () => {
-		const n = NamespaceFactory.create(1, {
-			id: 2,
-			is_archived: true,
-		}, false)
-		ProjectFactory.create(1, {
-			id: 2,
-			namespace_id: n[0].id,
-		}, false)
-
-		ProjectFactory.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"] .fancycheckbox__content')
-			.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"] .fancycheckbox__content')
-			.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/project/prepareProjects.ts

@@ -1,9 +1,7 @@
 import {ProjectFactory} from '../../factories/project'
-import {NamespaceFactory} from '../../factories/namespace'
 import {TaskFactory} from '../../factories/task'
 
 export function createProjects() {
-	NamespaceFactory.create(1)
 	const projects = ProjectFactory.create(1, {
 		title: 'First Project'
 	})

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

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

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

@@ -58,7 +58,6 @@ describe('Project View Project', () => {
 		})
 		const projects = ProjectFactory.create(2, {
 			owner_id: '{increment}',
-			namespace_id: '{increment}',
 		})
 		cy.visit(`/projects/${projects[1].id}/`)
 

cypress/e2e/project/project.spec.ts

@@ -1,6 +1,7 @@
 import {createFakeUserAndLogin} from '../../support/authenticateUser'
 
 import {TaskFactory} from '../../factories/task'
+import {ProjectFactory} from '../../factories/project'
 import {prepareProjects} from './prepareProjects'
 
 describe('Projects', () => {
@@ -10,23 +11,20 @@ describe('Projects', () => {
 	prepareProjects((newProjects) => (projects = newProjects))
 
 	it('Should create a new project', () => {
-		cy.visit('/')
-		cy.get('.namespace-title .dropdown-trigger')
-			.click()
-		cy.get('.namespace-title .dropdown .dropdown-item')
-			.contains('New project')
+		cy.visit('/projects')
+		cy.get('.project-header [data-cy=new-project]')
 			.click()
 		cy.url()
-			.should('contain', '/projects/new/1')
+			.should('contain', '/projects/new')
 		cy.get('.card-header-title')
 			.contains('New project')
-		cy.get('input.input')
+		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
+		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/')
@@ -56,9 +54,9 @@ describe('Projects', () => {
 		cy.get('.project-title')
 			.should('contain', 'First Project')
 
-		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .menu-list-dropdown-trigger')
+		cy.get('.menu-container .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')
+		cy.get('.menu-container .menu-list li:first-child .dropdown .dropdown-content')
 			.contains('Edit')
 			.click()
 		cy.get('#title')
@@ -72,21 +70,21 @@ describe('Projects', () => {
 		cy.get('.project-title')
 			.should('contain', newProjectName)
 			.should('not.contain', projects[0].title)
-		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child')
+		cy.get('.menu-container .menu-list li:first-child')
 			.should('contain', newProjectName)
 			.should('not.contain', projects[0].title)
 		cy.visit('/')
-		cy.get('.card-content')
+		cy.get('.project-grid')
 			.should('contain', newProjectName)
 			.should('not.contain', projects[0].title)
 	})
 
-	it('Should remove a project', () => {
+	it('Should remove a project when deleting it', () => {
 		cy.visit(`/projects/${projects[0].id}`)
 
-		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .menu-list-dropdown-trigger')
+		cy.get('.menu-container .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')
+		cy.get('.menu-container .menu-list li:first-child .dropdown .dropdown-content')
 			.contains('Delete')
 			.click()
 		cy.url()
@@ -97,15 +95,15 @@ describe('Projects', () => {
 
 		cy.get('.global-notification')
 			.should('contain', 'Success')
-		cy.get('.namespace-container .menu.namespaces-lists .menu-list')
+		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')
@@ -115,10 +113,59 @@ describe('Projects', () => {
 			.should('contain.text', 'Archive this project')
 		cy.get('.modal-content [data-cy=modalPrimary]')
 			.click()
-		
-		cy.get('.namespace-container .menu.namespaces-lists .menu-list')
+
+		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

@@ -2,24 +2,58 @@ import {LinkShareFactory} from '../../factories/link_sharing'
 import {ProjectFactory} from '../../factories/project'
 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 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,
-		})
+		const {share, project, tasks} = prepareLinkShare()
 
-		cy.visit(`/share/${linkShares[0].hash}/auth`)
+		cy.visit(`/share/${share.hash}/auth`)
 
 		cy.get('h1.title')
-			.should('contain', projects[0].title)
+			.should('contain', project.title)
+		cy.get('input.input[placeholder="Add a new task..."')
+			.should('not.exist')
+		cy.get('.tasks')
+			.should('contain', tasks[0].title)
+		
+		cy.url().should('contain', `/projects/${project.id}/list#share-auth-token=${share.hash}`)
+	})
+
+	it('Should work when directly viewing a project with share hash present', () => {
+		const {share, project, tasks} = prepareLinkShare()
+
+		cy.visit(`/projects/${project.id}/list#share-auth-token=${share.hash}`)
+
+		cy.get('h1.title')
+			.should('contain', project.title)
 		cy.get('input.input[placeholder="Add a new task..."')
 			.should('not.exist')
 		cy.get('.tasks')
 			.should('contain', tasks[0].title)
 	})
+	
+	it('Should work when directly viewing a task with share hash present', () => {
+		const {share, project, tasks} = prepareLinkShare()
+
+		cy.visit(`/tasks/${tasks[0].id}#share-auth-token=${share.hash}`)
+
+		cy.get('h1.title')
+			.should('contain', tasks[0].title)
+	})
 })

cypress/e2e/task/overview.spec.ts

@@ -3,12 +3,10 @@ import {createFakeUserAndLogin} from '../../support/authenticateUser'
 import {ProjectFactory} from '../../factories/project'
 import {seed} from '../../support/seed'
 import {TaskFactory} from '../../factories/task'
-import {NamespaceFactory} from '../../factories/namespace'
 import {BucketFactory} from '../../factories/bucket'
 import {updateUserSettings} from '../../support/updateUserSettings'
 
 function seedTasks(numberOfTasks = 50, startDueDate = new Date()) {
-	NamespaceFactory.create(1)
 	const project = ProjectFactory.create()[0]
 	BucketFactory.create(1, {
 		project_id: project.id,
@@ -137,8 +135,7 @@ describe('Home Page Task Overview', () => {
 		cy.visit('/')
 		
 		cy.get('.home.app-content .content')
-			.should('contain.text', 'You can create a new project for your new tasks:')
-			.should('contain.text', 'Or import your projects and tasks from other services into Vikunja:')
+			.should('contain.text', 'Import your projects and tasks from other services into Vikunja:')
 	})
 	
 	it('Should not show the cta buttons for new project when there are tasks', () => {

cypress/e2e/task/task.spec.ts

@@ -4,7 +4,6 @@ import {TaskFactory} from '../../factories/task'
 import {ProjectFactory} from '../../factories/project'
 import {TaskCommentFactory} from '../../factories/task_comment'
 import {UserFactory} from '../../factories/user'
-import {NamespaceFactory} from '../../factories/namespace'
 import {UserProjectFactory} from '../../factories/users_project'
 import {TaskAssigneeFactory} from '../../factories/task_assignee'
 import {LabelFactory} from '../../factories/labels'
@@ -12,6 +11,7 @@ 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,13 +47,11 @@ function uploadAttachmentAndVerify(taskId: number) {
 describe('Task', () => {
 	createFakeUserAndLogin()
 
-	let namespaces
 	let projects
 	let buckets
 
 	beforeEach(() => {
 		// UserFactory.create(1)
-		namespaces = NamespaceFactory.create(1)
 		projects = ProjectFactory.create(1)
 		buckets = BucketFactory.create(1, {
 			project_id: projects[0].id,
@@ -110,7 +108,7 @@ describe('Task', () => {
 		cy.get('.tasks .task .favorite')
 			.first()
 			.click()
-		cy.get('.menu.namespaces-lists')
+		cy.get('.menu-container')
 			.should('contain', 'Favorites')
 	})
 
@@ -133,7 +131,6 @@ describe('Task', () => {
 			cy.get('.task-view h1.title.task-id')
 				.should('contain', '#1')
 			cy.get('.task-view h6.subtitle')
-				.should('contain', namespaces[0].title)
 				.should('contain', projects[0].title)
 			cy.get('.task-view .details.content.description')
 				.should('contain', tasks[0].description)
@@ -260,7 +257,6 @@ describe('Task', () => {
 				.click()
 
 			cy.get('.task-view h6.subtitle')
-				.should('contain', namespaces[0].title)
 				.should('contain', projects[1].title)
 			cy.get('.global-notification')
 				.should('contain', 'Success')
@@ -466,6 +462,154 @@ 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,

cypress/e2e/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
   "include": ["./**/*", "../support/**/*", "../factories/**/*"],
   "compilerOptions": {
     "baseUrl": ".",

cypress/factories/namespace.ts

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

cypress/factories/project.ts

@@ -11,7 +11,6 @@ export class ProjectFactory extends Factory {
 			id: '{increment}',
 			title: faker.lorem.words(3),
 			owner_id: 1,
-			namespace_id: 1,
 			created: now.toISOString(),
 			updated: now.toISOString(),
 		}

cypress/factories/task_reminders.ts

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

cypress/support/factory.ts

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

docker/injector.sh

@@ -11,5 +11,7 @@ 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,7 +4,6 @@
 
 pid                  /tmp/nginx.pid;
 worker_processes     auto;
-worker_rlimit_nofile 65535;
 
 events {
   multi_accept       on;

env.d.ts

@@ -4,19 +4,31 @@
 /// <reference types="@histoire/plugin-vue/components" />
 
 declare module 'postcss-focus-within/browser' {
-  import focusWithinInit from 'postcss-focus-within/browser'
-  export default focusWithinInit
+	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
+	import cssHasPseudo from 'css-has-pseudo/browser'
+	export default cssHasPseudo
 }
 
 interface ImportMetaEnv {
-  readonly VITE_IS_ONLINE: boolean
+	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
 }
 
 interface ImportMeta {
-  readonly env: ImportMetaEnv
+	readonly env: ImportMetaEnv
 }

flake.lock

@@ -2,11 +2,11 @@
   "nodes": {
     "nixpkgs": {
       "locked": {
-        "lastModified": 1680030621,
-        "narHash": "sha256-qQa1NeS5Rvk2lgK5lSk986PC6I72yIHejzM8PFu+dHs=",
+        "lastModified": 1685498995,
+        "narHash": "sha256-rdyjnkq87tJp+T2Bm1OD/9NXKSsh/vLlPeqCc/mm7qs=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "402cc3633cc60dfc50378197305c984518b30773",
+        "rev": "9cfaa8a1a00830d17487cb60a19bb86f96f09b27",
         "type": "github"
       },
       "original": {

index.html

@@ -18,15 +18,20 @@
 <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@7.32.0",
+  "packageManager": "pnpm@8.6.7",
   "keywords": [
     "todo",
     "productivity",
@@ -51,96 +51,97 @@
     "@fortawesome/vue-fontawesome": "3.0.3",
     "@github/hotkey": "2.0.1",
     "@infectoone/vue-ganttastic": "2.1.4",
-    "@intlify/unplugin-vue-i18n": "0.10.0",
-    "@kyvg/vue3-notification": "2.9.0",
-    "@sentry/tracing": "7.46.0",
-    "@sentry/vue": "7.46.0",
-    "@vueuse/core": "9.13.0",
-    "axios": "1.3.5",
+    "@intlify/unplugin-vue-i18n": "0.12.2",
+    "@kyvg/vue3-notification": "2.9.1",
+    "@sentry/tracing": "7.57.0",
+    "@sentry/vue": "7.57.0",
+    "@vueuse/core": "10.2.1",
+    "axios": "1.4.0",
     "blurhash": "2.0.5",
     "bulma-css-variables": "0.9.33",
     "camel-case": "4.1.2",
-    "codemirror": "5.65.12",
-    "date-fns": "2.29.3",
-    "dayjs": "1.11.7",
-    "dompurify": "3.0.1",
+    "codemirror": "5.65.13",
+    "date-fns": "2.30.0",
+    "dayjs": "1.11.9",
+    "dompurify": "3.0.4",
     "easymde": "2.18.0",
     "fast-deep-equal": "3.1.3",
     "flatpickr": "4.6.13",
     "flexsearch": "0.7.31",
-    "floating-vue": "2.0.0-beta.20",
-    "highlight.js": "11.7.0",
+    "floating-vue": "2.0.0-beta.24",
+    "highlight.js": "11.8.0",
     "is-touch-device": "1.0.1",
     "klona": "2.0.6",
     "lodash.debounce": "4.0.8",
-    "marked": "4.3.0",
-    "pinia": "2.0.34",
+    "marked": "5.1.1",
+    "pinia": "2.1.4",
     "register-service-worker": "1.7.2",
     "snake-case": "3.0.4",
     "sortablejs": "1.15.0",
-    "ufo": "1.1.1",
-    "vue": "3.2.47",
+    "ufo": "1.1.2",
+    "vue": "3.3.4",
     "vue-advanced-cropper": "2.8.8",
     "vue-flatpickr-component": "11.0.3",
     "vue-i18n": "9.2.2",
-    "vue-router": "4.1.6",
-    "workbox-precaching": "6.5.4",
+    "vue-router": "4.2.4",
+    "workbox-precaching": "7.0.0",
     "zhyswan-vuedraggable": "4.1.3"
   },
   "devDependencies": {
-    "@4tw/cypress-drag-drop": "2.2.3",
+    "@4tw/cypress-drag-drop": "2.2.4",
     "@cypress/vite-dev-server": "5.0.5",
     "@cypress/vue": "5.0.5",
-    "@faker-js/faker": "7.6.0",
-    "@histoire/plugin-screenshot": "0.15.9",
-    "@histoire/plugin-vue": "0.15.8",
-    "@rushstack/eslint-patch": "1.2.0",
-    "@types/codemirror": "5.60.7",
-    "@types/dompurify": "3.0.1",
+    "@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",
     "@types/flexsearch": "0.7.3",
     "@types/is-touch-device": "1.0.0",
     "@types/lodash.debounce": "4.0.7",
-    "@types/marked": "4.0.8",
-    "@types/node": "18.15.11",
+    "@types/marked": "5.0.0",
+    "@types/node": "18.16.19",
     "@types/postcss-preset-env": "7.7.0",
     "@types/sortablejs": "1.15.1",
-    "@typescript-eslint/eslint-plugin": "5.57.1",
-    "@typescript-eslint/parser": "5.57.1",
-    "@vitejs/plugin-legacy": "4.0.2",
-    "@vitejs/plugin-vue": "4.1.0",
-    "@vue/eslint-config-typescript": "11.0.2",
-    "@vue/test-utils": "2.3.2",
-    "@vue/tsconfig": "0.1.3",
+    "@typescript-eslint/eslint-plugin": "5.61.0",
+    "@typescript-eslint/parser": "5.61.0",
+    "@vitejs/plugin-legacy": "4.1.0",
+    "@vitejs/plugin-vue": "4.2.3",
+    "@vue/eslint-config-typescript": "11.0.3",
+    "@vue/test-utils": "2.4.0",
+    "@vue/tsconfig": "0.4.0",
     "autoprefixer": "10.4.14",
-    "browserslist": "4.21.5",
-    "caniuse-lite": "1.0.30001477",
-    "css-has-pseudo": "5.0.2",
+    "browserslist": "4.21.9",
+    "caniuse-lite": "1.0.30001514",
+    "css-has-pseudo": "6.0.0",
     "csstype": "3.1.2",
-    "cypress": "12.9.0",
-    "esbuild": "0.17.16",
-    "eslint": "8.38.0",
-    "eslint-plugin-vue": "9.10.0",
-    "happy-dom": "9.1.9",
-    "histoire": "0.15.9",
-    "netlify-cli": "13.2.2",
-    "postcss": "8.4.21",
+    "cypress": "12.17.0",
+    "esbuild": "0.18.11",
+    "eslint": "8.44.0",
+    "eslint-plugin-vue": "9.15.1",
+    "happy-dom": "10.0.3",
+    "histoire": "0.16.2",
+    "postcss": "8.4.25",
     "postcss-easing-gradients": "3.0.1",
-    "postcss-easings": "3.0.1",
-    "postcss-focus-within": "7.0.2",
-    "postcss-preset-env": "8.3.1",
-    "rollup": "3.20.2",
-    "rollup-plugin-visualizer": "5.9.0",
-    "sass": "1.61.0",
+    "postcss-easings": "4.0.0",
+    "postcss-focus-within": "8.0.0",
+    "postcss-preset-env": "9.0.0",
+    "rollup": "3.26.2",
+    "rollup-plugin-visualizer": "5.9.2",
+    "sass": "1.63.6",
     "start-server-and-test": "2.0.0",
-    "typescript": "5.0.4",
-    "vite": "4.2.1",
+    "typescript": "5.1.6",
+    "vite": "4.4.2",
     "vite-plugin-inject-preload": "1.3.1",
-    "vite-plugin-pwa": "0.14.7",
+    "vite-plugin-pwa": "0.16.4",
+    "vite-plugin-sentry": "1.3.0",
     "vite-svg-loader": "4.0.0",
-    "vitest": "0.30.0",
-    "vue-tsc": "1.2.0",
+    "vitest": "0.33.0",
+    "vue-tsc": "1.8.4",
     "wait-on": "7.0.1",
-    "workbox-cli": "6.5.4"
+    "workbox-cli": "7.0.0"
   },
   "pnpm": {
     "patchedDependencies": {

renovate.json

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

scripts/deploy-preview-netlify.mjs

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

scripts/deploy-preview-netlify.mjs.sha384

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

src/App.vue

@@ -12,6 +12,7 @@
 		<keyboard-shortcuts v-if="keyboardShortcutsActive"/>
 		
 		<Teleport to="body">
+			<AddToHomeScreen/>
 			<UpdateNotification/>
 			<Notification/>
 		</Teleport>
@@ -43,6 +44,7 @@ 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()
@@ -92,7 +94,7 @@ watch(userEmailConfirm, (userEmailConfirm) => {
 	router.push({name: 'user.login'})
 }, { immediate: true })
 
-setLanguage()
+setLanguage(authStore.settings.language)
 useColorScheme()
 </script>
 

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 HTMLAttributes {
+export interface BaseButtonProps extends /* @vue-ignore */ HTMLAttributes {
 	type?: BaseButtonTypes
 	disabled?: boolean
 	to?: RouteLocationRaw

src/components/date/datemathHelp.story.vue

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

src/components/date/datemathHelp.vue

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

src/components/home/AddToHomeScreen.vue

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

@@ -9,7 +9,7 @@ import {MILLISECONDS_A_HOUR} from '@/constants/date'
 const now = useNow({
 	interval: MILLISECONDS_A_HOUR,
 })
-const Logo = computed(() => now.value.getMonth() === 5 ? LogoFullPride : LogoFull)
+const Logo = computed(() => window.ALLOW_ICON_CHANGES && now.value.getMonth() === 5 ? LogoFullPride : LogoFull)
 </script>
 
 <template>

src/components/home/ProjectsNavigation.vue

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

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

@@ -7,8 +7,9 @@
 
 		<MenuButton class="menu-button" />
 
-		<div v-if="currentProject.id" class="project-title-wrapper">
-			<h1 class="project-title">{{ currentProject.title === '' ? $t('misc.loading') : getProjectTitle(currentProject) }}
+		<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">
@@ -89,7 +90,7 @@ import { useAuthStore } from '@/stores/auth'
 const baseStore = useBaseStore()
 const currentProject = computed(() => baseStore.currentProject)
 const background = computed(() => baseStore.background)
-const canWriteCurrentProject = computed(() => baseStore.currentProject.maxRight > Rights.READ)
+const canWriteCurrentProject = computed(() => baseStore.currentProject?.maxRight > Rights.READ)
 const menuActive = computed(() => baseStore.menuActive)
 
 const authStore = useAuthStore()

src/components/home/UpdateNotification.vue

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

src/components/home/contentAuth.vue

@@ -69,6 +69,7 @@ import BaseButton from '@/components/base/BaseButton.vue'
 
 import {useBaseStore} from '@/stores/base'
 import {useLabelStore} from '@/stores/labels'
+import {useProjectStore} from '@/stores/projects'
 
 import {useRouteWithModal} from '@/composables/useRouteWithModal'
 import {useRenewTokenOnFocus} from '@/composables/useRenewTokenOnFocus'
@@ -94,14 +95,13 @@ watch(() => route.name as string, (routeName) => {
 		(
 			[
 				'home',
-				'namespace.edit',
 				'teams.index',
 				'teams.edit',
 				'tasks.range',
 				'labels.index',
 				'migrate.start',
 				'migrate.wunderlist',
-				'namespaces.index',
+				'projects.index',
 			].includes(routeName) ||
 			routeName.startsWith('user.settings')
 		)
@@ -116,6 +116,9 @@ useRenewTokenOnFocus()
 
 const labelStore = useLabelStore()
 labelStore.loadAllLabels()
+
+const projectStore = useProjectStore()
+projectStore.loadProjects()
 </script>
 
 <style lang="scss" scoped>

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': currentProject?.title === '' ? '0': '1' }"
 					class="title">
-					{{ currentProject.title === '' ? $t('misc.loading') : currentProject.title }}
+					{{ currentProject?.title === '' ? $t('misc.loading') : currentProject?.title }}
 				</h1>
 				<div class="box has-text-left view">
 					<router-view/>

src/components/home/navigation.vue

@@ -1,10 +1,10 @@
 <template>
-	<aside :class="{'is-active': menuActive}" class="namespace-container">
+	<aside :class="{'is-active': baseStore.menuActive}" class="menu-container">
 		<nav class="menu top-menu">
 			<router-link :to="{name: 'home'}" class="logo">
 				<Logo width="164" height="48"/>
 			</router-link>
-			<ul class="menu-list">
+			<menu class="menu-list other-menu-items">
 				<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: 'namespaces.index'}" v-shortcut="'g n'">
+					<router-link :to="{ name: 'projects.index'}" v-shortcut="'g p'">
 						<span class="menu-item-icon icon">
 							<icon icon="layer-group"/>
 						</span>
-						{{ $t('namespace.title') }}
+						{{ $t('project.projects') }}
 					</router-link>
 				</li>
 				<li>
@@ -45,238 +45,55 @@
 						{{ $t('team.title') }}
 					</router-link>
 				</li>
-			</ul>
+			</menu>
 		</nav>
 
-		<nav class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}">
-			<template v-for="(n, nk) in namespaces" :key="n.id">
-				<div class="namespace-title" :class="{'has-menu': n.id > 0}">
-					<BaseButton
-						@click="toggleProjects(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 projectsVisible[n.id] !== 'undefined' ? projectsVisible[n.id] : true}"
-						>
-							<icon icon="chevron-down"/>
-						</div>
-						<span class="count" :class="{'ml-2 mr-0': n.id > 0}">
-							({{ namespaceProjectsCount[nk] }})
-						</span>
-					</BaseButton>
-					<namespace-settings-dropdown class="menu-list-dropdown" :namespace="n" v-if="n.id > 0"/>
-				</div>
-				<!--
-					NOTE: a v-model / computed setter is not possible, since the updateActiveProjects function
-					triggered by the change needs to have access to the current namespace
-				-->
-				<draggable
-						v-if="projectsVisible[n.id] ?? true"
-						v-bind="dragOptions"
-						:modelValue="activeProjects[nk]"
-						@update:modelValue="(projects) => updateActiveProjects(n, projects)"
-						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': projectUpdating[l.id]}"
-						>
-							<BaseButton
-								:to="{ name: 'project.index', params: { projectId: l.id} }"
-								class="list-menu-link"
-								:class="{'router-link-exact-active': currentProject.id === l.id}"
-							>
-								<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">{{ getProjectTitle(l) }}</span>
-							</BaseButton>
-							<BaseButton
-								v-if="l.id > 0"
-								class="favorite"
-								:class="{'is-favorite': l.isFavorite}"
-								@click="projectStore.toggleProjectFavorite(l)"
-							>
-								<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
-							</BaseButton>
-							<ProjectSettingsDropdown class="menu-list-dropdown" :project="l" v-if="l.id > 0">
-								<template #trigger="{toggleOpen}">
-									<BaseButton class="menu-list-dropdown-trigger" @click="toggleOpen">
-										<icon icon="ellipsis-h" class="icon"/>
-									</BaseButton>
-								</template>
-							</ProjectSettingsDropdown>
-							<span class="list-setting-spacer" v-else></span>
-						</li>
-					</template>
-				</draggable>
-			</template>
-		</nav>
+		<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>
+
 		<PoweredByLink/>
 	</aside>
 </template>
 
 <script setup lang="ts">
-import {ref, computed, onBeforeMount} from 'vue'
-import draggable from 'zhyswan-vuedraggable'
-import type {SortableEvent} from 'sortablejs'
+import {computed} from 'vue'
 
-import BaseButton from '@/components/base/BaseButton.vue'
-import ProjectSettingsDropdown from '@/components/project/project-settings-dropdown.vue'
-import NamespaceSettingsDropdown from '@/components/namespace/namespace-settings-dropdown.vue'
 import PoweredByLink from '@/components/home/PoweredByLink.vue'
 import Logo from '@/components/home/Logo.vue'
-
-import {calculateItemPosition} from '@/helpers/calculateItemPosition'
-import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
-import {getProjectTitle} from '@/helpers/getProjectTitle'
-import type {IProject} from '@/modelTypes/IProject'
-import type {INamespace} from '@/modelTypes/INamespace'
-import ColorBubble from '@/components/misc/colorBubble.vue'
+import Loading from '@/components/misc/loading.vue'
 
 import {useBaseStore} from '@/stores/base'
 import {useProjectStore} from '@/stores/projects'
-import {useNamespaceStore} from '@/stores/namespaces'
-
-const drag = ref(false)
-const dragOptions = {
-	animation: 100,
-	ghostClass: 'ghost',
-}
+import ProjectsNavigation from '@/components/home/ProjectsNavigation.vue'
 
 const baseStore = useBaseStore()
-const namespaceStore = useNamespaceStore()
-const currentProject = computed(() => baseStore.currentProject)
-const menuActive = computed(() => baseStore.menuActive)
-const loading = computed(() => namespaceStore.isLoading)
-
-
-const namespaces = computed(() => {
-	return namespaceStore.namespaces.filter(n => !n.isArchived)
-})
-const activeProjects = computed(() => {
-	return namespaces.value.map(({projects}) => {
-		return projects?.filter(item => {
-			return typeof item !== 'undefined' && !item.isArchived
-		})
-	})
-})
-
-const namespaceTitles = computed(() => {
-	return namespaces.value.map((namespace) => getNamespaceTitle(namespace))
-})
-
-const namespaceProjectsCount = computed(() => {
-	return namespaces.value.map((_, index) => activeProjects.value[index]?.length ?? 0)
-})
-
 const projectStore = useProjectStore()
 
-function toggleProjects(namespaceId: INamespace['id']) {
-	projectsVisible.value[namespaceId] = !projectsVisible.value[namespaceId]
-}
-
-const projectsVisible = ref<{ [id: INamespace['id']]: boolean }>({})
-// FIXME: async action will be unfinished when component mounts
-onBeforeMount(async () => {
-	const namespaces = await namespaceStore.loadNamespaces()
-	namespaces.forEach(n => {
-		if (typeof projectsVisible.value[n.id] === 'undefined') {
-			projectsVisible.value[n.id] = true
-		}
-	})
-})
-
-function updateActiveProjects(namespace: INamespace, activeProjects: IProject[]) {
-	// This is a bit hacky: since we do have to filter out the archived items from the list
-	// for vue draggable updating it is not as simple as replacing it.
-	// To work around this, we merge the active projects with the archived ones. Doing so breaks the order
-	// because now all archived projects are sorted after the active ones. This is fine because they are sorted
-	// later when showing them anyway, and it makes the merging happening here a lot easier.
-	const projects = [
-		...activeProjects,
-		...namespace.projects.filter(l => l.isArchived),
-	]
-
-	namespaceStore.setNamespaceById({
-		...namespace,
-		projects,
-	})
-}
-
-const projectUpdating = 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 projectsActive = activeProjects.value[newNamespaceIndex]
-	// If the project was dragged to the last position, Safari will report e.newIndex as the size of the projectsActive
-	// array instead of using the position. Because the index is wrong in that case, dragging the project will fail.
-	// To work around that we're explicitly checking that case here and decrease the index.
-	const newIndex = e.newIndex === projectsActive.length ? e.newIndex - 1 : e.newIndex
-
-	const project = projectsActive[newIndex]
-	const projectBefore = projectsActive[newIndex - 1] ?? null
-	const projectAfter = projectsActive[newIndex + 1] ?? null
-	projectUpdating.value[project.id] = true
-
-	const position = calculateItemPosition(
-		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,
-			namespaceId,
-		})
-	} finally {
-		projectUpdating.value[project.id] = false
-	}
-}
+const projects = computed(() => projectStore.notArchivedRootProjects)
+const favoriteProjects = computed(() => projectStore.favoriteProjects)
 </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;
 
@@ -289,10 +106,10 @@ $vikunja-nav-selected-width: 0.4rem;
 	}
 }
 
-.namespace-container {
-	background: $vikunja-nav-background;
+.menu-container {
+	background: var(--site-background);
 	color: $vikunja-nav-color;
-	padding: 0 0 1rem;
+	padding: 1rem 0;
 	transition: transform $transition-duration ease-in;
 	position: fixed;
 	top: $navbar-height;
@@ -314,252 +131,24 @@ $vikunja-nav-selected-width: 0.4rem;
 	}
 }
 
-// these are general menu styles
-// should be in own components
-.menu {
-	.menu-label,
-	.menu-list .list-menu-link,
-	.menu-list a {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		cursor: pointer;
-
-		.color-bubble {
-			height: 12px;
-			flex: 0 0 12px;
-		}
-	}
-
-	.menu-list {
-		li {
-			height: 44px;
-			display: flex;
-			align-items: center;
-
-			&:hover {
-				background: var(--white);
-			}
-
-			.menu-list-dropdown {
-				opacity: 1;
-				transition: $transition;
-			}
-
-			@media(hover: hover) and (pointer: fine) {
-				.menu-list-dropdown {
-					opacity: 0;
-				}
-
-				&: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;
-		}
-	}
-}
-
-.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;
+.top-menu .menu-list {
+	li {
 		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";
-		}
+		font-family: $vikunja-font;
 	}
 
-	.favorite {
-		margin-left: .25rem;
-		transition: opacity $transition, color $transition;
-		opacity: 1;
+	.list-menu-link,
+	li > a {
+		padding-left: 2rem;
+		display: inline-block;
 
-		&.is-favorite {
-			color: var(--warning);
-			opacity: 1;
+		.icon {
+			padding-bottom: .25rem;
 		}
 	}
-
-
-	@media(hover: hover) and (pointer: fine) {
-		.list-menu .favorite {
-			opacity: 0;
-		}
-
-		.list-menu:hover .favorite,
-		.favorite.is-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});
+.menu + .menu {
+	padding-top: math.div($navbar-padding, 2);
 }
 </style>

src/components/input/ColorPicker.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed, ref, toRef, watch} from 'vue'
+import {computed, ref, watch} from 'vue'
 import {createRandomID} from '@/helpers/randomId'
 import XButton from '@/components/input/button.vue'
 
@@ -53,22 +53,16 @@ const lastChangeTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
 const defaultColors = ref(DEFAULT_COLORS)
 const colorListID = ref(createRandomID())
 
-const props = defineProps({
-	modelValue: {
-		type: String,
-		required: true,
-	},
-	menuPosition: {
-		type: String,
-		default: 'top',
-	},
-})
+const {
+	modelValue,
+} = defineProps<{
+	modelValue: string,
+}>()
 
 const emit = defineEmits(['update:modelValue'])
 
-const modelValue = toRef(props, 'modelValue')
 watch(
-	modelValue,
+	() => modelValue,
 	(newValue) => {
 		color.value = newValue
 	},

src/components/input/SelectNamespace.vue

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

src/components/input/SimpleButton.vue

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

src/components/input/button.vue

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

src/components/input/datepicker.vue

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

src/components/input/datepickerInline.vue

@@ -0,0 +1,228 @@
+<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="() => bubble()"
+			@change="() => bubbleNow()"
 			@update:modelValue="handleInput"
 			class="content"
 			v-if="isEditActive"
@@ -35,7 +35,7 @@
 				</BaseButton>
 				<BaseButton
 					v-else-if="isEditActive"
-					@click="toggleEdit"
+					@click="bubbleSaveClick"
 					class="done-edit">
 					{{ $t('misc.save') }}
 				</BaseButton>
@@ -56,7 +56,7 @@
 			</ul>
 			<x-button
 				v-else-if="isEditActive"
-				@click="toggleEdit"
+				@click="bubbleSaveClick"
 				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,10 +134,9 @@ const props = defineProps({
 	},
 })
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'save'])
 
 const text = ref('')
-const changeTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
 const isEditActive = ref(false)
 const isPreviewActive = ref(true)
 
@@ -148,7 +147,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,
@@ -175,7 +174,7 @@ watch(
 		if (oldVal === '' && text.value === modelValue.value) {
 			return
 		}
-		bubble()
+		bubbleNow()
 	},
 )
 
@@ -208,17 +207,11 @@ function handleInput(val: string) {
 	}
 
 	text.value = val
-	bubble(1000)
+	bubbleNow()
 }
 
-function bubble(timeout = 500) {
-	if (changeTimeout.value !== null) {
-		clearTimeout(changeTimeout.value)
-	}
-
-	changeTimeout.value = setTimeout(() => {
-		emit('update:modelValue', text.value)
-	}, timeout)
+function bubbleNow() {
+	emit('update:modelValue', text.value)
 }
 
 function replaceAt(str: string, index: number, replacement: string) {
@@ -233,7 +226,10 @@ function findNthIndex(str: string, n: number) {
 function renderPreview() {
 	setupMarkdownRenderer(checkboxId.value)
 
-	preview.value = DOMPurify.sanitize(marked(text.value), {ADD_ATTR: ['target']})
+	preview.value = DOMPurify.sanitize(marked(text.value, {
+		mangle: false,
+		headerIds: false,
+	}), {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.
@@ -287,24 +283,26 @@ function handleCheckboxClick(e: Event) {
 		return
 	}
 	const projectPrefix = text.value.substring(index, index + 1)
-	
+
 	console.debug({index, projectPrefix, checked, text: text.value})
 
 	text.value = replaceAt(text.value, index, `${projectPrefix} ${checked ? '[x]' : '[ ]'} `)
-	bubble()
+	bubbleNow()
+	emit('save', text.value)
 	renderPreview()
 }
 
 function toggleEdit() {
-	if (isEditActive.value) {
-		isPreviewActive.value = true
-		isEditActive.value = false
-		renderPreview()
-		bubble(0) // save instantly
-	} else {
-		isPreviewActive.value = false
-		isEditActive.value = true
-	}
+	isPreviewActive.value = false
+	isEditActive.value = true
+}
+
+function bubbleSaveClick() {
+	isPreviewActive.value = true
+	isEditActive.value = false
+	renderPreview()
+	bubbleNow()
+	emit('save', text.value)
 }
 </script>
 

src/components/input/multiselect.vue

@@ -32,6 +32,8 @@
 					@keydown.down.exact.prevent="() => preSelect(0)"
 					ref="searchInput"
 					@focus="handleFocus"
+					:autocomplete="autocompleteEnabled ? undefined : 'off'"
+					:spellcheck="autocompleteEnabled ? undefined : 'false'"
 				/>
 			</div>
 		</div>
@@ -196,6 +198,13 @@ 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/misc/Icon.ts

@@ -4,6 +4,7 @@ import {
 	faAngleRight,
 	faArchive,
 	faArrowLeft,
+	faArrowUpFromBracket,
 	faBars,
 	faBell,
 	faCalendar,
@@ -56,7 +57,7 @@ import {
 	faTimes,
 	faTrashAlt,
 	faUser,
-	faUsers,
+	faUsers, faX,
 } from '@fortawesome/free-solid-svg-icons'
 import {
 	faBellSlash,
@@ -67,10 +68,11 @@ 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)
@@ -86,6 +88,7 @@ library.add(faCheckDouble)
 library.add(faChessKnight)
 library.add(faChevronDown)
 library.add(faCircleInfo)
+library.add(faCircleQuestion)
 library.add(faClock)
 library.add(faCloudDownloadAlt)
 library.add(faCloudUploadAlt)
@@ -137,6 +140,8 @@ 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,22 +76,27 @@ 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);
+	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;
+	}
 }
 
 .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 BaseButtonProps {
+export interface DropDownItemProps extends /* @vue-ignore */ BaseButtonProps {
 	icon?: IconProp,
 }
 

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

@@ -44,8 +44,8 @@ export const KEYBOARD_SHORTCUTS : ShortcutGroup[] = [
 				combination: 'then',
 			},
 			{
-				title: 'keyboardShortcuts.navigation.namespaces',
-				keys: ['g', 'n'],
+				title: 'keyboardShortcuts.navigation.projects',
+				keys: ['g', 'p'],
 				combination: 'then',
 			},
 			{
@@ -140,6 +140,18 @@ export const KEYBOARD_SHORTCUTS : ShortcutGroup[] = [
 				title: 'keyboardShortcuts.task.description',
 				keys: ['e'],
 			},
+			{
+				title: 'keyboardShortcuts.task.priority',
+				keys: ['p'],
+			},
+			{
+				title: 'keyboardShortcuts.task.delete',
+				keys: ['shift', 'delete'],
+			},
+			{
+				title: 'keyboardShortcuts.task.favorite',
+				keys: ['s'],
+			},
 		],
 	},
-]
+]

src/components/misc/loading.vue

@@ -1,13 +1,21 @@
 <template>
-	<div class="loader-container is-loading"></div>
+	<div class="loader-container is-loading" :class="{'is-small': variant === 'small'}"></div>
 </template>
 
 <script lang="ts">
 export default {
-	inheritAttrs: false,
+	inheritAttrs: true,
 }
 </script>
 
+<script lang="ts" setup>
+const {
+	variant = 'default',
+} = defineProps<{
+	variant?: 'default' | 'small'
+}>()
+</script>
+
 <style scoped lang="scss">
 .loader-container {
 	height: 100%;
@@ -20,5 +28,18 @@ export default {
 		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,17 +75,19 @@ import BaseButton from '@/components/base/BaseButton.vue'
 import {ref, useAttrs, watchEffect} from 'vue'
 import {useScrollLock} from '@vueuse/core'
 
-const props = withDefaults(defineProps<{
+const {
+	enabled = true,
+	overflow,
+	wide,
+	transitionName = 'modal',
+	variant = 'default',
+} = defineProps<{
 	enabled?: boolean,
 	overflow?: boolean,
 	wide?: boolean,
 	transitionName?: 'modal' | 'fade',
 	variant?: 'default' | 'hint-modal' | 'scrolling',
-}>(), {
-	enabled: true,
-	transitionName: 'modal',
-	variant: 'default',
-})
+}>()
 
 defineEmits(['close', 'submit'])
 
@@ -95,7 +97,7 @@ const modal = ref<HTMLElement | null>(null)
 const scrollLock = useScrollLock(modal)
 
 watchEffect(() => {
-	scrollLock.value = props.enabled
+	scrollLock.value = enabled
 })
 </script>
 
@@ -200,10 +202,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/>
+					<api-config v-if="showApiConfig"/>
 					<Message v-if="motd !== ''" class="is-hidden-tablet mb-4">
 						{{ motd }}
 					</Message>
@@ -45,6 +45,12 @@ 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"/>
+		<slot name="content" :isOpen="open" :toggle="toggle"/>
 	</div>
 </template>
 
@@ -23,11 +23,14 @@ 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,22 +11,20 @@
 		<slot/>
 	</template>
 	<section v-else-if="error !== ''">
-		<no-auth-wrapper>
-			<card>
-				<p v-if="error === ERROR_NO_API_URL">
-					{{ $t('ready.noApiUrlConfigured') }}
+		<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 }}
 				</p>
-				<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>
+				<p>
+					{{ $t('ready.checkApiUrl') }}
+				</p>
+			</message>
+			<api-config :configure-open="true" @found-api="load"/>
 		</no-auth-wrapper>
 	</section>
 	<CustomTransition name="fade">
@@ -56,11 +54,13 @@ 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)
+		const redirectTo = await getAuthForRoute(route, authStore)
 		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,
+	entity: String as ISubscription['entity'],
 	entityId: Number,
 	isButton: {
 		type: Boolean,
@@ -73,12 +73,6 @@ const {t} = useI18n({useScope: 'global'})
 
 const tooltipText = computed(() => {
 	if (disabled.value) {
-		if (props.entity === 'project' && subscriptionEntity.value === 'namespace') {
-			return t('task.subscription.subscribedProjectThroughParentNamespace')
-		}
-		if (props.entity === 'task' && subscriptionEntity.value === 'namespace') {
-			return t('task.subscription.subscribedTaskThroughParentNamespace')
-		}
 		if (props.entity === 'task' && subscriptionEntity.value === 'project') {
 			return t('task.subscription.subscribedTaskThroughParentProject')
 		}
@@ -87,10 +81,6 @@ const tooltipText = computed(() => {
 	}
 
 	switch (props.entity) {
-		case 'namespace':
-			return props.modelValue !== null ?
-				t('task.subscription.subscribedNamespace') :
-				t('task.subscription.notSubscribedNamespace')
 		case 'project':
 			return props.modelValue !== null ?
 				t('task.subscription.subscribedProject') :
@@ -130,9 +120,6 @@ async function subscribe() {
 
 	let message = ''
 	switch (props.entity) {
-		case 'namespace':
-			message = t('task.subscription.subscribeSuccessNamespace')
-			break
 		case 'project':
 			message = t('task.subscription.subscribeSuccessProject')
 			break
@@ -153,9 +140,6 @@ async function unsubscribe() {
 
 	let message = ''
 	switch (props.entity) {
-		case 'namespace':
-			message = t('task.subscription.unsubscribeSuccessNamespace')
-			break
 		case 'project':
 			message = t('task.subscription.unsubscribeSuccessProject')
 			break

src/components/misc/user.vue

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

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

@@ -1,103 +0,0 @@
-<template>
-	<dropdown>
-		<template #trigger="triggerProps">
-			<slot name="trigger" v-bind="triggerProps">
-				<BaseButton class="dropdown-trigger" @click="triggerProps.toggleOpen">
-					<icon icon="ellipsis-h" class="icon"/>
-				</BaseButton>
-			</slot>
-		</template>
-
-		<template v-if="namespace.isArchived">
-			<dropdown-item
-				:to="{ name: 'namespace.settings.archive', params: { id: namespace.id } }"
-				icon="archive"
-			>
-				{{ $t('menu.unarchive') }}
-			</dropdown-item>
-		</template>
-		<template v-else>
-			<dropdown-item
-				:to="{ name: 'namespace.settings.edit', params: { id: namespace.id } }"
-				icon="pen"
-			>
-				{{ $t('menu.edit') }}
-			</dropdown-item>
-			<dropdown-item
-				:to="{ name: 'namespace.settings.share', params: { namespaceId: namespace.id } }"
-				icon="share-alt"
-			>
-				{{ $t('menu.share') }}
-			</dropdown-item>
-			<dropdown-item
-				:to="{ name: 'project.create', params: { namespaceId: namespace.id } }"
-				icon="plus"
-			>
-				{{ $t('menu.newProject') }}
-			</dropdown-item>
-			<dropdown-item
-				:to="{ name: 'namespace.settings.archive', params: { id: namespace.id } }"
-				icon="archive"
-			>
-				{{ $t('menu.archive') }}
-			</dropdown-item>
-			<Subscription
-				class="has-no-shadow"
-				:is-button="false"
-				entity="namespace"
-				:entity-id="namespace.id"
-				:model-value="subscription"
-				@update:model-value="setSubscriptionInStore"
-				type="dropdown"
-			/>
-			<dropdown-item
-				:to="{ name: 'namespace.settings.delete', params: { id: namespace.id } }"
-				icon="trash-alt"
-				class="has-text-danger"
-			>
-				{{ $t('menu.delete') }}
-			</dropdown-item>
-		</template>
-	</dropdown>
-</template>
-
-<script setup lang="ts">
-import {ref, onMounted, type PropType} from 'vue'
-
-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 {INamespace} from '@/modelTypes/INamespace'
-import type {ISubscription} from '@/modelTypes/ISubscription'
-import {useNamespaceStore} from '@/stores/namespaces'
-
-const props = defineProps({
-	namespace: {
-		type: Object as PropType<INamespace>,
-		required: true,
-	},
-})
-
-const namespaceStore = useNamespaceStore()
-
-const subscription = ref<ISubscription | null>(null)
-onMounted(() => {
-	subscription.value = props.namespace.subscription
-})
-
-function setSubscriptionInStore(sub: ISubscription) {
-	subscription.value = sub
-	namespaceStore.setNamespaceById({
-		...props.namespace,
-		subscription: sub,
-	})
-}
-</script>
-
-<style scoped lang="scss">
-.dropdown-trigger {
-	padding: 0.5rem;
-	display: flex;
-}
-</style>

src/components/notifications/notifications.vue

@@ -20,7 +20,8 @@
 						:user="n.notification.doer"
 						:show-username="false"
 						:avatar-size="16"
-						v-if="n.notification.doer"/>
+						v-if="n.notification.doer"
+					/>
 					<div class="detail">
 						<div>
 							<span class="has-text-weight-bold mr-1" v-if="n.notification.doer">

src/components/project/ProjectWrapper.vue

@@ -1,9 +1,13 @@
 <template>
 	<div
-		:class="{ 'is-loading': projectService.loading, 'is-archived': currentProject.isArchived}"
+		:class="{ 'is-loading': projectService.loading, 'is-archived': currentProject?.isArchived}"
 		class="loader-container"
 	>
-		<div class="switch-view-container">
+		<h1 class="project-title-print">
+			{{ getProjectTitle(currentProject) }}
+		</h1>
+		
+		<div class="switch-view-container d-print-none">
 			<div class="switch-view">
 				<BaseButton
 					v-shortcut="'g l'"
@@ -45,8 +49,8 @@
 			<slot name="header" />
 		</div>
 		<CustomTransition name="fade">
-			<Message variant="warning" v-if="currentProject.isArchived" class="mb-4">
-				{{ $t('project.archived') }}
+			<Message variant="warning" v-if="currentProject?.isArchived" class="mb-4">
+				{{ $t('project.archivedMessage') }}
 			</Message>
 		</CustomTransition>
 
@@ -98,7 +102,7 @@ const currentProject = computed(() => {
 		maxRight: null,
 	} : baseStore.currentProject
 })
-useTitle(() => currentProject.value.id ? getProjectTitle(currentProject.value) : '')
+useTitle(() => currentProject.value?.id ? getProjectTitle(currentProject.value) : '')
 
 // watchEffect would be called every time the prop would get a value assigned, even if that value was the same as before.
 // This resulted in loading and setting the project multiple times, even when navigating away from it.
@@ -118,7 +122,7 @@ watch(
 			(
 				projectIdToLoad === loadedProjectId.value ||
 				typeof projectIdToLoad === 'undefined' ||
-				projectIdToLoad === currentProject.value.id
+				projectIdToLoad === currentProject.value?.id
 			)
 			&& typeof currentProject.value !== 'undefined' && currentProject.value.maxRight !== null
 		) {
@@ -130,10 +134,8 @@ watch(
 
 		// Set the current project to the one we're about to load so that the title is already shown at the top
 		loadedProjectId.value = 0
-		const projectFromStore = projectStore.getProjectById(projectData.id)
-		if (projectFromStore !== null) {
-			baseStore.setBackground(null)
-			baseStore.setBlurHash(null)
+		const projectFromStore = projectStore.projects[projectData.id]
+		if (projectFromStore) {
 			baseStore.handleSetCurrentProject({project: projectFromStore})
 		}
 
@@ -197,4 +199,15 @@ watch(
 .is-archived .notification.is-warning {
   margin-bottom: 1rem;
 }
+
+.project-title-print {
+	display: none;
+	font-size: 1.75rem;
+	text-align: center;
+	margin-bottom: .5rem;
+	
+	@media print {
+		display: block;
+	}
+}
 </style>

src/components/project/partials/ProjectCard.vue

@@ -15,9 +15,14 @@
 			:class="{'is-visible': background}"
 			:style="{'background-image': background !== null ? `url(${background})` : undefined}"
 		/>
-		<span v-if="project.isArchived" class="is-archived" >{{ $t('namespace.archived') }}</span>
+		<span v-if="project.isArchived" class="is-archived" >{{ $t('project.archived') }}</span>
 
-		<div class="project-title" aria-hidden="true">{{ project.title }}</div>
+		<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>
 		<BaseButton
 			class="project-button"
 			:aria-label="project.title"
@@ -39,8 +44,6 @@
 </template>
 
 <script lang="ts" setup>
-import {toRef, type PropType} from 'vue'
-
 import type {IProject} from '@/modelTypes/IProject'
 
 import BaseButton from '@/components/base/BaseButton.vue'
@@ -48,14 +51,13 @@ import BaseButton from '@/components/base/BaseButton.vue'
 import {useProjectBackground} from './useProjectBackground'
 import {useProjectStore} from '@/stores/projects'
 
-const props = defineProps({
-	project: {
-		type: Object as PropType<IProject>,
-		required: true,
-	},
-})
+const {
+	project,
+} = defineProps<{
+	project: IProject,
+}>()
 
-const {background, blurHashUrl} = useProjectBackground(toRef(props, 'project'))
+const {background, blurHashUrl} = useProjectBackground(project)
 
 const projectStore = useProjectStore()
 </script>
@@ -179,4 +181,9 @@ const projectStore = useProjectStore()
     opacity: 1;
   }
 }
+
+.saved-filter-icon {
+	color: var(--grey-300);
+	font-size: .75em;
+}
 </style>

src/components/project/partials/filters.vue

@@ -147,6 +147,7 @@
 			<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"
 				/>
@@ -165,16 +166,6 @@
 					/>
 				</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>
 		</template>
 	</card>
 </template>
@@ -189,7 +180,6 @@ import {camelCase} from 'camel-case'
 
 import type {ILabel} from '@/modelTypes/ILabel'
 import type {IUser} from '@/modelTypes/IUser'
-import type {INamespace} from '@/modelTypes/INamespace'
 import type {IProject} from '@/modelTypes/IProject'
 
 import {useLabelStore} from '@/stores/labels'
@@ -201,7 +191,6 @@ 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 SelectNamespace from '@/components/input/SelectNamespace.vue'
 
 import {parseDateOrString} from '@/helpers/time/parseDateOrString'
 import {dateIsValid, formatISO} from '@/helpers/time/formatDate'
@@ -209,7 +198,6 @@ import {objectToSnakeCase} from '@/helpers/case'
 
 import UserService from '@/services/user'
 import ProjectService from '@/services/project'
-import NamespaceService from '@/services/namespace'
 
 // FIXME: do not use this here for now. instead create new version from DEFAULT_PARAMS
 import {getDefaultParams} from '@/composables/useTaskList'
@@ -240,7 +228,6 @@ const DEFAULT_FILTERS = {
 	assignees: '',
 	labels: '',
 	project_id: '',
-	namespace: '',
 } as const
 
 const props = defineProps({
@@ -265,23 +252,20 @@ const filters = ref({...DEFAULT_FILTERS})
 const services = {
 	users: shallowReactive(new UserService()),
 	projects: shallowReactive(new ProjectService()),
-  namespace: shallowReactive(new NamespaceService()),
 }
 
 interface Entities {
 	users: IUser[]
 	labels: ILabel[]
 	projects: IProject[]
-	namespace: INamespace[]
 }
 
-type EntityType = 'users' | 'labels' | 'projects' | 'namespace'
+type EntityType = 'users' | 'labels' | 'projects'
 
 const entities: Entities = reactive({
 	users: [],
 	labels: [],
 	projects: [],
-	namespace: [],
 })
 
 onMounted(() => {
@@ -328,7 +312,6 @@ function prepareFilters() {
 	prepareDate('reminders')
 	prepareRelatedObjectFilter('users', 'assignees')
 	prepareRelatedObjectFilter('projects', 'project_id')
-	prepareRelatedObjectFilter('namespace')
 
 	prepareSingleValue('labels')
 

src/components/project/partials/useProjectBackground.ts

@@ -1,19 +1,19 @@
-import {ref, watch, type Ref} from 'vue'
+import {ref, watch, type ShallowReactive} from 'vue'
 import ProjectService from '@/services/project'
 import type {IProject} from '@/modelTypes/IProject'
 import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
 
-export function useProjectBackground(project: Ref<IProject>) {
+export function useProjectBackground(project: ShallowReactive<IProject>) {
 	const background = ref<string | null>(null)
 	const backgroundLoading = ref(false)
 	const blurHashUrl = ref('')
 
 	watch(
-		() => [project.value.id, project.value.backgroundBlurHash] as [IProject['id'], IProject['backgroundBlurHash']],
+		() => [project.id, project.backgroundBlurHash] as [IProject['id'], IProject['backgroundBlurHash']],
 		async ([projectId, blurHash], oldValue) => {
 			if (
-				project.value === null ||
-				!project.value.backgroundInformation ||
+				project === null ||
+				!project.backgroundInformation ||
 				backgroundLoading.value
 			) {
 				return
@@ -36,7 +36,7 @@ export function useProjectBackground(project: Ref<IProject>) {
 				})
 
 				const projectService = new ProjectService()
-				const backgroundPromise = projectService.background(project.value).then((result) => {
+				const backgroundPromise = projectService.background(project).then((result) => {
 					background.value = result
 				})
 				await Promise.all([blurHashPromise, backgroundPromise])

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

@@ -72,6 +72,13 @@
 				@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 } }"
 				icon="trash-alt"
@@ -96,17 +103,18 @@ import type {ISubscription} from '@/modelTypes/ISubscription'
 import {isSavedFilter} from '@/services/savedFilter'
 import {useConfigStore} from '@/stores/config'
 import {useProjectStore} from '@/stores/projects'
-import {useNamespaceStore} from '@/stores/namespaces'
 
 const props = defineProps({
 	project: {
 		type: Object as PropType<IProject>,
 		required: true,
 	},
+	level: {
+		type: Number,
+	},
 })
 
 const projectStore = useProjectStore()
-const namespaceStore = useNamespaceStore()
 const subscription = ref<ISubscription | null>(null)
 watchEffect(() => {
 	subscription.value = props.project.subscription ?? null
@@ -122,6 +130,5 @@ function setSubscriptionInStore(sub: ISubscription) {
 		subscription: sub,
 	}
 	projectStore.setProject(updatedProject)
-	namespaceStore.setProjectInNamespaceById(updatedProject)
 }
 </script>

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

@@ -61,7 +61,6 @@ import {useRouter} from 'vue-router'
 import TaskService from '@/services/task'
 import TeamService from '@/services/team'
 
-import NamespaceModel from '@/models/namespace'
 import TeamModel from '@/models/team'
 import ProjectModel from '@/models/project'
 
@@ -70,18 +69,16 @@ import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'
 
 import {useBaseStore} from '@/stores/base'
 import {useProjectStore} from '@/stores/projects'
-import {useNamespaceStore} from '@/stores/namespaces'
 import {useLabelStore} from '@/stores/labels'
 import {useTaskStore} from '@/stores/tasks'
+import {useAuthStore} from '@/stores/auth'
 
 import {getHistory} from '@/modules/projectHistory'
 import {parseTaskText, PrefixMode, PREFIXES} from '@/modules/parseTaskText'
-import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
 import {success} from '@/message'
 
 import type {ITeam} from '@/modelTypes/ITeam'
 import type {ITask} from '@/modelTypes/ITask'
-import type {INamespace} from '@/modelTypes/INamespace'
 import type {IProject} from '@/modelTypes/IProject'
 
 const {t} = useI18n({useScope: 'global'})
@@ -89,9 +86,9 @@ const router = useRouter()
 
 const baseStore = useBaseStore()
 const projectStore = useProjectStore()
-const namespaceStore = useNamespaceStore()
 const labelStore = useLabelStore()
 const taskStore = useTaskStore()
+const authStore = useAuthStore()
 
 type DoAction<Type = any> = { type: ACTION_TYPE } & Type
 
@@ -105,7 +102,6 @@ enum ACTION_TYPE {
 enum COMMAND_TYPE {
 	NEW_TASK = 'newTask',
 	NEW_PROJECT = 'newProject',
-	NEW_NAMESPACE = 'newNamespace',
 	NEW_TEAM = 'newTeam',
 }
 
@@ -147,24 +143,15 @@ const foundProjects = computed(() => {
 		return []
 	}
 
-	const ncache: { [id: ProjectModel['id']]: INamespace } = {}
 	const history = getHistory()
 	const allProjects = [
 		...new Set([
-			...history.map((l) => projectStore.getProjectById(l.id)),
+			...history.map((l) => projectStore.projects[l.id]),
 			...projectStore.searchProject(project),
 		]),
 	]
 
-	return allProjects.filter((l) => {
-		if (typeof l === 'undefined' || l === null) {
-			return false
-		}
-		if (typeof ncache[l.namespaceId] === 'undefined') {
-			ncache[l.namespaceId] = namespaceStore.getNamespaceById(l.namespaceId)
-		}
-		return !ncache[l.namespaceId].isArchived
-	})
+	return allProjects.filter(l => Boolean(l))
 })
 
 // FIXME: use fuzzysearch
@@ -205,7 +192,6 @@ const results = computed<Result[]>(() => {
 
 const loading = computed(() => 
 	taskService.loading ||
-	namespaceStore.isLoading ||
 	projectStore.isLoading ||
 	teamService.loading,
 )
@@ -230,12 +216,6 @@ const commands = computed<{ [key in COMMAND_TYPE]: Command }>(() => ({
 		placeholder: t('quickActions.newProject'),
 		action: newProject,
 	},
-	newNamespace: {
-		type: COMMAND_TYPE.NEW_NAMESPACE,
-		title: t('quickActions.cmds.newNamespace'),
-		placeholder: t('quickActions.newNamespace'),
-		action: newNamespace,
-	},
 	newTeam: {
 		type: COMMAND_TYPE.NEW_TEAM,
 		title: t('quickActions.cmds.newTeam'),
@@ -252,7 +232,6 @@ const currentProject = computed(() => Object.keys(baseStore.currentProject).leng
 )
 
 const hintText = computed(() => {
-	let namespace
 	if (selectedCmd.value !== null && currentProject.value !== null) {
 		switch (selectedCmd.value.type) {
 			case COMMAND_TYPE.NEW_TASK:
@@ -260,16 +239,11 @@ const hintText = computed(() => {
 					title: currentProject.value.title,
 				})
 			case COMMAND_TYPE.NEW_PROJECT:
-				namespace = namespaceStore.getNamespaceById(
-					currentProject.value.namespaceId,
-				)
-				return t('quickActions.createProject', {
-					title: namespace?.title,
-				})
+				return t('quickActions.createProject')
 		}
 	}
 	const prefixes =
-		PREFIXES[getQuickAddMagicMode()] ?? PREFIXES[PrefixMode.Default]
+		PREFIXES[authStore.settings.frontendSettings.quickAddMagicMode] ?? PREFIXES[PrefixMode.Default]
 	return t('quickActions.hint', prefixes)
 })
 
@@ -278,11 +252,11 @@ const availableCmds = computed(() => {
 	if (currentProject.value !== null) {
 		cmds.push(commands.value.newTask, commands.value.newProject)
 	}
-	cmds.push(commands.value.newNamespace, commands.value.newTeam)
+	cmds.push(commands.value.newTeam)
 	return cmds
 })
 
-const parsedQuery = computed(() => parseTaskText(query.value, getQuickAddMagicMode()))
+const parsedQuery = computed(() => parseTaskText(query.value, authStore.settings.frontendSettings.quickAddMagicMode))
 
 const searchMode = computed(() => {
 	if (query.value === '') {
@@ -396,7 +370,7 @@ function searchTasks() {
 		const r = await taskService.getAll({}, params) as  DoAction<ITask>[]
 		foundTasks.value = r.map((t) => {
 			t.type = ACTION_TYPE.TASK
-			const project = projectStore.getProjectById(t.projectId)
+			const project = projectStore.projects[t.projectId]
 			if (project !== null) {
 				t.title = `${t.title} (${project.title})`
 			}
@@ -504,21 +478,10 @@ async function newProject() {
 	if (currentProject.value === null) {
 		return
 	}
-	const newProject = await projectStore.createProject(new ProjectModel({
+	await projectStore.createProject(new ProjectModel({
 		title: query.value,
-		namespaceId: currentProject.value.namespaceId,
 	}))
 	success({ message: t('project.create.createdSuccess')})
-	await router.push({
-		name: 'project.index',
-		params: { projectId: newProject.id },
-	})
-}
-
-async function newNamespace() {
-	const newNamespace = new NamespaceModel({ title: query.value })
-	await namespaceStore.createNamespace(newNamespace)
-	success({ message: t('namespace.create.success')  })
 }
 
 async function newTeam() {

src/components/sharing/linkSharing.vue

@@ -251,7 +251,7 @@ async function load(projectId: IProject['id']) {
 
 	const links = await linkShareService.getAll({projectId})
 	links.forEach((l: ILinkShare) => {
-		selectedView.value[l.id] = 'project'
+		selectedView.value[l.id] = 'list'
 	})
 	linkShares.value = links
 }

src/components/sharing/userTeam.vue

@@ -139,10 +139,6 @@ import {ref, reactive, computed, shallowReactive, type Ref} from 'vue'
 import type {PropType} from 'vue'
 import {useI18n} from 'vue-i18n'
 
-import UserNamespaceService from '@/services/userNamespace'
-import UserNamespaceModel from '@/models/userNamespace'
-import type {IUserNamespace} from '@/modelTypes/IUserNamespace'
-
 import UserProjectService from '@/services/userProject'
 import UserProjectModel from '@/models/userProject'
 import type {IUserProject} from '@/modelTypes/IUserProject'
@@ -151,10 +147,6 @@ import UserService from '@/services/user'
 import UserModel, { getDisplayName } from '@/models/user'
 import type {IUser} from '@/modelTypes/IUser'
 
-import TeamNamespaceService from '@/services/teamNamespace'
-import TeamNamespaceModel from '@/models/teamNamespace'
-import type { ITeamNamespace } from '@/modelTypes/ITeamNamespace'
-
 import TeamProjectService from '@/services/teamProject'
 import TeamProjectModel from '@/models/teamProject'
 import type { ITeamProject } from '@/modelTypes/ITeamProject'
@@ -170,13 +162,15 @@ import Nothing from '@/components/misc/nothing.vue'
 import {success} from '@/message'
 import {useAuthStore} from '@/stores/auth'
 
+// FIXME: I think this whole thing can now only manage user/team sharing for projects? Maybe remove a little generalization?
+
 const props = defineProps({
 	type: {
-		type: String as PropType<'project' | 'namespace'>,
+		type: String as PropType<'project'>,
 		default: '',
 	},
 	shareType: {
-		type: String as PropType<'user' | 'team' | 'namespace'>,
+		type: String as PropType<'user' | 'team'>,
 		default: '',
 	},
 	id: {
@@ -191,9 +185,9 @@ const props = defineProps({
 
 const {t} = useI18n({useScope: 'global'})
 
-// This user service is either a userNamespaceService or a userProjectService, depending on the type we are using
-let stuffService: UserNamespaceService | UserProjectService | TeamProjectService | TeamNamespaceService
-let stuffModel: IUserNamespace | IUserProject | ITeamProject | ITeamNamespace
+// This user service is a userProjectService, depending on the type we are using
+let stuffService: UserProjectService | TeamProjectService
+let stuffModel: IUserProject | ITeamProject
 let searchService: UserService | TeamService
 let sharable: Ref<IUser | ITeam>
 
@@ -231,10 +225,6 @@ const sharableName = computed(() => {
 		return t('project.list.title')
 	}
 
-	if (props.shareType === 'namespace') {
-		return t('namespace.namespace')
-	}
-
 	return ''
 })
 
@@ -247,11 +237,6 @@ if (props.shareType === 'user') {
 	if (props.type === 'project') {
 		stuffService = shallowReactive(new UserProjectService())
 		stuffModel = reactive(new UserProjectModel({projectId: props.id}))
-	} else if (props.type === 'namespace') {
-		stuffService = shallowReactive(new UserNamespaceService())
-		stuffModel = reactive(new UserNamespaceModel({
-			namespaceId: props.id,
-		}))
 	} else {
 		throw new Error('Unknown type: ' + props.type)
 	}
@@ -264,11 +249,6 @@ if (props.shareType === 'user') {
 	if (props.type === 'project') {
 		stuffService = shallowReactive(new TeamProjectService())
 		stuffModel = reactive(new TeamProjectModel({projectId: props.id}))
-	} else if (props.type === 'namespace') {
-		stuffService = shallowReactive(new TeamNamespaceService())
-		stuffModel = reactive(new TeamNamespaceModel({
-			namespaceId: props.id,
-		}))
 	} else {
 		throw new Error('Unknown type: ' + props.type)
 	}

src/components/tasks/add-task.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="task-add" ref="taskAdd">
 		<div class="add-task__field field is-grouped">
-			<p class="control has-icons-left is-expanded">
+			<p class="control has-icons-left has-icons-right is-expanded">
 				<textarea
 					class="add-task-textarea input"
 					:class="{'textarea-empty': newTaskTitle === ''}"
@@ -16,6 +16,7 @@
 				<span class="icon is-small is-left">
 					<icon icon="tasks"/>
 				</span>
+				<quick-add-magic :highlight-hint-icon="taskAddHovered"/>
 			</p>
 			<p class="control">
 				<x-button
@@ -32,11 +33,10 @@
 				</x-button>
 			</p>
 		</div>
-		<Expandable :open="errorMessage !== '' || taskAddFocused || taskAddHovered && debouncedTaskAddHovered">
+		<Expandable :open="errorMessage !== ''">
 			<p class="pt-3 mt-0 help is-danger" v-if="errorMessage !== ''">
 				{{ errorMessage }}
 			</p>
-			<quick-add-magic v-else class="quick-add-magic" />
 		</Expandable>
 	</div>
 </template>
@@ -44,7 +44,7 @@
 <script setup lang="ts">
 import {computed, ref} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {refDebounced, useElementHover, useFocusWithin} from '@vueuse/core'
+import {useElementHover} from '@vueuse/core'
 
 import {RELATION_KIND} from '@/types/IRelationKind'
 import type {ITask} from '@/modelTypes/ITask'
@@ -77,8 +77,6 @@ const {t} = useI18n({useScope: 'global'})
 const authStore = useAuthStore()
 const taskStore = useTaskStore()
 
-const taskAdd = ref<HTMLTextAreaElement | null>(null)
-
 // enable only if we don't have a modal
 // onStartTyping(() => {
 // 	if (newTaskInput.value === null || document.activeElement === newTaskInput.value) {
@@ -87,10 +85,8 @@ const taskAdd = ref<HTMLTextAreaElement | null>(null)
 // 	newTaskInput.value.focus()
 // })
 
-const { focused: taskAddFocused } = useFocusWithin(taskAdd)
-
+const taskAdd = ref<HTMLTextAreaElement | null>(null)
 const taskAddHovered = useElementHover(taskAdd)
-const debouncedTaskAddHovered = refDebounced(taskAddHovered, 500)
 
 const errorMessage = ref('')
 
@@ -120,12 +116,12 @@ async function addTask() {
 	// This allows us to find the tasks with the title they had before being parsed
 	// by quick add magic.
 	const createdTasks: { [key: ITask['title']]: ITask } = {}
-	const tasksToCreate = parseSubtasksViaIndention(newTaskTitle.value)
+	const tasksToCreate = parseSubtasksViaIndention(newTaskTitle.value, authStore.settings.frontendSettings.quickAddMagicMode)
 
 	// We ensure all labels exist prior to passing them down to the create task method
 	// In the store it will only ever see one task at a time so there's no way to reliably 
 	// check if a new label was created before (because everything happens async).
-	const allLabels = tasksToCreate.map(({title}) => getLabelsFromPrefix(title) ?? [])
+	const allLabels = tasksToCreate.map(({title}) => getLabelsFromPrefix(title, authStore.settings.frontendSettings.quickAddMagicMode) ?? [])
 	await taskStore.ensureLabelsExist(allLabels.flat())
 
 	const newTasks = tasksToCreate.map(async ({title, project}) => {
@@ -244,7 +240,14 @@ defineExpose({
 	text-overflow: ellipsis;
 }
 
-.quick-add-magic {
-	padding-top: 0.75rem;
+.control.has-icons-left .icon,
+.control.has-icons-right .icon {
+	transition: all $transition;
+}
+</style>
+
+<style>
+button.show-helper-text {
+	right: 0;
 }
 </style>

src/components/tasks/partials/attachments.vue

@@ -180,13 +180,13 @@ import {useI18n} from 'vue-i18n'
 const taskStore = useTaskStore()
 const {t} = useI18n({useScope: 'global'})
 
-const props = withDefaults(defineProps<{
+const {
+	task,
+	editEnabled = true,
+} = defineProps<{
 	task: ITask,
-	initialAttachments?: IAttachment[],
 	editEnabled: boolean,
-}>(), {
-	editEnabled: true,
-})
+}>()
 
 // FIXME: this should go through the store
 const emit = defineEmits(['task-changed'])
@@ -223,7 +223,7 @@ function uploadNewAttachment() {
 }
 
 function uploadFilesToTask(files: File[] | FileList) {
-	uploadFiles(attachmentService, props.task.id, files)
+	uploadFiles(attachmentService, task.id, files)
 }
 
 const attachmentToDelete = ref<IAttachment | null>(null)
@@ -260,12 +260,12 @@ async function viewOrDownload(attachment: IAttachment) {
 const copy = useCopyToClipboard()
 
 function copyUrl(attachment: IAttachment) {
-	copy(generateAttachmentUrl(props.task.id, attachment.id))
+	copy(generateAttachmentUrl(task.id, attachment.id))
 }
 
 async function setCoverImage(attachment: IAttachment | null) {
-	const task = await taskStore.setCoverImage(props.task, attachment)
-	emit('task-changed', task)
+	const updatedTask = await taskStore.setCoverImage(task, attachment)
+	emit('task-changed', updatedTask)
 	success({message: t('task.attachment.successfullyChangedCoverImage')})
 }
 </script>

src/components/tasks/partials/comments.vue

@@ -74,9 +74,13 @@
 						@update:model-value="
 							() => {
 								toggleEdit(c)
-								editComment()
+								editCommentWithDelay()
 							}
 						"
+						@save="() => {
+							toggleEdit(c)
+							editComment()
+						}"
 						:bottom-actions="actions[c.id]"
 						:show-save="true"
 					/>
@@ -279,10 +283,26 @@ function toggleDelete(commentId: ITaskComment['id']) {
 	commentToDelete.id = commentId
 }
 
+const changeTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
+
+async function editCommentWithDelay() {
+	if (changeTimeout.value !== null) {
+		clearTimeout(changeTimeout.value)
+	}
+
+	changeTimeout.value = setTimeout(async () => {
+		await editComment()
+	}, 5000)
+}
+
 async function editComment() {
 	if (commentEdit.comment === '') {
 		return
 	}
+	
+	if (changeTimeout.value !== null) {
+		clearTimeout(changeTimeout.value)
+	}
 
 	saving.value = commentEdit.id
 

src/components/tasks/partials/defer-task.vue

@@ -38,7 +38,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref, shallowReactive, computed, watch, onMounted, onBeforeUnmount, toRef, type PropType} from 'vue'
+import {ref, shallowReactive, computed, watch, onMounted, onBeforeUnmount} from 'vue'
 import {useI18n} from 'vue-i18n'
 import flatPickr from 'vue-flatpickr-component'
 
@@ -46,12 +46,12 @@ import TaskService from '@/services/task'
 import type {ITask} from '@/modelTypes/ITask'
 import {useAuthStore} from '@/stores/auth'
 
-const props = defineProps({
-	modelValue: {
-		type: Object as PropType<ITask>,
-		required: true,
-	},
-})
+const {
+	modelValue,
+} = defineProps<{
+	modelValue: ITask,
+}>()
+
 const emit = defineEmits(['update:modelValue'])
 
 const {t} = useI18n({useScope: 'global'})
@@ -66,7 +66,7 @@ const lastValue = ref<Date | null>()
 const changeInterval = ref<ReturnType<typeof setInterval>>()
 
 watch(
-	toRef(props, 'modelValue'),
+	() => modelValue,
 	(value) => {
 		task.value = { ...value }
 		dueDate.value = value.dueDate

src/components/tasks/partials/description.vue

@@ -25,7 +25,8 @@
 			:show-save="true"
 			edit-shortcut="e"
 			v-model="task.description"
-			@update:model-value="save"
+			@update:model-value="saveWithDelay"
+			@save="save"
 		/>
 	</div>
 </template>
@@ -40,7 +41,6 @@ import type {ITask} from '@/modelTypes/ITask'
 import {useTaskStore} from '@/stores/tasks'
 import TaskModel from '@/models/task'
 
-
 const props = defineProps({
 	modelValue: {
 		type: Object as PropType<ITask>,
@@ -74,7 +74,23 @@ watch(
 	{immediate: true},
 )
 
+const changeTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
+
+async function saveWithDelay() {
+	if (changeTimeout.value !== null) {
+		clearTimeout(changeTimeout.value)
+	}
+
+	changeTimeout.value = setTimeout(async () => {
+		await save()
+	}, 5000)
+}
+
 async function save() {
+	if (changeTimeout.value !== null) {
+		clearTimeout(changeTimeout.value)
+	}
+
 	saving.value = true
 
 	try {

src/components/tasks/partials/editAssignees.vue

@@ -9,15 +9,19 @@
 		label="name"
 		:select-placeholder="$t('task.assignee.selectPlaceholder')"
 		v-model="assignees"
+		:autocomplete-enabled="false"
 	>
 		<template #tag="{item: user}">
 			<span class="assignee">
-				<user :avatar-size="32" :show-username="false" :user="user"/>
+				<user :avatar-size="32" :show-username="false" :user="user" class="m-2"/>
 				<BaseButton @click="removeAssignee(user)" class="remove-assignee" v-if="!disabled">
 					<icon icon="times"/>
 				</BaseButton>
 			</span>
 		</template>
+		<template #searchResult="{option: user}">
+			<user :avatar-size="24" :show-username="true" :user="user"/>
+		</template>
 	</Multiselect>
 </template>
 
@@ -104,11 +108,6 @@ async function removeAssignee(user: IUser) {
 }
 
 async function findUser(query: string) {
-	if (query === '') {
-		foundUsers.value = []
-		return
-	}
-
 	const response = await projectUserService.getAll({projectId: props.projectId}, {s: query}) as IUser[]
 
 	// Filter the results to not include users who are already assigned

src/components/tasks/partials/editLabels.vue

@@ -7,7 +7,7 @@
 		:search-results="foundLabels"
 		@select="addLabel"
 		label="title"
-		:creatable="true"
+		:creatable="creatable"
 		@create="createAndAddLabel"
 		:create-placeholder="$t('task.label.createPlaceholder')"
 		v-model="labels"
@@ -65,6 +65,10 @@ const props = defineProps({
 	disabled: {
 		default: false,
 	},
+	creatable: {
+		type: Boolean,
+		default: true,
+	},
 })
 
 const emit = defineEmits(['update:modelValue'])

src/components/tasks/partials/heading.vue

@@ -51,7 +51,7 @@ import {useCopyToClipboard} from '@/composables/useCopyToClipboard'
 import {useTaskStore} from '@/stores/tasks'
 
 import type {ITask} from '@/modelTypes/ITask'
-import {getHexColor} from '@/models/task'
+import {getHexColor, getTaskIdentifier} from '@/models/task'
 
 const props = defineProps({
 	task: {
@@ -79,7 +79,7 @@ async function copyUrl() {
 const taskStore = useTaskStore()
 const loading = computed(() => taskStore.isLoading)
 
-const textIdentifier = computed(() => props.task?.getTextIdentifier() || '')
+const textIdentifier = computed(() => getTaskIdentifier(props.task))
 
 // Since loading is global state, this variable ensures we're only showing the saving icon when saving the description.
 const saving = ref(false)

src/components/tasks/partials/kanban-card.vue

@@ -96,14 +96,15 @@ const router = useRouter()
 
 const loadingInternal = ref(false)
 
-const props = withDefaults(defineProps<{
+const {
+	task,
+	loading = false,
+} = defineProps<{
 	task: ITask,
 	loading: boolean,
-}>(), {
-	loading: false,
-})
+}>()
 
-const color = computed(() => getHexColor(props.task.hexColor))
+const color = computed(() => getHexColor(task.hexColor))
 
 async function toggleTaskDone(task: ITask) {
 	loadingInternal.value = true
@@ -120,7 +121,7 @@ async function toggleTaskDone(task: ITask) {
 function openTaskDetail() {
 	router.push({
 		name: 'task.detail',
-		params: {id: props.task.id},
+		params: {id: task.id},
 		state: {backdropView: router.currentRoute.value.fullPath},
 	})
 }
@@ -128,12 +129,12 @@ function openTaskDetail() {
 const coverImageBlobUrl = ref<string | null>(null)
 
 async function maybeDownloadCoverImage() {
-	if (!props.task.coverImageAttachmentId) {
+	if (!task.coverImageAttachmentId) {
 		coverImageBlobUrl.value = null
 		return
 	}
 
-	const attachment = props.task.attachments.find(a => a.id === props.task.coverImageAttachmentId)
+	const attachment = task.attachments.find(a => a.id === task.coverImageAttachmentId)
 	if (!attachment || !SUPPORTED_IMAGE_SUFFIX.some((suffix) => attachment.file.name.endsWith(suffix))) {
 		return
 	}
@@ -143,7 +144,7 @@ async function maybeDownloadCoverImage() {
 }
 
 watch(
-	() => props.task.coverImageAttachmentId,
+	() => task.coverImageAttachmentId,
 	maybeDownloadCoverImage,
 	{immediate: true},
 )

src/components/tasks/partials/projectSearch.vue

@@ -11,8 +11,10 @@
 		@search="findProjects"
 	>
 		<template #searchResult="{option}">
-			<span class="project-namespace-title search-result">{{ namespace((option as IProject).namespaceId) }} ></span>
-			{{ (option as IProject).title }}
+			<span class="has-text-grey" v-if="projectStore.getAncestors(option).length > 1">
+				{{ projectStore.getAncestors(option).filter(p => p.id !== option.id).map(p => getProjectTitle(p)).join(' &gt; ') }} &gt;
+			</span>
+			{{ getProjectTitle(option) }}
 		</template>
 	</Multiselect>
 </template>
@@ -20,13 +22,11 @@
 <script lang="ts" setup>
 import {reactive, ref, watch} from 'vue'
 import type {PropType} from 'vue'
-import {useI18n} from 'vue-i18n'
 
 import type {IProject} from '@/modelTypes/IProject'
-import type {INamespace} from '@/modelTypes/INamespace'
 
 import {useProjectStore} from '@/stores/projects'
-import {useNamespaceStore} from '@/stores/namespaces'
+import {getProjectTitle} from '@/helpers/getProjectTitle'
 
 import ProjectModel from '@/models/project'
 
@@ -37,11 +37,13 @@ const props = defineProps({
 		type: Object as PropType<IProject>,
 		required: false,
 	},
+	savedFiltersOnly: {
+		type: Boolean,
+		default: false,
+	},
 })
 const emit = defineEmits(['update:modelValue'])
 
-const {t} = useI18n({useScope: 'global'})
-
 const project: IProject = reactive(new ProjectModel())
 
 watch(
@@ -54,12 +56,17 @@ watch(
 )
 
 const projectStore = useProjectStore()
-const namespaceStore = useNamespaceStore()
 const foundProjects = ref<IProject[]>([])
 function findProjects(query: string) {
 	if (query === '') {
 		select(null)
 	}
+	
+	if (props.savedFiltersOnly) {
+		foundProjects.value = projectStore.searchSavedFilter(query)
+		return
+	}
+	
 	foundProjects.value = projectStore.searchProject(query)
 }
 
@@ -70,17 +77,4 @@ function select(l: IProject | null) {
 	Object.assign(project, l)
 	emit('update:modelValue', project)
 }
-
-function namespace(namespaceId: INamespace['id']) {
-	const namespace = namespaceStore.getNamespaceById(namespaceId)
-	return namespace !== null
-		? namespace.title
-		: t('project.shared')
-}
 </script>
-
-<style lang="scss" scoped>
-.project-namespace-title {
-	color: var(--grey-500);
-}
-</style>

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

@@ -1,9 +1,14 @@
 <template>
-	<div v-if="mode !== 'disabled' && prefixes !== undefined">
-		<p class="help has-text-grey">
-			{{ $t('task.quickAddMagic.hint') }}.
-			<ButtonLink @click="() => visible = true">{{ $t('task.quickAddMagic.what') }}</ButtonLink>
-		</p>
+	<template v-if="mode !== 'disabled' && prefixes !== undefined">
+		<BaseButton
+			@click="() => visible = true"
+			class="icon is-small show-helper-text"
+			v-tooltip="$t('task.quickAddMagic.hint')"
+			:aria-label="$t('task.quickAddMagic.hint')"
+			:class="{'is-highlighted': highlightHintIcon}"
+		>
+			<icon :icon="['far', 'circle-question']"/>
+		</BaseButton>
 		<modal
 			:enabled="visible"
 			@close="() => visible = false"
@@ -69,7 +74,7 @@
 					<li>17th ({{ $t('task.quickAddMagic.dateNth', {day: '17'}) }})</li>
 				</ul>
 				<p>{{ $t('task.quickAddMagic.dateTime', {time: 'at 17:00', timePM: '5pm'}) }}</p>
-				
+
 				<h3>{{ $t('task.quickAddMagic.repeats') }}</h3>
 				<p>{{ $t('task.quickAddMagic.repeatsDescription', {suffix: 'every {amount} {type}'}) }}</p>
 				<p>{{ $t('misc.forExample') }}</p>
@@ -86,19 +91,36 @@
 				</ul>
 			</card>
 		</modal>
-	</div>
+	</template>
 </template>
 
 <script setup lang="ts">
 import {ref, computed} from 'vue'
 
-import ButtonLink from '@/components/misc/ButtonLink.vue'
+import BaseButton from '@/components/base/BaseButton.vue'
 
-import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
 import {PREFIXES} from '@/modules/parseTaskText'
+import {useAuthStore} from '@/stores/auth'
+
+const authStore = useAuthStore()
 
 const visible = ref(false)
-const mode = ref(getQuickAddMagicMode())
+const mode = computed(() => authStore.settings.frontendSettings.quickAddMagicMode)
+
+defineProps<{
+	highlightHintIcon: boolean,
+}>()
 
 const prefixes = computed(() => PREFIXES[mode.value])
 </script>
+
+<style lang="scss" scoped>
+.show-helper-text {
+	// Bulma adds pointer-events: none to the icon so we need to override it back here.
+	pointer-events: auto !important;
+}
+
+.is-highlighted {
+	color: inherit !important;
+}
+</style>

src/components/tasks/partials/relatedTasks.vue

@@ -46,11 +46,6 @@
 									class="different-project"
 									v-if="task.projectId !== projectId"
 								>
-									<span
-										v-if="task.differentNamespace !== null"
-										v-tooltip="$t('task.relation.differentNamespace')">
-										{{ task.differentNamespace }} >
-									</span>
 									<span
 										v-if="task.differentProject !== null"
 										v-tooltip="$t('task.relation.differentProject')">
@@ -101,11 +96,6 @@
 								class="different-project"
 								v-if="t.projectId !== projectId"
 							>
-								<span
-									v-if="t.differentNamespace !== null"
-									v-tooltip="$t('task.relation.differentNamespace')">
-									{{ t.differentNamespace }} >
-								</span>
 								<span
 									v-if="t.differentProject !== null"
 									v-tooltip="$t('task.relation.differentProject')">
@@ -168,10 +158,9 @@ import BaseButton from '@/components/base/BaseButton.vue'
 import Multiselect from '@/components/input/multiselect.vue'
 import Fancycheckbox from '@/components/input/fancycheckbox.vue'
 
-import {useNamespaceStore} from '@/stores/namespaces'
-
 import {error, success} from '@/message'
 import {useTaskStore} from '@/stores/tasks'
+import {useProjectStore} from '@/stores/projects'
 
 const props = defineProps({
 	taskId: {
@@ -196,7 +185,7 @@ const props = defineProps({
 })
 
 const taskStore = useTaskStore()
-const namespaceStore = useNamespaceStore()
+const projectStore = useProjectStore()
 const route = useRoute()
 const {t} = useI18n({useScope: 'global'})
 
@@ -230,26 +219,15 @@ async function findTasks(newQuery: string) {
 	foundTasks.value = await taskService.getAll({}, {s: newQuery})
 }
 
-const getProjectAndNamespaceById = (projectId: number) => namespaceStore.getProjectAndNamespaceById(projectId, true)
-
-const namespace = computed(() => getProjectAndNamespaceById(props.projectId)?.namespace)
-
 function mapRelatedTasks(tasks: ITask[]) {
 	return tasks.map(task => {
 		// by doing this here once we can save a lot of duplicate calls in the template
-		const {
-			project,
-			namespace: taskNamespace,
-		} = getProjectAndNamespaceById(task.projectId) || {project: null, namespace: null}
+		const project = projectStore.projects[task.ProjectId]
 
 		return {
 			...task,
-			differentNamespace:
-				(taskNamespace !== null &&
-					taskNamespace.id !== namespace.value.id &&
-					taskNamespace?.title) || null,
 			differentProject:
-				(project !== null &&
+				(project &&
 					task.projectId !== props.projectId &&
 					project?.title) || null,
 		}
@@ -442,5 +420,6 @@ async function toggleTaskDone(task: ITask) {
 .task-done-checkbox {
 	padding: 0;
 	height: 18px; // The exact height of the checkbox in the container
+	margin-right: .75rem;
 }
 </style>

src/components/tasks/partials/reminder-detail.vue

@@ -0,0 +1,274 @@
+<template>
+	<div>
+		<Popup @close="showFormSwitch = null">
+			<template #trigger="{toggle}">
+				<SimpleButton
+					v-tooltip="reminder.reminder && reminder.relativeTo !== null ? formatDateShort(reminder.reminder) : null"
+					@click.prevent.stop="toggle()"
+				>
+					{{ reminderText }}
+				</SimpleButton>
+			</template>
+			<template #content="{isOpen, toggle}">
+				<Card class="reminder-options-popup" :class="{'is-open': isOpen}" :padding="false">
+					<div class="options" v-if="activeForm === null">
+						<SimpleButton
+							v-for="(p, k) in presets"
+							:key="k"
+							class="option-button"
+							:class="{'currently-active': p.relativePeriod === modelValue?.relativePeriod && modelValue?.relativeTo === p.relativeTo}"
+							@click="setReminderFromPreset(p, toggle)"
+						>
+							{{ formatReminder(p) }}
+						</SimpleButton>
+						<SimpleButton
+							@click="showFormSwitch = 'relative'"
+							class="option-button"
+							:class="{'currently-active': typeof modelValue !== 'undefined' && modelValue?.relativeTo !== null && presets.find(p => p.relativePeriod === modelValue?.relativePeriod && modelValue?.relativeTo === p.relativeTo) === undefined}"
+						>
+							{{ $t('task.reminder.custom') }}
+						</SimpleButton>
+						<SimpleButton
+							@click="showFormSwitch = 'absolute'"
+							class="option-button"
+							:class="{'currently-active': modelValue?.relativeTo === null}"
+						>
+							{{ $t('task.reminder.dateAndTime') }}
+						</SimpleButton>
+					</div>
+
+					<ReminderPeriod
+						v-if="activeForm === 'relative'"
+						v-model="reminder"
+						@update:modelValue="updateDataAndMaybeClose(toggle)"
+					/>
+
+					<DatepickerInline
+						v-if="activeForm === 'absolute'"
+						v-model="reminderDate"
+						@update:modelValue="setReminderDate(toggle)"
+					/>
+
+					<x-button
+						v-if="showFormSwitch !== null"
+						class="reminder__close-button"
+						:shadow="false"
+						@click="toggle"
+					>
+						{{ $t('misc.confirm') }}
+					</x-button>
+				</Card>
+			</template>
+		</Popup>
+	</div>
+</template>
+
+<script setup lang="ts">
+import {computed, ref, watch} from 'vue'
+import {SECONDS_A_DAY, SECONDS_A_HOUR} from '@/constants/date'
+import {IReminderPeriodRelativeTo, REMINDER_PERIOD_RELATIVE_TO_TYPES} from '@/types/IReminderPeriodRelativeTo'
+import {useI18n} from 'vue-i18n'
+
+import {PeriodUnit, secondsToPeriod} from '@/helpers/time/period'
+import type {ITaskReminder} from '@/modelTypes/ITaskReminder'
+import {formatDateShort} from '@/helpers/time/formatDate'
+
+import DatepickerInline from '@/components/input/datepickerInline.vue'
+import ReminderPeriod from '@/components/tasks/partials/reminder-period.vue'
+import Popup from '@/components/misc/popup.vue'
+
+import TaskReminderModel from '@/models/taskReminder'
+import Card from '@/components/misc/card.vue'
+import SimpleButton from '@/components/input/SimpleButton.vue'
+
+const {t} = useI18n({useScope: 'global'})
+
+const {
+	modelValue,
+	clearAfterUpdate = false,
+	defaultRelativeTo = REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE,
+} = defineProps<{
+	modelValue?: ITaskReminder,
+	clearAfterUpdate?: boolean,
+	defaultRelativeTo?: null | IReminderPeriodRelativeTo,
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const reminder = ref<ITaskReminder>(new TaskReminderModel())
+
+const presets = computed<TaskReminderModel[]>(() => [
+	{reminder: null, relativePeriod: 0, relativeTo: defaultRelativeTo},
+	{reminder: null, relativePeriod: -2 * SECONDS_A_HOUR, relativeTo: defaultRelativeTo},
+	{reminder: null, relativePeriod: -1 * SECONDS_A_DAY, relativeTo: defaultRelativeTo},
+	{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 3, relativeTo: defaultRelativeTo},
+	{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 7, relativeTo: defaultRelativeTo},
+	{reminder: null, relativePeriod: -1 * SECONDS_A_DAY * 30, relativeTo: defaultRelativeTo},
+])
+const reminderDate = ref(null)
+
+type availableForms = null | 'relative' | 'absolute'
+
+const showFormSwitch = ref<availableForms>(null)
+
+const activeForm = computed<availableForms>(() => {
+	if (defaultRelativeTo === null) {
+		return 'absolute'
+	}
+
+	return showFormSwitch.value
+})
+
+const reminderText = computed(() => {
+
+	if (reminder.value.relativeTo !== null) {
+		return formatReminder(reminder.value)
+	}
+
+	if (reminder.value.reminder !== null) {
+		return formatDateShort(reminder.value.reminder)
+	}
+
+	return t('task.addReminder')
+})
+
+watch(
+	() => modelValue,
+	(newReminder) => {
+		reminder.value = newReminder || new TaskReminderModel()
+	},
+	{immediate: true},
+)
+
+function updateData() {
+	emit('update:modelValue', reminder.value)
+
+	if (clearAfterUpdate) {
+		reminder.value = new TaskReminderModel()
+	}
+}
+
+function setReminderDate(toggle) {
+	reminder.value.reminder = reminderDate.value === null
+		? null
+		: new Date(reminderDate.value)
+	reminder.value.relativeTo = null
+	reminder.value.relativePeriod = 0
+	updateDataAndMaybeClose(toggle)
+}
+
+function setReminderFromPreset(preset, toggle) {
+	reminder.value = preset
+	updateData()
+	toggle()
+}
+
+function updateDataAndMaybeClose(toggle) {
+	updateData()
+	if (clearAfterUpdate) {
+		toggle()
+	}
+}
+
+function formatReminder(reminder: TaskReminderModel) {
+	const period = secondsToPeriod(reminder.relativePeriod)
+
+	if (period.amount === 0) {
+		switch (reminder.relativeTo) {
+			case REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE:
+				return t('task.reminder.onDueDate')
+			case REMINDER_PERIOD_RELATIVE_TO_TYPES.STARTDATE:
+				return t('task.reminder.onStartDate')
+			case REMINDER_PERIOD_RELATIVE_TO_TYPES.ENDDATE:
+				return t('task.reminder.onEndDate')
+		}
+	}
+
+	const amountAbs = Math.abs(period.amount)
+
+	let relativeTo = ''
+	switch (reminder.relativeTo) {
+		case REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE:
+			relativeTo = t('task.attributes.dueDate')
+			break
+		case REMINDER_PERIOD_RELATIVE_TO_TYPES.STARTDATE:
+			relativeTo = t('task.attributes.startDate')
+			break
+		case REMINDER_PERIOD_RELATIVE_TO_TYPES.ENDDATE:
+			relativeTo = t('task.attributes.endDate')
+			break
+	}
+
+	if (reminder.relativePeriod <= 0) {
+		return t('task.reminder.before', {
+			amount: amountAbs,
+			unit: translateUnit(amountAbs, period.unit),
+			type: relativeTo,
+		})
+	}
+
+	return t('task.reminder.after', {
+		amount: amountAbs,
+		unit: translateUnit(amountAbs, period.unit),
+		type: relativeTo,
+	})
+}
+
+function translateUnit(amount: number, unit: PeriodUnit): string {
+	switch (unit) {
+		case 'seconds':
+			return t('time.units.seconds', amount)
+		case 'minutes':
+			return t('time.units.minutes', amount)
+		case 'hours':
+			return t('time.units.hours', amount)
+		case 'days':
+			return t('time.units.days', amount)
+		case 'weeks':
+			return t('time.units.weeks', amount)
+		case 'years':
+			return t('time.units.years', amount)
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.options {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+}
+
+:deep(.popup) {
+	top: unset;
+}
+
+.reminder-options-popup {
+	width: 310px;
+	z-index: 99;
+
+	@media screen and (max-width: ($tablet)) {
+		width: calc(100vw - 5rem);
+	}
+
+	.option-button {
+		font-size: .85rem;
+		border-radius: 0;
+		padding: .5rem;
+		margin: 0;
+
+		&:hover {
+			background: var(--grey-100);
+		}
+	}
+}
+
+.reminder__close-button {
+	margin: .5rem;
+	width: calc(100% - 1rem);
+}
+
+.currently-active {
+	color: var(--primary);
+}
+</style>

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

@@ -0,0 +1,124 @@
+<template>
+	<div
+		class="reminder-period control"
+	>
+		<input
+			class="input"
+			v-model.number="period.duration"
+			type="number"
+			min="0"
+			@change="updateData"
+		/>
+
+		<div class="select">
+			<select v-model="period.durationUnit" @change="updateData">
+				<option value="minutes">{{ $t('time.units.minutes', period.duration) }}</option>
+				<option value="hours">{{ $t('time.units.hours', period.duration) }}</option>
+				<option value="days">{{ $t('time.units.days', period.duration) }}</option>
+				<option value="weeks">{{ $t('time.units.weeks', period.duration) }}</option>
+			</select>
+		</div>
+
+		<div class="select">
+			<select v-model.number="period.sign" @change="updateData">
+				<option value="-1">
+					{{ $t('task.reminder.beforeShort') }}
+				</option>
+				<option value="1">
+					{{ $t('task.reminder.afterShort') }}
+				</option>
+			</select>
+		</div>
+
+		<div class="select">
+			<select v-model="period.relativeTo" @change="updateData">
+				<option :value="REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE">
+					{{ $t('task.attributes.dueDate') }}
+				</option>
+				<option :value="REMINDER_PERIOD_RELATIVE_TO_TYPES.STARTDATE">
+					{{ $t('task.attributes.startDate') }}
+				</option>
+				<option :value="REMINDER_PERIOD_RELATIVE_TO_TYPES.ENDDATE">
+					{{ $t('task.attributes.endDate') }}
+				</option>
+			</select>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import {ref, watch} from 'vue'
+
+import {periodToSeconds, PeriodUnit, secondsToPeriod} from '@/helpers/time/period'
+
+import TaskReminderModel from '@/models/taskReminder'
+
+import type {ITaskReminder} from '@/modelTypes/ITaskReminder'
+import {REMINDER_PERIOD_RELATIVE_TO_TYPES, type IReminderPeriodRelativeTo} from '@/types/IReminderPeriodRelativeTo'
+
+const {
+	modelValue,
+} = defineProps<{
+	modelValue?: ITaskReminder,
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const reminder = ref<ITaskReminder>(new TaskReminderModel())
+
+interface PeriodInput {
+	duration: number,
+	durationUnit: PeriodUnit,
+	relativeTo: IReminderPeriodRelativeTo,
+	sign: -1 | 1,
+}
+
+const period = ref<PeriodInput>({
+	duration: 0,
+	durationUnit: 'hours',
+	relativeTo: REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE,
+	sign: -1,
+})
+
+watch(
+	() => modelValue,
+	(value) => {
+		const p = secondsToPeriod(value?.relativePeriod)
+		period.value.durationUnit = p.unit
+		period.value.duration = Math.abs(p.amount)
+		period.value.relativeTo = value?.relativeTo || REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE
+	},
+	{immediate: true},
+)
+
+watch(
+	() => period.value.duration,
+	value => {
+		if (value < 0) {
+			period.value.duration = value * -1
+		}
+	},
+)
+
+function updateData() {
+	reminder.value.relativePeriod = period.value.sign * periodToSeconds(Math.abs(period.value.duration), period.value.durationUnit)
+	reminder.value.relativeTo = period.value.relativeTo
+	reminder.value.reminder = null
+
+	emit('update:modelValue', reminder.value)
+}
+</script>
+
+<style lang="scss" scoped>
+.reminder-period {
+	display: flex;
+	flex-direction: column;
+	gap: .25rem;
+	padding: .5rem .5rem 0;
+
+	.input, .select select {
+		width: 100% !important;
+		height: auto;
+	}
+}
+</style>

src/components/tasks/partials/reminders.story.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import reminders from './reminders.vue'
+import {ref} from 'vue'
+import ReminderDetail from '@/components/tasks/partials/reminder-detail.vue'
+
+const reminderNow = ref({reminder: new Date(), relativePeriod: 0, relativeTo: null } )
+const relativeReminder = ref({reminder: null, relativePeriod: 1, relativeTo: 'due_date' } )
+const newReminder = ref(null)
+</script>
+
+<template>
+	<Story>
+		<Variant title="Default">
+			<reminders/>
+		</Variant>
+		<Variant title="Reminder Detail with fixed date">
+			<reminder-detail v-model="reminderNow"/>
+		</Variant>
+		<Variant title="Reminder Detail with relative date">
+			<reminder-detail v-model="relativeReminder"/>
+		</Variant>
+		<Variant title="New Reminder Detail">
+			<reminder-detail v-model="newReminder"/>
+		</Variant>
+	</Story>
+</template>

src/components/tasks/partials/reminders.vue

@@ -3,104 +3,96 @@
 		<div
 			v-for="(r, index) in reminders"
 			:key="index"
-			:class="{ 'overdue': r < new Date()}"
+			:class="{ 'overdue': r.reminder < new Date() }"
 			class="reminder-input"
 		>
-			<Datepicker
-				v-model="reminders[index]"
+			<ReminderDetail
+				class="reminder-detail"
 				:disabled="disabled"
-				@close-on-change="() => addReminderDate(index)"
+				v-model="reminders[index]"
+				@update:model-value="updateData"
+				:default-relative-to="defaultRelativeTo"
 			/>
-			<BaseButton @click="removeReminderByIndex(index)" v-if="!disabled" class="remove">
-				<icon icon="times"></icon>
+			<BaseButton
+				v-if="!disabled"
+				@click="removeReminderByIndex(index)"
+				class="remove"
+			>
+				<icon icon="times"/>
 			</BaseButton>
 		</div>
-		<div class="reminder-input" v-if="!disabled">
-			<Datepicker
-				v-model="newReminder"
-				@close-on-change="() => addReminderDate()"
-				:choose-date-label="$t('task.addReminder')"
-			/>
-		</div>
+
+		<ReminderDetail
+			:disabled="disabled"
+			@update:modelValue="addNewReminder"
+			:clear-after-update="true"
+			:default-relative-to="defaultRelativeTo"
+		/>
 	</div>
 </template>
 
 <script setup lang="ts">
-import {type PropType, ref, onMounted, watch} from 'vue'
+import {ref, watch, computed} from 'vue'
+
+import type {ITaskReminder} from '@/modelTypes/ITaskReminder'
 
 import BaseButton from '@/components/base/BaseButton.vue'
-import Datepicker from '@/components/input/datepicker.vue'
+import ReminderDetail from '@/components/tasks/partials/reminder-detail.vue'
+import type {ITask} from '@/modelTypes/ITask'
+import {REMINDER_PERIOD_RELATIVE_TO_TYPES} from '@/types/IReminderPeriodRelativeTo'
 
-type Reminder = Date | string
-
-
-
-const props = defineProps({
-	modelValue: {
-		type: Array as PropType<Reminder[]>,
-		default: () => [],
-		validator(prop) {
-			// This allows arrays of Dates and strings
-			if (!(prop instanceof Array)) {
-				return false
-			}
-
-			const isDate = (e: unknown) => e instanceof Date
-			const isString = (e: unknown) => typeof e === 'string'
-
-			for (const e of prop) {
-				if (!isDate(e) && !isString(e)) {
-					return false
-				}
-			}
-
-			return true
-		},
-	},
-	disabled: {
-		type: Boolean,
-		default: false,
-	},
-})
+const {
+	modelValue,
+	disabled = false,
+} = defineProps<{
+	modelValue: ITask,
+	disabled?: boolean,
+}>()
 
 const emit = defineEmits(['update:modelValue'])
 
-const reminders = ref<Reminder[]>([])
-
-onMounted(() => {
-	reminders.value = [...props.modelValue]
-})
+const reminders = ref<ITaskReminder[]>([])
 
 watch(
-	() => props.modelValue,
+	() => modelValue.reminders,
 	(newVal) => {
-		for (const i in newVal) {
-			if (typeof newVal[i] === 'string') {
-				newVal[i] = new Date(newVal[i])
-			}
-		}
 		reminders.value = newVal
 	},
+	{immediate: true, deep: true}, // deep watcher so that we get the resolved date after updating the task
 )
 
+const defaultRelativeTo = computed(() => {
+	if (typeof modelValue === 'undefined') {
+		return null
+	}
+	
+	if (modelValue?.dueDate) {
+		return REMINDER_PERIOD_RELATIVE_TO_TYPES.DUEDATE
+	}
+	
+	if (modelValue.dueDate === null && modelValue.startDate !== null) {
+		return REMINDER_PERIOD_RELATIVE_TO_TYPES.STARTDATE
+	}
+	
+	if (modelValue.dueDate === null && modelValue.startDate === null && modelValue.endDate !== null) {
+		return REMINDER_PERIOD_RELATIVE_TO_TYPES.ENDDATE
+	}
+	
+	return null
+})
 
 function updateData() {
-	emit('update:modelValue', reminders.value)
+	emit('update:modelValue', {
+		...modelValue,
+		reminders: reminders.value,
+	})
 }
 
-const newReminder = ref(null)
-function addReminderDate(index : number | null = null) {
-	// New Date
-	if (index === null) {
-		if (newReminder.value === null) {
-			return
-		}
-		reminders.value.push(new Date(newReminder.value))
-		newReminder.value = null
-	} else if(reminders.value[index] === null) {
+function addNewReminder(newReminder: ITaskReminder) {
+	if (newReminder === null) {
 		return
 	}
-
+	reminders.value.push(newReminder)
 	updateData()
 }
 
@@ -111,23 +103,27 @@ function removeReminderByIndex(index: number) {
 </script>
 
 <style lang="scss" scoped>
-.reminders {
-  .reminder-input {
-    display: flex;
-    align-items: center;
+.reminder-input {
+	display: flex;
+	align-items: center;
 
-    &.overdue :deep(.datepicker .show) {
-      color: var(--danger);
-    }
+	&.overdue :deep(.datepicker .show) {
+		color: var(--danger);
+	}
 
-    &:last-child {
-      margin-bottom: 0.75rem;
-    }
+	&::last-child {
+		margin-bottom: 0.75rem;
+	}
+}
 
-    .remove {
-      color: var(--danger);
-      padding-left: .5rem;
-    }
-  }
+.reminder-detail {
+	width: 100%;
+}
+
+.remove {
+	color: var(--danger);
+	vertical-align: top;
+	padding-left: .5rem;
+	line-height: 1;
 }
 </style>

src/components/tasks/partials/repeatAfter.vue

@@ -70,6 +70,7 @@ import {error} from '@/message'
 import {TASK_REPEAT_MODES} from '@/types/IRepeatMode'
 import type {IRepeatAfter} from '@/types/IRepeatAfter'
 import type {ITask} from '@/modelTypes/ITask'
+import TaskModel from '@/models/task'
 
 const props = defineProps({
 	modelValue: {
@@ -87,7 +88,7 @@ const {t} = useI18n({useScope: 'global'})
 
 const emit = defineEmits(['update:modelValue'])
 
-const task = ref<ITask>()
+const task = ref<ITask>(new TaskModel())
 const repeatAfter = reactive({
 	amount: 0,
 	type: '',
@@ -95,7 +96,7 @@ const repeatAfter = reactive({
 
 watch(
 	() => props.modelValue,
-	(value) => {
+	(value: ITask) => {
 		task.value = value
 		if (typeof value.repeatAfter !== 'undefined') {
 			Object.assign(repeatAfter, value.repeatAfter)
@@ -105,11 +106,14 @@ watch(
 )
 
 function updateData() {
-	if (!task.value || task.value.repeatMode !== TASK_REPEAT_MODES.REPEAT_MODE_DEFAULT && repeatAfter.amount === 0) {
+	if (!task.value || 
+		(task.value.repeatMode === TASK_REPEAT_MODES.REPEAT_MODE_DEFAULT && repeatAfter.amount === 0) ||
+		(task.value.repeatMode === TASK_REPEAT_MODES.REPEAT_MODE_FROM_CURRENT_DATE && repeatAfter.amount === 0)
+	) {
 		return
 	}
 
-	if (repeatAfter.amount < 0) {
+	if (task.value.repeatMode === TASK_REPEAT_MODES.REPEAT_MODE_DEFAULT && repeatAfter.amount < 0) {
 		error({message: t('task.repeat.invalidAmount')})
 		return
 	}

src/components/tasks/partials/singleTaskInProject.vue

@@ -7,19 +7,19 @@
 		/>
 
 		<ColorBubble
-			v-if="showProjectColor && projectColor !== '' && currentProject.id !== task.projectId"
+			v-if="showProjectColor && projectColor !== '' && currentProject?.id !== task.projectId"
 			:color="projectColor"
 			class="mr-1"
 		/>
 
 		<router-link
 			:to="taskDetailRoute"
-			:class="{ 'done': task.done, 'show-project': showProject && project !== null}"
+			:class="{ 'done': task.done, 'show-project': showProject && project}"
 			class="tasktext"
 		>
 			<span>
 				<router-link
-					v-if="showProject && project !== null"
+					v-if="showProject && typeof project !== 'undefined'"
 					:to="{ name: 'project.list', params: { projectId: task.projectId } }"
 					class="task-project"
 					:class="{'mr-2': task.hexColor !== ''}"
@@ -34,7 +34,7 @@
 				/>
 
 				<!-- Show any parent tasks to make it clear this task is a sub task of something -->
-				<span class="parent-tasks" v-if="typeof task.relatedTasks.parenttask !== 'undefined'">
+				<span class="parent-tasks" v-if="typeof task.relatedTasks?.parenttask !== 'undefined'">
 					<template v-for="(pt, i) in task.relatedTasks.parenttask">
 						{{ pt.title }}<template v-if="(i + 1) < task.relatedTasks.parenttask.length">,&nbsp;</template>
 					</template>
@@ -56,6 +56,7 @@
 				:key="task.id + 'assignee' + a.id + i"
 				:show-username="false"
 				:user="a"
+				class="m-2"
 			/>
 
 			<!-- FIXME: use popup -->
@@ -104,7 +105,7 @@
 		</progress>
 
 		<router-link
-			v-if="!showProject && currentProject.id !== task.projectId && project !== null"
+			v-if="!showProject && currentProject?.id !== task.projectId && project"
 			:to="{ name: 'project.list', params: { projectId: task.projectId } }"
 			class="task-project"
 			v-tooltip="$t('task.detail.belongsToProject', {project: project.title})"
@@ -125,7 +126,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref, watch, shallowReactive, toRef, type PropType, onMounted, onBeforeUnmount, computed} from 'vue'
+import {ref, watch, shallowReactive, onMounted, onBeforeUnmount, computed} from 'vue'
 import {useI18n} from 'vue-i18n'
 
 import TaskModel, { getHexColor } from '@/models/task'
@@ -149,36 +150,24 @@ import {formatDateSince, formatISO, formatDateLong} from '@/helpers/time/formatD
 import {success} from '@/message'
 
 import {useProjectStore} from '@/stores/projects'
-import {useNamespaceStore} from '@/stores/namespaces'
 import {useBaseStore} from '@/stores/base'
 import {useTaskStore} from '@/stores/tasks'
 
-const props = defineProps({
-	theTask: {
-		type: Object as PropType<ITask>,
-		required: true,
-	},
-	isArchived: {
-		type: Boolean,
-		default: false,
-	},
-	showProject: {
-		type: Boolean,
-		default: false,
-	},
-	disabled: {
-		type: Boolean,
-		default: false,
-	},
-	showProjectColor: {
-		type: Boolean,
-		default: true,
-	},
-	canMarkAsDone: {
-		type: Boolean,
-		default: true,
-	},
-})
+const {
+	theTask,
+	isArchived = false,
+	showProject = false,
+	disabled = false,
+	showProjectColor = false,
+	canMarkAsDone = true,
+} = defineProps<{
+	theTask: ITask,
+	isArchived?: boolean,
+	showProject?: boolean,
+	disabled?: boolean,
+	showProjectColor?: boolean,
+	canMarkAsDone?: boolean,
+}>()
 
 const emit = defineEmits(['task-updated'])
 
@@ -188,17 +177,15 @@ const taskService = shallowReactive(new TaskService())
 const task = ref<ITask>(new TaskModel())
 const showDefer = ref(false)
 
-const theTask = toRef(props, 'theTask')
-
 watch(
-	theTask,
+	() => theTask,
 	newVal => {
 		task.value = newVal
 	},
 )
 
 onMounted(() => {
-	task.value = theTask.value
+	task.value = theTask
 	document.addEventListener('click', hideDeferDueDatePopup)
 })
 
@@ -209,10 +196,9 @@ onBeforeUnmount(() => {
 const baseStore = useBaseStore()
 const projectStore = useProjectStore()
 const taskStore = useTaskStore()
-const namespaceStore = useNamespaceStore()
 
-const project = computed(() => projectStore.getProjectById(task.value.projectId))
-const projectColor = computed(() => project.value !== null ? project.value.hexColor : '')
+const project = computed(() => projectStore.projects[task.value.projectId])
+const projectColor = computed(() => project.value ? project.value?.hexColor : '')
 
 const currentProject = computed(() => {
 	return typeof baseStore.currentProject === 'undefined' ? {
@@ -257,10 +243,8 @@ function undoDone(checked: boolean) {
 }
 
 async function toggleFavorite() {
-	task.value.isFavorite = !task.value.isFavorite
-	task.value = await taskService.update(task.value)
+	task.value = await taskStore.toggleFavorite(task.value)
 	emit('task-updated', task.value)
-	namespaceStore.loadNamespacesIfFavoritesDontExist()
 }
 
 const deferDueDate = ref<typeof DeferTask | null>(null)
@@ -291,10 +275,15 @@ function hideDeferDueDatePopup(e) {
 
 	.tasktext,
 	&.tasktext {
-		white-space: nowrap;
 		text-overflow: ellipsis;
+		word-wrap: break-word;
+		word-break: break-word;
+		display: -webkit-box;
+		hyphens: auto;
+		-webkit-line-clamp: 4;
+		-webkit-box-orient: vertical;
 		overflow: hidden;
-		display: inline-block;
+		
 		flex: 1 0 50%;
 
 		.dueDate {

src/composables/useColorScheme.ts

@@ -1,8 +1,7 @@
 import {computed, watch, readonly} from 'vue'
-import {useStorage, createSharedComposable, usePreferredColorScheme, tryOnMounted} from '@vueuse/core'
+import {createSharedComposable, usePreferredColorScheme, tryOnMounted} from '@vueuse/core'
 import type {BasicColorSchema} from '@vueuse/core'
-
-const STORAGE_KEY = 'color-scheme'
+import {useAuthStore} from '@/stores/auth'
 
 const DEFAULT_COLOR_SCHEME_SETTING: BasicColorSchema = 'light'
 
@@ -17,7 +16,8 @@ const CLASS_LIGHT = 'light'
 // - value is synced via `createSharedComposable`
 // https://github.com/vueuse/vueuse/blob/main/packages/core/useDark/index.ts 
 export const useColorScheme = createSharedComposable(() => {
-	const store = useStorage<BasicColorSchema>(STORAGE_KEY, DEFAULT_COLOR_SCHEME_SETTING)
+	const authStore = useAuthStore()
+	const store = computed(() => authStore.settings.frontendSettings.colorSchema)
 
 	const preferredColorScheme = usePreferredColorScheme()
 

src/composables/useNamespaceSearch.ts

@@ -1,19 +0,0 @@
-import {ref, computed} from 'vue'
-import {useNamespaceStore} from '@/stores/namespaces'
-
-export function useNamespaceSearch() {
-	const query = ref('')
-	
-	const namespaceStore = useNamespaceStore()
-	const namespaces = computed(() => namespaceStore.searchNamespace(query.value))
-	
-	function findNamespaces(newQuery: string) {
-		query.value = newQuery
-	}
-
-	return {
-		namespaces,
-		findNamespaces,
-	}
-}
-

src/composables/useOnline.ts

@@ -4,7 +4,7 @@ import type {ConfigurableWindow} from '@vueuse/core'
 
 export function useOnline(options?: ConfigurableWindow) {
 	const isOnline = useNetworkOnline(options)
-	const fakeOnlineState = !!import.meta.env.VITE_IS_ONLINE
+	const fakeOnlineState = Boolean(import.meta.env.VITE_IS_ONLINE)
 	if (isOnline.value === false && fakeOnlineState) {
 		console.log('Setting fake online state', fakeOnlineState)
 		return ref(true)

src/composables/useRedirectToLastVisited.ts

@@ -5,22 +5,31 @@ export function useRedirectToLastVisited() {
 
 	const router = useRouter()
 
-	function redirectIfSaved() {
+	function getLastVisitedRoute() {
 		const last = getLastVisited()
-		if (last !== null) {
-			router.push({
-				name: last.name,
-				params: last.params,
-				query: last.query,
-			})
-			clearLastVisited()
-			return
+		if (last === null) {
+			return null
 		}
 
-		router.push({name: 'home'})
+		clearLastVisited()
+		return {
+			name: last.name,
+			params: last.params,
+			query: last.query,
+		}
+	}
+
+	function redirectIfSaved() {
+		const lastRoute = getLastVisitedRoute()
+		if (!lastRoute) {
+			return router.push({name: 'home'})
+		}
+
+		return router.push(lastRoute)
 	}
 
 	return {
 		redirectIfSaved,
+		getLastVisitedRoute,
 	}
 }

src/composables/useRouteWithModal.ts

@@ -1,10 +1,12 @@
-import { computed, shallowRef, watchEffect, h, type VNode } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import {computed, shallowRef, watchEffect, h, type VNode} from 'vue'
+import {useRoute, useRouter} from 'vue-router'
+import {useBaseStore} from '@/stores/base'
 
 export function useRouteWithModal() {
 	const router = useRouter()
 	const route = useRoute()
 	const backdropView = computed(() => route.fullPath && window.history.state.backdropView)
+	const baseStore = useBaseStore()
 
 	const routeWithModal = computed(() => {
 		return backdropView.value
@@ -44,6 +46,18 @@ export function useRouteWithModal() {
 	function closeModal() {
 		const historyState = computed(() => route.fullPath && window.history.state)
 
+		// If the current project was changed because the user moved the currently opened task while coming from kanban,
+		// we need to reflect that change in the route when they close the task modal.
+		// The last route is only available as resolved string, therefore we need to use a regex for matching here
+		const kanbanRouteMatch = new RegExp('\\/projects\\/\\d+\\/kanban', 'g')
+		const kanbanRouter = {name: 'project.kanban', params: {projectId: baseStore.currentProject?.id}}
+		if (kanbanRouteMatch.test(historyState.value.back)
+			&& baseStore.currentProject
+			&& historyState.value.back !== router.resolve(kanbanRouter).fullPath) {
+			router.push(kanbanRouter)
+			return
+		}
+
 		if (historyState.value) {
 			router.back()
 		} else {

src/composables/useTaskList.ts

@@ -1,9 +1,10 @@
-import {ref, shallowReactive, watch, computed} from 'vue'
+import {ref, shallowReactive, watch, computed, type ComputedGetter} from 'vue'
 import {useRoute} from 'vue-router'
 
 import TaskCollectionService from '@/services/taskCollection'
 import type {ITask} from '@/modelTypes/ITask'
 import {error} from '@/message'
+import type {IProject} from '@/modelTypes/IProject'
 
 export type Order = 'asc' | 'desc' | 'none'
 
@@ -60,7 +61,10 @@ const SORT_BY_DEFAULT: SortBy = {
 /**
  * This mixin provides a base set of methods and properties to get tasks.
  */
-export function useTaskList(projectId, sortByDefault: SortBy = SORT_BY_DEFAULT) {
+export function useTaskList(projectIdGetter: ComputedGetter<IProject['id']>, sortByDefault: SortBy = SORT_BY_DEFAULT) {
+	
+	const projectId = computed(() => projectIdGetter())
+	
 	const params = ref({...getDefaultParams()})
 	
 	const search = ref('')
@@ -68,8 +72,6 @@ export function useTaskList(projectId, sortByDefault: SortBy = SORT_BY_DEFAULT)
 
 	const sortBy = ref({ ...sortByDefault })
 
-
-
 	const getAllTasksParams = computed(() => {
 		let loadParams = {...params.value}