Tasks: fixes and new edit task design (#9442)

* add missing tooltips

* makes sure due date is update correctly, fixes #9436

* do not collapse checklist when casting spells, fixes #9345

* start to fix spells drawer

* fix drawer requiring two clicks to open

website/client/components/tasks/task.vue

@@ -56,10 +56,15 @@
               .svg-icon(v-html="icons.checklist")
               span {{ checklistProgress }}
           label.custom-control.custom-checkbox.checklist-item(
-            v-if='!castingSpell && !task.collapseChecklist',
+            v-if='!task.collapseChecklist',
             v-for="item in task.checklist", :class="{'checklist-item-done': item.completed}",
           )
-            input.custom-control-input(type="checkbox", :checked="item.completed", @change="toggleChecklistItem(item)")
+            input.custom-control-input(
+              type="checkbox",
+              :checked="item.completed",
+              @change="toggleChecklistItem(item)",
+              :disabled="castingSpell",
+            )
             span.custom-control-indicator
             span.custom-control-description(v-markdown='item.text')
         .icons.small-text.d-flex.align-items-center
@@ -593,7 +598,8 @@ export default {
       return moment().diff(this.task.date, 'days') >= 0;
     },
     dueIn () {
-      const dueIn = moment().to(this.task.date);
+      // this.task && is necessary to make sure the computed property updates correctly
+      const dueIn = moment().to(this.task && this.task.date);
       return this.$t('dueIn', {dueIn});
     },
     hasTags () {