chore: better variable typing

cypress.config.ts

@@ -1,25 +1,23 @@
-import {defineConfig} from 'cypress'
+import { defineConfig } from 'cypress'
 
 export default defineConfig({
-	env: {
-		API_URL: 'http://localhost:3456/api/v1',
-		TEST_SECRET: 'averyLongSecretToSe33dtheDB',
-	},
-	video: false,
-	retries: {
-		runMode: 2,
-	},
-	projectId: '181c7x',
-	e2e: {
-		baseUrl: 'http://localhost:4173',
-		specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
-	},
+  env: {
+    API_URL: 'http://localhost:3456/api/v1',
+    TEST_SECRET: 'averyLongSecretToSe33dtheDB',
+  },
+  video: false,
+  retries: {
+    runMode: 2,
+  },
+  projectId: '181c7x',
+  e2e: {
+    baseUrl: 'http://localhost:4173',
+    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+  },
 	component: {
-		devServer: {
-			framework: 'vue',
-			bundler: 'vite',
-		},
-	},
-	viewportWidth: 1600,
-	viewportHeight: 900,
+    devServer: {
+      framework: 'vue',
+      bundler: 'vite',
+    },
+  },
 })

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

@@ -91,9 +91,7 @@ describe('List View List', () => {
 		cy.visit('/lists/1/list')
 
 		cy.get('.tasks-container .tasks')
-			.should('contain', tasks[1].title)
-		cy.get('.tasks-container .tasks')
-			.should('not.contain', tasks[99].title)
+			.should('contain', tasks[99].title)
 
 		cy.get('.card-content .pagination .pagination-link')
 			.contains('2')
@@ -102,8 +100,8 @@ describe('List View List', () => {
 		cy.url()
 			.should('contain', '?page=2')
 		cy.get('.tasks-container .tasks')
-			.should('contain', tasks[99].title)
+			.should('contain', tasks[1].title)
 		cy.get('.tasks-container .tasks')
-			.should('not.contain', tasks[1].title)
+			.should('not.contain', tasks[99].title)
 	})
 })

cypress/e2e/task/task.spec.ts

@@ -340,7 +340,6 @@ describe('Task', () => {
 				list_id: 1,
 			})
 			const labels = LabelFactory.create(1)
-			LabelTaskFactory.truncate()
 
 			cy.visit(`/tasks/${tasks[0].id}`)
 

cypress/factories/task.ts

@@ -15,7 +15,6 @@ export class TaskFactory extends Factory {
 			list_id: 1,
 			created_by_id: 1,
 			index: '{increment}',
-			position: '{increment}',
 			created: formatISO(now),
 			updated: formatISO(now)
 		}

cypress/factories/user.ts

@@ -14,7 +14,6 @@ export class UserFactory extends Factory {
             username: faker.lorem.word(10) + faker.datatype.uuid(),
             password: '$2a$14$dcadBoMBL9jQoOcZK8Fju.cy0Ptx2oZECkKLnaa8ekRoTFe1w7To.', // 1234
 			status: 0,
-			issuer: 'local',
 			created: formatISO(now),
 			updated: formatISO(now)
 		}

package.json

@@ -19,80 +19,80 @@
   },
   "dependencies": {
     "@github/hotkey": "2.0.0",
-    "@kyvg/vue3-notification": "2.3.5",
-    "@sentry/tracing": "7.7.0",
-    "@sentry/vue": "7.7.0",
+    "@kyvg/vue3-notification": "2.3.4",
+    "@sentry/tracing": "7.5.0",
+    "@sentry/vue": "7.5.0",
     "@types/is-touch-device": "1.0.0",
     "@types/sortablejs": "1.13.0",
-    "@vueuse/core": "8.9.4",
-    "@vueuse/router": "8.9.4",
+    "@vueuse/core": "8.7.5",
+    "@vueuse/router": "8.7.5",
     "blurhash": "1.1.5",
     "bulma-css-variables": "0.9.33",
     "camel-case": "4.1.2",
     "date-fns": "2.28.0",
-    "dompurify": "2.3.10",
+    "dompurify": "2.3.8",
     "easymde": "2.16.1",
     "flatpickr": "4.6.13",
     "flexsearch": "0.7.21",
-    "highlight.js": "11.6.0",
+    "highlight.js": "11.5.1",
     "is-touch-device": "1.0.1",
     "lodash.clonedeep": "4.5.0",
     "lodash.debounce": "4.0.8",
-    "marked": "4.0.18",
+    "marked": "4.0.17",
     "minimist": "1.2.6",
     "register-service-worker": "1.7.2",
     "snake-case": "3.0.4",
-    "ufo": "0.8.5",
+    "ufo": "0.8.4",
     "v-tooltip": "4.0.0-beta.17",
     "vue": "3.2.37",
     "vue-advanced-cropper": "2.8.3",
     "vue-drag-resize": "2.0.3",
     "vue-flatpickr-component": "9.0.6",
-    "vue-i18n": "9.2.0-beta.40",
-    "vue-router": "4.1.2",
+    "vue-i18n": "9.2.0-beta.36",
+    "vue-router": "4.1.0",
     "vuex": "4.0.2",
     "workbox-precaching": "6.5.3",
     "zhyswan-vuedraggable": "4.1.3"
   },
   "devDependencies": {
     "@4tw/cypress-drag-drop": "2.2.1",
-    "@cypress/vite-dev-server": "3.0.0",
-    "@cypress/vue": "4.0.0",
+    "@cypress/vite-dev-server": "2.2.2",
+    "@cypress/vue": "3.1.1",
     "@faker-js/faker": "7.3.0",
     "@fortawesome/fontawesome-svg-core": "6.1.1",
     "@fortawesome/free-regular-svg-icons": "6.1.1",
     "@fortawesome/free-solid-svg-icons": "6.1.1",
     "@fortawesome/vue-fontawesome": "3.0.1",
     "@types/flexsearch": "0.7.3",
-    "@typescript-eslint/eslint-plugin": "5.30.7",
-    "@typescript-eslint/parser": "5.30.7",
-    "@vitejs/plugin-legacy": "2.0.0",
-    "@vitejs/plugin-vue": "3.0.1",
+    "@typescript-eslint/eslint-plugin": "5.30.4",
+    "@typescript-eslint/parser": "5.30.4",
+    "@vitejs/plugin-legacy": "1.8.2",
+    "@vitejs/plugin-vue": "2.3.3",
     "@vue/eslint-config-typescript": "11.0.0",
-    "@vue/test-utils": "2.0.2",
+    "@vue/test-utils": "2.0.0-rc.18",
     "@vue/tsconfig": "0.1.3",
     "autoprefixer": "10.4.7",
     "axios": "0.27.2",
     "browserslist": "4.21.1",
     "caniuse-lite": "1.0.30001363",
-    "cypress": "10.3.1",
-    "esbuild": "0.14.49",
-    "eslint": "8.20.0",
-    "eslint-plugin-vue": "9.2.0",
+    "cypress": "10.3.0",
+    "esbuild": "0.14.48",
+    "eslint": "8.19.0",
+    "eslint-plugin-vue": "9.1.1",
     "express": "4.18.1",
-    "happy-dom": "6.0.4",
-    "netlify-cli": "10.9.0",
+    "happy-dom": "6.0.0",
+    "netlify-cli": "10.3.1",
     "postcss": "8.4.14",
     "postcss-preset-env": "7.7.2",
-    "rollup": "2.77.0",
-    "rollup-plugin-visualizer": "5.7.1",
+    "rollup": "2.75.7",
+    "rollup-plugin-visualizer": "5.6.0",
     "sass": "1.53.0",
     "typescript": "4.7.4",
-    "vite": "3.0.2",
-    "vite-plugin-pwa": "0.12.3",
+    "vite": "2.9.13",
+    "vite-plugin-pwa": "0.12.2",
     "vite-svg-loader": "3.4.0",
-    "vitest": "0.18.1",
-    "vue-tsc": "0.38.9",
+    "vitest": "0.17.0",
+    "vue-tsc": "0.38.2",
     "wait-on": "6.0.1",
     "workbox-cli": "6.5.3"
   },

src/App.vue

@@ -10,7 +10,9 @@
 		</no-auth-wrapper>
 		<Notification/>
 
-		<keyboard-shortcuts v-if="keyboardShortcutsActive"/>
+		<transition name="fade">
+			<keyboard-shortcuts v-if="keyboardShortcutsActive"/>
+		</transition>
 	</ready>
 </template>
 

src/components/base/BaseButton.vue

@@ -5,7 +5,6 @@
 		:class="{ 'base-button--type-button': isButton }"
 		v-bind="elementBindings"
 		:disabled="disabled || undefined"
-		ref="button"
 	>
 		<slot />
 	</component>
@@ -85,15 +84,6 @@ watchEffect(() => {
 })
 
 const isButton = computed(() => componentNodeName.value === 'button')
-
-const button = ref()
-function focus() {
-	button.value.focus()
-}
-
-defineExpose({
-	focus,
-})
 </script>
 
 <style lang="scss">

src/components/date/datepickerWithRange.vue

@@ -85,12 +85,7 @@ import DatemathHelp from '@/components/date/datemathHelp.vue'
 const store = useStore()
 const {t} = useI18n({useScope: 'global'})
 
-const emit = defineEmits(['dateChanged', 'update:modelValue'])
-const props = defineProps({
-	modelValue: {
-		required: false,
-	},
-})
+const emit = defineEmits(['dateChanged'])
 
 // FIXME: This seems to always contain the default value - that breaks the picker
 const weekStart = computed<number>(() => store.state.auth.settings.weekStart ?? 0)
@@ -113,22 +108,11 @@ const flatpickrRange = ref('')
 const from = ref('')
 const to = ref('')
 
-watch(
-	() => props.modelValue,
-	newValue => {
-		from.value = newValue.dateFrom
-		to.value = newValue.dateTo
-		flatpickrRange.value = `${from.value} to ${to.value}`
-	},
-)
-
 function emitChanged() {
-	const args = {
+	emit('dateChanged', {
 		dateFrom: from.value === '' ? null : from.value,
 		dateTo: to.value === '' ? null : to.value,
-	}
-	emit('dateChanged', args)
-	emit('update:modelValue', args)
+	})
 }
 
 watch(

src/components/home/contentAuth.vue

@@ -38,14 +38,16 @@
 					</keep-alive>
 				</router-view>
 
-				<modal
-					v-if="currentModal"
-					@close="closeModal()"
-					variant="scrolling"
-					class="task-detail-view-modal"
-				>
-					<component :is="currentModal"/>
-				</modal>
+				<transition name="modal">
+					<modal
+						v-if="currentModal"
+						@close="closeModal()"
+						variant="scrolling"
+						class="task-detail-view-modal"
+					>
+						<component :is="currentModal"/>
+					</modal>
+				</transition>
 
 				<BaseButton
 					class="keyboard-shortcuts-button d-print-none"

src/components/home/navigation.vue

@@ -88,12 +88,13 @@
 						@end="saveListPosition"
 						handle=".handle"
 						:disabled="n.id < 0 || undefined"
-						tag="ul"
+						tag="transition-group"
 						item-key="id"
 						:data-namespace-id="n.id"
 						:data-namespace-index="nk"
 						:component-data="{
-							type: 'transition-group',
+							type: 'transition',
+							tag: 'ul',
 							name: !drag ? 'flip-list' : null,
 							class: [
 								'menu-list can-be-hidden',
@@ -555,4 +556,8 @@ $vikunja-nav-selected-width: 0.4rem;
 .namespaces-list.loader-container.is-loading {
 	min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem + 1.5rem});
 }
+
+a.dropdown-item:hover {
+	background: var(--dropdown-item-hover-background-color) !important;
+}
 </style>

src/components/input/datepicker.vue

@@ -76,7 +76,7 @@
 				/>
 
 				<x-button
-					class="datepicker__close-button"
+					class="datepicker__close-button is-fullwidth"
 					:shadow="false"
 					@click="close"
 					v-cy="'closeDatepicker'"

src/components/input/multiselect.vue

