chore: cleanup and reorganize the date selection

# Conflicts:
#	src/views/tasks/ShowTasks.vue

@@ -0,0 +2,4 @@
+	<div class="datepicker-with-range-container">
+		<popup>
+			<template #trigger="{toggle}">
+				<a @click.prevent.stop="toggle()">

@@ -0,0 +66,4 @@
+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)

@@ -0,0 +212,4 @@
+	position: relative;
+	z-index: 10;
+
+	:deep(.popup) {

@@ -0,0 +79,4 @@
+	},
+}))
+
+const dateRange = ref<string>('')

@@ -37,2 +6,2 @@
-			<x-button variant="secondary" @click="setDatesToNextMonth()">{{ $t('task.show.nextMonth') }}</x-button>
-		</div>
+		<p v-if="!showAll" class="show-tasks-options">
+			<datepicker-with-range @dateChanged="setDate"/>

@@ -0,0 +2,4 @@
+	<div class="datepicker-with-range-container">
+		<popup>
+			<template #trigger="{toggle}">
+				<x-button @click.prevent.stop="toggle()" type="secondary" :shadow="false" class="mb-2">

@@ -0,0 +119,4 @@
+	return date
+}
+
+const datesToday = computed<string>(() => {

@@ -0,0 +139,4 @@
+}
+
+const datesThisWeek = computed<string>(() => {
+	const {startDate, endDate} = thisWeek()

@@ -0,0 +105,4 @@
+	return format(date, 'yyyy-MM-dd HH:mm')
+}
+
+function startOfDay(date: Date): Date {

@@ -0,0 +112,4 @@
+	return date
+}
+
+function endOfDay(date: Date): Date {

@@ -0,0 +195,4 @@
+	dateRange.value = range
+}
+
+const customRangeActive = computed<Boolean>(() => {

@@ -92,8 +67,6 @@ export default {
 		showAll: Boolean,
 	},
 	created() {
-		this.cStartDate = this.startDate

@@ -123,3 +82,1 @@
-					firstDayOfWeek: this.$store.state.auth.settings.weekStart,
-				},
-			}
+		dateFrom() {

@@ -46,1 +20,3 @@
-			<div class="tasks">
+		<div v-if="!hasTasks" :class="{ 'is-loading': loading}" class="spinner"></div>
+		<card
+			v-if="hasTasks"

@@ -269,2 +223,2 @@
-		vertical-align: middle;
-		margin: .5rem 0;
+	> :deep(a) {
+		margin-right: .5rem;

@@ -104,25 +77,54 @@ export default {
 			handler: 'loadPendingTasks',

@@ -56,33 +38,26 @@
 	</div>
 </template>
 <script>

@@ -136,3 +138,2 @@
 				query: {
-					from: +new Date(this.cStartDate),
-					to: +new Date(this.cEndDate),
+					from: +new Date(dateFrom ?? this.dateFrom),