WIP: fix: replace the "Mark as done/undone" button with checkbox

This makes it more intuitive, makes you think less

src/views/tasks/TaskDetailView.vue

@@ -284,17 +284,12 @@
 				</div>
 				<div class="column is-one-third action-buttons d-print-none" v-if="canWrite || isModal">
 					<template v-if="canWrite">
-						<x-button
-							:class="{'is-success': !task.done}"
-							:shadow="task.done"
-							@click="toggleTaskDone()"
-							class="is-outlined has-no-border"
-							icon="check-double"
-							variant="secondary"
-							v-shortcut="'t'"
+						<fancycheckbox
+							@change="toggleTaskDone()"
+							:value="task.done"
 						>
-							{{ task.done ? $t('task.detail.undone') : $t('task.detail.done') }}
-						</x-button>
+							{{ $t('task.attributes.done') }}
+						</fancycheckbox>
 						<task-subscription
 							entity="task"
 							:entity-id="task.id"
@@ -472,6 +467,7 @@ import Datepicker from '@/components/input/datepicker.vue'
 import Description from '@/components/tasks/partials/description.vue'
 import EditAssignees from '@/components/tasks/partials/editAssignees.vue'
 import EditLabels from '@/components/tasks/partials/editLabels.vue'
+import Fancycheckbox from '@/components/input/fancycheckbox.vue'
 import Heading from '@/components/tasks/partials/heading.vue'
 import ProjectSearch from '@/components/tasks/partials/projectSearch.vue'
 import PercentDoneSelect from '@/components/tasks/partials/percentDoneSelect.vue'