@@ -89,15 +89,6 @@ import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 
-function elementInResults(elem: string | any, label: string, query: string): boolean {
-	// Don't make create available if we have an exact match in our search results.
-	if (label !== '') {
-		return elem[label] === query
-	}
-
-	return elem === query
-}
-
 export default defineComponent({
 	name: 'multiselect',
 	components: {
@@ -231,12 +222,14 @@ export default defineComponent({
 			)
 		},
 		creatableAvailable() {
-			const hasResult = this.filteredSearchResults.some(elem => elementInResults(elem, this.label, this.query))
-			const hasQueryAlreadyAdded = Array.isArray(this.internalValue) && this.internalValue.some(elem => elementInResults(elem, this.label, this.query))
+			return this.creatable && this.query !== '' && !this.filteredSearchResults.some(elem => {
+				// Don't make create available if we have an exact match in our search results.
+				if (this.label !== '') {
+					return elem[this.label] === this.query
+				}
 
-			return this.creatable 
-				&& this.query !== '' 
-				&& !(hasResult || hasQueryAlreadyAdded)
+				return elem === this.query
+			})
 		},
 		filteredSearchResults() {
 			if (this.multiple && this.internalValue !== null && Array.isArray(this.internalValue)) {
@@ -359,12 +352,6 @@ export default defineComponent({
 			}
 
 			if (!this.creatableAvailable) {
-				// Check if there's an exact match for our search term
-				const exactMatch = this.filteredSearchResults.find(elem => elementInResults(elem, this.label, this.query))
-				if(exactMatch) {
-					this.select(exactMatch)
-				}
-
 				return
 			}
 

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

@@ -56,13 +56,12 @@
 				{{ $t('menu.archive') }}
 			</dropdown-item>
 			<task-subscription
-				class="has-no-shadow"
+				class="dropdown-item has-no-shadow"
 				:is-button="false"
 				entity="list"
 				:entity-id="list.id"
 				:subscription="list.subscription"
 				@change="sub => subscription = sub"
-				type="dropdown"
 			/>
 			<dropdown-item
 				:to="{ name: 'list.settings.delete', params: { listId: list.id } }"

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

@@ -25,6 +25,7 @@
 			v-model="value"
 			ref="filters"
 			class="filter-popup"
+			:class="{'is-open': isOpen}"
 		/>
 	</modal>
 </template>

src/components/list/partials/filters.vue

@@ -67,9 +67,7 @@
 		<div class="field">
 			<label class="label">{{ $t('task.attributes.dueDate') }}</label>
 			<div class="control">
-				<datepicker-with-range
-					@dateChanged="values => setDateFilter('due_date', values)"
-					v-model="filters.dueDate">
+				<datepicker-with-range @dateChanged="values => setDateFilter('due_date', values)">
 					<template #trigger="{toggle, buttonText}">
 						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
 							{{ buttonText }}
@@ -81,9 +79,7 @@
 		<div class="field">
 			<label class="label">{{ $t('task.attributes.startDate') }}</label>
 			<div class="control">
-				<datepicker-with-range
-					@dateChanged="values => setDateFilter('start_date', values)"
-					v-model="filters.startDate">
+				<datepicker-with-range @dateChanged="values => setDateFilter('start_date', values)">
 					<template #trigger="{toggle, buttonText}">
 						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
 							{{ buttonText }}
@@ -95,9 +91,7 @@
 		<div class="field">
 			<label class="label">{{ $t('task.attributes.endDate') }}</label>
 			<div class="control">
-				<datepicker-with-range
-					@dateChanged="values => setDateFilter('end_date', values)"
-					v-model="filters.endDate">
+				<datepicker-with-range @dateChanged="values => setDateFilter('end_date', values)">
 					<template #trigger="{toggle, buttonText}">
 						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
 							{{ buttonText }}
@@ -109,9 +103,7 @@
 		<div class="field">
 			<label class="label">{{ $t('task.attributes.reminders') }}</label>
 			<div class="control">
-				<datepicker-with-range
-					@dateChanged="values => setDateFilter('reminders', values)"
-					v-model="filters.reminders">
+				<datepicker-with-range @dateChanged="values => setDateFilter('reminders', values)">
 					<template #trigger="{toggle, buttonText}">
 						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
 							{{ buttonText }}
@@ -145,8 +137,7 @@
 			</div>
 		</div>
 
-		<template
-			v-if="$route.name === 'filters.create' || $route.name === 'list.edit' || $route.name === 'filter.settings.edit'">
+		<template v-if="$route.name === 'filters.create' || $route.name === 'list.edit'">
 			<div class="field">
 				<label class="label">{{ $t('list.lists') }}</label>
 				<div class="control">
@@ -202,7 +193,6 @@ import EditLabels from '@/components/tasks/partials/editLabels.vue'
 
 import {objectToSnakeCase} from '@/helpers/case'
 import {getDefaultParams} from '@/composables/taskList'
-import {camelCase} from 'camel-case'
 
 // FIXME: merge with DEFAULT_PARAMS in taskList.js
 const DEFAULT_PARAMS = {
@@ -378,8 +368,6 @@ export default defineComponent({
 					this.params.filter_comparator.push('less_equals')
 					this.params.filter_value.push(dateTo)
 				}
-
-				this.filters[camelCase(filterName)] = {dateFrom, dateTo}
 				this.change()
 				return
 			}
@@ -409,16 +397,9 @@ export default defineComponent({
 			}
 
 			if (foundDateStart !== false && foundDateEnd !== false) {
-				const startDate = new Date(this.params.filter_value[foundDateStart])
-				const endDate = new Date(this.params.filter_value[foundDateEnd])
-				this.filters[variableName] = {
-					dateFrom: !isNaN(startDate)
-						? `${startDate.getFullYear()}-${startDate.getMonth() + 1}-${startDate.getDate()}`
-						: this.params.filter_value[foundDateStart],
-					dateTo: !isNaN(endDate)
-						? `${endDate.getFullYear()}-${endDate.getMonth() + 1}-${endDate.getDate()}`
-						: this.params.filter_value[foundDateEnd],
-				}
+				const start = new Date(this.params.filter_value[foundDateStart])
+				const end = new Date(this.params.filter_value[foundDateEnd])
+				this.filters[variableName] = `${start.getFullYear()}-${start.getMonth() + 1}-${start.getDate()} to ${end.getFullYear()}-${end.getMonth() + 1}-${end.getDate()}`
 			}
 		},
 		setSingleValueFilter(filterName, variableName, useVariableName = '', comparator = 'equals') {

src/components/misc/dropdown-item.vue

@@ -1,95 +1,25 @@
 <template>
-	<component
-		:is="componentNodeName"
-		v-bind="elementBindings"
+	<router-link
 		:to="to"
 		class="dropdown-item">
-		<span class="icon" v-if="icon">
+		<span class="icon" v-if="icon !== ''">
 			<icon :icon="icon"/>
 		</span>
 		<span>
 			<slot></slot>
 		</span>
-	</component>
+	</router-link>
 </template>
 
 <script lang="ts" setup>
-import {ref, useAttrs, watchEffect} from 'vue'
-
-const props = defineProps<{
-	to?: object,
-	icon?: string | string[],
-}>()
-
-const componentNodeName = ref<Node['nodeName']>('a')
-const elementBindings = ref({})
-
-const attrs = useAttrs()
-watchEffect(() => {
-	let nodeName = 'a'
-
-	if (props.to) {
-		nodeName = 'router-link'
-	}
-
-	if ('href' in attrs) {
-		nodeName = 'BaseButton'
-	}
-
-	componentNodeName.value = nodeName
-	elementBindings.value = {
-		...attrs,
-	}
+defineProps({
+	to: {
+		required: true,
+	},
+	icon: {
+		type: String,
+		required: false,
+		default: '',
+	},
 })
 </script>
-
-<style scoped lang="scss">
-.dropdown-item {
-	color: var(--text);
-	display: block;
-	font-size: 0.875rem;
-	line-height: 1.5;
-	padding: $item-padding;
-	position: relative;
-}
-
-a.dropdown-item,
-button.dropdown-item {
-	text-align: inherit;
-	white-space: nowrap;
-	width: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: left !important;
-
-	&:hover {
-		background-color: var(--grey-100) !important;
-	}
-
-	&.is-active {
-		background-color: var(--link);
-		color: var(--link-invert);
-	}
-
-	.icon {
-		padding-right: .5rem;
-	}
-
-	.icon:not(.has-text-success) {
-		color: var(--grey-300) !important;
-	}
-
-	&.has-text-danger .icon {
-		color: var(--danger) !important;
-	}
-
-	&.is-disabled {
-		cursor: not-allowed;
-
-		&:hover {
-			background-color: transparent;
-		}
-	}
-}
-
-</style>

src/components/misc/dropdown.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="dropdown" ref="dropdown">
+	<div class="dropdown is-right is-active" ref="dropdown">
 		<slot name="trigger" :close="close" :toggleOpen="toggleOpen">
 			<BaseButton class="dropdown-trigger is-flex" @click="toggleOpen">
 				<icon :icon="triggerIcon" class="icon"/>
@@ -51,36 +51,7 @@ onClickOutside(dropdown, (e: Event) => {
 </script>
 
 <style lang="scss" scoped>
-.dropdown {
-	display: inline-flex;
-	position: relative;
-	vertical-align: top;
-}
-
-.dropdown-menu {
-	min-width: 12rem;
-	padding-top: 4px;
-	position: absolute;
-	top: 100%;
-	z-index: 20;
-	display: block;
-	left: auto;
-	right: 0;
-}
-
-.dropdown-content {
-	background-color: var(--scheme-main);
-	border-radius: $radius;
-	padding-bottom: .5rem;
-	padding-top: .5rem;
+.dropdown-menu  .dropdown-content {
 	box-shadow: var(--shadow-md);
 }
-
-.dropdown-divider {
-	background-color: var(--border-light);
-	border: none;
-	display: block;
-	height: 1px;
-	margin: 0.5rem 0;
-}
-</style>
+</style>

src/components/misc/modal.vue

@@ -1,16 +1,15 @@
 <template>
 	<Teleport to="body">
 		<!-- FIXME: transition should not be included in the modal -->
-		<transition :name="transitionName">
+		<transition name="modal">
 			<section
 				v-if="enabled"
 				class="modal-mask"
 				:class="[
-					{ 'has-overflow': overflow },
-					variant,
-				]"
+				{ 'has-overflow': overflow },
+				variant,
+			]"
 				ref="modal"
-				v-bind="attrs"
 			>
 				<div
 					class="modal-container"
@@ -63,18 +62,11 @@
 	</Teleport>
 </template>
 
-<script lang="ts">
-export default {
-	inheritAttrs: false,
-}
-</script>
-
 <script lang="ts" setup>
 import BaseButton from '@/components/base/BaseButton.vue'
-import {onUnmounted, ref, useAttrs, watch} from 'vue'
+import {onUnmounted, ref, watch} from 'vue'
 import {useScrollLock} from '@vueuse/core'
 
-
 const props = withDefaults(defineProps<{
 	enabled?: boolean,
 	overflow?: boolean,
@@ -89,8 +81,6 @@ const props = withDefaults(defineProps<{
 
 defineEmits(['close', 'submit'])
 
-const attrs = useAttrs()
-
 const modal = ref<HTMLElement | null>(null)
 const scrollLock = useScrollLock(modal)
 

src/components/misc/pagination.vue

@@ -69,9 +69,9 @@ function createPagination(totalPages: number, currentPage: number) {
 	return pages
 }
 
-function getRouteForPagination(page = 1, type = null) {
+function getRouteForPagination(page = 1, type = 'list') {
 	return {
-		name: type,
+		name: 'list.' + type,
 		params: {
 			type: type,
 		},

src/components/misc/subscription.vue

@@ -1,6 +1,6 @@
 <template>
 	<x-button
-		v-if="type === 'button'"
+		v-if="isButton"
 		variant="secondary"
 		:icon="iconName"
 		v-tooltip="tooltipText"
@@ -9,15 +9,6 @@
 	>
 		{{ buttonText }}
 	</x-button>
-	<DropdownItem
-		v-else-if="type === 'dropdown'"
-		v-tooltip="tooltipText"
-		@click="changeSubscription"
-		:class="{'is-disabled': disabled}"
-		:icon="iconName"
-	>
-		{{ buttonText }}
-	</DropdownItem>
 	<BaseButton
 		v-else
 		v-tooltip="tooltipText"
@@ -36,7 +27,6 @@ import {computed, shallowRef, type PropType} from 'vue'
 import {useI18n} from 'vue-i18n'
 
 import BaseButton from '@/components/base/BaseButton.vue'
-import DropdownItem from '@/components/misc/dropdown-item.vue'
 
 import SubscriptionService from '@/services/subscription'
 import SubscriptionModel from '@/models/subscription'
@@ -54,10 +44,6 @@ const props = defineProps({
 		type: Object as PropType<SubscriptionModel>,
 		default: null,
 	},
-	type: {
-		type: String as PropType<'button' | 'dropdown' | 'null'>,
-		default: 'button',
-	},
 })
 
 const subscriptionEntity = computed<string | null>(() => props.subscription?.entity ?? null)

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

@@ -34,13 +34,12 @@
 				{{ $t('menu.archive') }}
 			</dropdown-item>
 			<task-subscription
-				class="has-no-shadow"
+				class="dropdown-item has-no-shadow"
 				:is-button="false"
 				entity="namespace"
 				:entity-id="namespace.id"
 				:subscription="subscription"
 				@change="sub => subscription = sub"
-				type="dropdown"
 			/>
 			<dropdown-item
 				:to="{ name: 'namespace.settings.delete', params: { id: namespace.id } }"

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

@@ -526,7 +526,7 @@ export default defineComponent({
 
 		.result {
 			&-title {
-				background: var(--grey-100);
+				background: var(--grey-50);
 				padding: .5rem;
 				display: block;
 				font-size: .75rem;
@@ -549,7 +549,7 @@ export default defineComponent({
 					cursor: pointer;
 
 					&:focus, &:hover {
-						background: var(--grey-100);
+						background: var(--grey-50);
 						box-shadow: none !important;
 					}
 

src/components/tasks/add-task.vue

@@ -200,7 +200,7 @@ function handleEnter(e: KeyboardEvent) {
 }
 
 function focusTaskInput() {
-	newTaskInput.value?.focus()
+	newTaskInput.value.focus()
 }
 
 defineExpose({

src/components/tasks/gantt-component.vue

@@ -16,7 +16,7 @@
 						class="month"
 						v-for="(m, mk) in days[yk]"
 					>
-						{{ formatMonthAndYear(yk, parseInt(mk) + 1) }}
+						{{ formatYear(new Date(`${yk}-${parseInt(mk) + 1}-01`)) }}
 						<div class="days">
 							<div
 								:class="{ today: d.toDateString() === now.toDateString() }"
@@ -437,9 +437,7 @@ export default defineComponent({
 			this.newTaskTitle = ''
 			this.hideCrateNewTask()
 		},
-		formatMonthAndYear(year, month) {
-			month = month < 10 ? '0' + month : month
-			const date = new Date(`${year}-${month}-01`)
+		formatYear(date) {
 			return formatDate(date, 'MMMM, yyyy')
 		},
 	},

src/components/tasks/partials/editLabels.vue

@@ -117,7 +117,7 @@ async function removeLabel(label: LabelModel) {
 
 	for (const l in labels.value) {
 		if (labels.value[l].id === label.id) {
-			labels.value.splice(l, 1) // FIXME: l should be index
+			labels.value.splice(l, 1)
 		}
 	}
 	emit('update:modelValue', labels.value)

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

@@ -4,9 +4,9 @@
 		:class="{
 			'is-loading': loadingInternal || loading,
 			'draggable': !(loadingInternal || loading),
-			'has-light-text': color !== TASK_DEFAULT_COLOR && !colorIsDark(color),
+			'has-light-text': task.getHexColor() !== TASK_DEFAULT_COLOR && !colorIsDark(task.getHexColor()),
 		}"
-		:style="{'background-color': color !== TASK_DEFAULT_COLOR ? color : false}"
+		:style="{'background-color': task.hexColor !== '#' && task.hexColor !== '' ? task.hexColor : false}"
 		@click.exact="openTaskDetail()"
 		@click.ctrl="() => toggleTaskDone(task)"
 		@click.meta="() => toggleTaskDone(task)"
@@ -105,13 +105,6 @@ export default defineComponent({
 			default: false,
 		},
 	},
-	computed: {
-		color() {
-			return this.task.getHexColor
-				? this.task.getHexColor() 
-				: TASK_DEFAULT_COLOR
-		},
-	},
 	methods: {
 		formatDateLong,
 		formatISO,

src/components/tasks/partials/listSearch.vue

@@ -1,5 +1,5 @@
 <template>
-	<Multiselect
+	<multiselect
 		class="control is-expanded"
 		:placeholder="$t('list.search')"
 		@search="findLists"
@@ -13,7 +13,7 @@
 			<span class="list-namespace-title search-result">{{ namespace(props.option.namespaceId) }} ></span>
 			{{ props.option.title }}
 		</template>
-	</Multiselect>
+	</multiselect>
 </template>
 
 <script lang="ts" setup>

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

@@ -42,10 +42,6 @@
 					{{ $t('task.quickAddMagic.list1', {prefix: prefixes.list}) }}
 					{{ $t('task.quickAddMagic.list2') }}
 				</p>
-				<p>
-					{{ $t('task.quickAddMagic.list3') }}
-					{{ $t('task.quickAddMagic.list4', {prefix: prefixes.list}) }}
-				</p>
 
 				<h3>{{ $t('task.quickAddMagic.dateAndTime') }}</h3>
 				<p>

src/components/tasks/partials/relatedTasks.vue

@@ -35,7 +35,6 @@
 						:creatable="true"
 						:create-placeholder="$t('task.relation.createPlaceholder')"
 						@create="createAndRelateTask"
-						@select="addTaskRelation"
 					>
 						<template #searchResult="props">
 							<span v-if="typeof props.option !== 'string'" class="search-result">

src/components/tasks/partials/reminders.vue

@@ -45,11 +45,12 @@ const props = defineProps({
 				return false
 			}
 
-			const isDate = (e: unknown) => e instanceof Date
-			const isString = (e: unknown) => typeof e === 'string'
+			const isDate = (e: any) => e instanceof Date
+			const isString = (e: any) => typeof e === 'string'
 
 			for (const e of prop) {
 				if (!isDate(e) && !isString(e)) {
+					console.log('validation failed', e, e instanceof Date)
 					return false
 				}
 			}
@@ -117,7 +118,7 @@ function removeReminderByIndex(index: number) {
     display: flex;
     align-items: center;
 
-    &.overdue :deep(.datepicker .show) {
+    &.overdue :deep(.datepicker a.show) {
       color: var(--danger);
     }
 
@@ -125,7 +126,7 @@ function removeReminderByIndex(index: number) {
       margin-bottom: 0.75rem;
     }
 
-    .remove {
+    a.remove {
       color: var(--danger);
       padding-left: .5rem;
     }

src/components/tasks/partials/singleTaskInList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div :class="{'is-loading': taskService.loading}" class="task loader-container">
-		<fancycheckbox :disabled="(isArchived || disabled) && !canMarkAsDone" @change="markAsDone" v-model="task.done"/>
+		<fancycheckbox :disabled="isArchived || disabled" @change="markAsDone" v-model="task.done"/>
 		<span
 			v-if="showListColor && listColor !== ''"
 			:style="{backgroundColor: listColor }"
@@ -148,10 +148,6 @@ export default defineComponent({
 			type: Boolean,
 			default: true,
 		},
-		canMarkAsDone: {
-			type: Boolean,
-			default: true,
-		},
 	},
 	emits: ['task-updated'],
 	watch: {

src/composables/taskList.ts

@@ -1,4 +1,4 @@
-import {ref, shallowReactive, watch, computed} from 'vue'
+import { ref, shallowReactive, watch, computed } from 'vue'
 import {useRoute} from 'vue-router'
 
 import TaskCollectionService from '@/services/taskCollection'
@@ -20,13 +20,14 @@ const SORT_BY_DEFAULT = {
 /**
  * This mixin provides a base set of methods and properties to get tasks on a list.
  */
-export function useTaskList(listId, sortByDefault = SORT_BY_DEFAULT) {
+export function useTaskList(listId) {
 	const params = ref({...getDefaultParams()})
 	
 	const search = ref('')
 	const page = ref(1)
 
-	const sortBy = ref({ ...sortByDefault })
+	const sortBy = ref({ ...SORT_BY_DEFAULT })
+
 
 	// This makes sure an id sort order is always sorted last.
 	// When tasks would be sorted first by id and then by whatever else was specified, the id sort takes
@@ -107,6 +108,5 @@ export function useTaskList(listId, sortByDefault = SORT_BY_DEFAULT) {
 		loadTasks,
 		searchTerm: search,
 		params,
-		sortByParam: sortBy,
 	}
 }

src/helpers/attachments.ts

@@ -29,6 +29,6 @@ export async function uploadFiles(attachmentService: AttachmentService, taskId:
 	}
 }
 
-export function generateAttachmentUrl(taskId: number, attachmentId: number) {
+export function generateAttachmentUrl(taskId: number, attachmentId: number) : any {
 	return `${window.API_URL}/tasks/${taskId}/attachments/${attachmentId}`
 }

src/helpers/time/parseDate.ts

@@ -222,8 +222,8 @@ export const getDateFromTextIn = (text: string, now: Date = new Date()) => {
 }
 
 const getDateFromWeekday = (text: string): dateFoundResult => {
-	const matcher: RegExp = / (next )?(monday|mon|tuesday|tue|wednesday|wed|thursday|thu|friday|fri|saturday|sat|sunday|sun)($| )/g
-	const results: string[] | null = matcher.exec(text.toLowerCase()) // The i modifier does not seem to work.
+	const matcher: RegExp = / (next )?(monday|mon|tuesday|tue|wednesday|wed|thursday|thu|friday|fri|saturday|sat|sunday|sun)($| )/ig
+	const results: string[] | null = matcher.exec(text)
 	if (results === null) {
 		return {
 			foundText: null,

src/helpers/utils.ts

@@ -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: unknown) {
+export function isNil(value: any) {
 	return value == null
 }
 
-export function omitBy(obj: {}, check: (value: unknown) => boolean) {
+export function omitBy(obj: {}, check: (value: any) => boolean): {} {
 	if (isNil(obj)) {
 		return {}
 	}

src/i18n/lang/ca-ES.json

@@ -790,15 +790,13 @@
       "multiple": "You can use this multiple times.",
       "label1": "To add a label, simply prefix the name of the label with {prefix}.",
       "label2": "Vikunja will first check if the label already exist and create it if not.",
-      "label3": "To use spaces, simply add a \" or ' around the label name.",
+      "label3": "To use spaces, simply add a \" around the label name.",
       "label4": "For example: {prefix}\"Label with spaces\".",
       "priority1": "To set a task's priority, add a number 1-5, prefixed with a {prefix}.",
       "priority2": "The higher the number, the higher the priority.",
       "assignees": "To directly assign the task to a user, add their username prefixed with {prefix} to the task.",
       "list1": "To set a list for the task to appear in, enter its name prefixed with {prefix}.",
       "list2": "This will return an error if the list does not exist.",
-      "list3": "To use spaces, simply add a \" or ' around the list name.",
-      "list4": "For example: {prefix}\"List with spaces\".",
       "dateAndTime": "Date and time",
       "date": "Any date will be used as the due date of the new task. You can use dates in any of these formats:",
       "dateWeekday": "any weekday, will use the next date with that date",

src/i18n/lang/cs-CZ.json

@@ -790,15 +790,13 @@
       "multiple": "Toto můžete použít několikrát.",
       "label1": "Chcete-li přidat štítek, jednoduše napište před název štítku {prefix}.",
       "label2": "Vikunja nejprve zkontroluje, zda štítek již existuje a vytvoří jej, pokud ne.",
-      "label3": "To use spaces, simply add a \" or ' around the label name.",
+      "label3": "Chcete-li použít mezery, jednoduše přidejte \" kolem názvu popisku.",
       "label4": "Například: {prefix}\"Štítek s mezerami\".",
       "priority1": "Chcete-li nastavit prioritu úkolu, přidejte číslo 1-5, s prefixem {prefix}.",
       "priority2": "Čím vyšší číslo, tím vyšší priorita.",
       "assignees": "Chcete-li přímo přiřadit úkol k uživateli, přidejte k úkolu jejich uživatelské jméno s prefixem {prefix}.",
       "list1": "Chcete-li nastavit seznam, ve kterém se má úkol zobrazit, zadejte jeho název s předponou {prefix}.",
       "list2": "Toto vrátí chybu, pokud seznam neexistuje.",
-      "list3": "To use spaces, simply add a \" or ' around the list name.",
-      "list4": "For example: {prefix}\"List with spaces\".",
       "dateAndTime": "Datum a čas",
       "date": "Jakékoliv datum bude použito jako datum dokončení nového úkolu. Můžete použít data v kterémkoli z těchto formátů:",
       "dateWeekday": "každý pracovní den použije další datum s tímto datem",

src/i18n/lang/de-DE.json

@@ -790,15 +790,13 @@
       "multiple": "Du kannst das mehrmals benutzen.",
       "label1": "Um ein Label hinzuzufügen, gibt einfach den Name mit einem vorangestellten {prefix} ein.",
       "label2": "Vikunja prüft zuerst, ob das Label bereits vorhanden ist und erstellt es, falls nicht.",
-      "label3": "Um Leerzeichen zu verwenden, füge einfach ein \" oder ' um den Namen des Labels hinzu.",
+      "label3": "Um Leerzeichen zu verwenden, füge einfach ein \" um den Namen des Labels hinzu.",
       "label4": "Zum Beispiel: {prefix}\"Label mit Leerzeichen\".",
       "priority1": "Um die Priorität einer Aufgabe zu setzen, gibt eine Zahl zwischen 1 und 5 mit einem vorangestellten {prefix} ein.",
       "priority2": "Je höher die Zahl, desto höher die Priorität.",
       "assignees": "Um die Aufgabe direkt jemandem zuzuweisen, füge vor dem Anmeldenamen der Person ein {prefix} Zeichen ein.",
       "list1": "Um eine Liste zu erstellen, in der die Aufgabe erscheinen soll, gib ihren Namen vorangestellt mit einem {prefix} ein.",
       "list2": "Dies gibt einen Fehler zurück, wenn die Liste nicht existiert.",
-      "list3": "Um Leerzeichen zu verwenden, füge einfach ein \" oder ' um den Namen der Liste hinzu.",
-      "list4": "Zum Beispiel: {prefix}\"Liste mit Leerzeichen\".",
       "dateAndTime": "Datum und Uhrzeit",
       "date": "Jedes Datum wird als Enddatum der neuen Aufgabe verwendet. Du kannst Daten in jedem dieser Formate verwenden:",
       "dateWeekday": "jeder Wochentag, wird das nächste Datum mit diesem Tag verwenden",

src/i18n/lang/de-swiss.json

@@ -790,15 +790,13 @@
       "multiple": "Du chasch da mehrmals mache.",
       "label1": "Um es Label hinzuezfüege, schriib eifach es {prefix} vorne ane.",
       "label2": "Vikunja prüeft z'ersch, obs da Label bereits git und machst neu, falls nööd.",
-      "label3": "Um Leerzeichen zu verwenden, füge einfach ein \" oder ' um den Namen des Labels hinzu.",
+      "label3": "Um Leerschläg zverwende, setz eifach zwei \" um de Labelname.",
       "label4": "Zum Blaistift: {prefix}\"Label mit Leerschlag\".",
       "priority1": "Um e Task Priorität z'setze: füeg e nummere zwüsched 1 und 5, mit em {prefix} als Prefix iih.",
       "priority2": "Je höher d'nummere, desto höher d'Priorität.",
       "assignees": "Um die Aufgabe direkt jemandem zuzuweisen, füge vor dem Anmeldenamen der Person ein {prefix} Zeichen ein.",
       "list1": "Um e Liste ahzgeh, wo de Task drin erschiine set, gib de name vo de liste mit emne {prefix} ah.",
       "list2": "Das wird en Fehler werfe, wenn d'Liste nid existiert.",
-      "list3": "Um Leerzeichen zu verwenden, füge einfach ein \" oder ' um den Namen der Liste hinzu.",
-      "list4": "Zum Beispiel: {prefix}\"Liste mit Leerzeichen\".",
       "dateAndTime": "Datum und Ziit",
       "date": "Jedes Datum wird als Abgabedatum für di neu Uufgab gnoh. Du chasch Date i de folgende Format verwende:",
       "dateWeekday": "jede Wuchetaag wird nimmt s'negste Datum mit dem Datum",

src/i18n/lang/en.json

@@ -793,15 +793,13 @@
       "multiple": "You can use this multiple times.",
       "label1": "To add a label, simply prefix the name of the label with {prefix}.",
       "label2": "Vikunja will first check if the label already exist and create it if not.",
-      "label3": "To use spaces, simply add a \" or ' around the label name.",
+      "label3": "To use spaces, simply add a \" around the label name.",
       "label4": "For example: {prefix}\"Label with spaces\".",
       "priority1": "To set a task's priority, add a number 1-5, prefixed with a {prefix}.",
       "priority2": "The higher the number, the higher the priority.",
       "assignees": "To directly assign the task to a user, add their username prefixed with {prefix} to the task.",
       "list1": "To set a list for the task to appear in, enter its name prefixed with {prefix}.",
       "list2": "This will return an error if the list does not exist.",
-      "list3": "To use spaces, simply add a \" or ' around the list name.",
-      "list4": "For example: {prefix}\"List with spaces\".",
       "dateAndTime": "Date and time",
       "date": "Any date will be used as the due date of the new task. You can use dates in any of these formats:",
       "dateWeekday": "any weekday, will use the next date with that date",

src/i18n/lang/es-ES.json

@@ -790,15 +790,13 @@
       "multiple": "You can use this multiple times.",
       "label1": "To add a label, simply prefix the name of the label with {prefix}.",
       "label2": "Vikunja will first check if the label already exist and create it if not.",
-      "label3": "To use spaces, simply add a \" or ' around the label name.",
+      "label3": "To use spaces, simply add a \" around the label name.",
       "label4": "For example: {prefix}\"Label with spaces\".",
       "priority1": "To set a task's priority, add a number 1-5, prefixed with a {prefix}.",
       "priority2": "The higher the number, the higher the priority.",
       "assignees": "To directly assign the task to a user, add their username prefixed with {prefix} to the task.",
       "list1": "To set a list for the task to appear in, enter its name prefixed with {prefix}.",
       "list2": "This will return an error if the list does not exist.",
-      "list3": "To use spaces, simply add a \" or ' around the list name.",
-      "list4": "For example: {prefix}\"List with spaces\".",
       "dateAndTime": "Date and time",
       "date": "Any date will be used as the due date of the new task. You can use dates in any of these formats:",
       "dateWeekday": "any weekday, will use the next date with that date",

src/i18n/lang/fr-FR.json

@@ -790,15 +790,13 @@
       "multiple": "Tu peux utiliser ceci plusieurs fois.",
       "label1": "Pour ajouter une étiquette, il suffit de préfixer le nom de l’étiquette avec {prefix}.",
       "label2": "Vikunja va d’abord vérifier si l’étiquette existe déjà et la créer si ce n’est pas le cas.",
-      "label3": "To use spaces, simply add a \" or ' around the label name.",
+      "label3": "Pour utiliser des espaces, il suffit d’ajouter \" autour du nom de l’étiquette.",
       "label4": "Par exemple : {prefix}\"Étiquette avec espaces\".",
       "priority1": "Pour définir la priorité d’une tâche, ajoutez un chiffre de 1 à 5, précédé d’un {prefix}.",
       "priority2": "Plus le numéro est élevé, plus la priorité est élevée.",
       "assignees": "Pour assigner directement la tâche à un utilisateur, ajoutez son nom d'utilisateur préfixé avec {prefix} à la tâche.",
       "list1": "Pour définir une liste dans laquelle la tâche doit apparaître, entrez son nom précédé de {prefix}.",
       "list2": "Ceci renverra une erreur si la liste n’existe pas.",
-      "list3": "To use spaces, simply add a \" or ' around the list name.",
-      "list4": "For example: {prefix}\"List with spaces\".",
       "dateAndTime": "Date et heure",
       "date": "Toute date sera utilisée comme date d’échéance de la nouvelle tâche. Vous pouvez utiliser des dates dans un des formats suivants :",
       "dateWeekday": "n’importe quel jour de la semaine, utilisera la date suivante avec cette date",

src/i18n/lang/it-IT.json

@@ -790,15 +790,13 @@
       "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 \" prima e dopo del 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.",
-      "list4": "For example: {prefix}\"List with spaces\".",
       "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",

src/i18n/lang/nl-NL.json

@@ -790,15 +790,13 @@
       "multiple": "Je kan dit meerdere keren gebruiken.",
       "label1": "To add a label, simply prefix the name of the label with {prefix}.",
       "label2": "Vikunja will first check if the label already exist and create it if not.",
-      "label3": "To use spaces, simply add a \" or ' around the label name.",
+      "label3": "To use spaces, simply add a \" around the label name.",
       "label4": "For example: {prefix}\"Label with spaces\".",
       "priority1": "Om prioriteit aan een taak te geven voeg je een nummer tussen 1-5 toe, beginnend met een {prefix}.",
       "priority2": "Hoe hoger het getal, hoe hoger de prioriteit.",
       "assignees": "To directly assign the task to a user, add their username prefixed with {prefix} to the task.",
       "list1": "To set a list for the task to appear in, enter its name prefixed with {prefix}.",
       "list2": "Dit geeft een foutmelding als de lijst niet bestaat.",
-      "list3": "To use spaces, simply add a \" or ' around the list name.",
-      "list4": "For example: {prefix}\"List with spaces\".",
       "dateAndTime": "Datum en tijd",
       "date": "Any date will be used as the due date of the new task. You can use dates in any of these formats:",
       "dateWeekday": "any weekday, will use the next date with that date",

src/i18n/lang/pl-PL.json

@@ -790,15 +790,13 @@
       "multiple": "Możesz użyć tego wielokrotnie.",
       "label1": "Aby dodać etykietę, po prostu poprzedź nazwę etykiety przedrostkiem {prefix}.",
       "label2": "Vikunja najpierw sprawdzi, czy etykieta już istnieje, a jeśli nie, utworzy ją.",
-      "label3": "To use spaces, simply add a \" or ' around the label name.",
+      "label3": "Aby użyć spacji, po prostu podaj nazwę etykiety pomiędzy \".",
       "label4": "Na przykład: {prefix}\"Etykieta ze spacjami\".",
       "priority1": "Aby ustawić priorytet zadania, dodaj liczbę 1-5 poprzedzoną {prefix}.",
       "priority2": "Im większa liczba, tym wyższy priorytet.",
       "assignees": "Aby bezpośrednio przypisać zadanie użytkownikowi, dodaj nazwę użytkownika poprzedzoną przedrostkiem {prefix} do zadania.",
       "list1": "Aby ustawić listę, do której ma zostać przypisane zadanie, wprowadź jego nazwę z prefiksem {prefix}.",
       "list2": "Jeśli lista nie istnieje zostanie zwrócony błąd.",
-      "list3": "To use spaces, simply add a \" or ' around the list name.",
-      "list4": "For example: {prefix}\"List with spaces\".",
       "dateAndTime": "Data i godzina",
       "date": "Dowolna data może być użyta jako termin wykonania nowego zadania. Możesz wykorzystać datę w dowolnym z podanych formatów:",
       "dateWeekday": "dowolny dzień tygodnia spowoduje wybranie najbliższej daty przypadającej na podany dzień tygodnia",

src/i18n/lang/pt-BR.json

@@ -790,15 +790,13 @@
       "multiple": "You can use this multiple times.",
       "label1": "To add a label, simply prefix the name of the label with {prefix}.",
       "label2": "Vikunja will first check if the label already exist and create it if not.",
-      "label3": "To use spaces, simply add a \" or ' around the label name.",
+      "label3": "To use spaces, simply add a \" around the label name.",
       "label4": "For example: {prefix}\"Label with spaces\".",
       "priority1": "To set a task's priority, add a number 1-5, prefixed with a {prefix}.",
       "priority2": "The higher the number, the higher the priority.",
       "assignees": "To directly assign the task to a user, add their username prefixed with {prefix} to the task.",
       "list1": "To set a list for the task to appear in, enter its name prefixed with {prefix}.",
       "list2": "This will return an error if the list does not exist.",
-      "list3": "To use spaces, simply add a \" or ' around the list name.",
-      "list4": "For example: {prefix}\"List with spaces\".",
       "dateAndTime": "Date and time",
       "date": "Any date will be used as the due date of the new task. You can use dates in any of these formats:",
       "dateWeekday": "any weekday, will use the next date with that date",

src/i18n/lang/pt-PT.json

@@ -790,15 +790,13 @@
       "multiple": "Podes usar isto várias vezes.",
       "label1": "Para adicionar uma etiqueta, basta prefixares o nome da etiqueta com {prefix}.",
       "label2": "Vikunja irá primeiro verificar se a etiqueta já existe e criá-la se não.",
-      "label3": "Para utilizares espaços, basta adicionares um \" ou ' no início e fim do nome da etiqueta.",
+      "label3": "Para utilizares espaços, basta adicionares um \" no início e fim do nome da etiqueta.",
       "label4": "Por exemplo: {prefix}\"Etiqueta com espaços\".",
       "priority1": "Para definir a prioridade de uma tarefa, adiciona um número entre 1 a 5, prefixado com um {prefix}.",
       "priority2": "Quanto maior o número, maior a prioridade.",
       "assignees": "Para atribuires uma tarefa diretamente a um utilizador, adiciona à tarefa os seus nomes de utilizador prefixados com {prefix}.",
       "list1": "Para definir uma lista onde a tarefa deve aparecer, adiciona o seu nome prefixado com {prefix}.",
       "list2": "Isto vai retornar um erro se a lista não existir.",
-      "list3": "Para utilizares espaços, basta adicionares um \" ou ' no início e fim do nome da lista.",
-      "list4": "Por exemplo: {prefix}\"Etiqueta com espaços\".",
       "dateAndTime": "Data e hora",
       "date": "Qualquer data será utilizada como data de vencimento da nova tarefa. Podes utilizar datas em qualquer dos seguintes formatos:",
       "dateWeekday": "qualquer dia de semana, usará a próxima data com essa data",

src/i18n/lang/ro-RO.json

@@ -790,15 +790,13 @@
       "multiple": "You can use this multiple times.",
       "label1": "To add a label, simply prefix the name of the label with {prefix}.",
       "label2": "Vikunja will first check if the label already exist and create it if not.",
-      "label3": "To use spaces, simply add a \" or ' around the label name.",
+      "label3": "To use spaces, simply add a \" around the label name.",
       "label4": "For example: {prefix}\"Label with spaces\".",
       "priority1": "To set a task's priority, add a number 1-5, prefixed with a {prefix}.",
       "priority2": "The higher the number, the higher the priority.",
       "assignees": "To directly assign the task to a user, add their username prefixed with {prefix} to the task.",
       "list1": "To set a list for the task to appear in, enter its name prefixed with {prefix}.",
       "list2": "This will return an error if the list does not exist.",
-      "list3": "To use spaces, simply add a \" or ' around the list name.",
-      "list4": "For example: {prefix}\"List with spaces\".",
       "dateAndTime": "Date and time",
       "date": "Any date will be used as the due date of the new task. You can use dates in any of these formats:",
       "dateWeekday": "any weekday, will use the next date with that date",

src/i18n/lang/ru-RU.json

@@ -790,15 +790,13 @@
       "multiple": "Ты можешь использовать это несколько раз.",
       "label1": "Чтобы добавить метку, просто добавь к названию метки префикс {prefix}.",
       "label2": "Vikunja проверит, существует ли такая метка, и создаст её, если ещё нет.",
-      "label3": "To use spaces, simply add a \" or ' around the label name.",
+      "label3": "Чтобы использовать пробелы, оберни метку в \"кавычки\".",
       "label4": "Например: {prefix}\"Метка с пробелами\".",
       "priority1": "Чтобы установить задаче приоритет, добавь число 1-5 с префиксом {prefix}.",
       "priority2": "Чем больше число, тем выше приоритет.",
       "assignees": "To directly assign the task to a user, add their username prefixed with {prefix} to the task.",
       "list1": "Чтобы выбрать список, в который будет помещена создаваемая задача, введи его имя с префиксом {prefix}.",
       "list2": "Если списка не существует, будет возвращена ошибка.",
-      "list3": "To use spaces, simply add a \" or ' around the list name.",
-      "list4": "For example: {prefix}\"List with spaces\".",
       "dateAndTime": "Дата и время",
       "date": "Любая дата будет использоваться как срок выполнения новой задачи. Ты можешь использовать даты в любом из этих форматов:",
       "dateWeekday": "любой день недели, будет использовать следующую дату",

src/i18n/lang/sk-SK.json

@@ -790,15 +790,13 @@
       "multiple": "You can use this multiple times.",
       "label1": "To add a label, simply prefix the name of the label with {prefix}.",
       "label2": "Vikunja will first check if the label already exist and create it if not.",
-      "label3": "To use spaces, simply add a \" or ' around the label name.",
+      "label3": "To use spaces, simply add a \" around the label name.",
       "label4": "For example: {prefix}\"Label with spaces\".",
       "priority1": "To set a task's priority, add a number 1-5, prefixed with a {prefix}.",
       "priority2": "The higher the number, the higher the priority.",
       "assignees": "To directly assign the task to a user, add their username prefixed with {prefix} to the task.",
       "list1": "To set a list for the task to appear in, enter its name prefixed with {prefix}.",
       "list2": "This will return an error if the list does not exist.",
-      "list3": "To use spaces, simply add a \" or ' around the list name.",
-      "list4": "For example: {prefix}\"List with spaces\".",
       "dateAndTime": "Date and time",
       "date": "Any date will be used as the due date of the new task. You can use dates in any of these formats:",
       "dateWeekday": "any weekday, will use the next date with that date",

src/i18n/lang/sv-SE.json

@@ -790,15 +790,13 @@
       "multiple": "You can use this multiple times.",
       "label1": "To add a label, simply prefix the name of the label with {prefix}.",
       "label2": "Vikunja will first check if the label already exist and create it if not.",
-      "label3": "To use spaces, simply add a \" or ' around the label name.",
+      "label3": "To use spaces, simply add a \" around the label name.",
       "label4": "For example: {prefix}\"Label with spaces\".",
       "priority1": "To set a task's priority, add a number 1-5, prefixed with a {prefix}.",
       "priority2": "The higher the number, the higher the priority.",
       "assignees": "To directly assign the task to a user, add their username prefixed with {prefix} to the task.",
       "list1": "To set a list for the task to appear in, enter its name prefixed with {prefix}.",
       "list2": "This will return an error if the list does not exist.",
-      "list3": "To use spaces, simply add a \" or ' around the list name.",
-      "list4": "For example: {prefix}\"List with spaces\".",
       "dateAndTime": "Date and time",
       "date": "Any date will be used as the due date of the new task. You can use dates in any of these formats:",
       "dateWeekday": "any weekday, will use the next date with that date",

src/i18n/lang/tr-TR.json

@@ -790,15 +790,13 @@
       "multiple": "You can use this multiple times.",
       "label1": "To add a label, simply prefix the name of the label with {prefix}.",
       "label2": "Vikunja will first check if the label already exist and create it if not.",
-      "label3": "To use spaces, simply add a \" or ' around the label name.",
+      "label3": "To use spaces, simply add a \" around the label name.",
       "label4": "For example: {prefix}\"Label with spaces\".",
       "priority1": "To set a task's priority, add a number 1-5, prefixed with a {prefix}.",
       "priority2": "The higher the number, the higher the priority.",
       "assignees": "To directly assign the task to a user, add their username prefixed with {prefix} to the task.",
       "list1": "To set a list for the task to appear in, enter its name prefixed with {prefix}.",
       "list2": "This will return an error if the list does not exist.",
-      "list3": "To use spaces, simply add a \" or ' around the list name.",
-      "list4": "For example: {prefix}\"List with spaces\".",
       "dateAndTime": "Date and time",
       "date": "Any date will be used as the due date of the new task. You can use dates in any of these formats:",
       "dateWeekday": "any weekday, will use the next date with that date",

src/i18n/lang/vi-VN.json

@@ -790,15 +790,13 @@
       "multiple": "Bạn có thể sử dụng tác vụ này nhiều lần.",
       "label1": "Để thêm một nhãn, chỉ cần đặt tiền tố tên nhãn bằng {prefix}.",
       "label2": "Đầu tiên Vikunja sẽ kiểm tra xem nhãn đã tồn tại chưa và tạo nó nếu chưa.",
-      "label3": "To use spaces, simply add a \" or ' around the label name.",
+      "label3": "Để sử dụng dấu cách, chỉ cần thêm dấu \" xung quanh tên nhãn.",
       "label4": "Ví dụ: {prefix} \"Nhãn có dấu cách\".",
       "priority1": "Để đặt mức độ ưu tiên của công việc, hãy thêm số từ 1-5, có tiền tố là {prefix}.",
       "priority2": "Số càng lớn, độ ưu tiên càng cao.",
       "assignees": "Để chỉ định trực tiếp công việc cho một người, hãy thêm tên người dùng của họ có tiền tố là {prefix} vào nhiệm vụ.",
       "list1": "Để chọn danh sách trong đó nhiệm vụ sẽ xuất hiện, hãy nhập tên của nhiệm vụ trước {prefix}.",
       "list2": "Điều này sẽ trả về một lỗi nếu danh sách không tồn tại.",
-      "list3": "To use spaces, simply add a \" or ' around the list name.",
-      "list4": "For example: {prefix}\"List with spaces\".",
       "dateAndTime": "Ngày và giờ",
       "date": "Bất kỳ ngày nào sẽ được sử dụng làm ngày hết hạn của nhiệm vụ mới. Bạn có thể sử dụng ngày ở bất kỳ định dạng nào sau đây:",
       "dateWeekday": "bất kỳ ngày nào trong tuần, sẽ sử dụng ngày tiếp theo với ngày đó",

src/models/constants/priorities.ts

@@ -5,6 +5,4 @@ export const PRIORITIES = {
 	'HIGH': 3,
 	'URGENT': 4,
 	'DO_NOW': 5,
-} as const
-
-export type Priority = typeof PRIORITIES[keyof typeof PRIORITIES]
+} as const

src/models/task.ts

@@ -6,7 +6,6 @@ import AttachmentModel from './attachment'
 import SubscriptionModel from '@/models/subscription'
 import {parseDateOrNull} from '@/helpers/parseDateOrNull'
 import type ListModel from './list'
-import type { Priority } from './constants/priorities'
 
 const SUPPORTS_TRIGGERED_NOTIFICATION = 'Notification' in window && 'showTrigger' in Notification.prototype
 export const TASK_DEFAULT_COLOR = '#1973ff'
@@ -30,7 +29,7 @@ export default class TaskModel extends AbstractModel {
 	description: string
 	done: boolean
 	doneAt: Date | null
-	priority: Priority
+	priority: 0
 	labels: LabelModel[]
 	assignees: UserModel[]
 

src/models/taskRelation.ts

@@ -2,20 +2,18 @@ import AbstractModel from './abstractModel'
 import UserModel from './user'
 import type TaskModel from './task'
 
-export const RELATION_KIND = {
-	'SUBTASK': 'subtask',
-	'PARENTTASK': 'parenttask',
-	'RELATED': 'related',
-	'DUPLICATES': 'duplicates',
-	'BLOCKING': 'blocking',
-	'BLOCKED': 'blocked',
-	'PROCEDES': 'precedes',
-	'FOLLOWS': 'follows',
-	'COPIEDFROM': 'copiedfrom',
-	'COPIEDTO': 'copiedto',
- } as const
-
-export const RELATION_KINDS = [...Object.values(RELATION_KIND)] as const
+export const RELATION_KINDS = [
+	'subtask',
+	'parenttask',
+	'related',
+	'duplicates',
+	'blocking',
+	'blocked',
+	'precedes',
+	'follows',
+	'copiedfrom',
+	'copiedto',
+  ] as const
 
 export type RelationKind = typeof RELATION_KINDS[number]
 

src/modules/parseTaskText.test.ts

@@ -122,18 +122,6 @@ describe('Parse Task Text', () => {
 			expect(result.date.getMonth()).toBe(nextMonday.getMonth())
 			expect(result.date.getDate()).toBe(nextMonday.getDate())
 		})
-		it('should recognize next monday and ignore casing', () => {
-			const result = parseTaskText('Lorem Ipsum nExt Monday')
-
-			const untilNextMonday = calculateDayInterval('nextMonday')
-
-			expect(result.text).toBe('Lorem Ipsum')
-			const nextMonday = new Date()
-			nextMonday.setDate(nextMonday.getDate() + untilNextMonday)
-			expect(result.date.getFullYear()).toBe(nextMonday.getFullYear())
-			expect(result.date.getMonth()).toBe(nextMonday.getMonth())
-			expect(result.date.getDate()).toBe(nextMonday.getDate())
-		})
 		it('should recognize this weekend', () => {
 			const result = parseTaskText('Lorem Ipsum this weekend')
 
@@ -213,47 +201,14 @@ describe('Parse Task Text', () => {
 			expect(result.date.getMonth()).toBe(date.getMonth())
 			expect(result.date.getDate()).toBe(date.getDate())
 		})
+		it('should recognize weekdays', () => {
+			const result = parseTaskText('Lorem Ipsum thu')
 
-		const cases = {
-			'monday': 1,
-			'Monday': 1,
-			'mon': 1,
-			'Mon': 1,
-			'tuesday': 2,
-			'Tuesday': 2,
-			'tue': 2,
-			'Tue': 2,
-			'wednesday': 3,
-			'Wednesday': 3,
-			'wed': 3,
-			'Wed': 3,
-			'thursday': 4,
-			'Thursday': 4,
-			'thu': 4,
-			'Thu': 4,
-			'friday': 5,
-			'Friday': 5,
-			'fri': 5,
-			'Fri': 5,
-			'saturday': 6,
-			'Saturday': 6,
-			'sat': 6,
-			'Sat': 6,
-			'sunday': 7,
-			'Sunday': 7,
-			'sun': 7,
-			'Sun': 7,
-		}
-		for (const c in cases) {
-			it(`should recognize ${c} as weekday`, () => {
-				const result = parseTaskText(`Lorem Ipsum ${c}`)
-
-				expect(result.text).toBe('Lorem Ipsum')
-				const nextDate = new Date()
-				nextDate.setDate(nextDate.getDate() + ((cases[c] + 7 - nextDate.getDay()) % 7))
-				expect(`${result.date.getFullYear()}-${result.date.getMonth()}-${result.date.getDate()}`).toBe(`${nextDate.getFullYear()}-${nextDate.getMonth()}-${nextDate.getDate()}`)
-			})
-		}
+			expect(result.text).toBe('Lorem Ipsum')
+			const nextThursday = new Date()
+			nextThursday.setDate(nextThursday.getDate() + ((4 + 7 - nextThursday.getDay()) % 7))
+			expect(`${result.date.getFullYear()}-${result.date.getMonth()}-${result.date.getDate()}`).toBe(`${nextThursday.getFullYear()}-${nextThursday.getMonth()}-${nextThursday.getDate()}`)
+		})
 		it('should recognize weekdays with time', () => {
 			const result = parseTaskText('Lorem Ipsum thu at 14:00')
 

src/modules/parseTaskText.ts

@@ -47,7 +47,7 @@ interface repeatParsedResult {
 	repeats: Repeats | null,
 }
 
-export interface ParsedTaskText {
+interface ParsedTaskText {
 	text: string,
 	date: Date | null,
 	labels: string[],

src/services/abstractService.ts

@@ -2,8 +2,6 @@ import axios, {Method} from 'axios'
 import {objectToSnakeCase} from '@/helpers/case'
 import {getToken} from '@/helpers/auth'
 import AbstractModel from '@/models/abstractModel'
-import type { Right } from '@/models/constants/rights'
-import type FileModel from '@/models/file'
 
 interface Paths {
 	create : string
@@ -21,7 +19,7 @@ function convertObject(o: Record<string, unknown>) {
 	return o
 }
 
-function prepareParams(params: Record<string, unknown | unknown[]>) {
+function prepareParams(params: Record<string, unknown | any[]>) {
 	if (typeof params !== 'object') {
 		return params
 	}
@@ -38,7 +36,7 @@ function prepareParams(params: Record<string, unknown | unknown[]>) {
 	return objectToSnakeCase(params)
 }
 
-export default class AbstractService<Model extends AbstractModel = AbstractModel> {
+export default class AbstractService<Model extends AbstractModel> {
 
 	/////////////////////////////
 	// Initial variable definitions
@@ -135,8 +133,8 @@ export default class AbstractService<Model extends AbstractModel = AbstractModel
 	/**
 	 * Returns an object with all route parameters and their values.
 	 */
-	getRouteReplacements(route : string, parameters : Record<string, unknown> = {}) {
-		const replace$$1: Record<string, unknown> = {}
+	getRouteReplacements(route : string, parameters = {}) {
+		const replace$$1: {} = {}
 		let pattern = this.getRouteParameterPattern()
 		pattern = new RegExp(pattern instanceof RegExp ? pattern.source : pattern, 'g')
 
@@ -172,7 +170,7 @@ export default class AbstractService<Model extends AbstractModel = AbstractModel
 	 * But because the timeout is created using setTimeout, it will still trigger even if the request is
 	 * already finished, so we return a method to call in that case.
 	 */
-	setLoading() {
+	setLoading(): Function {
 		const timeout = setTimeout(() => {
 			this.loading = true
 		}, 100)
@@ -278,7 +276,7 @@ export default class AbstractService<Model extends AbstractModel = AbstractModel
 	 * This is a more abstract implementation which only does a get request.
 	 * Services which need more flexibility can use this.
 	 */
-	async getM(url : string, model = new AbstractModel({}) as Model, params: Record<string, unknown> = {}) {
+	async getM(url : string, model = new AbstractModel({}), params = {}) {
 		const cancel = this.setLoading()
 
 		model = this.beforeGet(model)
@@ -287,7 +285,7 @@ export default class AbstractService<Model extends AbstractModel = AbstractModel
 		try {
 			const response = await this.http.get(finalUrl, {params: prepareParams(params)})
 			const result = this.modelGetFactory(response.data)
-			result.maxRight = Number(response.headers['x-max-right']) as Right
+			result.maxRight = Number(response.headers['x-max-right'])
 			return result
 		} finally {
 			cancel()
@@ -311,7 +309,7 @@ export default class AbstractService<Model extends AbstractModel = AbstractModel
 	 * @param params Optional query parameters
 	 * @param page The page to get
 	 */
-	async getAll(model : Model = new AbstractModel({}) as Model, params = {}, page = 1) {
+	async getAll(model : Model = new AbstractModel({}), params = {}, page = 1) {
 		if (this.paths.getAll === '') {
 			throw new Error('This model is not able to get data.')
 		}
@@ -417,10 +415,10 @@ export default class AbstractService<Model extends AbstractModel = AbstractModel
 	/**
 	 * Uploads a file to a url.
 	 * @param url
-	 * @param file {FileModel}
+	 * @param file
 	 * @param fieldName The name of the field the file is uploaded to.
 	 */
-	uploadFile(url : string, file: FileModel, fieldName : string) {
+	uploadFile(url : string, file, fieldName : string) {
 		return this.uploadBlob(url, new Blob([file]), fieldName, file.name)
 	}
 
@@ -436,7 +434,7 @@ export default class AbstractService<Model extends AbstractModel = AbstractModel
 	/**
 	 * Uploads a form data object.
 	 */
-	async uploadFormData(url : string, formData: FormData) {
+	async uploadFormData(url : string, formData: Record<string, unknown>) {
 		const cancel = this.setLoading()
 		try {
 			const response = await this.http.put(

src/services/attachment.ts

@@ -2,9 +2,8 @@ import AbstractService from './abstractService'
 import AttachmentModel from '../models/attachment'
 import {formatISO} from 'date-fns'
 import {downloadBlob} from '@/helpers/downloadBlob'
-import type FileModel from '@/models/file'
 
-export default class AttachmentService extends AbstractService<AttachmentModel> {
+export default class AttachmentService extends AbstractService {
 	constructor() {
 		super({
 			create: '/tasks/{taskId}/attachments',
@@ -13,7 +12,7 @@ export default class AttachmentService extends AbstractService<AttachmentModel>
 		})
 	}
 
-	processModel(model: AttachmentModel) {
+	processModel(model) {
 		model.created = formatISO(new Date(model.created))
 		return model
 	}
@@ -34,25 +33,26 @@ export default class AttachmentService extends AbstractService<AttachmentModel>
 		return data
 	}
 
-	getBlobUrl(model: AttachmentModel) {
+	getBlobUrl(model) {
 		return AbstractService.prototype.getBlobUrl.call(this, '/tasks/' + model.taskId + '/attachments/' + model.id)
 	}
 
-	async download(model: AttachmentModel) {
+	async download(model) {
 		const url = await this.getBlobUrl(model)
 		return downloadBlob(url, model.file.name)
 	}
 
 	/**
 	 * Uploads a file to the server
+	 * @param model
 	 * @param files
 	 * @returns {Promise<any|never>}
 	 */
-	create(model: AttachmentModel, files: FileModel[]) {
+	create(model, files) {
 		const data = new FormData()
 		for (let i = 0; i < files.length; i++) {
 			// TODO: Validation of file size
-			data.append('files', new Blob([JSON.stringify(files[i], null, 2)]), files[i].name)
+			data.append('files', new Blob([files[i]]), files[i].name)
 		}
 
 		return this.uploadFormData(

src/services/backgroundUpload.ts

@@ -1,6 +1,5 @@
 import AbstractService from './abstractService'
 import ListModel from '../models/list'
-import type FileModel from '@/models/file'
 
 export default class BackgroundUploadService extends AbstractService {
 	constructor() {
@@ -19,10 +18,11 @@ export default class BackgroundUploadService extends AbstractService {
 
 	/**
 	 * Uploads a file to the server
+	 * @param listId
 	 * @param file
 	 * @returns {Promise<any|never>}
 	 */
-	create(listId: ListModel['id'], file: FileModel) {
+	create(listId: ListModel['id'], file) {
 		return this.uploadFile(
 			this.getReplacedRoute(this.paths.create, {listId}),
 			file,

src/services/task.ts

@@ -113,7 +113,7 @@ export default class TaskService extends AbstractService {
 			model.labels = model.labels.map(l => labelService.processModel(l))
 		}
 
-		return model as TaskModel
+		return model
 	}
 }
 

src/store/modules/kanban.ts

@@ -318,7 +318,7 @@ export default {
 			const oldBucket = cloneDeep(ctx.state.buckets[bucketIndex])
 
 			const updatedBucket = {
-				...oldBucket,
+				...ctx.state.buckets[bucketIndex],
 				...updatedBucketData,
 			}
 

src/store/modules/tasks.ts

@@ -16,6 +16,7 @@ import LabelTask from '@/models/labelTask'
 import LabelModel from '@/models/label'
 import UserService from '@/services/user'
 
+
 // IDEA: maybe use a small fuzzy search here to prevent errors
 function findPropertyByValue(object, key, value) {
 	return Object.values(object).find(
@@ -285,13 +286,12 @@ export default {
 			return foundListId
 		},
 
-		async createNewTask({dispatch, commit}, { 
+		async createNewTask({dispatch}, { 
 			title,
 			bucketId,
 			listId,
 			position,
 		}) {
-			setLoading({commit}, 'tasks')
 			const parsedTask = parseTaskText(title, getQuickAddMagicMode())
 		
 			const foundListId = await dispatch('findListId', {

src/styles/common-imports.scss

@@ -24,6 +24,9 @@ $vikunja-font: 'Quicksand', sans-serif;
 $pagination-current-border: var(--primary);
 $navbar-item-active-color: var(--primary);
 
+$dropdown-content-shadow: none;
+$dropdown-item-hover-background-color: var(--grey-100);
+
 $site-background: var(--grey-100);
 
 $transition-duration: 150ms;

src/styles/global.scss

@@ -44,7 +44,7 @@
 // imports from "bulma-css-variables/sass/components/_all";
 // @import "bulma-css-variables/sass/components/breadcrumb"; // not used
 @import "bulma-css-variables/sass/components/card";
-// @import "bulma-css-variables/sass/components/dropdown"; // moved to component
+@import "bulma-css-variables/sass/components/dropdown";
 // @import "bulma-css-variables/sass/components/level"; // not used
 @import "bulma-css-variables/sass/components/media"; 
 @import "bulma-css-variables/sass/components/menu";

src/styles/theme/theme.scss

@@ -91,6 +91,34 @@ button.table {
   margin-bottom: 0 !important;
 }
 
+// FIXME: merge with dropdown-item.vue
+// for this to happen the component has to be used everywhere
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  justify-content: left !important;
+
+  .icon {
+    padding-right: .5rem;
+  }
+
+  .icon:not(.has-text-success) {
+    color: var(--grey-300) !important;
+  }
+
+  &.has-text-danger .icon {
+    color: var(--danger) !important;
+  }
+
+  &.is-disabled {
+    cursor: not-allowed;
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+}
+
 .is-max-width-desktop {
   width: 100%;
   max-width: $desktop;

src/views/filters/FilterEdit.vue

@@ -52,11 +52,11 @@
 </template>
 
 <script setup lang="ts">
-import {ref, shallowRef, computed, watch, unref } from 'vue'
-import {useRouter, useRoute} from 'vue-router'
-import {store} from '@/store'
-import {success}  from '@/message'
-import {useI18n} from 'vue-i18n'
+import { ref, shallowRef, computed, watch, unref } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { store } from '@/store'
+import { success }  from '@/message'
+import { useI18n } from 'vue-i18n'
 import type {MaybeRef} from '@vueuse/core'
 
 import {default as Editor} from '@/components/input/AsyncEditor'
@@ -70,7 +70,7 @@ import {objectToSnakeCase} from '@/helpers/case'
 import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
 import type ListModel from '@/models/list'
 
-const {t} = useI18n({useScope: 'global'})
+const { t } = useI18n({useScope: 'global'})
 
 function useSavedFilter(listId: MaybeRef<ListModel['id']>) {
 	const filterService = shallowRef(new SavedFilterService())
@@ -82,24 +82,24 @@ function useSavedFilter(listId: MaybeRef<ListModel['id']>) {
 			filter.value.filters = value
 		},
 	})
-
+	
 	// loadSavedFilter
 	watch(() => unref(listId), async () => {
 		// We assume the listId in the route is the pseudolist
 		const savedFilterId = getSavedFilterIdFromListId(Number(route.params.listId as string))
 
-		filter.value = new SavedFilterModel({id: savedFilterId})
+		filter.value = new SavedFilterModel({id: savedFilterId })
 		const response = await filterService.value.get(filter.value)
-		response.filters = objectToSnakeCase(response.filters)
+		response.filters = objectToSnakeCase(filter.value.filters)
 		filter.value = response
-	}, {immediate: true})
+	}, { immediate: true })
 
 	async function save() {
 		filter.value.filters = filters.value
 		const response = await filterService.value.update(filter.value)
 		await store.dispatch('namespaces/loadNamespaces')
 		success({message: t('filters.edit.success')})
-		response.filters = objectToSnakeCase(response.filters)
+		response.filters = objectToSnakeCase(filter.value.filters)
 		filter.value = response
 	}
 
@@ -122,7 +122,6 @@ const {
 } = useSavedFilter(listId)
 
 const router = useRouter()
-
 async function saveSavedFilter() {
 	await save()
 	router.back()

src/views/list/ListKanban.vue

@@ -25,7 +25,7 @@
 				@start="() => dragBucket = true"
 				group="buckets"
 				:disabled="!canWrite"
-				tag="ul"
+				tag="transition-group"
 				:item-key="({id}) => `bucket${id}`"
 				:component-data="bucketDraggableComponentData"
 			>
@@ -62,8 +62,9 @@
 								trigger-icon="ellipsis-v"
 								@close="() => showSetLimitInput = false"
 							>
-								<dropdown-item
+								<a
 									@click.stop="showSetLimitInput = true"
+									class="dropdown-item"
 								>
 									<div class="field has-addons" v-if="showSetLimitInput">
 										<div class="control">
@@ -92,32 +93,34 @@
 											$t('list.kanban.limit', {limit: bucket.limit > 0 ? bucket.limit : $t('list.kanban.noLimit')})
 										}}
 									</template>
-								</dropdown-item>
-								<dropdown-item
+								</a>
+								<a
 									@click.stop="toggleDoneBucket(bucket)"
+									class="dropdown-item"
 									v-tooltip="$t('list.kanban.doneBucketHintExtended')"
 								>
 									<span class="icon is-small" :class="{'has-text-success': bucket.isDoneBucket}">
 										<icon icon="check-double"/>
 									</span>
 									{{ $t('list.kanban.doneBucket') }}
-								</dropdown-item>
-								<dropdown-item
+								</a>
+								<a
+									class="dropdown-item"
 									@click.stop="() => collapseBucket(bucket)"
 								>
 									{{ $t('list.kanban.collapse') }}
-								</dropdown-item>
-								<dropdown-item
+								</a>
+								<a
 									:class="{'is-disabled': buckets.length <= 1}"
 									@click.stop="() => deleteBucketModal(bucket.id)"
-									class="has-text-danger"
+									class="dropdown-item has-text-danger"
 									v-tooltip="buckets.length <= 1 ? $t('list.kanban.deleteLast') : ''"
 								>
 									<span class="icon is-small">
 										<icon icon="trash-alt"/>
 									</span>
 									{{ $t('misc.delete') }}
-								</dropdown-item>
+								</a>
 							</dropdown>
 						</div>
 
@@ -130,17 +133,17 @@
 							:group="{name: 'tasks', put: shouldAcceptDrop(bucket) && !dragBucket}"
 							:disabled="!canWrite"
 							:data-bucket-index="bucketIndex"
-							tag="ul"
+							tag="transition-group"
 							:item-key="(task) => `bucket${bucket.id}-task${task.id}`"
 							:component-data="getTaskDraggableTaskComponentData(bucket)"
 						>
 							<template #footer>
 								<div class="bucket-footer" v-if="canWrite">
 									<div class="field" v-if="showNewTaskInput[bucket.id]">
-										<div class="control" :class="{'is-loading': loading || taskLoading}">
+										<div class="control" :class="{'is-loading': loading}">
 											<input
 												class="input"
-												:disabled="loading || taskLoading || undefined"
+												:disabled="loading || undefined"
 												@focusout="toggleShowNewTaskInput(bucket.id)"
 												@keyup.enter="addTaskToBucket(bucket.id)"
 												@keyup.esc="toggleShowNewTaskInput(bucket.id)"
@@ -169,7 +172,7 @@
 
 							<template #item="{element: task}">
 								<div class="task-item">
-									<kanban-card class="kanban-card" :task="task" :loading="taskUpdating[task.id] ?? false"/>
+									<kanban-card class="kanban-card" :task="task"/>
 								</div>
 							</template>
 						</draggable>
@@ -238,7 +241,6 @@ import Dropdown from '@/components/misc/dropdown.vue'
 import {getCollapsedBucketState, saveCollapsedBucketState} from '@/helpers/saveCollapsedBucketState'
 import {calculateItemPosition} from '../../helpers/calculateItemPosition'
 import KanbanCard from '@/components/tasks/partials/kanban-card.vue'
-import DropdownItem from '@/components/misc/dropdown-item.vue'
 
 const DRAG_OPTIONS = {
 	// sortable options
@@ -254,7 +256,6 @@ const MIN_SCROLL_HEIGHT_PERCENT = 0.25
 export default defineComponent({
 	name: 'Kanban',
 	components: {
-		DropdownItem,
 		ListWrapper,
 		KanbanCard,
 		Dropdown,
@@ -315,7 +316,8 @@ export default defineComponent({
 			return (bucket) => ({
 				ref: (el) => this.setTaskContainerRef(bucket.id, el),
 				onScroll: (event) => this.handleTaskContainerScroll(bucket.id, bucket.listId, event.target),
-				type: 'transition-group',
+				type: 'transition',
+				tag: 'div',
 				name: !this.drag ? 'move-card' : null,
 				class: [
 					'tasks',
@@ -335,7 +337,8 @@ export default defineComponent({
 		},
 		bucketDraggableComponentData() {
 			return {
-				type: 'transition-group',
+				type: 'transition',
+				tag: 'div',
 				name: !this.dragBucket ? 'move-bucket' : null,
 				class: [
 					'kanban-bucket-container',
@@ -405,6 +408,7 @@ export default defineComponent({
 			// of the drop target works all the time.
 			const bucketIndex = parseInt(e.to.dataset.bucketIndex)
 
+
 			const newBucket = this.buckets[bucketIndex]
 
 			// HACK:
@@ -423,30 +427,13 @@ export default defineComponent({
 			const task = newBucket.tasks[newTaskIndex]
 			const taskBefore = newBucket.tasks[newTaskIndex - 1] ?? null
 			const taskAfter = newBucket.tasks[newTaskIndex + 1] ?? null
-			this.taskUpdating[task.id] = true
 
 			const newTask = cloneDeep(task) // cloning the task to avoid vuex store mutations
-			newTask.bucketId = newBucket.id
-			newTask.kanbanPosition = calculateItemPosition(
-				taskBefore !== null ? taskBefore.kanbanPosition : null,
-				taskAfter !== null ? taskAfter.kanbanPosition : null,
-			)
+			newTask.bucketId = newBucket.id,
+				newTask.kanbanPosition = calculateItemPosition(taskBefore !== null ? taskBefore.kanbanPosition : null, taskAfter !== null ? taskAfter.kanbanPosition : null)
 
 			try {
 				await this.$store.dispatch('tasks/update', newTask)
-				
-				// Make sure the first and second task don't both get position 0 assigned
-				if(newTaskIndex === 0 && taskAfter !== null && taskAfter.kanbanPosition === 0) {
-					const taskAfterAfter = newBucket.tasks[newTaskIndex + 2] ?? null
-					const newTaskAfter = cloneDeep(taskAfter) // cloning the task to avoid vuex store mutations
-					newTaskAfter.bucketId = newBucket.id
-					newTaskAfter.kanbanPosition = calculateItemPosition(
-						0,
-						taskAfterAfter !== null ? taskAfterAfter.kanbanPosition : null,
-					)
-
-					await this.$store.dispatch('tasks/update', newTaskAfter)
-				}
 			} finally {
 				this.taskUpdating[task.id] = false
 				this.oneTaskUpdating = false
@@ -463,7 +450,7 @@ export default defineComponent({
 				return
 			}
 			this.newTaskError[bucketId] = false
-			
+
 			const task = await this.$store.dispatch('tasks/createNewTask', {
 				title: this.newTaskText,
 				bucketId,
@@ -727,6 +714,10 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 			}
 		}
 
+		a.dropdown-item {
+			padding-right: 1rem;
+		}
+
 		&.is-collapsed {
 			align-self: flex-start;
 			transform: rotate(90deg) translateY(-100%);

src/views/list/ListList.vue

@@ -54,7 +54,7 @@
 		>
 		<card :padding="false" :has-content="false" class="has-overflow">
 			<template
-				v-if="!list.isArchived && canWrite"
+				v-if="!list.isArchived && canWrite && list.id > 0"
 			>
 				<add-task
 					@taskAdded="updateTaskList"
@@ -84,17 +84,14 @@
 						handle=".handle"
 						:disabled="!canWrite"
 						item-key="id"
-						tag="ul"
 						:component-data="{
 							class: { 'dragging-disabled': !canWrite || isAlphabeticalSorting },
-							type: 'transition-group'
 						}"
 					>
 						<template #item="{element: t}">
 							<single-task-in-list
 								:show-list-color="false"
 								:disabled="!canWrite"
-								:can-mark-as-done="canWrite || (list.isSavedFilter && list.isSavedFilter())"
 								:the-task="t"
 								@taskUpdated="updateTasks"
 							>
@@ -218,9 +215,7 @@ export default defineComponent({
 		// 	isTaskEdit.value = false
 		// }
 
-		const taskList = useTaskList(toRef(props, 'listId'), {
-			position: 'asc',
-		})
+		const taskList = useTaskList(toRef(props, 'listId'))
 
 		return {
 			taskEditTask,

src/views/list/ListTable.vue

@@ -2,187 +2,187 @@
 	<ListWrapper class="list-table" :list-id="listId" viewName="table">
 		<template #header>
 			<div class="filter-container">
-				<div class="items">
-					<popup>
-						<template #trigger="{toggle}">
-							<x-button
-								@click.prevent.stop="toggle()"
-								icon="th"
-								variant="secondary"
-							>
-								{{ $t('list.table.columns') }}
-							</x-button>
-						</template>
-						<template #content="{isOpen}">
-							<card class="columns-filter" :class="{'is-open': isOpen}">
-								<fancycheckbox v-model="activeColumns.id">#</fancycheckbox>
-								<fancycheckbox v-model="activeColumns.done">
-									{{ $t('task.attributes.done') }}
-								</fancycheckbox>
-								<fancycheckbox v-model="activeColumns.title">
-									{{ $t('task.attributes.title') }}
-								</fancycheckbox>
-								<fancycheckbox v-model="activeColumns.priority">
-									{{ $t('task.attributes.priority') }}
-								</fancycheckbox>
-								<fancycheckbox v-model="activeColumns.labels">
-									{{ $t('task.attributes.labels') }}
-								</fancycheckbox>
-								<fancycheckbox v-model="activeColumns.assignees">
-									{{ $t('task.attributes.assignees') }}
-								</fancycheckbox>
-								<fancycheckbox v-model="activeColumns.dueDate">
-									{{ $t('task.attributes.dueDate') }}
-								</fancycheckbox>
-								<fancycheckbox v-model="activeColumns.startDate">
-									{{ $t('task.attributes.startDate') }}
-								</fancycheckbox>
-								<fancycheckbox v-model="activeColumns.endDate">
-									{{ $t('task.attributes.endDate') }}
-								</fancycheckbox>
-								<fancycheckbox v-model="activeColumns.percentDone">
-									{{ $t('task.attributes.percentDone') }}
-								</fancycheckbox>
-								<fancycheckbox v-model="activeColumns.created">
-									{{ $t('task.attributes.created') }}
-								</fancycheckbox>
-								<fancycheckbox v-model="activeColumns.updated">
-									{{ $t('task.attributes.updated') }}
-								</fancycheckbox>
-								<fancycheckbox v-model="activeColumns.createdBy">
-									{{ $t('task.attributes.createdBy') }}
-								</fancycheckbox>
-							</card>
-						</template>
-					</popup>
-					<filter-popup v-model="params"/>
-				</div>
+			<div class="items">
+				<popup>
+					<template #trigger="{toggle}">
+						<x-button
+							@click.prevent.stop="toggle()"
+							icon="th"
+							variant="secondary"
+						>
+							{{ $t('list.table.columns') }}
+						</x-button>
+					</template>
+					<template #content="{isOpen}">
+						<card class="columns-filter" :class="{'is-open': isOpen}">
+							<fancycheckbox v-model="activeColumns.id">#</fancycheckbox>
+							<fancycheckbox v-model="activeColumns.done">
+								{{ $t('task.attributes.done') }}
+							</fancycheckbox>
+							<fancycheckbox v-model="activeColumns.title">
+								{{ $t('task.attributes.title') }}
+							</fancycheckbox>
+							<fancycheckbox v-model="activeColumns.priority">
+								{{ $t('task.attributes.priority') }}
+							</fancycheckbox>
+							<fancycheckbox v-model="activeColumns.labels">
+								{{ $t('task.attributes.labels') }}
+							</fancycheckbox>
+							<fancycheckbox v-model="activeColumns.assignees">
+								{{ $t('task.attributes.assignees') }}
+							</fancycheckbox>
+							<fancycheckbox v-model="activeColumns.dueDate">
+								{{ $t('task.attributes.dueDate') }}
+							</fancycheckbox>
+							<fancycheckbox v-model="activeColumns.startDate">
+								{{ $t('task.attributes.startDate') }}
+							</fancycheckbox>
+							<fancycheckbox v-model="activeColumns.endDate">
+								{{ $t('task.attributes.endDate') }}
+							</fancycheckbox>
+							<fancycheckbox v-model="activeColumns.percentDone">
+								{{ $t('task.attributes.percentDone') }}
+							</fancycheckbox>
+							<fancycheckbox v-model="activeColumns.created">
+								{{ $t('task.attributes.created') }}
+							</fancycheckbox>
+							<fancycheckbox v-model="activeColumns.updated">
+								{{ $t('task.attributes.updated') }}
+							</fancycheckbox>
+							<fancycheckbox v-model="activeColumns.createdBy">
+								{{ $t('task.attributes.createdBy') }}
+							</fancycheckbox>
+						</card>
+					</template>
+				</popup>
+				<filter-popup v-model="params" />
+			</div>
 			</div>
 		</template>
 
 		<template #default>
 			<div :class="{'is-loading': loading}" class="loader-container">
-				<card :padding="false" :has-content="false">
-					<div class="has-horizontal-overflow">
-						<table class="table has-actions is-hoverable is-fullwidth mb-0">
-							<thead>
-							<tr>
-								<th v-if="activeColumns.id">
-									#
-									<Sort :order="sortBy.id" @click="sort('id')"/>
-								</th>
-								<th v-if="activeColumns.done">
-									{{ $t('task.attributes.done') }}
-									<Sort :order="sortBy.done" @click="sort('done')"/>
-								</th>
-								<th v-if="activeColumns.title">
-									{{ $t('task.attributes.title') }}
-									<Sort :order="sortBy.title" @click="sort('title')"/>
-								</th>
-								<th v-if="activeColumns.priority">
-									{{ $t('task.attributes.priority') }}
-									<Sort :order="sortBy.priority" @click="sort('priority')"/>
-								</th>
-								<th v-if="activeColumns.labels">
-									{{ $t('task.attributes.labels') }}
-								</th>
-								<th v-if="activeColumns.assignees">
-									{{ $t('task.attributes.assignees') }}
-								</th>
-								<th v-if="activeColumns.dueDate">
-									{{ $t('task.attributes.dueDate') }}
-									<Sort :order="sortBy.due_date" @click="sort('due_date')"/>
-								</th>
-								<th v-if="activeColumns.startDate">
-									{{ $t('task.attributes.startDate') }}
-									<Sort :order="sortBy.start_date" @click="sort('start_date')"/>
-								</th>
-								<th v-if="activeColumns.endDate">
-									{{ $t('task.attributes.endDate') }}
-									<Sort :order="sortBy.end_date" @click="sort('end_date')"/>
-								</th>
-								<th v-if="activeColumns.percentDone">
-									{{ $t('task.attributes.percentDone') }}
-									<Sort :order="sortBy.percent_done" @click="sort('percent_done')"/>
-								</th>
-								<th v-if="activeColumns.created">
-									{{ $t('task.attributes.created') }}
-									<Sort :order="sortBy.created" @click="sort('created')"/>
-								</th>
-								<th v-if="activeColumns.updated">
-									{{ $t('task.attributes.updated') }}
-									<Sort :order="sortBy.updated" @click="sort('updated')"/>
-								</th>
-								<th v-if="activeColumns.createdBy">
-									{{ $t('task.attributes.createdBy') }}
-								</th>
-							</tr>
-							</thead>
-							<tbody>
-							<tr :key="t.id" v-for="t in tasks">
-								<td v-if="activeColumns.id">
-									<router-link :to="taskDetailRoutes[t.id]">
-										<template v-if="t.identifier === ''">
-											#{{ t.index }}
-										</template>
-										<template v-else>
-											{{ t.identifier }}
-										</template>
-									</router-link>
-								</td>
-								<td v-if="activeColumns.done">
-									<Done :is-done="t.done" variant="small"/>
-								</td>
-								<td v-if="activeColumns.title">
-									<router-link :to="taskDetailRoutes[t.id]">{{ t.title }}</router-link>
-								</td>
-								<td v-if="activeColumns.priority">
-									<priority-label :priority="t.priority" :done="t.done" :show-all="true"/>
-								</td>
-								<td v-if="activeColumns.labels">
-									<labels :labels="t.labels"/>
-								</td>
-								<td v-if="activeColumns.assignees">
-									<user
-										:avatar-size="27"
-										:is-inline="true"
-										:key="t.id + 'assignee' + a.id + i"
-										:show-username="false"
-										:user="a"
-										v-for="(a, i) in t.assignees"
-									/>
-								</td>
-								<date-table-cell :date="t.dueDate" v-if="activeColumns.dueDate"/>
-								<date-table-cell :date="t.startDate" v-if="activeColumns.startDate"/>
-								<date-table-cell :date="t.endDate" v-if="activeColumns.endDate"/>
-								<td v-if="activeColumns.percentDone">{{ t.percentDone * 100 }}%</td>
-								<date-table-cell :date="t.created" v-if="activeColumns.created"/>
-								<date-table-cell :date="t.updated" v-if="activeColumns.updated"/>
-								<td v-if="activeColumns.createdBy">
-									<user
-										:avatar-size="27"
-										:show-username="false"
-										:user="t.createdBy"/>
-								</td>
-							</tr>
-							</tbody>
-						</table>
-					</div>
+			<card :padding="false" :has-content="false">
+			<div class="has-horizontal-overflow">
+				<table class="table has-actions is-hoverable is-fullwidth mb-0">
+					<thead>
+					<tr>
+						<th v-if="activeColumns.id">
+							#
+							<Sort :order="sortBy.id" @click="sort('id')"/>
+						</th>
+						<th v-if="activeColumns.done">
+							{{ $t('task.attributes.done') }}
+							<Sort :order="sortBy.done" @click="sort('done')"/>
+						</th>
+						<th v-if="activeColumns.title">
+							{{ $t('task.attributes.title') }}
+							<Sort :order="sortBy.title" @click="sort('title')"/>
+						</th>
+						<th v-if="activeColumns.priority">
+							{{ $t('task.attributes.priority') }}
+							<Sort :order="sortBy.priority" @click="sort('priority')"/>
+						</th>
+						<th v-if="activeColumns.labels">
+							{{ $t('task.attributes.labels') }}
+						</th>
+						<th v-if="activeColumns.assignees">
+							{{ $t('task.attributes.assignees') }}
+						</th>
+						<th v-if="activeColumns.dueDate">
+							{{ $t('task.attributes.dueDate') }}
+							<Sort :order="sortBy.due_date" @click="sort('due_date')"/>
+						</th>
+						<th v-if="activeColumns.startDate">
+							{{ $t('task.attributes.startDate') }}
+							<Sort :order="sortBy.start_date" @click="sort('start_date')"/>
+						</th>
+						<th v-if="activeColumns.endDate">
+							{{ $t('task.attributes.endDate') }}
+							<Sort :order="sortBy.end_date" @click="sort('end_date')"/>
+						</th>
+						<th v-if="activeColumns.percentDone">
+							{{ $t('task.attributes.percentDone') }}
+							<Sort :order="sortBy.percent_done" @click="sort('percent_done')"/>
+						</th>
+						<th v-if="activeColumns.created">
+							{{ $t('task.attributes.created') }}
+							<Sort :order="sortBy.created" @click="sort('created')"/>
+						</th>
+						<th v-if="activeColumns.updated">
+							{{ $t('task.attributes.updated') }}
+							<Sort :order="sortBy.updated" @click="sort('updated')"/>
+						</th>
+						<th v-if="activeColumns.createdBy">
+							{{ $t('task.attributes.createdBy') }}
+						</th>
+					</tr>
+					</thead>
+					<tbody>
+					<tr :key="t.id" v-for="t in tasks">
+						<td v-if="activeColumns.id">
+							<router-link :to="taskDetailRoutes[t.id]">
+								<template v-if="t.identifier === ''">
+									#{{ t.index }}
+								</template>
+								<template v-else>
+									{{ t.identifier }}
+								</template>
+							</router-link>
+						</td>
+						<td v-if="activeColumns.done">
+							<Done :is-done="t.done" variant="small" />
+						</td>
+						<td v-if="activeColumns.title">
+							<router-link :to="taskDetailRoutes[t.id]">{{ t.title }}</router-link>
+						</td>
+						<td v-if="activeColumns.priority">
+							<priority-label :priority="t.priority" :done="t.done" :show-all="true"/>
+						</td>
+						<td v-if="activeColumns.labels">
+							<labels :labels="t.labels"/>
+						</td>
+						<td v-if="activeColumns.assignees">
+							<user
+								:avatar-size="27"
+								:is-inline="true"
+								:key="t.id + 'assignee' + a.id + i"
+								:show-username="false"
+								:user="a"
+								v-for="(a, i) in t.assignees"
+							/>
+						</td>
+						<date-table-cell :date="t.dueDate" v-if="activeColumns.dueDate"/>
+						<date-table-cell :date="t.startDate" v-if="activeColumns.startDate"/>
+						<date-table-cell :date="t.endDate" v-if="activeColumns.endDate"/>
+						<td v-if="activeColumns.percentDone">{{ t.percentDone * 100 }}%</td>
+						<date-table-cell :date="t.created" v-if="activeColumns.created"/>
+						<date-table-cell :date="t.updated" v-if="activeColumns.updated"/>
+						<td v-if="activeColumns.createdBy">
+							<user
+								:avatar-size="27"
+								:show-username="false"
+								:user="t.createdBy"/>
+						</td>
+					</tr>
+					</tbody>
+				</table>
+			</div>
 
-					<Pagination
-						:total-pages="totalPages"
-						:current-page="currentPage"
-					/>
-				</card>
+			<Pagination 
+				:total-pages="totalPages"
+				:current-page="currentPage"
+			/>
+			</card>
 			</div>
 		</template>
 	</ListWrapper>
 </template>
 
 <script setup lang="ts">
-import {toRef, computed, type Ref} from 'vue'
+import { toRef, computed, type Ref } from 'vue'
 
-import {useStorage} from '@vueuse/core'
+import { useStorage } from '@vueuse/core'
 
 import ListWrapper from './ListWrapper.vue'
 import Done from '@/components/misc/Done.vue'
@@ -196,7 +196,7 @@ import FilterPopup from '@/components/list/partials/filter-popup.vue'
 import Pagination from '@/components/misc/pagination.vue'
 import Popup from '@/components/misc/popup.vue'
 
-import {useTaskList} from '@/composables/taskList'
+import { useTaskList } from '@/composables/taskList'
 import type TaskModel from '@/models/task'
 
 const ACTIVE_COLUMNS_DEFAULT = {
@@ -225,24 +225,24 @@ const props = defineProps({
 type Order = 'asc' | 'desc' | 'none'
 
 interface SortBy {
-	id: Order
-	done?: Order
-	title?: Order
-	priority?: Order
-	due_date?: Order
-	start_date?: Order
-	end_date?: Order
-	percent_done?: Order
-	created?: Order
-	updated?: Order
+	id : Order
+	done? : Order 
+	title? : Order 
+	priority? : Order 
+	due_date? : Order 
+	start_date? : Order 
+	end_date? : Order 
+	percent_done? : Order 
+	created? : Order 
+	updated? : Order 
 }
 
-const SORT_BY_DEFAULT: SortBy = {
+const SORT_BY_DEFAULT : SortBy = {
 	id: 'desc',
 }
 
-const activeColumns = useStorage('tableViewColumns', {...ACTIVE_COLUMNS_DEFAULT})
-const sortBy = useStorage<SortBy>('tableViewSortBy', {...SORT_BY_DEFAULT})
+const activeColumns = useStorage('tableViewColumns', { ...ACTIVE_COLUMNS_DEFAULT })
+const sortBy = useStorage<SortBy>('tableViewSortBy', { ...SORT_BY_DEFAULT })
 
 const taskList = useTaskList(toRef(props, 'listId'))
 
@@ -251,9 +251,8 @@ const {
 	params,
 	totalPages,
 	currentPage,
-	sortByParam,
 } = taskList
-const tasks: Ref<TaskModel[]> = taskList.tasks
+const tasks : Ref<TaskModel[]> = taskList.tasks
 
 Object.assign(params.value, {
 	filter_by: [],
@@ -262,7 +261,7 @@ Object.assign(params.value, {
 })
 
 // FIXME: by doing this we can have multiple sort orders
-function sort(property: keyof SortBy) {
+function sort(property : keyof SortBy) {
 	const order = sortBy.value[property]
 	if (typeof order === 'undefined' || order === 'none') {
 		sortBy.value[property] = 'desc'
@@ -271,7 +270,6 @@ function sort(property: keyof SortBy) {
 	} else {
 		delete sortBy.value[property]
 	}
-	sortByParam.value = sortBy.value
 }
 
 // TODO: re-enable opening task detail in modal
@@ -281,7 +279,7 @@ const taskDetailRoutes = computed(() => Object.fromEntries(
 		id,
 		{
 			name: 'task.detail',
-			params: {id},
+			params: { id },
 			// state: { backdropView: router.currentRoute.value.fullPath },
 		},
 	])),
@@ -312,7 +310,7 @@ const taskDetailRoutes = computed(() => Object.fromEntries(
 }
 
 .link-share-view .card {
-	border: none;
-	box-shadow: none;
+  border: none;
+  box-shadow: none;
 }
 </style>

src/views/list/settings/duplicate.vue

@@ -21,9 +21,9 @@
 
 <script setup lang="ts">
 import {ref, shallowReactive} from 'vue'
-import {useRoute, useRouter} from 'vue-router'
-import {useStore} from 'vuex'
-import {useI18n} from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+import { useI18n } from 'vue-i18n'
 
 import ListDuplicateService from '@/services/listDuplicateService'
 import CreateEdit from '@/components/misc/create-edit.vue'
@@ -32,30 +32,29 @@ import Multiselect from '@/components/input/multiselect.vue'
 import ListDuplicateModel from '@/models/listDuplicateModel'
 import NamespaceModel from '@/models/namespace'
 
-import {success} from '@/message'
-import {useTitle} from '@/composables/useTitle'
-import {useNameSpaceSearch} from '@/composables/useNamespaceSearch'
+import { success } from '@/message'
+import { useTitle } from '@/composables/useTitle'
+import { useNameSpaceSearch } from '@/composables/useNamespaceSearch'
 
-const {t} = useI18n({useScope: 'global'})
+
+const { t } = useI18n({useScope: 'global'})
 useTitle(() => t('list.duplicate.title'))
 
+
 const {
 	namespaces,
 	findNamespaces,
 } = useNameSpaceSearch()
 
 const selectedNamespace = ref<NamespaceModel>()
-
 function selectNamespace(namespace: NamespaceModel) {
 	selectedNamespace.value = namespace
 }
 
 const route = useRoute()
-const router = useRouter()
-const store = useStore()
+const router= useRouter()
 
 const listDuplicateService = shallowReactive(new ListDuplicateService())
-
 async function duplicateList() {
 	const listDuplicate = new ListDuplicateModel({
 		// FIXME: should be parameter
@@ -65,6 +64,7 @@ async function duplicateList() {
 
 	const duplicate = await listDuplicateService.create(listDuplicate)
 
+	const store = useStore()
 	store.commit('namespaces/addListToNamespace', duplicate.list)
 	store.commit('lists/setList', duplicate.list)
 	success({message: t('list.duplicate.success')})

src/views/tasks/TaskDetailView.vue

@@ -775,7 +775,7 @@ $flash-background-duration: 750ms;
     display: flex;
     align-items: center;
 
-    .remove {
+    a.remove {
       color: var(--danger);
       vertical-align: middle;
       padding-left: .5rem;
@@ -786,22 +786,20 @@ $flash-background-duration: 750ms;
   :deep(.datepicker) {
     width: 100%;
 
-    .show {
+    a.show {
       color: var(--text);
       padding: .25rem .5rem;
       transition: background-color $transition;
       border-radius: $radius;
       display: block;
       margin: .1rem 0;
-      width: 100%;
-      text-align: left;
 
       &:hover {
         background: var(--white);
       }
     }
 
-    &.disabled .show:hover {
+    &.disabled a.show:hover {
       background: transparent;
     }
   }

src/views/user/settings/Avatar.vue

@@ -62,7 +62,7 @@ export default { name: 'user-settings-avatar' }
 </script>
 
 <script setup lang="ts">
-import {computed, ref, shallowReactive} from 'vue'
+import {ref, shallowReactive} from 'vue'
 import {useI18n} from 'vue-i18n'
 import {useStore} from 'vuex'
 import {Cropper} from 'vue-advanced-cropper'
@@ -76,13 +76,13 @@ import { success } from '@/message'
 const {t} = useI18n({useScope: 'global'})
 const store = useStore()
 
-const AVATAR_PROVIDERS = computed(() => ({
+const AVATAR_PROVIDERS = {
 	default: t('misc.default'),
 	initials: t('user.settings.avatar.initials'),
 	gravatar: t('user.settings.avatar.gravatar'),
 	marble: t('user.settings.avatar.marble'),
 	upload: t('user.settings.avatar.upload'),
-}))
+}
 
 useTitle(() => `${t('user.settings.avatar.title')} - ${t('user.settings.title')}`)