fix: test pnpm cache

Reviewed-on: #2400
Co-authored-by: renovate <renovatebot@kolaente.de>
Co-committed-by: renovate <renovatebot@kolaente.de>

README.md

@@ -42,3 +42,7 @@ pnpm run build
 ```shell
 pnpm run lint
 ```
+
+## Sponsors
+
+[![Relm](https://vikunja.io/images/sponsors/relm.png)](https://relm.us)

cypress/docker-compose.yml

@@ -9,7 +9,7 @@ services:
     ports:
       - 3456:3456
   cypress:
-    image: cypress/browsers:node12.18.3-chrome87-ff82
+    image: cypress/browsers:node16.14.0-chrome99-ff97
     volumes:
     - ..:/project
     - $HOME/.cache:/home/node/.cache/

cypress/e2e/list/list.spec.ts

@@ -59,7 +59,7 @@ describe('Lists', () => {
 			.click()
 		cy.get('#title')
 			.type(`{selectall}${newListName}`)
-		cy.get('footer.modal-card-foot .button')
+		cy.get('footer.card-footer .button')
 			.contains('Save')
 			.click()
 

cypress/e2e/list/namespaces.spec.ts

@@ -63,7 +63,7 @@ describe('Namepaces', () => {
 			.should('equal', newNamespaces[0].title) // wait until the namespace data is loaded
 		cy.get('#namespacetext')
 			.type(`{selectall}${newNamespaceName}`)
-		cy.get('footer.modal-card-foot .button')
+		cy.get('footer.card-footer .button')
 			.contains('Save')
 			.click()
 

package.json

@@ -11,47 +11,54 @@
     "build:dev": "vite build -m development --outDir dist-dev/",
     "lint": "eslint --ignore-pattern '*.test.*' ./src --ext .vue,.js,.ts",
     "cypress:open": "cypress open",
-    "test:unit": "vitest",
+    "test:unit": "vitest --run",
     "test:unit-watch": "vitest watch",
     "test:frontend": "cypress run",
     "typecheck": "vue-tsc --noEmit && vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "browserslist:update": "npx browserslist@latest --update-db"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "6.2.0",
+    "@fortawesome/free-regular-svg-icons": "6.2.0",
+    "@fortawesome/free-solid-svg-icons": "6.2.0",
+    "@fortawesome/vue-fontawesome": "3.0.1",
     "@github/hotkey": "2.0.1",
-    "@kyvg/vue3-notification": "2.3.6",
+    "@kyvg/vue3-notification": "2.4.1",
-    "@sentry/tracing": "7.11.1",
+    "@sentry/tracing": "7.13.0",
-    "@sentry/vue": "7.11.1",
+    "@sentry/vue": "7.13.0",
     "@types/is-touch-device": "1.0.0",
-    "@types/sortablejs": "1.13.0",
+    "@types/lodash.clonedeep": "4.5.7",
-    "@vueuse/core": "9.1.0",
+    "@types/sortablejs": "1.15.0",
-    "@vueuse/router": "9.1.0",
+    "@vueuse/core": "9.2.0",
-    "blurhash": "1.1.5",
+    "@vueuse/router": "9.2.0",
+    "axios": "0.27.2",
+    "blurhash": "2.0.0",
     "bulma-css-variables": "0.9.33",
     "camel-case": "4.1.2",
     "codemirror": "5.65.7",
-    "date-fns": "2.29.1",
+    "date-fns": "2.29.3",
-    "dompurify": "2.3.10",
+    "dompurify": "2.4.0",
-    "easymde": "2.16.1",
+    "easymde": "2.18.0",
     "flatpickr": "4.6.13",
     "flexsearch": "0.7.21",
     "highlight.js": "11.6.0",
     "is-touch-device": "1.0.1",
     "lodash.clonedeep": "4.5.0",
     "lodash.debounce": "4.0.8",
-    "marked": "4.0.18",
+    "marked": "4.1.0",
     "minimist": "1.2.6",
+    "pinia": "2.0.22",
     "register-service-worker": "1.7.2",
     "snake-case": "3.0.4",
     "sortablejs": "1.15.0",
     "ufo": "0.8.5",
     "v-tooltip": "4.0.0-beta.17",
-    "vue": "3.2.37",
+    "vue": "3.2.39",
     "vue-advanced-cropper": "2.8.3",
     "vue-drag-resize": "2.0.3",
     "vue-flatpickr-component": "9.0.6",
     "vue-i18n": "9.2.2",
-    "vue-router": "4.1.3",
+    "vue-router": "4.1.5",
     "vuex": "4.0.2",
     "workbox-precaching": "6.5.4",
     "zhyswan-vuedraggable": "4.1.3"
@@ -59,42 +66,38 @@
   "devDependencies": {
     "@4tw/cypress-drag-drop": "2.2.1",
     "@cypress/vite-dev-server": "3.1.1",
-    "@cypress/vue": "4.1.0",
+    "@cypress/vue": "4.2.0",
-    "@faker-js/faker": "7.4.0",
+    "@faker-js/faker": "7.5.0",
-    "@fortawesome/fontawesome-svg-core": "6.1.2",
+    "@types/dompurify": "2.3.4",
-    "@fortawesome/free-regular-svg-icons": "6.1.2",
-    "@fortawesome/free-solid-svg-icons": "6.1.2",
-    "@fortawesome/vue-fontawesome": "3.0.1",
     "@types/flexsearch": "0.7.3",
-    "@typescript-eslint/eslint-plugin": "5.33.1",
+    "@typescript-eslint/eslint-plugin": "5.38.0",
-    "@typescript-eslint/parser": "5.33.1",
+    "@typescript-eslint/parser": "5.38.0",
-    "@vitejs/plugin-legacy": "2.0.1",
+    "@vitejs/plugin-legacy": "2.2.0",
-    "@vitejs/plugin-vue": "3.0.3",
+    "@vitejs/plugin-vue": "3.1.0",
-    "@vue/eslint-config-typescript": "11.0.0",
+    "@vue/eslint-config-typescript": "11.0.1",
     "@vue/test-utils": "2.0.2",
     "@vue/tsconfig": "0.1.3",
-    "autoprefixer": "10.4.8",
+    "autoprefixer": "10.4.12",
-    "axios": "0.27.2",
+    "browserslist": "4.21.4",
-    "browserslist": "4.21.3",
+    "caniuse-lite": "1.0.30001406",
-    "caniuse-lite": "1.0.30001376",
+    "cypress": "10.8.0",
-    "cypress": "10.6.0",
+    "esbuild": "0.15.8",
-    "esbuild": "0.15.5",
+    "eslint": "8.23.1",
-    "eslint": "8.22.0",
+    "eslint-plugin-vue": "9.5.1",
-    "eslint-plugin-vue": "9.3.0",
     "express": "4.18.1",
     "happy-dom": "6.0.4",
-    "netlify-cli": "10.17.4",
+    "netlify-cli": "11.8.0",
     "postcss": "8.4.16",
-    "postcss-preset-env": "7.8.0",
+    "postcss-preset-env": "7.8.2",
-    "rollup": "2.78.0",
+    "rollup": "2.79.0",
-    "rollup-plugin-visualizer": "5.7.1",
+    "rollup-plugin-visualizer": "5.8.1",
-    "sass": "1.54.4",
+    "sass": "1.54.9",
-    "typescript": "4.7.4",
+    "typescript": "4.8.3",
-    "vite": "3.0.8",
+    "vite": "3.1.3",
-    "vite-plugin-pwa": "0.12.3",
+    "vite-plugin-pwa": "0.13.0",
-    "vite-svg-loader": "3.4.0",
+    "vite-svg-loader": "3.6.0",
-    "vitest": "0.22.1",
+    "vitest": "0.23.4",
-    "vue-tsc": "0.40.1",
+    "vue-tsc": "0.40.13",
     "wait-on": "6.0.1",
     "workbox-cli": "6.5.4"
   },

renovate.json

@@ -19,6 +19,12 @@
       "matchPackagePrefixes": [
         "@vueuse/"
       ]
+    },
+    {
+      "matchDepTypes": ["devDependencies"],
+      "automerge": true,
+      "automergeStrategy": "squash",
+      "automergeType": "pr"
     }
   ]
 }

src/App.vue

@@ -15,10 +15,10 @@
 </template>
 
 <script lang="ts" setup>
-import {computed, watch, Ref} from 'vue'
+import {computed, watch, type Ref} from 'vue'
 import {useRouter} from 'vue-router'
 import {useRouteQuery} from '@vueuse/router'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 import isTouchDevice from 'is-touch-device'
 import {success} from '@/message'

src/components/base/BaseButton.vue

@@ -12,12 +12,7 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue'
+export default { inheritAttrs: false }
-
-// see https://v3.vuejs.org/api/sfc-script-setup.html#usage-alongside-normal-script
-export default defineComponent({
-	inheritAttrs: false,
-})
 </script>
 
 <script lang="ts" setup>
@@ -30,7 +25,7 @@ export default defineComponent({
 
 // NOTE: Do NOT use buttons with @click to push routes. => Use router-links instead!
 
-import {ref, watchEffect, computed, useAttrs, PropType} from 'vue'
+import { ref, watchEffect, computed, useAttrs, type PropType } from 'vue'
 
 const BASE_BUTTON_TYPES_MAP = Object.freeze({
 	button: 'button',

src/components/date/datemathHelp.vue

@@ -110,10 +110,10 @@
 </template>
 
 <script lang="ts" setup>
-import {format} from 'date-fns'
+import { formatDate } from '@/helpers/time/formatDate'
 import BaseButton from '@/components/base/BaseButton.vue'
 
-const exampleDate = format(new Date(), 'yyyy-MM-dd')
+const exampleDate = formatDate(new Date(), 'yyyy-MM-dd')
 </script>
 
 <style scoped>

src/components/date/datepickerWithRange.vue

@@ -71,7 +71,7 @@
 
 <script lang="ts" setup>
 import {computed, ref, watch} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import flatPickr from 'vue-flatpickr-component'
@@ -85,7 +85,7 @@ import DatemathHelp from '@/components/date/datemathHelp.vue'
 const store = useStore()
 const {t} = useI18n({useScope: 'global'})
 
-const emit = defineEmits(['dateChanged', 'update:modelValue'])
+const emit = defineEmits(['update:modelValue'])
 const props = defineProps({
 	modelValue: {
 		required: false,
@@ -127,7 +127,6 @@ function emitChanged() {
 		dateFrom: from.value === '' ? null : from.value,
 		dateTo: to.value === '' ? null : to.value,
 	}
-	emit('dateChanged', args)
 	emit('update:modelValue', args)
 }
 

src/components/home/MenuButton.vue

@@ -11,7 +11,7 @@
 
 <script setup lang="ts">
 import {computed} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 

src/components/home/TheNavigation.vue

@@ -16,6 +16,10 @@
 					{{ currentList.title === '' ? $t('misc.loading') : getListTitle(currentList) }}
 				</h1>
 
+				<BaseButton :to="{name: 'list.info', params: {listId: currentList.id}}" class="info-button">
+					<icon icon="circle-info"/>
+				</BaseButton>
+
 				<list-settings-dropdown v-if="canWriteCurrentList && currentList.id !== -1" :list="currentList"/>
 			</template>
 		</div>
@@ -88,11 +92,11 @@
 
 <script setup lang="ts">
 import {ref, computed, onMounted, nextTick} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 import {useRouter} from 'vue-router'
 
 import {QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
-import Rights from '@/models/constants/rights.json'
+import {RIGHTS as Rights} from '@/constants/rights'
 
 import Update from '@/components/home/update.vue'
 import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
@@ -103,6 +107,8 @@ import Logo from '@/components/home/Logo.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 import MenuButton from '@/components/home/MenuButton.vue'
 
+import {getListTitle} from '@/helpers/getListTitle'
+
 const store = useStore()
 
 const userInfo = computed(() => store.state.auth.info)
@@ -282,10 +288,21 @@ $hamburger-menu-icon-width: 28px;
 
 	:deep(.dropdown-trigger) {
 		color: var(--grey-400);
-		margin-left: 1rem;
+		margin-left: .5rem;
 		height: 1rem;
 		width: 1rem;
 		cursor: pointer;
 	}
 }
+
+.info-button {
+	text-align: center;
+	height: 1.25rem;
+	line-height: 1.25rem;
+	width: 2rem;
+	margin-top: .25rem;
+	padding: 0 .5rem;
+	color: var(--grey-400);
+	margin-left: .5rem;
+}
 </style>

src/components/home/contentAuth.vue

@@ -60,12 +60,13 @@
 </template>
 
 <script lang="ts" setup>
-import {watch, computed, shallowRef, watchEffect, VNode, h} from 'vue'
+import {watch, computed, shallowRef, watchEffect, type VNode, h} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 import {useRoute, useRouter} from 'vue-router'
 import {useEventListener} from '@vueuse/core'
 
 import {CURRENT_LIST, KEYBOARD_SHORTCUTS_ACTIVE, MENU_ACTIVE} from '@/store/mutation-types'
+import {useLabelStore} from '@/stores/labels'
 import Navigation from '@/components/home/navigation.vue'
 import QuickActions from '@/components/quick-actions/quick-actions.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
@@ -197,7 +198,8 @@ function useRenewTokenOnFocus() {
 }
 
 useRenewTokenOnFocus()
-store.dispatch('labels/loadAllLabels')
+const labelStore = useLabelStore()
+labelStore.loadAllLabels()
 </script>
 
 <style lang="scss" scoped>

src/components/home/contentLinkShare.vue

@@ -6,8 +6,9 @@
 	>
 		<div class="container has-text-centered link-share-view">
 			<div class="column is-10 is-offset-1">
-				<Logo class="logo"/>
+				<Logo class="logo" v-if="logoVisible"/>
 				<h1
+					:class="{'m-0': !logoVisible}"
 					:style="{ 'opacity': currentList.title === '' ? '0': '1' }"
 					class="title">
 					{{ currentList.title === '' ? $t('misc.loading') : currentList.title }}
@@ -23,7 +24,7 @@
 
 <script lang="ts" setup>
 import {computed} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 
 import Logo from '@/components/home/Logo.vue'
 import PoweredByLink from './PoweredByLink.vue'
@@ -31,6 +32,7 @@ import PoweredByLink from './PoweredByLink.vue'
 const store = useStore()
 const currentList = computed(() => store.state.currentList)
 const background = computed(() => store.state.background)
+const logoVisible = computed(() => store.state.logoVisible)
 </script>
 
 <style lang="scss" scoped>

src/components/home/navigation.vue

@@ -56,10 +56,10 @@
 						class="menu-label"
 						v-tooltip="namespaceTitles[nk]"
 					>
-						<span
+						<ColorBubble
 							v-if="n.hexColor !== ''"
-							:style="{ backgroundColor: n.hexColor }"
+							:color="n.hexColor"
-							class="color-bubble"
+							class="mr-1"
 						/>
 						<span class="name">{{ namespaceTitles[nk] }}</span>
 						<div
@@ -114,11 +114,11 @@
 									<span class="icon handle">
 										<icon icon="grip-lines"/>
 									</span>
-									<span
+									<ColorBubble
-										:style="{ backgroundColor: l.hexColor }"
+											v-if="l.hexColor !== ''"
-										class="color-bubble"
+										:color="l.hexColor"
-										v-if="l.hexColor !== ''">
+										class="mr-1"
-									</span>
+									/>
 									<span class="list-menu-title">{{ getListTitle(l) }}</span>
 								</BaseButton>
 								<BaseButton
@@ -141,9 +141,9 @@
 
 <script setup lang="ts">
 import {ref, computed, onMounted, onBeforeMount} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 import draggable from 'zhyswan-vuedraggable'
-import {SortableEvent} from 'sortablejs'
+import type {SortableEvent} from 'sortablejs'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
@@ -154,9 +154,11 @@ import Logo from '@/components/home/Logo.vue'
 import {MENU_ACTIVE} from '@/store/mutation-types'
 import {calculateItemPosition} from '@/helpers/calculateItemPosition'
 import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
+import {getListTitle} from '@/helpers/getListTitle'
 import {useEventListener} from '@vueuse/core'
-import NamespaceModel from '@/models/namespace'
+import type {IList} from '@/modelTypes/IList'
-import ListModel from '@/models/list'
+import type {INamespace} from '@/modelTypes/INamespace'
+import ColorBubble from '@/components/misc/colorBubble.vue'
 
 const drag = ref(false)
 const dragOptions = {
@@ -171,7 +173,7 @@ const loading = computed(() => store.state.loading && store.state.loadingModule
 
 
 const namespaces = computed(() => {
-	return (store.state.namespaces.namespaces as NamespaceModel[]).filter(n => !n.isArchived)
+	return (store.state.namespaces.namespaces as INamespace[]).filter(n => !n.isArchived)
 })
 const activeLists = computed(() => {
 	return namespaces.value.map(({lists}) => {
@@ -194,7 +196,7 @@ useEventListener('resize', resize)
 onMounted(() => resize())
 
 
-function toggleFavoriteList(list: ListModel) {
+function toggleFavoriteList(list: IList) {
 	// The favorites pseudo list is always favorite
 	// Archived lists cannot be marked favorite
 	if (list.id === -1 || list.isArchived) {
@@ -208,14 +210,14 @@ function resize() {
 	store.commit(MENU_ACTIVE, window.innerWidth >= 770)
 }
 
-function toggleLists(namespaceId: number) {
+function toggleLists(namespaceId: INamespace['id']) {
 	listsVisible.value[namespaceId] = !listsVisible.value[namespaceId]
 }
 
-const listsVisible = ref<{ [id: NamespaceModel['id']]: boolean }>({})
+const listsVisible = ref<{ [id: INamespace['id']]: boolean }>({})
 // FIXME: async action will be unfinished when component mounts
 onBeforeMount(async () => {
-	const namespaces = await store.dispatch('namespaces/loadNamespaces') as NamespaceModel[]
+	const namespaces = await store.dispatch('namespaces/loadNamespaces') as INamespace[]
 	namespaces.forEach(n => {
 		if (typeof listsVisible.value[n.id] === 'undefined') {
 			listsVisible.value[n.id] = true
@@ -223,7 +225,7 @@ onBeforeMount(async () => {
 	})
 })
 
-function updateActiveLists(namespace: NamespaceModel, activeLists: ListModel[]) {
+function updateActiveLists(namespace: INamespace, activeLists: IList[]) {
 	// This is a bit hacky: since we do have to filter out the archived items from the list
 	// for vue draggable updating it is not as simple as replacing it.
 	// To work around this, we merge the active lists with the archived ones. Doing so breaks the order
@@ -240,7 +242,7 @@ function updateActiveLists(namespace: NamespaceModel, activeLists: ListModel[])
 	})
 }
 
-const listUpdating = ref<{ [id: NamespaceModel['id']]: boolean }>({})
+const listUpdating = ref<{ [id: INamespace['id']]: boolean }>({})
 
 async function saveListPosition(e: SortableEvent) {
 	if (!e.newIndex && e.newIndex !== 0) return
@@ -249,9 +251,14 @@ async function saveListPosition(e: SortableEvent) {
 	const newNamespaceIndex = parseInt(e.to.dataset.namespaceIndex as string)
 
 	const listsActive = activeLists.value[newNamespaceIndex]
-	const list = listsActive[e.newIndex]
+	// If the list was dragged to the last position, Safari will report e.newIndex as the size of the listsActive
-	const listBefore = listsActive[e.newIndex - 1] ?? null
+	// array instead of using the position. Because the index is wrong in that case, dragging the list will fail.
-	const listAfter = listsActive[e.newIndex + 1] ?? null
+	// To work around that we're explicitly checking that case here and decrease the index.
+	const newIndex = e.newIndex === listsActive.length ? e.newIndex - 1 : e.newIndex 
+	
+	const list = listsActive[newIndex]
+	const listBefore = listsActive[newIndex - 1] ?? null
+	const listAfter = listsActive[newIndex + 1] ?? null
 	listUpdating.value[list.id] = true
 
 	const position = calculateItemPosition(

src/components/home/update.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="update-notification" v-if="updateAvailable">
 		<p>{{ $t('update.available') }}</p>
-		<x-button @click="refreshApp()" :shadow="false">
+		<x-button @click="refreshApp()" :shadow="false" class="has-no-text-wrap">
 			{{ $t('update.do') }}
 		</x-button>
 	</div>
@@ -43,24 +43,19 @@ function refreshApp() {
 
 <style lang="scss" scoped>
 .update-notification {
-	margin: .5rem;
 	display: flex;
 	align-items: center;
 	background: $warning;
-	padding: 0 .25rem;
+	padding: .5rem;
 	border-radius: $radius;
 	font-size: .9rem;
 	color: var(--grey-900);
 	justify-content: space-between;
 
-	@media screen and (max-width: $desktop) {
 	position: fixed;
 	bottom: 1rem;
-		margin: 0;
 	width: 450px;
 	left: calc(50vw - 225px);
-		padding: .5rem;
-	}
 
 	@media screen and (max-width: $tablet) {
 		position: fixed;

src/components/input/button.vue

@@ -9,24 +9,27 @@
 			}
 		]"
 	>
-		<icon :icon="icon" v-if="showIconOnly"/>
+		<icon 
+			v-if="showIconOnly"
+			:icon="icon"
+			:style="{'color': iconColor !== '' ? iconColor : false}"
+		/>
 		<span class="icon is-small" v-else-if="icon !== ''">
-			<icon :icon="icon"/>
+			<icon 
+				:icon="icon"
+				:style="{'color': iconColor !== '' ? iconColor : false}"
+			/>
 		</span>
 		<slot />
 	</BaseButton>
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue'
+export default { name: 'x-button' }
-
-export default defineComponent({
-	name: 'x-button',
-})
 </script>
 
 <script setup lang="ts">
-import {computed, useSlots, PropType} from 'vue'
+import {computed, useSlots, type PropType} from 'vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 
 const BUTTON_TYPES_MAP =  Object.freeze({
@@ -46,6 +49,10 @@ const props = defineProps({
 		type: [String, Array],
 		default: '',
 	},
+	iconColor: {
+		type: String,
+		default: '',
+	},
 	loading: {
 		type: Boolean,
 		default: false,
@@ -69,9 +76,11 @@ const showIconOnly = computed(() => props.icon !== '' && typeof slots.default ==
   text-transform: uppercase;
   font-size: 0.85rem;
   font-weight: bold;
+  height: auto;
   min-height: $button-height;
   box-shadow: var(--shadow-sm);
   display: inline-flex;
+  white-space: break-spaces;
 
   &:hover {
     box-shadow: var(--shadow-md);

src/components/input/colorPicker.vue

@@ -68,7 +68,7 @@ export default defineComponent({
 			default: 'top',
 		},
 	},
-	emits: ['update:modelValue', 'change'],
+	emits: ['update:modelValue'],
 	watch: {
 		modelValue: {
 			handler(modelValue) {
@@ -98,7 +98,6 @@ export default defineComponent({
 
 			this.lastChangeTimeout = setTimeout(() => {
 				this.$emit('update:modelValue', this.color)
-				this.$emit('change')
 			}, 500)
 		},
 		reset() {

src/components/input/datepicker.vue

@@ -97,7 +97,7 @@ import {i18n} from '@/i18n'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 
-import {format} from 'date-fns'
+import {formatDate, formatDateShort} from '@/helpers/time/formatDate'
 import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
 import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
@@ -131,7 +131,7 @@ export default defineComponent({
 			default: false,
 		},
 	},
-	emits: ['update:modelValue', 'change', 'close', 'close-on-change'],
+	emits: ['update:modelValue', 'close', 'close-on-change'],
 	mounted() {
 		document.addEventListener('click', this.hideDatePopup)
 	},
@@ -170,11 +170,12 @@ export default defineComponent({
 					return ''
 				}
 
-				return format(this.date, 'yyy-LL-dd H:mm')
+				return formatDate(this.date, 'yyy-LL-dd H:mm')
 			},
 		},
 	},
 	methods: {
+		formatDateShort,
 		setDateValue(newVal) {
 			if (newVal === null) {
 				this.date = null
@@ -185,7 +186,6 @@ export default defineComponent({
 		updateData() {
 			this.changed = true
 			this.$emit('update:modelValue', this.date)
-			this.$emit('change', this.date)
 		},
 		toggleDatePopup() {
 			if (this.disabled) {
@@ -233,7 +233,7 @@ export default defineComponent({
 			const interval = calculateDayInterval(date)
 			const newDate = new Date()
 			newDate.setDate(newDate.getDate() + interval)
-			return format(newDate, 'E')
+			return formatDate(newDate, 'E')
 		},
 	},
 })

src/components/input/editor.vue

@@ -16,14 +16,29 @@
 		<p class="has-text-centered has-text-grey is-italic my-5" v-if="showPreviewText">
 			{{ emptyText }}
 			<template v-if="isEditEnabled">
-				<ButtonLink @click="toggleEdit" class="d-print-none">{{ $t('input.editor.edit') }}</ButtonLink>.
+				<ButtonLink
+					@click="toggleEdit"
+					v-shortcut="editShortcut"
+					class="d-print-none">
+					{{ $t('input.editor.edit') }}
+				</ButtonLink>.
 			</template>
 		</p>
 
 		<ul class="actions d-print-none" v-if="bottomActions.length > 0">
 			<li v-if="isEditEnabled && !showPreviewText && showSave">
-				<BaseButton v-if="showEditButton" @click="toggleEdit">{{ $t('input.editor.edit') }}</BaseButton>
+				<BaseButton
-				<BaseButton v-else-if="isEditActive" @click="toggleEdit" class="done-edit">{{ $t('misc.save') }}</BaseButton>
+					v-if="showEditButton"
+					@click="toggleEdit"
+					v-shortcut="editShortcut">
+					{{ $t('input.editor.edit') }}
+				</BaseButton>
+				<BaseButton
+					v-else-if="isEditActive"
+					@click="toggleEdit"
+					class="done-edit">
+					{{ $t('misc.save') }}
+				</BaseButton>
 			</li>
 			<li v-for="(action, k) in bottomActions" :key="k">
 				<BaseButton @click="action.action">{{ action.title }}</BaseButton>
@@ -32,7 +47,11 @@
 		<template v-else-if="isEditEnabled && showSave">
 			<ul v-if="showEditButton" class="actions d-print-none">
 				<li>
-					<BaseButton @click="toggleEdit">{{ $t('input.editor.edit') }}</BaseButton>
+					<BaseButton
+						@click="toggleEdit"
+						v-shortcut="editShortcut">
+						{{ $t('input.editor.edit') }}
+					</BaseButton>
 				</li>
 			</ul>
 			<x-button
@@ -53,7 +72,7 @@ import {defineComponent} from 'vue'
 import VueEasymde from './vue-easymde.vue'
 import {marked} from 'marked'
 import DOMPurify from 'dompurify'
-import hljs from 'highlight.js/lib/common'
+import {setupMarkdownRenderer} from '@/helpers/markdownRenderer'
 
 import {createEasyMDEConfig} from './editorConfig'
 
@@ -110,8 +129,14 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		// If a key is passed the editor will go in "edit" mode when the key is pressed.
+		// Disabled if an empty string is passed.
+		editShortcut: {
+			type: String,
+			default: '',
 		},
-	emits: ['update:modelValue', 'change'],
+	},
+	emits: ['update:modelValue'],
 	computed: {
 		showPreviewText() {
 			return this.isPreviewActive && this.text === '' && this.emptyText !== ''
@@ -187,7 +212,6 @@ export default defineComponent({
 
 			this.changeTimeout = setTimeout(() => {
 				this.$emit('update:modelValue', this.text)
-				this.$emit('change', this.text)
 			}, timeout)
 		},
 		replaceAt(str, index, replacement) {
@@ -198,43 +222,7 @@ export default defineComponent({
 			return checkboxes[n]
 		},
 		renderPreview() {
-			const renderer = new marked.Renderer()
+			setupMarkdownRenderer(this.checkboxId)
-			const linkRenderer = renderer.link
-
-			let checkboxNum = -1
-			marked.use({
-				renderer: {
-					image: (src, title, text) => {
-
-						title = title ? ` title="${title}` : ''
-
-						// If the url starts with the api url, the image is likely an attachment and
-						// we'll need to download and parse it properly.
-						if (src.substr(0, window.API_URL.length + 7) === `${window.API_URL}/tasks/`) {
-							return `<img data-src="${src}" alt="${text}" ${title} class="attachment-image"/>`
-						}
-
-						return `<img src="${src}" alt="${text}" ${title}/>`
-					},
-					checkbox: (checked) => {
-						if (checked) {
-							checked = ' checked="checked"'
-						}
-
-						checkboxNum++
-						return `<input type="checkbox" data-checkbox-num="${checkboxNum}" ${checked} class="text-checkbox-${this.checkboxId}"/>`
-					},
-					link: (href, title, text) => {
-						const isLocal = href.startsWith(`${location.protocol}//${location.hostname}`)
-						const html = linkRenderer.call(renderer, href, title, text)
-						return isLocal ? html : html.replace(/^<a /, '<a target="_blank" rel="noreferrer noopener nofollow" ')
-					},
-				},
-				highlight: function (code, language) {
-					const validLanguage = hljs.getLanguage(language) ? language : 'plaintext'
-					return hljs.highlight(code, {language: validLanguage}).value
-				},
-			})
 
 			this.preview = DOMPurify.sanitize(marked(this.text), {ADD_ATTR: ['target']})
 

src/components/input/fancycheckbox.vue

@@ -53,7 +53,7 @@ export default defineComponent({
 		},
 	},
 	methods: {
-		updateData(checked) {
+		updateData(checked: boolean) {
 			this.checked = checked
 			this.$emit('update:modelValue', checked)
 			this.$emit('change', checked)

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

@@ -60,8 +60,8 @@
 				:is-button="false"
 				entity="list"
 				:entity-id="list.id"
-				:subscription="list.subscription"
+				:model-value="list.subscription"
-				@change="sub => subscription = sub"
+				@update:model-value="sub => subscription = sub"
 				type="dropdown"
 			/>
 			<dropdown-item
@@ -76,24 +76,24 @@
 </template>
 
 <script setup lang="ts">
-import {ref, computed, watchEffect} from 'vue'
+import {ref, computed, watchEffect, type PropType} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 
 import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
 import Dropdown from '@/components/misc/dropdown.vue'
 import DropdownItem from '@/components/misc/dropdown-item.vue'
 import TaskSubscription from '@/components/misc/subscription.vue'
-import ListModel from '@/models/list'
+import type {IList} from '@/modelTypes/IList'
-import SubscriptionModel from '@/models/subscription'
+import type {ISubscription} from '@/modelTypes/ISubscription'
 
 const props = defineProps({
 	list: {
-		type: ListModel,
+		type: Object as PropType<IList>,
 		required: true,
 	},
 })
 
-const subscription = ref<SubscriptionModel | null>(null)
+const subscription = ref<ISubscription | null>(null)
 watchEffect(() => {
 	subscription.value = props.list.subscription ?? null
 })

src/components/list/partials/filters.vue

@@ -38,7 +38,7 @@
 				<priority-select
 					:disabled="!filters.usePriority || undefined"
 					v-model.number="filters.priority"
-					@change="setPriority"
+					@update:model-value="setPriority"
 				/>
 				<fancycheckbox
 					v-model="filters.usePriority"
@@ -53,7 +53,7 @@
 			<div class="control single-value-control">
 				<percent-done-select
 					v-model.number="filters.percentDone"
-					@change="setPercentDoneFilter"
+					@update:model-value="setPercentDoneFilter"
 					:disabled="!filters.usePercentDone || undefined"
 				/>
 				<fancycheckbox
@@ -68,8 +68,9 @@
 			<label class="label">{{ $t('task.attributes.dueDate') }}</label>
 			<div class="control">
 				<datepicker-with-range
-					@dateChanged="values => setDateFilter('due_date', values)"
+					v-model="filters.dueDate"
-					v-model="filters.dueDate">
+					@update:model-value="values => setDateFilter('due_date', values)"
+				>
 					<template #trigger="{toggle, buttonText}">
 						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
 							{{ buttonText }}
@@ -82,8 +83,9 @@
 			<label class="label">{{ $t('task.attributes.startDate') }}</label>
 			<div class="control">
 				<datepicker-with-range
-					@dateChanged="values => setDateFilter('start_date', values)"
+					v-model="filters.startDate"
-					v-model="filters.startDate">
+					@update:model-value="values => setDateFilter('start_date', values)"
+				>
 					<template #trigger="{toggle, buttonText}">
 						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
 							{{ buttonText }}
@@ -96,8 +98,9 @@
 			<label class="label">{{ $t('task.attributes.endDate') }}</label>
 			<div class="control">
 				<datepicker-with-range
-					@dateChanged="values => setDateFilter('end_date', values)"
+					v-model="filters.endDate"
-					v-model="filters.endDate">
+					@update:model-value="values => setDateFilter('end_date', values)"
+				>
 					<template #trigger="{toggle, buttonText}">
 						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
 							{{ buttonText }}
@@ -110,8 +113,9 @@
 			<label class="label">{{ $t('task.attributes.reminders') }}</label>
 			<div class="control">
 				<datepicker-with-range
-					@dateChanged="values => setDateFilter('reminders', values)"
+					v-model="filters.reminders"
-					v-model="filters.reminders">
+					@update:model-value="values => setDateFilter('reminders', values)"
+				>
 					<template #trigger="{toggle, buttonText}">
 						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
 							{{ buttonText }}
@@ -141,7 +145,7 @@
 		<div class="field">
 			<label class="label">{{ $t('task.attributes.labels') }}</label>
 			<div class="control labels-list">
-				<edit-labels v-model="labels" @change="changeLabelFilter"/>
+				<edit-labels v-model="labels" @update:model-value="changeLabelFilter"/>
 			</div>
 		</div>
 
@@ -186,8 +190,10 @@
 <script lang="ts">
 import {defineComponent} from 'vue'
 
-import DatepickerWithRange from '@/components/date/datepickerWithRange'
+import {useLabelStore} from '@/stores/labels'
-import Fancycheckbox from '../../input/fancycheckbox'
+
+import DatepickerWithRange from '@/components/date/datepickerWithRange.vue'
+import Fancycheckbox from '@/components/input/fancycheckbox.vue'
 
 import {includesById} from '@/helpers/utils'
 import PrioritySelect from '@/components/tasks/partials/prioritySelect.vue'
@@ -278,7 +284,7 @@ export default defineComponent({
 			default: false,
 		},
 	},
-	emits: ['update:modelValue', 'change'],
+	emits: ['update:modelValue'],
 	watch: {
 		modelValue: {
 			handler(value) {
@@ -303,8 +309,10 @@ export default defineComponent({
 				this.change()
 			},
 		},
+
 		foundLabels() {
-			return this.$store.getters['labels/filterLabelsByQuery'](this.labels, this.query)
+			const labelStore = useLabelStore()
+			return labelStore.filterLabelsByQuery(this.labels, this.labelQuery)
 		},
 	},
 	methods: {
@@ -312,7 +320,6 @@ export default defineComponent({
 			const params = {...this.params}
 			params.filter_value = params.filter_value.map(v => v instanceof Date ? v.toISOString() : v)
 			this.$emit('update:modelValue', params)
-			this.$emit('change', params)
 		},
 		prepareFilters() {
 			this.prepareDone()
@@ -333,7 +340,8 @@ export default defineComponent({
 				: ''
 			const labelIds = labels.split(',').map(i => parseInt(i))
 
-			this.labels = this.$store.getters['labels/getLabelsByIds'](labelIds)
+			const labelStore = useLabelStore()
+			this.labels = labelStore.getLabelsByIds(labelIds)
 		},
 		removePropertyFromFilter(propertyName) {
 			// Because of the way arrays work, we can only ever remove one element at once.

src/components/list/partials/list-card.vue

@@ -36,16 +36,16 @@
 </template>
 
 <script lang="ts" setup>
-import {PropType, ref, watch} from 'vue'
+import {type PropType, ref, watch} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 
 import ListService from '@/services/list'
 import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
 
 import {colorIsDark} from '@/helpers/color/colorIsDark'
-import ListModel from '@/models/list'
 
 import BaseButton from '@/components/base/BaseButton.vue'
+import type {IList} from '@/modelTypes/IList'
 
 const background = ref<string | null>(null)
 const backgroundLoading = ref(false)
@@ -53,7 +53,7 @@ const blurHashUrl = ref('')
 
 const props = defineProps({
 	list: {
-		type: Object as PropType<ListModel>,
+		type: Object as PropType<IList>,
 		required: true,
 	},
 	showArchived: {
@@ -86,7 +86,7 @@ async function loadBackground() {
 
 const store = useStore()
 
-function toggleFavoriteList(list: ListModel) {
+function toggleFavoriteList(list: IList) {
 	// The favorites pseudo list is always favorite
 	// Archived lists cannot be marked favorite
 	if (list.id === -1 || list.isArchived) {

src/components/misc/Done.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts" setup>
-import {PropType} from 'vue'
+import type {PropType} from 'vue'
 type Variants = 'default' | 'small'
 
 defineProps({

src/components/misc/card.vue

@@ -16,11 +16,21 @@
 				</span>
 			</BaseButton>
 		</header>
-		<div class="card-content loader-container" :class="{'p-0': !padding, 'is-loading': loading}">
+		<div
+			class="card-content loader-container"
+			:class="{
+				'p-0': !padding,
+				'is-loading': loading
+			}"
+		>
 			<div :class="{'content': hasContent}">
-				<slot></slot>
+				<slot />
 			</div>
 		</div>
+
+		<footer v-if="$slots.footer" class="card-footer">
+			<slot name="footer" />
+		</footer>
 	</div>
 </template>
 
@@ -76,9 +86,11 @@ defineEmits(['close'])
   border-radius: $radius $radius 0 0;
 }
 
-// FIXME: should maybe be merged somehow with modal
+.card-footer {
-:deep(.modal-card-foot) {
   background-color: var(--grey-50);
   border-top: 0;
+	padding: var(--modal-card-head-padding);
+	display: flex;
+	justify-content: flex-end;
 }
 </style>

src/components/misc/colorBubble.vue

@@ -0,0 +1,24 @@
+<template>
+	<span
+		:style="{backgroundColor: color }"
+		class="color-bubble"
+	></span>
+</template>
+
+<script lang="ts" setup>
+import type { Color } from 'csstype'
+
+defineProps< {
+	color: Color,
+}>()
+</script>
+
+<style scoped>
+.color-bubble {
+	display: inline-block;
+	border-radius: 100%;
+	height: 10px;
+	width: 10px;
+	flex-shrink: 0;
+}
+</style>

src/components/misc/create-edit.vue

@@ -4,15 +4,17 @@
 			:title="title"
 			:shadow="false"
 			:padding="false"
-			class="has-text-left has-overflow"
+			class="has-text-left"
 			:has-close="true"
 			@close="$router.back()"
 			:loading="loading"
 		>
 			<div class="p-4">
-				<slot></slot>
+				<slot />
 			</div>
-			<footer class="modal-card-foot is-flex is-justify-content-flex-end">
+
+			<template #footer>
+				<slot name="footer">
 					<x-button
 						v-if="tertiary !== ''"
 						:shadow="false"
@@ -31,11 +33,12 @@
 						variant="primary"
 						@click.prevent.stop="primary()"
 						:icon="primaryIcon"
-					:disabled="primaryDisabled"
+						:disabled="primaryDisabled || loading"
 					>
 						{{ primaryLabel || $t('misc.create') }}
 					</x-button>
-			</footer>
+				</slot>
+			</template>
 		</card>
 	</modal>
 </template>

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

@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts" setup>
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 
 import Shortcut from '@/components/misc/shortcut.vue'
 import Message from '@/components/misc/message.vue'

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

@@ -136,6 +136,10 @@ export const KEYBOARD_SHORTCUTS : ShortcutGroup[] = [
 				title: 'keyboardShortcuts.task.reminder',
 				keys: ['alt', 'r'],
 			},
+			{
+				title: 'keyboardShortcuts.task.description',
+				keys: ['e'],
+			},
 		],
 	},
 ]

src/components/misc/legal.vue

@@ -8,7 +8,7 @@
 
 <script lang="ts" setup>
 import {computed} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 

src/components/misc/message.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts" setup>
-import {computed, PropType} from 'vue'
+import {computed, type PropType} from 'vue'
 
 const TEXT_ALIGN_MAP = Object.freeze({
 	left: '',

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

@@ -30,7 +30,7 @@ import Logo from '@/components/home/Logo.vue'
 import Message from '@/components/misc/message.vue'
 import Legal from '@/components/misc/legal.vue'
 import ApiConfig from '@/components/misc/api-config.vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 import {computed} from 'vue'
 import {useRoute} from 'vue-router'
 import {useI18n} from 'vue-i18n'

src/components/misc/ready.vue

@@ -42,7 +42,7 @@
 
 <script lang="ts" setup>
 import {ref, computed} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 
 import Logo from '@/assets/logo.svg?component'
 import ApiConfig from '@/components/misc/api-config.vue'

src/components/misc/subscription.vue

@@ -5,7 +5,7 @@
 		:icon="iconName"
 		v-tooltip="tooltipText"
 		@click="changeSubscription"
-		:disabled="disabled || undefined"
+		:disabled="disabled"
 	>
 		{{ buttonText }}
 	</x-button>
@@ -23,6 +23,7 @@
 		v-tooltip="tooltipText"
 		@click="changeSubscription"
 		:class="{'is-disabled': disabled}"
+		:disabled="disabled"
 	>
 		<span class="icon">
 			<icon :icon="iconName"/>
@@ -32,7 +33,7 @@
 </template>
 
 <script lang="ts" setup>
-import {computed, shallowRef} from 'vue'
+import {computed, shallowRef, type PropType} from 'vue'
 import {useI18n} from 'vue-i18n'
 
 import BaseButton from '@/components/base/BaseButton.vue'
@@ -40,24 +41,30 @@ import DropdownItem from '@/components/misc/dropdown-item.vue'
 
 import SubscriptionService from '@/services/subscription'
 import SubscriptionModel from '@/models/subscription'
+import type {ISubscription} from '@/modelTypes/ISubscription'
 
 import {success} from '@/message'
 
-interface Props {
+const props = defineProps({
-	entity: string
+	entity: String,
-	entityId: number
+	entityId: Number,
-	subscription: SubscriptionModel | null
+	isButton: {
-	type?: 'button' | 'dropdown' | null
+		type: Boolean,
-}
+		default: true,
-
+	},
-const props = withDefaults(defineProps<Props>(), {
+	modelValue: {
-	subscription: null,
+		type: Object as PropType<ISubscription>,
-	type: 'button',
+		default: null,
+	},
+	type: {
+		type: String as PropType<'button' | 'dropdown' | 'null'>,
+		default: 'button',
+	},
 })
 
-const subscriptionEntity = computed<string | null>(() => props.subscription?.entity ?? null)
+const subscriptionEntity = computed<string | null>(() => props.modelValue?.entity ?? null)
 
-const emit = defineEmits(['change'])
+const emit = defineEmits(['update:modelValue'])
 
 const subscriptionService = shallowRef(new SubscriptionService())
 
@@ -70,27 +77,21 @@ const tooltipText = computed(() => {
 		})
 	}
 
-	return props.subscription !== null ?
+	return props.modelValue !== null ?
 		t('task.subscription.subscribed', {entity: props.entity}) :
 		t('task.subscription.notSubscribed', {entity: props.entity})
 })
 
-const buttonText = computed(() => props.subscription !== null ? t('task.subscription.unsubscribe') : t('task.subscription.subscribe'))
+const buttonText = computed(() => props.modelValue ? t('task.subscription.unsubscribe') : t('task.subscription.subscribe'))
-const iconName = computed(() => props.subscription !== null ? ['far', 'bell-slash'] : 'bell')
+const iconName = computed(() => props.modelValue ? ['far', 'bell-slash'] : 'bell')
-const disabled = computed(() => {
+const disabled = computed(() => props.modelValue && subscriptionEntity.value !== props.entity)
-	if (props.subscription === null) {
-		return false
-	}
-
-	return subscriptionEntity.value !== props.entity
-})
 
 function changeSubscription() {
 	if (disabled.value) {
 		return
 	}
 
-	if (props.subscription === null) {
+	if (props.modelValue === null) {
 		subscribe()
 	} else {
 		unsubscribe()
@@ -103,7 +104,7 @@ async function subscribe() {
 		entityId: props.entityId,
 	})
 	await subscriptionService.value.create(subscription)
-	emit('change', subscription)
+	emit('update:modelValue', subscription)
 	success({message: t('task.subscription.subscribeSuccess', {entity: props.entity})})
 }
 
@@ -113,7 +114,7 @@ async function unsubscribe() {
 		entityId: props.entityId,
 	})
 	await subscriptionService.value.delete(subscription)
-	emit('change', null)
+	emit('update:modelValue', null)
 	success({message: t('task.subscription.unsubscribeSuccess', {entity: props.entity})})
 }
 </script>

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

@@ -34,12 +34,13 @@
 				{{ $t('menu.archive') }}
 			</dropdown-item>
 			<task-subscription
+				v-if="subscription"
 				class="has-no-shadow"
 				:is-button="false"
 				entity="namespace"
 				:entity-id="namespace.id"
-				:subscription="subscription"
+				:model-value="subscription"
-				@change="sub => subscription = sub"
+				@update:model-value="sub => subscription = sub"
 				type="dropdown"
 			/>
 			<dropdown-item
@@ -54,20 +55,22 @@
 </template>
 
 <script setup lang="ts">
-import {ref, onMounted} from 'vue'
+import {ref, onMounted, type PropType} from 'vue'
 
 import Dropdown from '@/components/misc/dropdown.vue'
 import DropdownItem from '@/components/misc/dropdown-item.vue'
 import TaskSubscription from '@/components/misc/subscription.vue'
+import type {INamespace} from '@/modelTypes/INamespace'
+import type {ISubscription} from '@/modelTypes/ISubscription'
 
 const props = defineProps({
 	namespace: {
-		type: Object, // NamespaceModel
+		type: Object as PropType<INamespace>,
 		required: true,
 	},
 })
 
-const subscription = ref(null)
+const subscription = ref<ISubscription | null>(null)
 onMounted(() => {
 	subscription.value = props.namespace.subscription
 })

src/components/notifications/notifications.vue

@@ -30,7 +30,7 @@
 								{{ n.toText(userInfo) }}
 							</BaseButton>
 						</div>
-						<span class="created" v-tooltip="formatDate(n.created)">
+						<span class="created" v-tooltip="formatDateLong(n.created)">
 							{{ formatDateSince(n.created) }}
 						</span>
 					</div>
@@ -52,17 +52,18 @@ import {computed, onMounted, onUnmounted, ref} from 'vue'
 import NotificationService from '@/services/notification'
 import BaseButton from '@/components/base/BaseButton.vue'
 import User from '@/components/misc/user.vue'
-import names from '@/models/constants/notificationNames.json'
+import { NOTIFICATION_NAMES as names, type INotification} from '@/modelTypes/INotification'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 import {useRouter} from 'vue-router'
+import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
 
 const LOAD_NOTIFICATIONS_INTERVAL = 10000
 
 const store = useStore()
 const router = useRouter()
 
-const allNotifications = ref([])
+const allNotifications = ref<INotification[]>([])
 const showNotifications = ref(false)
 const popup = ref(null)
 

src/components/sharing/linkSharing.vue

@@ -79,48 +79,25 @@
 			>
 				<thead>
 				<tr>
-					<th>{{ $t('list.share.attributes.link') }}</th>
+					<th></th>
-					<th>{{ $t('list.share.attributes.name') }}</th>
+					<th>{{ $t('list.share.links.view') }}</th>
-					<th>{{ $t('list.share.attributes.sharedBy') }}</th>
-					<th>{{ $t('list.share.attributes.right') }}</th>
 					<th>{{ $t('list.share.attributes.delete') }}</th>
 				</tr>
 				</thead>
 				<tbody>
 				<tr :key="s.id" v-for="s in linkShares">
 					<td>
-						<div class="field has-addons no-input-mobile">
+						<p class="mb-2 is-italic" v-if="s.name !== ''">
-							<div class="control">
-								<input
-									:value="getShareLink(s.hash)"
-									class="input"
-									readonly
-									type="text"
-								/>
-							</div>
-							<div class="control">
-								<x-button
-									@click="copy(getShareLink(s.hash))"
-									:shadow="false"
-									v-tooltip="$t('misc.copy')"
-								>
-									<span class="icon">
-										<icon icon="paste"/>
-									</span>
-								</x-button>
-							</div>
-						</div>
-					</td>
-					<td>
-						<template v-if="s.name !== ''">
 							{{ s.name }}
-						</template>
+						</p>
-						<i v-else>{{ $t('list.share.links.noName') }}</i>
+
-					</td>
+						<p class="mb-2">
-					<td>
+							<i18n-t keypath="list.share.links.sharedBy">
-						{{ s.sharedBy.getDisplayName() }}
+								<strong>{{ s.sharedBy.getDisplayName() }}</strong>
-					</td>
+							</i18n-t>
-					<td class="type">
+						</p>
+
+						<p class="mb-2">
 							<template v-if="s.right === RIGHTS.ADMIN">
 								<span class="icon is-small">
 									<icon icon="lock"/>
@@ -139,6 +116,41 @@
 								</span>&nbsp;
 								{{ $t('list.share.right.read') }}
 							</template>
+						</p>
+						
+						<div class="field has-addons no-input-mobile">
+							<div class="control">
+								<input
+										:value="getShareLink(s.hash, selectedView[s.id])"
+										class="input"
+										readonly
+										type="text"
+								/>
+							</div>
+							<div class="control">
+								<x-button
+										@click="copy(getShareLink(s.hash, selectedView[s.id]))"
+										:shadow="false"
+										v-tooltip="$t('misc.copy')"
+								>
+									<span class="icon">
+										<icon icon="paste"/>
+									</span>
+								</x-button>
+							</div>
+						</div>
+					</td>
+					<td>
+						<div class="select">
+							<select v-model="selectedView[s.id]">
+								<option
+									v-for="(title, key) in availableViews"
+									:value="key"
+									:key="key">
+									{{ title }}
+								</option>
+							</select>
+						</div>
 					</td>
 					<td class="actions">
 						<x-button
@@ -177,16 +189,21 @@
 
 <script setup lang="ts">
 import {ref, watch, computed, shallowReactive} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
-import RIGHTS from '@/models/constants/rights.json'
+import {RIGHTS} from '@/constants/rights'
 import LinkShareModel from '@/models/linkShare'
 
+import type {ILinkShare} from '@/modelTypes/ILinkShare'
+import type {IList} from '@/modelTypes/IList'
+
 import LinkShareService from '@/services/linkShare'
 
 import {useCopyToClipboard} from '@/composables/useCopyToClipboard'
 import {success} from '@/message'
+import type {ListView} from '@/types/ListView'
+import {LIST_VIEWS} from '@/types/ListView'
 
 const props = defineProps({
 	listId: {
@@ -197,7 +214,7 @@ const props = defineProps({
 
 const {t} = useI18n({useScope: 'global'})
 
-const linkShares = ref([])
+const linkShares = ref<ILinkShare[]>([])
 const linkShareService = shallowReactive(new LinkShareService())
 const selectedRight = ref(RIGHTS.READ)
 const name = ref('')
@@ -206,6 +223,17 @@ const showDeleteModal = ref(false)
 const linkIdToDelete = ref(0)
 const showNewForm = ref(false)
 
+type SelectedViewMapper = Record<IList['id'], ListView>
+
+const selectedView = ref<SelectedViewMapper>({})
+
+const availableViews = computed<Record<ListView, string>>(() => ({
+	list: t('list.list.title'),
+	gantt: t('list.gantt.title'),
+	table: t('list.table.title'),
+	kanban: t('list.kanban.title'),
+}))
+
 const copy = useCopyToClipboard()
 watch(
 	() => props.listId,
@@ -216,16 +244,20 @@ watch(
 const store = useStore()
 const frontendUrl = computed(() => store.state.config.frontendUrl)
 
-async function load(listId) {
+async function load(listId: IList['id']) {
 	// If listId == 0 the list on the calling component wasn't already loaded, so we just bail out here
 	if (listId === 0) {
 		return
 	}
 
-	linkShares.value = await linkShareService.getAll({listId})
+	const links = await linkShareService.getAll({listId})
+	links.forEach((l: ILinkShare) => {
+		selectedView.value[l.id] = 'list'
+	})
+	linkShares.value = links
 }
 
-async function add(listId) {
+async function add(listId: IList['id']) {
 	const newLinkShare = new LinkShareModel({
 		right: selectedRight.value,
 		listId,
@@ -241,7 +273,7 @@ async function add(listId) {
 	await load(listId)
 }
 
-async function remove(listId) {
+async function remove(listId: IList['id']) {
 	try {
 		await linkShareService.delete(new LinkShareModel({
 			id: linkIdToDelete.value,
@@ -254,8 +286,8 @@ async function remove(listId) {
 	}
 }
 
-function getShareLink(hash: string) {
+function getShareLink(hash: string, view: ListView = LIST_VIEWS.LIST) {
-	return frontendUrl.value + 'share/' + hash + '/auth'
+	return frontendUrl.value + 'share/' + hash + '/auth?view=' + view
 }
 </script>
 

src/components/sharing/userTeam.vue

@@ -133,32 +133,41 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue'
+export default {name: 'userTeamShare'}
-
-export default defineComponent({name: 'userTeamShare'})
 </script>
 
 <script setup lang="ts">
-import {ref, reactive, computed, shallowReactive, ShallowReactive, Ref} from 'vue'
+import {ref, reactive, computed, shallowReactive, type Ref} from 'vue'
 import type {PropType} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import UserNamespaceService from '@/services/userNamespace'
 import UserNamespaceModel from '@/models/userNamespace'
-import UserListModel from '@/models/userList'
+import type {IUserNamespace} from '@/modelTypes/IUserNamespace'
+
 import UserListService from '@/services/userList'
+import UserListModel from '@/models/userList'
+import type {IUserList} from '@/modelTypes/IUserList'
+
 import UserService from '@/services/user'
 import UserModel from '@/models/user'
+import type {IUser} from '@/modelTypes/IUser'
 
 import TeamNamespaceService from '@/services/teamNamespace'
 import TeamNamespaceModel from '@/models/teamNamespace'
-import TeamListModel from '@/models/teamList'
+import type { ITeamNamespace } from '@/modelTypes/ITeamNamespace'
+
 import TeamListService from '@/services/teamList'
+import TeamListModel from '@/models/teamList'
+import type { ITeamList } from '@/modelTypes/ITeamList'
+
 import TeamService from '@/services/team'
 import TeamModel from '@/models/team'
+import type {ITeam} from '@/modelTypes/ITeam'
 
-import RIGHTS from '@/models/constants/rights.json'
+
+import {RIGHTS} from '@/constants/rights'
 import Multiselect from '@/components/input/multiselect.vue'
 import Nothing from '@/components/misc/nothing.vue'
 import {success} from '@/message'
@@ -185,10 +194,10 @@ const props = defineProps({
 const {t} = useI18n({useScope: 'global'})
 
 // This user service is either a userNamespaceService or a userListService, depending on the type we are using
-let stuffService: ShallowReactive<UserNamespaceService | UserListService | TeamListService | TeamNamespaceService>
+let stuffService: UserNamespaceService | UserListService | TeamListService | TeamNamespaceService
-let stuffModel: UserNamespaceModel | UserListModel | TeamListModel | TeamNamespaceModel
+let stuffModel: IUserNamespace | IUserList | ITeamList | ITeamNamespace
-let searchService: ShallowReactive<UserService | TeamService>
+let searchService: UserService | TeamService
-let sharable: Ref<UserModel | TeamModel>
+let sharable: Ref<IUser | ITeam>
 
 const searchLabel = ref('')
 const selectedRight = ref({})
@@ -233,6 +242,7 @@ const sharableName = computed(() => {
 
 if (props.shareType === 'user') {
 	searchService = shallowReactive(new UserService())
+	// eslint-disable-next-line vue/no-ref-as-operand
 	sharable = ref(new UserModel())
 	searchLabel.value = 'username'
 
@@ -249,6 +259,7 @@ if (props.shareType === 'user') {
 	}
 } else if (props.shareType === 'team') {
 	searchService = new TeamService()
+	// eslint-disable-next-line vue/no-ref-as-operand
 	sharable = ref(new TeamModel())
 	searchLabel.value = 'name'
 
@@ -355,7 +366,7 @@ async function toggleType(sharable) {
 const found = ref([])
 
 const currentUserId = computed(() => store.state.auth.info.id)
-async function find(query) {
+async function find(query: string) {
 	if (query === '') {
 		found.value = []
 		return

src/components/tasks/add-task.vue

@@ -43,8 +43,8 @@
 <script setup lang="ts">
 import {ref, watch, unref, shallowReactive} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
-import {tryOnMounted, debouncedWatch, useWindowSize, MaybeRef} from '@vueuse/core'
+import {tryOnMounted, debouncedWatch, useWindowSize, type MaybeRef} from '@vueuse/core'
 
 import TaskService from '@/services/task'
 import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'
@@ -200,7 +200,7 @@ function handleEnter(e: KeyboardEvent) {
 }
 
 function focusTaskInput() {
-	newTaskInput.value.focus()
+	newTaskInput.value?.focus()
 }
 
 defineExpose({

src/components/tasks/edit-task.vue

@@ -36,8 +36,8 @@
 
 		<strong>{{ $t('task.attributes.reminders') }}</strong>
 		<reminders
-			@change="editTaskSubmit()"
 			v-model="taskEditTask.reminderDates"
+			@update:model-value="editTaskSubmit()"
 		/>
 
 		<div class="field">
@@ -76,7 +76,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref, reactive, computed, shallowReactive, watch, nextTick} from 'vue'
+import {ref, reactive, computed, shallowReactive, watch, nextTick, type PropType} from 'vue'
 import {useRouter} from 'vue-router'
 import {useI18n} from 'vue-i18n'
 
@@ -84,6 +84,7 @@ import Editor from '@/components/input/AsyncEditor'
 
 import TaskService from '@/services/task'
 import TaskModel from '@/models/task'
+import type {ITask} from '@/modelTypes/ITask'
 import EditLabels from './partials/editLabels.vue'
 import Reminders from './partials/reminders.vue'
 import ColorPicker from '../input/colorPicker.vue'
@@ -93,14 +94,16 @@ import {success} from '@/message'
 const {t} = useI18n({useScope: 'global'})
 const router = useRouter()
 
-const props = defineProps<{
+const props = defineProps({
-	task?: TaskModel | null,
+	task: {
-}>()
+		type: Object as PropType<ITask | null>,
+	},
+})
 
 const taskService = shallowReactive(new TaskService())
 
 const editorActive = ref(false)
-let taskEditTask: TaskModel | undefined
+let taskEditTask: ITask | undefined
 
 
 // FIXME: this initialization should not be necessary here 

src/components/tasks/gantt-component.vue

@@ -175,19 +175,20 @@
 import {defineComponent} from 'vue'
 
 import VueDragResize from 'vue-drag-resize'
-import EditTask from './edit-task'
+import EditTask from './edit-task.vue'
 
 import TaskService from '../../services/task'
 import TaskModel from '../../models/task'
-import priorities from '../../models/constants/priorities'
+import {PRIORITIES as priorities} from '@/constants/priorities'
-import PriorityLabel from './partials/priorityLabel'
+import PriorityLabel from './partials/priorityLabel.vue'
 import TaskCollectionService from '../../services/taskCollection'
 import {mapState} from 'vuex'
-import Rights from '../../models/constants/rights.json'
+import {RIGHTS as Rights} from '@/constants/rights'
 import FilterPopup from '@/components/list/partials/filter-popup.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 
 import {colorIsDark} from '@/helpers/color/colorIsDark'
+import {formatDate} from '@/helpers/time/formatDate'
 
 export default defineComponent({
 	name: 'GanttChart',
@@ -439,7 +440,7 @@ export default defineComponent({
 		formatMonthAndYear(year, month) {
 			month = month < 10 ? '0' + month : month
 			const date = new Date(`${year}-${month}-01`)
-			return this.format(date, 'MMMM, yyyy')
+			return formatDate(date, 'MMMM, yyyy')
 		},
 	},
 })

src/components/tasks/partials/attachments.vue

@@ -39,7 +39,7 @@
 				<div class="info">
 					<p class="attachment-info-meta">
 						<i18n-t keypath="task.attachment.createdBy">
-							<span v-tooltip="formatDate(a.created)">
+							<span v-tooltip="formatDateLong(a.created)">
 								{{ formatDateSince(a.created) }}
 							</span>
 							<user
@@ -49,7 +49,7 @@
 							/>
 						</i18n-t>
 						<span>
-							{{ a.file.getHumanSize() }}
+							{{ getHumanSize(a.file.size) }}
 						</span>
 						<span v-if="a.file.mime">
 							{{ a.file.mime }}
@@ -147,14 +147,18 @@
 import {defineComponent} from 'vue'
 
 import AttachmentService from '../../../services/attachment'
-import AttachmentModel from '../../../models/attachment'
+import AttachmentModel from '@/models/attachment'
-import User from '../../misc/user'
+import type {IAttachment} from '@/modelTypes/IAttachment'
+import User from '@/components/misc/user.vue'
 import {mapState} from 'vuex'
 
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { uploadFiles, generateAttachmentUrl } from '@/helpers/attachments'
+import {formatDate, formatDateSince, formatDateLong} from '@/helpers/time/formatDate'
 
-import BaseButton from '@/components/base/BaseButton'
+import BaseButton from '@/components/base/BaseButton.vue'
+import type { IFile } from '@/modelTypes/IFile'
+import { getHumanSize } from '@/helpers/getHumanSize'
 
 export default defineComponent({
 	name: 'attachments',
@@ -190,7 +194,7 @@ export default defineComponent({
 	setup(props) {
 		const copy = useCopyToClipboard()
 
-		function copyUrl(attachment: AttachmentModel) {
+		function copyUrl(attachment: IAttachment) {
 			copy(generateAttachmentUrl(props.taskId, attachment.id))
 		}
 
@@ -229,7 +233,12 @@ export default defineComponent({
 		})
 	},
 	methods: {
-		downloadAttachment(attachment) {
+		getHumanSize,
+		formatDate,
+		formatDateSince,
+		formatDateLong,
+
+		downloadAttachment(attachment: IAttachment) {
 			this.attachmentService.download(attachment)
 		},
 		uploadNewAttachment() {
@@ -239,7 +248,7 @@ export default defineComponent({
 
 			this.uploadFiles(this.$refs.files.files)
 		},
-		uploadFiles(files) {
+		uploadFiles(files: IFile[]) {
 			uploadFiles(this.attachmentService, this.taskId, files)
 		},
 		async deleteAttachment() {

src/components/tasks/partials/checklist-summary.vue

@@ -10,15 +10,15 @@
 </template>
 
 <script setup lang="ts">
-import {computed} from 'vue'
+import {computed, type PropType} from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import {getChecklistStatistics} from '@/helpers/checklistFromText'
-import TaskModel from '@/models/task'
+import type {ITask} from '@/modelTypes/ITask'
 
 const props = defineProps({
 	task: {
-		type: TaskModel,
+		type: Object as PropType<ITask>,
 		required: true,
 	},
 })

src/components/tasks/partials/comments.vue

@@ -34,12 +34,12 @@
 							width="20"
 						/>
 						<strong>{{ c.author.getDisplayName() }}</strong>&nbsp;
-						<span v-tooltip="formatDate(c.created)" class="has-text-grey">
+						<span v-tooltip="formatDateLong(c.created)" class="has-text-grey">
 							{{ formatDateSince(c.created) }}
 						</span>
 						<span
 							v-if="+new Date(c.created) !== +new Date(c.updated)"
-							v-tooltip="formatDate(c.updated)"
+							v-tooltip="formatDateLong(c.updated)"
 						>
 							· {{ $t('task.comment.edited', {date: formatDateSince(c.updated)}) }}
 						</span>
@@ -70,13 +70,13 @@
 						:is-edit-enabled="canWrite && c.author.id === currentUserId"
 						:upload-callback="attachmentUpload"
 						:upload-enabled="true"
-						@change="
+						v-model="c.comment"
+						@update:model-value="
 							() => {
 								toggleEdit(c)
 								editComment()
 							}
 						"
-						v-model="c.comment"
 						:bottom-actions="actions[c.id]"
 						:show-save="true"
 					/>
@@ -153,15 +153,20 @@
 
 <script setup lang="ts">
 import {ref, reactive, computed, shallowReactive, watch, nextTick} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import Editor from '@/components/input/AsyncEditor'
 
 import TaskCommentService from '@/services/taskComment'
 import TaskCommentModel from '@/models/taskComment'
+
+import type {ITaskComment} from '@/modelTypes/ITaskComment'
+import type {ITask} from '@/modelTypes/ITask'
+
 import {uploadFile} from '@/helpers/attachments'
 import {success} from '@/message'
+import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
 
 const props = defineProps({
 	taskId: {
@@ -176,7 +181,7 @@ const props = defineProps({
 const {t} = useI18n({useScope: 'global'})
 const store = useStore()
 
-const comments = ref<TaskCommentModel[]>([])
+const comments = ref<ITaskComment[]>([])
 
 const showDeleteModal = ref(false)
 const commentToDelete = reactive(new TaskCommentModel())
@@ -186,8 +191,8 @@ const commentEdit = reactive(new TaskCommentModel())
 
 const newComment = reactive(new TaskCommentModel())
 
-const saved = ref(null)
+const saved = ref<ITask['id'] | null>(null)
-const saving = ref(null)
+const saving = ref<ITask['id'] | null>(null)
 
 const userAvatar = computed(() => store.state.auth.info.getAvatarUrl(48))
 const currentUserId = computed(() => store.state.auth.info.id)
@@ -213,7 +218,7 @@ function attachmentUpload(...args) {
 
 const taskCommentService = shallowReactive(new TaskCommentService())
 
-async function loadComments(taskId) {
+async function loadComments(taskId: ITask['id']) {
 	if (!enabled.value) {
 		return
 	}
@@ -257,12 +262,12 @@ async function addComment() {
 	}
 }
 
-function toggleEdit(comment: TaskCommentModel) {
+function toggleEdit(comment: ITaskComment) {
 	isCommentEdit.value = !isCommentEdit.value
 	Object.assign(commentEdit, comment)
 }
 
-function toggleDelete(commentId) {
+function toggleDelete(commentId: ITaskComment['id']) {
 	showDeleteModal.value = !showDeleteModal.value
 	commentToDelete.id = commentId
 }
@@ -292,7 +297,7 @@ async function editComment() {
 	}
 }
 
-async function deleteComment(commentToDelete: TaskCommentModel) {
+async function deleteComment(commentToDelete: ITaskComment) {
 	try {
 		await taskCommentService.delete(commentToDelete)
 		const index = comments.value.findIndex(({id}) => id === commentToDelete.id)

src/components/tasks/partials/createdUpdated.vue

@@ -1,6 +1,6 @@
 <template>
 	<p class="created">
-		<time :datetime="formatISO(task.created)" v-tooltip="formatDate(task.created)">
+		<time :datetime="formatISO(task.created)" v-tooltip="formatDateLong(task.created)">
 			<i18n-t keypath="task.detail.created">
 				<span>{{ formatDateSince(task.created) }}</span>
 				{{ task.createdBy.getDisplayName() }}
@@ -27,13 +27,13 @@
 </template>
 
 <script lang="ts" setup>
-import {computed, toRefs} from 'vue'
+import {computed, toRefs, type PropType} from 'vue'
-import TaskModel from '@/models/task'
+import type {ITask} from '@/modelTypes/ITask'
-import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
+import {formatISO, formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
 
 const props = defineProps({
 	task: {
-		type: TaskModel,
+		type: Object as PropType<ITask>,
 		required: true,
 	},
 })

src/components/tasks/partials/date-table-cell.vue

@@ -1,12 +1,14 @@
 <template>
-	<td v-tooltip="+date === 0 ? '' : formatDate(date)">
+	<td v-tooltip="+date === 0 ? '' : formatDateLong(date)">
-		<time :datetime="date ? formatISO(date) : null">
+		<time :datetime="date ? formatISO(date) : undefined">
 			{{ +date === 0 ? '-' : formatDateSince(date) }}
 		</time>
 	</td>
 </template>
 
 <script setup lang="ts">
+import {formatISO, formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
+
 defineProps({
 	date: {
 		type: Date,

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

@@ -38,17 +38,17 @@
 </template>
 
 <script setup lang="ts">
-import {ref, shallowReactive, computed, watch, onMounted, onBeforeUnmount} from 'vue'
+import {ref, shallowReactive, computed, watch, onMounted, onBeforeUnmount, type PropType} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 import flatPickr from 'vue-flatpickr-component'
 
 import TaskService from '@/services/task'
-import TaskModel from '@/models/task'
+import type {ITask} from '@/modelTypes/ITask'
 
 const props = defineProps({
 	modelValue: {
-		type: TaskModel,
+		type: Object as PropType<ITask>,
 		required: true,
 	},
 })
@@ -58,7 +58,7 @@ const {t} = useI18n({useScope: 'global'})
 const store = useStore()
 
 const taskService = shallowReactive(new TaskService())
-const task = ref<TaskModel>()
+const task = ref<ITask>()
 
 // We're saving the due date seperately to prevent null errors in very short periods where the task is null.
 const dueDate = ref<Date>()

src/components/tasks/partials/description.vue

@@ -20,40 +20,42 @@
 			:is-edit-enabled="canWrite"
 			:upload-callback="attachmentUpload"
 			:upload-enabled="true"
-			@change="save"
 			:placeholder="$t('task.description.placeholder')"
 			:empty-text="$t('task.description.empty')"
 			:show-save="true"
+			edit-shortcut="e"
 			v-model="task.description"
+			@update:model-value="save"
 		/>
 	</div>
 </template>
 
 <script setup lang="ts">
-import {ref,computed, watch} from 'vue'
+import {ref,computed, watch, type PropType} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 
 import Editor from '@/components/input/AsyncEditor'
 
-import TaskModel from '@/models/task'
+import type {ITask} from '@/modelTypes/ITask'
 
 
 const props = defineProps({
 	modelValue: {
-		type: TaskModel,
+		type: Object as PropType<ITask>,
 		required: true,
 	},
 	attachmentUpload: {
 		required: true,
 	},
 	canWrite: {
+		type: Boolean,
 		required: true,
 	},
 })
 
 const emit = defineEmits(['update:modelValue'])
 
-const task = ref<TaskModel>({description: ''})
+const task = ref<ITask>({description: ''})
 const saved = ref(false)
 
 // Since loading is global state, this variable ensures we're only showing the saving icon when saving the description.

src/components/tasks/partials/editAssignees.vue

@@ -10,7 +10,7 @@
 			@search="findUser"
 			:search-results="foundUsers"
 			@select="addAssignee"
-			label="username"
+			label="name"
 			:select-placeholder="$t('task.assignee.selectPlaceholder')"
 			v-model="assignees"
 			ref="multiselect"
@@ -28,8 +28,8 @@
 </template>
 
 <script setup lang="ts">
-import {ref, shallowReactive, watch, PropType} from 'vue'
+import {ref, shallowReactive, watch, type PropType} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import User from '@/components/misc/user.vue'
@@ -37,9 +37,9 @@ import Multiselect from '@/components/input/multiselect.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 
 import {includesById} from '@/helpers/utils'
-import UserModel from '@/models/user'
 import ListUserService from '@/services/listUsers'
 import {success} from '@/message'
+import type { IUser } from '@/modelTypes/IUser'
 
 const props = defineProps({
 		taskId: {
@@ -54,7 +54,7 @@ const props = defineProps({
 			default: false,
 		},
 		modelValue: {
-			type: Array as PropType<UserModel[]>,
+			type: Array as PropType<IUser[]>,
 			default: () => [],
 		},
 	})
@@ -65,7 +65,7 @@ const {t} = useI18n({useScope: 'global'})
 
 const listUserService = shallowReactive(new ListUserService())
 const foundUsers = ref([])
-const assignees = ref<UserModel[]>([])
+const assignees = ref<IUser[]>([])
 
 watch(
 	() => props.modelValue,
@@ -78,13 +78,13 @@ watch(
 	},
 )
 
-async function addAssignee(user: UserModel) {
+async function addAssignee(user: IUser) {
 	await store.dispatch('tasks/addAssignee', {user: user, taskId: props.taskId})
 	emit('update:modelValue', assignees.value)
 	success({message: t('task.assignee.assignSuccess')})
 }
 
-async function removeAssignee(user: UserModel) {
+async function removeAssignee(user: IUser) {
 	await store.dispatch('tasks/removeAssignee', {user: user, taskId: props.taskId})
 
 	// Remove the assignee from the list
@@ -106,6 +106,11 @@ async function findUser(query: string) {
 
 	// Filter the results to not include users who are already assigned
 	foundUsers.value = response.filter(({id}) => !includesById(assignees.value, id))
+		.map(u => {
+			// Users may not have a display name set, so we fall back on the username in that case
+			u.name = u.name === '' ? u.username : u.name
+			return u
+		})
 }
 
 function clearAllFoundUsers() {

src/components/tasks/partials/editLabels.vue

@@ -39,8 +39,8 @@
 </template>
 
 <script setup lang="ts">
-import {PropType, ref, computed, shallowReactive, watch} from 'vue'
+import {type PropType, ref, computed, shallowReactive, watch} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import LabelModel from '@/models/label'
@@ -49,10 +49,12 @@ import {success} from '@/message'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import Multiselect from '@/components/input/multiselect.vue'
+import type { ILabel } from '@/modelTypes/ILabel'
+import { useLabelStore } from '@/stores/labels'
 
 const props = defineProps({
 	modelValue: {
-		type: Array as PropType<LabelModel[]>,
+		type: Array as PropType<ILabel[]>,
 		default: () => [],
 	},
 	taskId: {
@@ -65,13 +67,13 @@ const props = defineProps({
 	},
 })
 
-const emit = defineEmits(['update:modelValue', 'change'])
+const emit = defineEmits(['update:modelValue'])
 
 const store = useStore()
 const {t} = useI18n({useScope: 'global'})
 
 const labelTaskService = shallowReactive(new LabelTaskService())
-const labels = ref<LabelModel[]>([])
+const labels = ref<ILabel[]>([])
 const query = ref('')
 
 watch(
@@ -85,17 +87,18 @@ watch(
 	},
 )
 
-const foundLabels = computed(() => store.getters['labels/filterLabelsByQuery'](labels.value, query.value))
+const labelStore = useLabelStore()
-const loading = computed(() => labelTaskService.loading || (store.state.loading && store.state.loadingModule === 'labels'))
+
+const foundLabels = computed(() => labelStore.filterLabelsByQuery(labels.value, query.value))
+const loading = computed(() => labelTaskService.loading || labelStore.isLoading)
 
 function findLabel(newQuery: string) {
 	query.value = newQuery
 }
 
-async function addLabel(label: LabelModel, showNotification = true) {
+async function addLabel(label: ILabel, showNotification = true) {
 	const bubble = () => {
 		emit('update:modelValue', labels.value)
-		emit('change', labels.value)
 	}
 	
 	if (props.taskId === 0) {
@@ -110,18 +113,17 @@ async function addLabel(label: LabelModel, showNotification = true) {
 	}
 }
 
-async function removeLabel(label: LabelModel) {
+async function removeLabel(label: ILabel) {
 	if (props.taskId !== 0) {
 		await store.dispatch('tasks/removeLabel', {label, taskId: props.taskId})
 	}
 
 	for (const l in labels.value) {
 		if (labels.value[l].id === label.id) {
-			labels.value.splice(l, 1)
+			labels.value.splice(l, 1) // FIXME: l should be index
 		}
 	}
 	emit('update:modelValue', labels.value)
-	emit('change', labels.value)
 	success({message: t('task.label.removeSuccess')})
 }
 
@@ -130,7 +132,8 @@ async function createAndAddLabel(title: string) {
 		return
 	}
 
-	const newLabel = await store.dispatch('labels/createLabel', new LabelModel({title}))
+	const labelStore = useLabelStore()
+	const newLabel = await labelStore.createLabel(new LabelModel({title}))
 	addLabel(newLabel, false)
 	labels.value.push(newLabel)
 	success({message: t('task.label.addCreateSuccess')})

src/components/tasks/partials/heading.vue

@@ -2,6 +2,11 @@
 	<div class="heading">
 		<BaseButton @click="copyUrl"><h1 class="title task-id">{{ textIdentifier }}</h1></BaseButton>
 		<Done class="heading__done" :is-done="task.done"/>
+		<ColorBubble
+			v-if="task.hexColor !== ''"
+			:color="task.getHexColor()"
+			class="mt-1 ml-2"
+		/>
 		<h1
 			class="title input"
 			:class="{'disabled': !canWrite}"
@@ -32,18 +37,21 @@
 </template>
 
 <script setup lang="ts">
-import {ref, computed} from 'vue'
+import {ref, computed, type PropType} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
+import {useRouter} from 'vue-router'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import Done from '@/components/misc/Done.vue'
-import TaskModel from '@/models/task'
+
-import { useRouter } from 'vue-router'
 import {useCopyToClipboard} from '@/composables/useCopyToClipboard'
 
+import type {ITask} from '@/modelTypes/ITask'
+import ColorBubble from '@/components/misc/colorBubble.vue'
+
 const props = defineProps({
 	task: {
-		type: TaskModel,
+		type: Object as PropType<ITask>,
 		required: true,
 	},
 	canWrite: {
@@ -56,6 +64,7 @@ const emit = defineEmits(['update:task'])
 
 const router = useRouter()
 const copy = useCopyToClipboard()
+
 async function copyUrl() {
 	const route = router.resolve({name: 'task.detail', query: {taskId: props.task.id}})
 	const absoluteURL = new URL(route.href, window.location.href).href
@@ -93,8 +102,7 @@ async function save(title: string) {
 		setTimeout(() => {
 			showSavedMessage.value = false
 		}, 2000)
-	}
+	} finally {
-	finally {
 		saving.value = false
 	}
 }
@@ -104,4 +112,9 @@ async function save(title: string) {
 .heading__done {
 	margin-left: .5rem;
 }
+
+.color-bubble {
+	height: .75rem;
+	width: .75rem;
+}
 </style>

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

@@ -24,7 +24,7 @@
 			:class="{'overdue': task.dueDate <= new Date() && !task.done}"
 			class="due-date"
 			v-if="task.dueDate > 0"
-			v-tooltip="formatDate(task.dueDate)">
+			v-tooltip="formatDateLong(task.dueDate)">
 			<span class="icon">
 				<icon :icon="['far', 'calendar-alt']"/>
 			</span>
@@ -66,16 +66,18 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue'
+import {defineComponent, type PropType} from 'vue'
 
 import {playPop} from '../../../helpers/playPop'
-import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
+import PriorityLabel from '../../../components/tasks/partials/priorityLabel.vue'
-import User from '../../../components/misc/user'
+import User from '../../../components/misc/user.vue'
 import Done from '@/components/misc/Done.vue'
-import Labels from '../../../components/tasks/partials/labels'
+import Labels from '../../../components/tasks/partials/labels.vue'
-import ChecklistSummary from './checklist-summary'
+import ChecklistSummary from './checklist-summary.vue'
 import {TASK_DEFAULT_COLOR} from '@/models/task'
+import type {ITask} from '@/modelTypes/ITask'
 
+import {formatDateLong, formatISO, formatDateSince} from '@/helpers/time/formatDate'
 import {colorIsDark} from '@/helpers/color/colorIsDark'
 
 export default defineComponent({
@@ -95,6 +97,7 @@ export default defineComponent({
 	},
 	props: {
 		task: {
+			type: Object as PropType<ITask>,
 			required: true,
 		},
 		loading: {
@@ -111,8 +114,11 @@ export default defineComponent({
 		},
 	},
 	methods: {
+		formatDateLong,
+		formatISO,
+		formatDateSince,
 		colorIsDark,
-		async toggleTaskDone(task) {
+		async toggleTaskDone(task: ITask) {
 			this.loadingInternal = true
 			try {
 				const done = !task.done

src/components/tasks/partials/labels.vue

@@ -11,8 +11,12 @@
 </template>
 
 <script setup lang="ts">
+import type {PropType} from 'vue'
+import type {ILabel} from '@/modelTypes/ILabel'
+
 defineProps({
 	labels: {
+		type: Array as PropType<ILabel[]>,
 		required: true,
 	},
 })

src/components/tasks/partials/listSearch.vue

@@ -1,5 +1,5 @@
 <template>
-	<multiselect
+	<Multiselect
 		class="control is-expanded"
 		:placeholder="$t('list.search')"
 		@search="findLists"
@@ -13,23 +13,21 @@
 			<span class="list-namespace-title search-result">{{ namespace(props.option.namespaceId) }} ></span>
 			{{ props.option.title }}
 		</template>
-	</multiselect>
+	</Multiselect>
 </template>
 
 <script lang="ts" setup>
 import {reactive, ref, watch} from 'vue'
 import type {PropType} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 import ListModel from '@/models/list'
+import type {IList} from '@/modelTypes/IList'
 import Multiselect from '@/components/input/multiselect.vue'
 
 const props = defineProps({
 	modelValue: {
-		type: Object as PropType<ListModel>,
+		type: Object as PropType<IList>,
-		validator(value) {
-			return value instanceof ListModel
-		},
 		required: false,
 	},
 })
@@ -38,7 +36,7 @@ const emit = defineEmits(['update:modelValue'])
 const store = useStore()
 const {t} = useI18n({useScope: 'global'})
 
-const list = reactive<ListModel>(new ListModel())
+const list: IList = reactive(new ListModel())
 
 watch(
 	() => props.modelValue,
@@ -57,7 +55,10 @@ function findLists(query: string) {
 	foundLists.value = store.getters['lists/searchList'](query)
 }
 
-function select(l: ListModel | null) {
+function select(l: IList | null) {
+	if (l === null) {
+		return
+	}
 	Object.assign(list, l)
 	emit('update:modelValue', list)
 }

src/components/tasks/partials/percentDoneSelect.vue

@@ -32,13 +32,12 @@ const props = defineProps({
 	},
 })
 
-const emit = defineEmits(['update:modelValue', 'change'])
+const emit = defineEmits(['update:modelValue'])
 
 const percentDone = computed({
 	get: () => props.modelValue,
 	set(percentDone) {
 		emit('update:modelValue', percentDone)
-		emit('change')
 	},
 })
 </script>

src/components/tasks/partials/priorityLabel.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import priorities from '@/models/constants/priorities'
+import {PRIORITIES as priorities} from '@/constants/priorities'
 	
 defineProps({
 	priority: {

src/components/tasks/partials/prioritySelect.vue

@@ -5,33 +5,33 @@
 			@change="updateData"
 			:disabled="disabled || undefined"
 		>
-			<option :value="priorities.UNSET">{{ $t('task.priority.unset') }}</option>
+			<option :value="PRIORITIES.UNSET">{{ $t('task.priority.unset') }}</option>
-			<option :value="priorities.LOW">{{ $t('task.priority.low') }}</option>
+			<option :value="PRIORITIES.LOW">{{ $t('task.priority.low') }}</option>
-			<option :value="priorities.MEDIUM">{{ $t('task.priority.medium') }}</option>
+			<option :value="PRIORITIES.MEDIUM">{{ $t('task.priority.medium') }}</option>
-			<option :value="priorities.HIGH">{{ $t('task.priority.high') }}</option>
+			<option :value="PRIORITIES.HIGH">{{ $t('task.priority.high') }}</option>
-			<option :value="priorities.URGENT">{{ $t('task.priority.urgent') }}</option>
+			<option :value="PRIORITIES.URGENT">{{ $t('task.priority.urgent') }}</option>
-			<option :value="priorities.DO_NOW">{{ $t('task.priority.doNow') }}</option>
+			<option :value="PRIORITIES.DO_NOW">{{ $t('task.priority.doNow') }}</option>
 		</select>
 	</div>
 </template>
 
 <script setup lang="ts">
 import {ref, watch} from 'vue'
-import priorities from '@/models/constants/priorities.json'
+import {PRIORITIES} from '@/constants/priorities'
-
-const priority = ref(0)
 
 const props = defineProps({
 	modelValue: {
-		default: 0,
 		type: Number,
+		default: 0,
 	},
 	disabled: {
 		default: false,
 	},
 })
 
-const emit = defineEmits(['update:modelValue', 'change'])
+const emit = defineEmits(['update:modelValue'])
+
+const priority = ref(0)
 
 // FIXME: store value outside
 // Set the priority to the :value every time it changes from the outside
@@ -45,6 +45,5 @@ watch(
 
 function updateData() {
 	emit('update:modelValue', priority.value)
-	emit('change')
 }
 </script>

src/components/tasks/partials/relatedTasks.vue

@@ -144,8 +144,8 @@ import {defineComponent} from 'vue'
 import TaskService from '../../../services/task'
 import TaskModel from '../../../models/task'
 import TaskRelationService from '../../../services/taskRelation'
-import relationKinds from '../../../models/constants/relationKinds'
+import TaskRelationModel from '@/models/taskRelation'
-import TaskRelationModel from '../../../models/taskRelation'
+import { RELATION_KIND, RELATION_KINDS } from '@/types/IRelationKind'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import Multiselect from '@/components/input/multiselect.vue'
@@ -157,9 +157,9 @@ export default defineComponent({
 			relatedTasks: {},
 			taskService: new TaskService(),
 			foundTasks: [],
-			relationKinds: relationKinds,
+			relationKinds: RELATION_KINDS,
 			newTaskRelationTask: new TaskModel(),
-			newTaskRelationKind: 'related',
+			newTaskRelationKind: RELATION_KIND.RELATED,
 			taskRelationService: new TaskRelationService(),
 			showDeleteModal: false,
 			relationToDelete: {},
@@ -221,7 +221,7 @@ export default defineComponent({
 		},
 	},
 	methods: {
-		async findTasks(query) {
+		async findTasks(query: string) {
 			this.query = query
 			this.foundTasks = await this.taskService.getAll({}, {s: query})
 		},

src/components/tasks/partials/reminders.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script setup lang="ts">
-import {PropType, ref, onMounted, watch} from 'vue'
+import {type PropType, ref, onMounted, watch} from 'vue'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import Datepicker from '@/components/input/datepicker.vue'
@@ -45,8 +45,8 @@ const props = defineProps({
 				return false
 			}
 
-			const isDate = (e: any) => e instanceof Date
+			const isDate = (e: unknown) => e instanceof Date
-			const isString = (e: any) => typeof e === 'string'
+			const isString = (e: unknown) => typeof e === 'string'
 
 			for (const e of prop) {
 				if (!isDate(e) && !isString(e)) {
@@ -63,7 +63,7 @@ const props = defineProps({
 	},
 })
 
-const emit = defineEmits(['update:modelValue', 'change'])
+const emit = defineEmits(['update:modelValue'])
 
 const reminders = ref<Reminder[]>([])
 
@@ -86,7 +86,6 @@ watch(
 
 function updateData() {
 	emit('update:modelValue', reminders.value)
-	emit('change')
 }
 
 const newReminder = ref(null)

src/components/tasks/partials/repeatAfter.vue

@@ -18,17 +18,14 @@
 			<div class="control">
 				<div class="select">
 					<select @change="updateData" v-model="task.repeatMode" id="repeatMode">
-						<option :value="repeatModes.REPEAT_MODE_DEFAULT">{{ $t('misc.default') }}</option>
+						<option :value="TASK_REPEAT_MODES.REPEAT_MODE_DEFAULT">{{ $t('misc.default') }}</option>
-						<option :value="repeatModes.REPEAT_MODE_MONTH">{{ $t('task.repeat.monthly') }}</option>
+						<option :value="TASK_REPEAT_MODES.REPEAT_MODE_MONTH">{{ $t('task.repeat.monthly') }}</option>
-						<option :value="repeatModes.REPEAT_MODE_FROM_CURRENT_DATE">{{
+						<option :value="TASK_REPEAT_MODES.REPEAT_MODE_FROM_CURRENT_DATE">{{ $t('task.repeat.fromCurrentDate') }}</option>
-								$t('task.repeat.fromCurrentDate')
-							}}
-						</option>
 					</select>
 				</div>
 			</div>
 		</div>
-		<div class="is-flex" v-if="task.repeatMode !== repeatModes.REPEAT_MODE_MONTH">
+		<div class="is-flex" v-if="task.repeatMode !== TASK_REPEAT_MODES.REPEAT_MODE_MONTH">
 			<p class="pr-4">
 				{{ $t('task.repeat.each') }}
 			</p>
@@ -65,14 +62,18 @@
 </template>
 
 <script setup lang="ts">
-import {ref, reactive, watch} from 'vue'
+import {ref, reactive, watch, type PropType} from 'vue'
-import repeatModes from '@/models/constants/taskRepeatModes.json'
-import TaskModel from '@/models/task'
-import {error} from '@/message'
 import {useI18n} from 'vue-i18n'
 
+import {error} from '@/message'
+
+import {TASK_REPEAT_MODES} from '@/types/IRepeatMode'
+import type {IRepeatAfter} from '@/types/IRepeatAfter'
+import type {ITask} from '@/modelTypes/ITask'
+
 const props = defineProps({
 	modelValue: {
+		type: Object as PropType<ITask>,
 		default: () => ({}),
 		required: true,
 	},
@@ -84,9 +85,9 @@ const props = defineProps({
 
 const {t} = useI18n({useScope: 'global'})
 
-const emit = defineEmits(['update:modelValue', 'change'])
+const emit = defineEmits(['update:modelValue'])
 
-const task = ref<TaskModel>()
+const task = ref<ITask>()
 const repeatAfter = reactive({
 	amount: 0,
 	type: '',
@@ -104,7 +105,7 @@ watch(
 )
 
 function updateData() {
-	if (task.value.repeatMode !== repeatModes.REPEAT_MODE_DEFAULT && repeatAfter.amount === 0) {
+	if (!task.value || task.value.repeatMode !== TASK_REPEAT_MODES.REPEAT_MODE_DEFAULT && repeatAfter.amount === 0) {
 		return
 	}
 
@@ -115,10 +116,9 @@ function updateData() {
 
 	Object.assign(task.value.repeatAfter, repeatAfter)
 	emit('update:modelValue', task.value)
-	emit('change')
 }
 
-function setRepeatAfter(amount: number, type) {
+function setRepeatAfter(amount: number, type: IRepeatAfter['type']) {
 	Object.assign(repeatAfter, { amount, type})
 	updateData()
 }

src/components/tasks/partials/singleTaskInList.vue

@@ -1,12 +1,11 @@
 <template>
 	<div :class="{'is-loading': taskService.loading}" class="task loader-container">
 		<fancycheckbox :disabled="(isArchived || disabled) && !canMarkAsDone" @change="markAsDone" v-model="task.done"/>
-		<span
+		<ColorBubble
 			v-if="showListColor && listColor !== ''"
-			:style="{backgroundColor: listColor }"
+			:color="listColor"
-			class="color-bubble"
+			class="mr-1"
-		>
+		/>
-		</span>
 		<router-link
 			:to="taskDetailRoute"
 			:class="{ 'done': task.done}"
@@ -15,11 +14,17 @@
 				<router-link
 					:to="{ name: 'list.list', params: { listId: task.listId } }"
 					class="task-list"
+					:class="{'mr-2': task.hexColor !== ''}"
 					v-if="showList && $store.getters['lists/getListById'](task.listId) !== null"
 					v-tooltip="$t('task.detail.belongsToList', {list: $store.getters['lists/getListById'](task.listId).title})">
 					{{ $store.getters['lists/getListById'](task.listId).title }}
 				</router-link>
 
+				<ColorBubble
+					v-if="task.hexColor !== ''"
+					:color="task.getHexColor()"
+					class="mr-1"
+				/>
 				<!-- 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'">
 					<template v-for="(pt, i) in task.relatedTasks.parenttask">
@@ -43,7 +48,7 @@
 				v-if="+new Date(task.dueDate) > 0"
 				class="dueDate"
 				@click.prevent.stop="showDefer = !showDefer"
-				v-tooltip="formatDate(task.dueDate)"
+				v-tooltip="formatDateLong(task.dueDate)"
 			>
 				<time
 					:datetime="formatISO(task.dueDate)"
@@ -96,19 +101,22 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue'
+import {defineComponent, type PropType} from 'vue'
 
-import TaskModel from '../../../models/task'
+import TaskModel from '@/models/task'
-import PriorityLabel from './priorityLabel'
+import type {ITask} from '@/modelTypes/ITask'
+import PriorityLabel from './priorityLabel.vue'
 import TaskService from '../../../services/task'
-import Labels from './labels'
+import Labels from '@/components/tasks/partials/labels.vue'
-import User from '../../misc/user'
+import User from '@/components/misc/user.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
-import Fancycheckbox from '../../input/fancycheckbox'
+import Fancycheckbox from '../../input/fancycheckbox.vue'
-import DeferTask from './defer-task'
+import DeferTask from './defer-task.vue'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import {playPop} from '@/helpers/playPop'
-import ChecklistSummary from './checklist-summary'
+import ChecklistSummary from './checklist-summary.vue'
+import {formatDateSince, formatISO, formatDateLong} from '@/helpers/time/formatDate'
+import ColorBubble from '@/components/misc/colorBubble.vue'
 
 export default defineComponent({
 	name: 'singleTaskInList',
@@ -120,6 +128,7 @@ export default defineComponent({
 		}
 	},
 	components: {
+		ColorBubble,
 		BaseButton,
 		ChecklistSummary,
 		DeferTask,
@@ -130,7 +139,7 @@ export default defineComponent({
 	},
 	props: {
 		theTask: {
-			type: TaskModel,
+			type: Object as PropType<ITask>,
 			required: true,
 		},
 		isArchived: {
@@ -188,7 +197,11 @@ export default defineComponent({
 		},
 	},
 	methods: {
-		async markAsDone(checked) {
+		formatDateSince,
+		formatISO,
+		formatDateLong,
+
+		async markAsDone(checked: boolean) {
 			const updateFunc = async () => {
 				const task = await this.taskService.update(this.task)
 				if (this.task.done) {
@@ -213,7 +226,7 @@ export default defineComponent({
 			}
 		},
 
-		undoDone(checked) {
+		undoDone(checked: boolean) {
 			this.task.done = !this.task.done
 			this.markAsDone(!checked)
 		},
@@ -276,11 +289,6 @@ export default defineComponent({
 		white-space: nowrap;
 	}
 
-	.color-bubble {
-		height: 10px;
-		flex: 0 0 10px;
-	}
-
 	.avatar {
 		border-radius: 50%;
 		vertical-align: bottom;

src/components/tasks/partials/sort.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import {PropType} from 'vue'
+import type {PropType} from 'vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 
 type Order = 'asc' | 'desc' | 'none'

src/composables/useCopyToClipboard.ts

@@ -4,10 +4,41 @@ import {useI18n} from 'vue-i18n'
 export function useCopyToClipboard() {
 	const {t} = useI18n({useScope: 'global'})
 	
+	function fallbackCopyTextToClipboard(text: string) {
+		const textArea = document.createElement('textarea')
+		textArea.value = text
+		
+		// Avoid scrolling to bottom
+		textArea.style.top = '0'
+		textArea.style.left = '0'
+		textArea.style.position = 'fixed'
+	
+		document.body.appendChild(textArea)
+		textArea.focus()
+		textArea.select()
+	
+		try {
+			// NOTE: the execCommand is deprecated but as of 2022_09
+			// widely supported and works without https
+			const successful = document.execCommand('copy')
+			if (!successful) {
+				throw new Error()
+			}
+		} catch (err) {
+			error(t('misc.copyError'))
+		}
+	
+		document.body.removeChild(textArea)
+	}
+	
 	return async (text: string) => {
+		if (!navigator.clipboard) {
+			fallbackCopyTextToClipboard(text)
+			return
+		}
 		try {
 			await navigator.clipboard.writeText(text)
-		} catch {
+		} catch(e) {
 			error(t('misc.copyError'))
 		}
 	}

src/composables/useList.ts

@@ -0,0 +1,37 @@
+import {watch, reactive, shallowReactive, unref, toRefs, readonly} from 'vue'
+import type {MaybeRef} from '@vueuse/core'
+import {useStore} from '@/store'
+
+import ListService from '@/services/list'
+import ListModel from '@/models/list'
+import { success } from '@/message'
+import {useI18n} from 'vue-i18n'
+
+export function useList(listId: MaybeRef<ListModel['id']>) {
+	const listService = shallowReactive(new ListService())
+	const {loading: isLoading} = toRefs(listService)
+	const list : ListModel = reactive(new ListModel({}))
+	const {t} = useI18n({useScope: 'global'})
+
+	watch(
+		() => unref(listId),
+		async (listId) => {
+			const loadedList = await listService.get(new ListModel({id: listId}))
+			Object.assign(list, loadedList)
+		},
+		{immediate: true},
+	)
+
+
+	const store = useStore()
+	async function save() {
+		await store.dispatch('lists/updateList', list)
+		success({message: t('list.edit.success')})
+	}
+
+	return {
+		isLoading: readonly(isLoading),
+		list,
+		save,
+	}
+}

src/composables/useNamespaceSearch.ts

@@ -1,5 +1,5 @@
 import {ref, computed} from 'vue'
-import {useStore} from 'vuex'
+import {useStore} from '@/store'
 
 export function useNameSpaceSearch() {
 	const query = ref('')

src/composables/useTitle.ts

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

src/constants/priorities.ts

@@ -0,0 +1,10 @@
+export const PRIORITIES = {
+	'UNSET': 0,
+	'LOW': 1,
+	'MEDIUM': 2,
+	'HIGH': 3,
+	'URGENT': 4,
+	'DO_NOW': 5,
+} as const
+
+export type Priority = typeof PRIORITIES[keyof typeof PRIORITIES]

src/constants/rights.ts

@@ -0,0 +1,7 @@
+export const RIGHTS = {
+  'READ': 0,
+  'READ_WRITE': 1,
+  'ADMIN': 2,
+} as const
+
+export type Right = typeof RIGHTS[keyof typeof RIGHTS]

src/directives/shortcut.ts

@@ -4,6 +4,9 @@ import {isAppleDevice} from '@/helpers/isAppleDevice'
 
 const directive: Directive = {
 	mounted(el, {value}) {
+		if(value === '') {
+			return
+		}
 		if (isAppleDevice() && value.includes('Control')) {
 			value = value.replace('Control', 'Meta')
 		}

src/helpers/attachments.ts

@@ -1,22 +1,28 @@
 import AttachmentModel from '@/models/attachment'
-import FileModel from '@/models/file'
+import type {IAttachment} from '@/modelTypes/IAttachment'
+import type {IFile} from '@/modelTypes/IFile'
 
 import AttachmentService from '@/services/attachment'
 import { store } from '@/store'
 
-export function uploadFile(taskId: number, file: FileModel, onSuccess: () => Function) {
+export function uploadFile(taskId: number, file: IFile, onSuccess: () => Function) {
 	const attachmentService = new AttachmentService()
 	const files = [file]
 
 	return uploadFiles(attachmentService, taskId, files, onSuccess)
 }
 
-export async function uploadFiles(attachmentService: AttachmentService, taskId: number, files: FileModel[], onSuccess : Function = () => {}) {
+export async function uploadFiles(
+	attachmentService: AttachmentService,
+	taskId: number,
+	files: IFile[],
+	onSuccess: Function = () => {},
+) {
 	const attachmentModel = new AttachmentModel({taskId})
 	const response = await attachmentService.create(attachmentModel, files)
 	console.debug(`Uploaded attachments for task ${taskId}, response was`, response)
 
-	response.success?.map((attachment: AttachmentModel) => {
+	response.success?.map((attachment: IAttachment) => {
 		store.dispatch('tasks/addTaskAttachment', {
 			taskId,
 			attachment,
@@ -29,6 +35,6 @@ export async function uploadFiles(attachmentService: AttachmentService, taskId:
 	}
 }
 
-export function generateAttachmentUrl(taskId: number, attachmentId: number) : any {
+export function generateAttachmentUrl(taskId: number, attachmentId: number) {
 	return `${window.API_URL}/tasks/${taskId}/attachments/${attachmentId}`
 }

src/helpers/auth.ts

@@ -1,5 +1,5 @@
 import {AuthenticatedHTTPFactory} from '@/http-common'
-import {AxiosResponse} from 'axios'
+import type {AxiosResponse} from 'axios'
 
 let savedToken: string | null = null
 

src/helpers/color/colorIsDark.ts

@@ -1,4 +1,4 @@
-export function colorIsDark(color) {
+export function colorIsDark(color: string | undefined) {
 	if (typeof color === 'undefined') {
 		return true // Defaults to dark
 	}

src/helpers/getHumanSize.ts

@@ -0,0 +1,18 @@
+const SIZES = [
+	'B',
+	'KB',
+	'MB',
+	'GB',
+	'TB',
+ ] as const
+
+export function getHumanSize(inputSize: number) {
+	let iterator = 0
+	let size = inputSize
+	while (size > 1024) {
+		size /= 1024
+		iterator++
+	}
+
+	return Number(Math.round(Number(size + 'e2')) + 'e-2') + ' ' + SIZES[iterator]
+}

src/helpers/getListTitle.ts

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

src/helpers/getNamespaceTitle.ts

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

src/helpers/labels.test.ts

@@ -1,47 +0,0 @@
-import {describe, it, expect} from 'vitest'
-
-import {filterLabelsByQuery} from './labels'
-import {createNewIndexer} from '../indexes'
-
-const {add} = createNewIndexer('labels', ['title', 'description'])
-
-describe('filter labels', () => {
-	const state = {
-		labels: {
-			1: {id: 1, title: 'label1'},
-			2: {id: 2, title: 'label2'},
-			3: {id: 3, title: 'label3'},
-			4: {id: 4, title: 'label4'},
-			5: {id: 5, title: 'label5'},
-			6: {id: 6, title: 'label6'},
-			7: {id: 7, title: 'label7'},
-			8: {id: 8, title: 'label8'},
-			9: {id: 9, title: 'label9'},
-		},
-	}
-
-	Object.values(state.labels).forEach(add)
-
-	it('should return an empty array for an empty query', () => {
-		const labels = filterLabelsByQuery(state, [], '')
-
-		expect(labels).toHaveLength(0)
-	})
-	it('should return labels for a query', () => {
-		const labels = filterLabelsByQuery(state, [], 'label2')
-
-		expect(labels).toHaveLength(1)
-		expect(labels[0].title).toBe('label2')
-	})
-	it('should not return found but hidden labels', () => {
-		interface label {
-			id: number,
-			title: string,
-		}
-
-		const labelsToHide: label[] = [{id: 1, title: 'label1'}]
-		const labels = filterLabelsByQuery(state, labelsToHide, 'label1')
-
-		expect(labels).toHaveLength(0)
-	})
-})

src/helpers/labels.ts

@@ -1,41 +0,0 @@
-import {createNewIndexer} from '../indexes'
-
-const {search} = createNewIndexer('labels', ['title', 'description'])
-
-export interface label {
-	id: number,
-	title: string,
-}
-
-interface labelState {
-	labels: {
-		[k: number]: label,
-	},
-}
-
-/**
- * Checks if a list of labels is available in the store and filters them then query
- * @param {Object} state
- * @param {Array} labelsToHide
- * @param {String} query
- * @returns {Array}
- */
-export function filterLabelsByQuery(state: labelState, labelsToHide: label[], query: string) {
-	const labelIdsToHide: number[] = labelsToHide.map(({id}) => id)
-
-	return search(query)
-			?.filter(value => !labelIdsToHide.includes(value))
-			.map(id => state.labels[id])
-		|| []
-}
-
-
-/**
- * Returns the labels by id if found
- * @param {Object} state
- * @param {Array} ids
- * @returns {Array}
- */
-export function getLabelsByIds(state: labelState, ids: number[]) {
-	return Object.values(state.labels).filter(({id}) => ids.includes(id))
-}

src/helpers/markdownRenderer.ts

@@ -0,0 +1,44 @@
+import {marked} from 'marked'
+import hljs from 'highlight.js/lib/common'
+
+export function setupMarkdownRenderer(checkboxId: string) {
+	const renderer = new marked.Renderer()
+	const linkRenderer = renderer.link
+
+	let checkboxNum = -1
+	marked.use({
+		renderer: {
+			image: (src, title, text) => {
+
+				title = title ? ` title="${title}` : ''
+
+				// If the url starts with the api url, the image is likely an attachment and
+				// we'll need to download and parse it properly.
+				if (src.substr(0, window.API_URL.length + 7) === `${window.API_URL}/tasks/`) {
+					return `<img data-src="${src}" alt="${text}" ${title} class="attachment-image"/>`
+				}
+
+				return `<img src="${src}" alt="${text}" ${title}/>`
+			},
+			checkbox: (checked) => {
+				if (checked) {
+					checked = ' checked="checked"'
+				}
+
+				checkboxNum++
+				return `<input type="checkbox" data-checkbox-num="${checkboxNum}" ${checked} class="text-checkbox-${checkboxId}"/>`
+			},
+			link: (href, title, text) => {
+				const isLocal = href.startsWith(`${location.protocol}//${location.hostname}`)
+				const html = linkRenderer.call(renderer, href, title, text)
+				return isLocal ? html : html.replace(/^<a /, '<a target="_blank" rel="noreferrer noopener nofollow" ')
+			},
+		},
+		highlight: function (code, language) {
+			const validLanguage = hljs.getLanguage(language) ? language : 'plaintext'
+			return hljs.highlight(code, {language: validLanguage}).value
+		},
+	})
+	
+	return renderer
+}

src/helpers/redirectToProvider.ts

@@ -1,7 +1,7 @@
 import {createRandomID} from '@/helpers/randomId'
 import {parseURL} from 'ufo'
 
-interface Provider {
+export interface Provider {
 	name: string
 	key: string
 	authUrl: string

src/helpers/saveCollapsedBucketState.ts

@@ -1,4 +1,4 @@
-import ListModel from '@/models/list'
+import type {IList} from '@/modelTypes/IList'
 
 const key = 'collapsedBuckets'
 
@@ -11,7 +11,10 @@ const getAllState = () => {
 	return JSON.parse(saved)
 }
 
-export const saveCollapsedBucketState = (listId: ListModel['id'], collapsedBuckets) => {
+export const saveCollapsedBucketState = (
+	listId: IList['id'],
+	collapsedBuckets,
+) => {
 	const state = getAllState()
 	state[listId] = collapsedBuckets
 	for (const bucketId in state[listId]) {
@@ -22,7 +25,7 @@ export const saveCollapsedBucketState = (listId: ListModel['id'], collapsedBucke
 	localStorage.setItem(key, JSON.stringify(state))
 }
 
-export const getCollapsedBucketState = (listId : ListModel['id']) => {
+export const getCollapsedBucketState = (listId : IList['id']) => {
 	const state = getAllState()
 	if (typeof state[listId] !== 'undefined') {
 		return state[listId]

src/helpers/savedFilter.ts

@@ -1,6 +1,6 @@
-import ListModel from '@/models/list'
+import type {IList} from '@/modelTypes/IList'
 
-export function getSavedFilterIdFromListId(listId: ListModel['id']) {
+export function getSavedFilterIdFromListId(listId: IList['id']) {
 	let filterId = listId * -1 - 1
 	// FilterIds from listIds are always positive
 	if (filterId < 0) {

src/helpers/time/parseDate.ts

@@ -12,7 +12,9 @@ interface dateFoundResult {
 	date: Date | null,
 }
 
-export const parseDate = (text: string): dateParseResult => {
+const monthsRegexGroup = '(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)'
+
+export const parseDate = (text: string, now: Date = new Date()): dateParseResult => {
 	const lowerText: string = text.toLowerCase()
 
 	if (lowerText.includes('today')) {
@@ -63,38 +65,43 @@ export const parseDate = (text: string): dateParseResult => {
 
 	parsed = getDayFromText(text)
 	if (parsed.date !== null) {
-		return addTimeToDate(text, parsed.date, parsed.foundText)
+		const month = getMonthFromText(text, parsed.date)
+		return addTimeToDate(text, month.date, parsed.foundText)
 	}
 
-	parsed = getDateFromTextIn(text)
+	parsed = getDateFromTextIn(text, now)
 	if (parsed.date !== null) {
-		return {
+		return addTimeToDate(text, parsed.date, parsed.foundText)
-			newText: replaceAll(text, parsed.foundText, ''),
-			date: parsed.date,
-		}
 	}
 
 	parsed = getDateFromText(text)
 
+	if (parsed.date === null) {
 		return {
 			newText: replaceAll(text, parsed.foundText, ''),
 			date: parsed.date,
 		}
 	}
 
-const addTimeToDate = (text: string, date: Date, match: string | null): dateParseResult => {
+	return addTimeToDate(text, parsed.date, parsed.foundText)
-	if (match === null) {
+}
+
+const addTimeToDate = (text: string, date: Date, previousMatch: string | null): dateParseResult => {
+	previousMatch = previousMatch?.trim() || ''
+	text = replaceAll(text, previousMatch, '')
+	if (previousMatch === null) {
 		return {
 			newText: text,
 			date: null,
 		}
 	}
 
-	const matcher = new RegExp(`(${match} (at|@) )([0-9][0-9]?(:[0-9][0-9]?)?( ?(a|p)m)?)`, 'ig')
+	const timeRegex = ' (at|@) ([0-9][0-9]?(:[0-9][0-9]?)?( ?(a|p)m)?)'
+	const matcher = new RegExp(timeRegex, 'ig')
 	const results = matcher.exec(text)
 
 	if (results !== null) {
-		const time = results[3]
+		const time = results[2]
 		const parts = time.split(':')
 		let hours = parseInt(parts[0])
 		let minutes = 0
@@ -110,7 +117,7 @@ const addTimeToDate = (text: string, date: Date, match: string | null): datePars
 		date.setSeconds(0)
 	}
 
-	const replace = results !== null ? results[0] : match
+	const replace = results !== null ? results[0] : previousMatch
 	return {
 		newText: replaceAll(text, replace, ''),
 		date: date,
@@ -127,10 +134,10 @@ export const getDateFromText = (text: string, now: Date = new Date()) => {
 	let containsYear: boolean = true
 	if (result === null) {
 		// 2. Try parsing the date as something like "jan 21" or "21 jan"
-		const monthRegex: RegExp = /((jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec) [0-9][0-9]?|[0-9][0-9]? (jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec))/ig
+		const monthRegex: RegExp = new RegExp(` (${monthsRegexGroup} [0-9][0-9]?|[0-9][0-9]? ${monthsRegexGroup})`, 'ig')
 		results = monthRegex.exec(text)
-		result = results === null ? null : `${results[0]} ${now.getFullYear()}`
+		result = results === null ? null : `${results[0]} ${now.getFullYear()}`.trim()
-		foundText = results === null ? '' : results[0]
+		foundText = results === null ? '' : results[0].trim()
 		containsYear = false
 
 		if (result === null) {
@@ -320,6 +327,25 @@ const getDayFromText = (text: string) => {
 	}
 }
 
+const getMonthFromText = (text: string, date: Date) => {
+	const matcher = new RegExp(monthsRegexGroup, 'ig')
+	const results = matcher.exec(text)
+
+	if (results === null) {
+		return {
+			newText: text,
+			date,
+		}
+	}
+
+	const fullDate = new Date(`${results[0]} 1 ${(new Date()).getFullYear()}`)
+	date.setMonth(fullDate.getMonth())
+	return {
+		newText: replaceAll(text, results[0], ''),
+		date,
+	}
+}
+
 const getDateFromInterval = (interval: number): Date => {
 	const newDate = new Date()
 	newDate.setDate(newDate.getDate() + interval)

src/helpers/utils.ts

@@ -1,8 +1,8 @@
-export function findIndexById(array : [], id : string | number) {
+export function findIndexById<T extends {id: string | number}>(array : T[], id : string | number) {
 	return array.findIndex(({id: currentId}) => currentId === id)
 }
 
-export function findById(array : [], id : string | number) {
+export function findById<T extends {id: string | number}>(array : T[], id : string | number) {
 	return array.find(({id: currentId}) => currentId === id)
 }
 
@@ -11,11 +11,11 @@ export function includesById(array: [], id: string | number) {
 }
 
 // https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore#_isnil
-export function isNil(value: any) {
+export function isNil(value: unknown) {
 	return value == null
 }
 
-export function omitBy(obj: {}, check: (value: any) => boolean): {} {
+export function omitBy(obj: {}, check: (value: unknown) => boolean) {
 	if (isNil(obj)) {
 		return {}
 	}

src/http-common/index.ts

@@ -2,17 +2,35 @@ import axios from 'axios'
 import {getToken} from '@/helpers/auth'
 
 export function HTTPFactory() {
-	return axios.create({
+	const instance = axios.create({baseURL: window.API_URL})
-		baseURL: window.API_URL,
+
+	instance.interceptors.request.use((config) => {
+		// by setting the baseURL fresh for every request
+		// we make sure that it is never outdated in case it is updated
+		config.baseURL = window.API_URL
+
+		return config
 	})
+
+	return instance
 }
 
-export function AuthenticatedHTTPFactory(token = getToken()) {	
+export function AuthenticatedHTTPFactory() {	
-	return axios.create({
+	const instance = HTTPFactory()
-		baseURL: window.API_URL,
+
-		headers: {
+	instance.interceptors.request.use((config) => {
-			Authorization: `Bearer ${token}`,
+		config.headers = {
+			...config.headers,
 			'Content-Type': 'application/json',
-		},
+		}
-	})
+
+		// Set the default auth header if we have a token
+		const token = getToken()
+		if (token !== null) {
+			config.headers['Authorization'] = `Bearer ${token}`
+		}
+		return config
+	})
+
+	return instance
 }

src/i18n/lang/ca-ES.json

@@ -172,6 +172,7 @@
     "search": "Type to search for a list…",
     "searchSelect": "Click or press enter to select this list",
     "shared": "Shared Lists",
+    "noDescriptionAvailable": "No list description is available.",
     "create": {
       "header": "New list",
       "titlePlaceholder": "The list's title goes here…",
@@ -242,7 +243,9 @@
         "remove": "Remove a link share",
         "removeText": "Are you sure you want to remove this link share? It will no longer be possible to access this list with this link share. This cannot be undone!",
         "createSuccess": "The link share was successfully created.",
-        "deleteSuccess": "The link share was successfully deleted"
+        "deleteSuccess": "The link share was successfully deleted",
+        "view": "View",
+        "sharedBy": "Shared by {0}"
       },
       "userTeam": {
         "typeUser": "user | users",
@@ -264,9 +267,6 @@
       },
       "attributes": {
         "link": "Link",
-        "name": "Name",
-        "sharedBy": "Shared by",
-        "right": "Right",
         "delete": "Delete"
       }
     },
@@ -870,7 +870,8 @@
       "related": "Modify related tasks of this task",
       "color": "Change the color of this task",
       "move": "Move this task to another list",
-      "reminder": "Manage reminders of this task"
+      "reminder": "Manage reminders of this task",
+      "description": "Toggle editing of the task description"
     },
     "list": {
       "title": "List Views",

src/i18n/lang/cs-CZ.json

@@ -172,6 +172,7 @@
     "search": "Začni psát pro vyhledání seznamu…",
     "searchSelect": "Klikněte nebo stiskněte Enter pro výběr tohoto seznamu",
     "shared": "Sdílené seznamy",
+    "noDescriptionAvailable": "No list description is available.",
     "create": {
       "header": "Nový seznam",
       "titlePlaceholder": "Název seznamu přijde sem…",
@@ -242,7 +243,9 @@
         "remove": "Odstranit sdílený odkaz",
         "removeText": "Jste si jisti, že chcete odstranit tento sdílený odkaz? K tomuto seznamu již nebude možné přistupovat s tímto sdíleným odkazem. Tuto akci nelze vrátit zpět!",
         "createSuccess": "Sdílený odkaz byl úspěšně vytvořen.",
-        "deleteSuccess": "Sdílený odkaz byl úspěšně smazán"
+        "deleteSuccess": "Sdílený odkaz byl úspěšně smazán",
+        "view": "View",
+        "sharedBy": "Shared by {0}"
       },
       "userTeam": {
         "typeUser": "uživatel | uživatelé",
@@ -264,9 +267,6 @@
       },
       "attributes": {
         "link": "Odkaz",
-        "name": "Název",
-        "sharedBy": "Sdíleno od",
-        "right": "Právo",
         "delete": "Smazat"
       }
     },
@@ -870,7 +870,8 @@
       "related": "Upravit související úkoly tohoto úkolu",
       "color": "Změnit barvu tohoto úkolu",
       "move": "Přesunout tento úkol do jiného seznamu",
-      "reminder": "Manage reminders of this task"
+      "reminder": "Manage reminders of this task",
+      "description": "Toggle editing of the task description"
     },
     "list": {
       "title": "Zobrazení seznamů",

src/i18n/lang/de-DE.json

@@ -172,6 +172,7 @@
     "search": "Tippe, um nach einer Liste zu suchen…",
     "searchSelect": "Klicke auf oder drücke die Eingabetaste, um diese Liste auszuwählen",
     "shared": "Geteilte Listen",
+    "noDescriptionAvailable": "Keine Listenbeschreibung verfügbar.",
     "create": {
       "header": "Neue Liste",
       "titlePlaceholder": "Der Titel der Liste steht hier…",
@@ -242,7 +243,9 @@
         "remove": "Eine Linkfreigabe löschen",
         "removeText": "Bist du sicher, dass du diese Linkfreigabe unwiderruflich löschen möchtest? Über die Linkfreigabe ist danach der Zugriff auf die Liste nicht mehr möglich!",
         "createSuccess": "Die Linkfreigabe wurde erfolgreich erstellt.",
-        "deleteSuccess": "Die Linkfreigabe wurde erfolgreich gelöscht"
+        "deleteSuccess": "Die Linkfreigabe wurde erfolgreich gelöscht",
+        "view": "Ansicht",
+        "sharedBy": "Von {0} geteilt"
       },
       "userTeam": {
         "typeUser": "Benutzer:in | Benutzer:innen",
@@ -264,9 +267,6 @@
       },
       "attributes": {
         "link": "Link",
-        "name": "Name",
-        "sharedBy": "Geteilt von",
-        "right": "Berechtigungen",
         "delete": "Löschen"
       }
     },
@@ -870,7 +870,8 @@
       "related": "Ändere die Abhängigen Aufgaben dieser Aufgabe",
       "color": "Die Farbe dieser Aufgabe ändern",
       "move": "Diese Aufgabe in eine andere Liste verschieben",
-      "reminder": "Erinnerungen für diese Aufgabe verwalten"
+      "reminder": "Erinnerungen für diese Aufgabe verwalten",
+      "description": "Aufgabenbeschreibung bearbeiten"
     },
     "list": {
       "title": "Listenansicht",

src/i18n/lang/de-swiss.json

@@ -172,6 +172,7 @@
     "search": "Schriib, um nachere Liste z'sueche…",
     "searchSelect": "Druck uf Enter um die Liste uuszwähle",
     "shared": "Teilti Liste",
+    "noDescriptionAvailable": "Keine Listenbeschreibung verfügbar.",
     "create": {
       "header": "Neue Liste",
       "titlePlaceholder": "Listetitl da ahgeh…",
@@ -242,7 +243,9 @@
         "remove": "Linkfreigab lösche",
         "removeText": "Bisch du sicher, dass du die Freigab lösche wetsch? Es wird nüme möglich sii, die Liste mit dem Link z'erreiche. Das chann nid rückgängig gmacht werde!",
         "createSuccess": "De Freigabelink isch erfolgriich erstellt wore.",
-        "deleteSuccess": "De g'teilti Link isch erfolgriich g'chüblet wore"
+        "deleteSuccess": "De g'teilti Link isch erfolgriich g'chüblet wore",
+        "view": "Ansicht",
+        "sharedBy": "Von {0} geteilt"
       },
       "userTeam": {
         "typeUser": "Benutzer | Benutzer",
@@ -264,9 +267,6 @@
       },
       "attributes": {
         "link": "Link",
-        "name": "Namä",
-        "sharedBy": "Teilt vo",
-        "right": "Rechts",
         "delete": "Chüble"
       }
     },
@@ -870,7 +870,8 @@
       "related": "Beziehige vo dere Uufgab bearbeite",
       "color": "Die Farbe dieser Aufgabe ändern",
       "move": "Diese Aufgabe in eine andere Liste verschieben",
-      "reminder": "Erinnerungen für diese Aufgabe verwalten"
+      "reminder": "Erinnerungen für diese Aufgabe verwalten",
+      "description": "Aufgabenbeschreibung bearbeiten"
     },
     "list": {
       "title": "Listenansicht",

src/i18n/lang/en.json

@@ -172,6 +172,7 @@
     "search": "Type to search for a list…",
     "searchSelect": "Click or press enter to select this list",
     "shared": "Shared Lists",
+    "noDescriptionAvailable": "No list description is available.",
     "create": {
       "header": "New list",
       "titlePlaceholder": "The list's title goes here…",
@@ -242,7 +243,9 @@
         "remove": "Remove a link share",
         "removeText": "Are you sure you want to remove this link share? It will no longer be possible to access this list with this link share. This cannot be undone!",
         "createSuccess": "The link share was successfully created.",
-        "deleteSuccess": "The link share was successfully deleted"
+        "deleteSuccess": "The link share was successfully deleted",
+        "view": "View",
+        "sharedBy": "Shared by {0}"
       },
       "userTeam": {
         "typeUser": "user | users",
@@ -264,9 +267,6 @@
       },
       "attributes": {
         "link": "Link",
-        "name": "Name",
-        "sharedBy": "Shared by",
-        "right": "Right",
         "delete": "Delete"
       }
     },
@@ -873,7 +873,8 @@
       "related": "Modify related tasks of this task",
       "color": "Change the color of this task",
       "move": "Move this task to another list",
-      "reminder": "Manage reminders of this task"
+      "reminder": "Manage reminders of this task",
+      "description": "Toggle editing of the task description"
     },
     "list": {
       "title": "List Views",

src/i18n/lang/es-ES.json

@@ -172,6 +172,7 @@
     "search": "Type to search for a list…",
     "searchSelect": "Click or press enter to select this list",
     "shared": "Shared Lists",
+    "noDescriptionAvailable": "No list description is available.",
     "create": {
       "header": "New list",
       "titlePlaceholder": "The list's title goes here…",
@@ -242,7 +243,9 @@
         "remove": "Remove a link share",
         "removeText": "Are you sure you want to remove this link share? It will no longer be possible to access this list with this link share. This cannot be undone!",
         "createSuccess": "The link share was successfully created.",
-        "deleteSuccess": "The link share was successfully deleted"
+        "deleteSuccess": "The link share was successfully deleted",
+        "view": "View",
+        "sharedBy": "Shared by {0}"
       },
       "userTeam": {
         "typeUser": "user | users",
@@ -264,9 +267,6 @@
       },
       "attributes": {
         "link": "Link",
-        "name": "Name",
-        "sharedBy": "Shared by",
-        "right": "Right",
         "delete": "Delete"
       }
     },
@@ -870,7 +870,8 @@
       "related": "Modify related tasks of this task",
       "color": "Change the color of this task",
       "move": "Move this task to another list",
-      "reminder": "Manage reminders of this task"
+      "reminder": "Manage reminders of this task",
+      "description": "Toggle editing of the task description"
     },
     "list": {
       "title": "List Views",

src/i18n/lang/fr-FR.json

@@ -172,6 +172,7 @@
     "search": "Écris pour rechercher une liste…",
     "searchSelect": "Clique ou appuie sur la touche Entrée pour sélectionner cette liste",
     "shared": "Listes partagées",
+    "noDescriptionAvailable": "No list description is available.",
     "create": {
       "header": "Nouvelle liste",
       "titlePlaceholder": "Entre le nom de la liste…",
@@ -242,7 +243,9 @@
         "remove": "Retirer un lien de partage",
         "removeText": "Retirer ce partage de lien ? Il ne sera plus possible d’accéder à cette liste avec ce partage de lien. Cette opération ne peut être annulée !",
         "createSuccess": "Partage créé.",
-        "deleteSuccess": "Lien supprimé"
+        "deleteSuccess": "Lien supprimé",
+        "view": "View",
+        "sharedBy": "Shared by {0}"
       },
       "userTeam": {
         "typeUser": "utilisateur·rice | utilisateur·rice·s",
@@ -264,9 +267,6 @@
       },
       "attributes": {
         "link": "Lien",
-        "name": "Nom",
-        "sharedBy": "Partagé par",
-        "right": "Droit",
         "delete": "Supprimer"
       }
     },
@@ -870,7 +870,8 @@
       "related": "Modifier les tâches connexes de cette tâche",
       "color": "Changer la couleur de cette tâche",
       "move": "Déplacer cette tâche dans une autre liste",
-      "reminder": "Manage reminders of this task"
+      "reminder": "Manage reminders of this task",
+      "description": "Toggle editing of the task description"
     },
     "list": {
       "title": "Vues en liste",

src/i18n/lang/it-IT.json

@@ -87,7 +87,7 @@
         "language": "Lingua",
         "defaultList": "Lista predefinita",
         "timezone": "Fuso Orario",
-        "overdueTasksRemindersTime": "Orario email del promemoria attività in ritardo"
+        "overdueTasksRemindersTime": "Orario email attività in scadute"
       },
       "totp": {
         "title": "Autenticazione a due fattori",
@@ -172,6 +172,7 @@
     "search": "Digita per cercare una lista…",
     "searchSelect": "Fare clic o premere invio per selezionare questa lista",
     "shared": "Liste Condivise",
+    "noDescriptionAvailable": "Nessuna descrizione della lista disponibile.",
     "create": {
       "header": "Nuova lista",
       "titlePlaceholder": "Il titolo della lista va qui…",
@@ -242,7 +243,9 @@
         "remove": "Rimuovi un link di condivisione",
         "removeText": "Sei sicuro di voler rimuovere questo link di condivisione? Non sarà più possibile accedere a questa lista con questo link. Non può essere ripristinato!",
         "createSuccess": "Link di condivisione creato.",
-        "deleteSuccess": "Link di condivisione elimitato"
+        "deleteSuccess": "Link di condivisione elimitato",
+        "view": "Mostra",
+        "sharedBy": "Condiviso da {0}"
       },
       "userTeam": {
         "typeUser": "utente | utenti",
@@ -264,9 +267,6 @@
       },
       "attributes": {
         "link": "Link",
-        "name": "Nome",
-        "sharedBy": "Condiviso da",
-        "right": "Permessi",
         "delete": "Elimina"
       }
     },
@@ -562,12 +562,12 @@
       }
     },
     "datemathHelp": {
-      "canuse": "You can use date math to filter for relative dates.",
+      "canuse": "Puoi usare le date calcolate per filtrare per date relative.",
       "learnhow": "Scopri come funziona",
-      "title": "Date Math",
+      "title": "Date Calcolate",
-      "intro": "Date Math allows you to specify relative dates which are resolved on the fly by Vikunja when applying the filter.",
+      "intro": "Le Date Calcolate ti permettono di specificare date relative che vengono calcolate al volo da Vikunja quando viene applicato il filtro.",
-      "expression": "Each Date Math expression starts with an anchor date, which can either be {0}, or a date string ending with {1}. This anchor date can optionally be followed by one or more maths expressions.",
+      "expression": "Ogni Data Calcolata inizia con una data base, che può essere {0}, o una data con {1} alla fine. Questa data base può essere seguita da una o più espressioni matematiche.",
-      "similar": "These expressions are similar to the ones provided by {0} and {1}.",
+      "similar": "Queste espressioni sono simili a quelle fornite da {0} e {1}.",
       "add1Day": "Aggiungi un giorno",
       "minus1Day": "Sottrai un giorno",
       "roundDay": "Arrotonda per difetto al giorno più vicino",
@@ -781,7 +781,7 @@
       "weeks": "Settimane",
       "months": "Mesi",
       "years": "Anni",
-      "invalidAmount": "Please enter more than 0."
+      "invalidAmount": "Inserisci più di 0."
     },
     "quickAddMagic": {
       "hint": "Puoi usare l'Aggiunta Rapida Magica",
@@ -791,15 +791,15 @@
       "multiple": "Puoi usarlo più volte.",
       "label1": "Per aggiungere un'etichetta, basta aggiungere il nome dell'etichetta preceduto da {prefix}.",
       "label2": "Vikunja controllerà prima se l'etichetta esiste già e nel caso la creerà.",
-      "label3": "To use spaces, simply add a \" or ' around the label name.",
+      "label3": "Per usare gli spazi, basta aggiungere un \" o ' prima e dopo il nome dell'etichetta.",
       "label4": "Per esempio: {prefix}\"Etichetta con spazi\".",
       "priority1": "Per impostare la priorità di un'attività, aggiungi un numero 1-5, preceduto da {prefix}.",
       "priority2": "Più alto è il numero, più alta è la priorità.",
       "assignees": "Per assegnare direttamente l'attività a un utente, aggiungere il suo nome utente preceduto da {prefix} all'attività.",
       "list1": "Per impostare una lista di appartenenza all'attività, inserisci il suo nome prefisso con {prefix}.",
       "list2": "Ciò restituirà un errore se la lista non esiste.",
-      "list3": "To use spaces, simply add a \" or ' around the list name.",
+      "list3": "Per usare gli spazi, basta aggiungere un \" o ' prima e dopo il nome della lista.",
-      "list4": "For example: {prefix}\"List with spaces\".",
+      "list4": "Per esempio: {prefix}\"Etichetta con spazi\".",
       "dateAndTime": "Data e ora",
       "date": "Qualsiasi data verrà utilizzata come data di scadenza della nuova attività. È possibile utilizzare le date in uno qualsiasi di questi formati:",
       "dateWeekday": "qualsiasi giorno della settimana, userà la data più vicina",
@@ -870,7 +870,8 @@
       "related": "Modifica le attività collegate a questa",
       "color": "Cambia il colore di questa attività",
       "move": "Sposta questa attività in un altro elenco",
-      "reminder": "Gestisci i promemoria di questa attività"
+      "reminder": "Gestisci i promemoria di questa attività",
+      "description": "Attiva/Disattiva modifica della descrizione dell'attività"
     },
     "list": {
       "title": "Viste Liste",

src/i18n/lang/nl-NL.json

@@ -172,6 +172,7 @@
     "search": "Typ om naar een lijst te zoeken…",
     "searchSelect": "Klik of druk op enter om deze lijst te selecteren",
     "shared": "Gedeelde lijsten",
+    "noDescriptionAvailable": "No list description is available.",
     "create": {
       "header": "Nieuwe lijst",
       "titlePlaceholder": "De titel van de lijst komt hier…",
@@ -242,7 +243,9 @@
         "remove": "Remove a link share",
         "removeText": "Are you sure you want to remove this link share? It will no longer be possible to access this list with this link share. This cannot be undone!",
         "createSuccess": "The link share was successfully created.",
-        "deleteSuccess": "The link share was successfully deleted"
+        "deleteSuccess": "The link share was successfully deleted",
+        "view": "View",
+        "sharedBy": "Shared by {0}"
       },
       "userTeam": {
         "typeUser": "gebruiker | gebruikers",
@@ -264,9 +267,6 @@
       },
       "attributes": {
         "link": "Link",
-        "name": "Naam",
-        "sharedBy": "Gedeeld door",
-        "right": "Rechten",
         "delete": "Verwijderen"
       }
     },
@@ -870,7 +870,8 @@
       "related": "Modify related tasks of this task",
       "color": "Change the color of this task",
       "move": "Move this task to another list",
-      "reminder": "Manage reminders of this task"
+      "reminder": "Manage reminders of this task",
+      "description": "Toggle editing of the task description"
     },
     "list": {
       "title": "List Views",

src/i18n/lang/pl-PL.json

@@ -172,6 +172,7 @@
     "search": "Wpisz, aby wyszukać listę…",
     "searchSelect": "Kliknij lub naciśnij Enter, aby wybrać tę listę",
     "shared": "Współdzielone listy",
+    "noDescriptionAvailable": "No list description is available.",
     "create": {
       "header": "Nowa lista",
       "titlePlaceholder": "Tu wpisz tytuł listy…",
@@ -242,7 +243,9 @@
         "remove": "Usuń link",
         "removeText": "Czy na pewno chcesz usunąć ten link? Dostęp do tej listy z tym linkiem nie będzie już możliwy. Tego nie da się cofnąć!",
         "createSuccess": "Pomyślnie utworzono udostępniony link.",
-        "deleteSuccess": "Udostępniony link został pomyślnie usunięty"
+        "deleteSuccess": "Udostępniony link został pomyślnie usunięty",
+        "view": "View",
+        "sharedBy": "Shared by {0}"
       },
       "userTeam": {
         "typeUser": "użytkownik(a) | użytkownikom",
@@ -264,9 +267,6 @@
       },
       "attributes": {
         "link": "Link",
-        "name": "Nazwa",
-        "sharedBy": "Udostępniony przez",
-        "right": "Uprawnienia",
         "delete": "Usuń"
       }
     },
@@ -870,7 +870,8 @@
       "related": "Zmodyfikuj zadania powiązane z tym zadaniem",
       "color": "Zmień kolor tego zadania",
       "move": "Przenieś to zadanie do innej listy",
-      "reminder": "Zarządzaj przypomnieniami o tym zadaniu"
+      "reminder": "Zarządzaj przypomnieniami o tym zadaniu",
+      "description": "Toggle editing of the task description"
     },
     "list": {
       "title": "Widoki listy",

src/i18n/lang/pt-BR.json

@@ -172,6 +172,7 @@
     "search": "Type to search for a list…",
     "searchSelect": "Click or press enter to select this list",
     "shared": "Shared Lists",
+    "noDescriptionAvailable": "No list description is available.",
     "create": {
       "header": "New list",
       "titlePlaceholder": "The list's title goes here…",
@@ -242,7 +243,9 @@
         "remove": "Remove a link share",
         "removeText": "Are you sure you want to remove this link share? It will no longer be possible to access this list with this link share. This cannot be undone!",
         "createSuccess": "The link share was successfully created.",
-        "deleteSuccess": "The link share was successfully deleted"
+        "deleteSuccess": "The link share was successfully deleted",
+        "view": "View",
+        "sharedBy": "Shared by {0}"
       },
       "userTeam": {
         "typeUser": "user | users",
@@ -264,9 +267,6 @@
       },
       "attributes": {
         "link": "Link",
-        "name": "Name",
-        "sharedBy": "Shared by",
-        "right": "Right",
         "delete": "Delete"
       }
     },
@@ -870,7 +870,8 @@
       "related": "Modify related tasks of this task",
       "color": "Change the color of this task",
       "move": "Move this task to another list",
-      "reminder": "Manage reminders of this task"
+      "reminder": "Manage reminders of this task",
+      "description": "Toggle editing of the task description"
     },
     "list": {
       "title": "List Views",

src/i18n/lang/pt-PT.json

@@ -172,6 +172,7 @@
     "search": "Escreve para pesquisar por uma lista…",
     "searchSelect": "Clica ou pressiona Enter para selecionar esta lista",
     "shared": "Listas Partilhadas",
+    "noDescriptionAvailable": "Não está disponível nenhuma descrição da lista.",
     "create": {
       "header": "Nova lista",
       "titlePlaceholder": "O título da lista será aqui…",
@@ -242,7 +243,9 @@
         "remove": "Remover um link partilhado",
         "removeText": "Tens a certeza que queres remover este link partilhado? Não será mais possível aceder a esta lista utilizando este link partilhado. Isto não pode ser revertido!",
         "createSuccess": "O link partilhado foi criado com sucesso.",
-        "deleteSuccess": "O link partilhado foi eliminado com sucesso"
+        "deleteSuccess": "O link partilhado foi eliminado com sucesso",
+        "view": "Visualizar",
+        "sharedBy": "Partilhado por {0}"
       },
       "userTeam": {
         "typeUser": "utilizador | utilizadores",
@@ -264,9 +267,6 @@
       },
       "attributes": {
         "link": "Link",
-        "name": "Nome",
-        "sharedBy": "Partilhado por",
-        "right": "Permissões",
         "delete": "Eliminar"
       }
     },
@@ -781,7 +781,7 @@
       "weeks": "Semanas",
       "months": "Meses",
       "years": "Anos",
-      "invalidAmount": "Please enter more than 0."
+      "invalidAmount": "Por favor, insere mais do que 0."
     },
     "quickAddMagic": {
       "hint": "Podes utilizar a Introdução Mágica Rápida",
@@ -870,7 +870,8 @@
       "related": "Modificar as tarefas relacionadas desta tarefa",
       "color": "Alterar a cor desta tarefa",
       "move": "Mover esta tarefa para outra lista",
-      "reminder": "Gerir lembretes desta tarefa"
+      "reminder": "Gerir lembretes desta tarefa",
+      "description": "Alternar edição da descrição da tarefa"
     },
     "list": {
       "title": "Visualização em Lista",

src/i18n/lang/ro-RO.json

@@ -172,6 +172,7 @@
     "search": "Type to search for a list…",
     "searchSelect": "Click or press enter to select this list",
     "shared": "Shared Lists",
+    "noDescriptionAvailable": "No list description is available.",
     "create": {
       "header": "New list",
       "titlePlaceholder": "The list's title goes here…",
@@ -242,7 +243,9 @@
         "remove": "Remove a link share",
         "removeText": "Are you sure you want to remove this link share? It will no longer be possible to access this list with this link share. This cannot be undone!",
         "createSuccess": "The link share was successfully created.",
-        "deleteSuccess": "The link share was successfully deleted"
+        "deleteSuccess": "The link share was successfully deleted",
+        "view": "View",
+        "sharedBy": "Shared by {0}"
       },
       "userTeam": {
         "typeUser": "user | users",
@@ -264,9 +267,6 @@
       },
       "attributes": {
         "link": "Link",
-        "name": "Name",
-        "sharedBy": "Shared by",
-        "right": "Right",
         "delete": "Delete"
       }
     },
@@ -870,7 +870,8 @@
       "related": "Modify related tasks of this task",
       "color": "Change the color of this task",
       "move": "Move this task to another list",
-      "reminder": "Manage reminders of this task"
+      "reminder": "Manage reminders of this task",
+      "description": "Toggle editing of the task description"
     },
     "list": {
       "title": "List Views",