feat: allow hiding the quick add magic help tooltip with a button

src/components/tasks/add-task.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="task-add" ref="taskAdd">
+	<div class="task-add">
 		<div class="add-task__field field is-grouped">
 			<p class="control has-icons-left is-expanded">
 				<textarea
@@ -32,11 +32,11 @@
 				</x-button>
 			</p>
 		</div>
-		<Expandable :open="errorMessage !== '' || taskAddFocused || taskAddHovered && debouncedTaskAddHovered">
+		<Expandable :open="errorMessage !== '' || showQuickAddMagicHelp">
 			<p class="pt-3 mt-0 help is-danger" v-if="errorMessage !== ''">
 				{{ errorMessage }}
 			</p>
-			<quick-add-magic v-else class="quick-add-magic" />
+			<quick-add-magic v-else class="quick-add-magic" @hide="() => showQuickAddMagicHelp = false"/>
 		</Expandable>
 	</div>
 </template>
@@ -44,7 +44,7 @@
 <script setup lang="ts">
 import {computed, ref} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {refDebounced, useElementHover, useFocusWithin} from '@vueuse/core'
+import {useLocalStorage} from '@vueuse/core'
 
 import {RELATION_KIND} from '@/types/IRelationKind'
 import type {ITask} from '@/modelTypes/ITask'
@@ -77,8 +77,6 @@ const {t} = useI18n({useScope: 'global'})
 const authStore = useAuthStore()
 const taskStore = useTaskStore()
 
-const taskAdd = ref<HTMLTextAreaElement | null>(null)
-
 // enable only if we don't have a modal
 // onStartTyping(() => {
 // 	if (newTaskInput.value === null || document.activeElement === newTaskInput.value) {
@@ -87,10 +85,7 @@ const taskAdd = ref<HTMLTextAreaElement | null>(null)
 // 	newTaskInput.value.focus()
 // })
 
-const { focused: taskAddFocused } = useFocusWithin(taskAdd)
-
-const taskAddHovered = useElementHover(taskAdd)
-const debouncedTaskAddHovered = refDebounced(taskAddHovered, 500)
+const showQuickAddMagicHelp = useLocalStorage('show-quick-add-magic', true)
 
 const errorMessage = ref('')
 

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

@@ -3,6 +3,7 @@
 		<p class="help has-text-grey">
 			{{ $t('task.quickAddMagic.hint') }}.
 			<ButtonLink @click="() => visible = true">{{ $t('task.quickAddMagic.what') }}</ButtonLink>
+			<ButtonLink @click="() => emit('hide')" class="ml-1">{{ $t('task.quickAddMagic.hide') }}</ButtonLink>
 		</p>
 		<modal
 			:enabled="visible"
@@ -97,6 +98,8 @@ import ButtonLink from '@/components/misc/ButtonLink.vue'
 import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
 import {PREFIXES} from '@/modules/parseTaskText'
 
+const emit = defineEmits(['hide'])
+
 const visible = ref(false)
 const mode = ref(getQuickAddMagicMode())
 

src/i18n/lang/en.json

@@ -738,6 +738,7 @@
     },
     "quickAddMagic": {
       "hint": "You can use Quick Add Magic",
+      "hide": "Hide",
       "what": "What?",
       "title": "Quick Add Magic",
       "intro": "When creating a task, you can use special keywords to directly add attributes to the newly created task. This allows to add commonly used attributes to tasks much faster.",