From 422d7fc693caf886a49d03ff48b56ae6ce825356 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 12 Apr 2023 18:30:59 +0200
Subject: [PATCH] feat: highlight hint icon when hovering the input

---
 src/components/tasks/add-task.vue                 | 8 ++++++--
 src/components/tasks/partials/quick-add-magic.vue | 9 +++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/tasks/add-task.vue b/src/components/tasks/add-task.vue
index fd2435fe1..a467bf0ac 100644
--- a/src/components/tasks/add-task.vue
+++ b/src/components/tasks/add-task.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="task-add">
+	<div class="task-add" ref="taskAdd">
 		<div class="add-task__field field is-grouped">
 			<p class="control has-icons-left is-expanded">
 				<textarea
@@ -16,7 +16,7 @@
 				<span class="icon is-small is-left">
 					<icon icon="tasks"/>
 				</span>
-				<quick-add-magic/>
+				<quick-add-magic :highlight-hint-icon="taskAddHovered"/>
 			</p>
 			<p class="control">
 				<x-button
@@ -44,6 +44,7 @@
 <script setup lang="ts">
 import {computed, ref} from 'vue'
 import {useI18n} from 'vue-i18n'
+import {useElementHover} from '@vueuse/core'
 
 import {RELATION_KIND} from '@/types/IRelationKind'
 import type {ITask} from '@/modelTypes/ITask'
@@ -84,6 +85,9 @@ const taskStore = useTaskStore()
 // 	newTaskInput.value.focus()
 // })
 
+const taskAdd = ref<HTMLTextAreaElement | null>(null)
+const taskAddHovered = useElementHover(taskAdd)
+
 const errorMessage = ref('')
 
 function resetEmptyTitleError(e: KeyboardEvent) {
diff --git a/src/components/tasks/partials/quick-add-magic.vue b/src/components/tasks/partials/quick-add-magic.vue
index 3cdb76387..95bc2bf8e 100644
--- a/src/components/tasks/partials/quick-add-magic.vue
+++ b/src/components/tasks/partials/quick-add-magic.vue
@@ -5,6 +5,7 @@
 			class="icon is-small show-helper-text"
 			v-tooltip="$t('task.quickAddMagic.hint')"
 			:aria-label="$t('task.quickAddMagic.hint')"
+			:class="{'is-highlighted': highlightHintIcon}"
 		>
 			<icon :icon="['far', 'circle-question']"/>
 		</BaseButton>
@@ -104,6 +105,10 @@ import {PREFIXES} from '@/modules/parseTaskText'
 const visible = ref(false)
 const mode = ref(getQuickAddMagicMode())
 
+const props = defineProps<{
+	highlightHintIcon: boolean,
+}>()
+
 const prefixes = computed(() => PREFIXES[mode.value])
 </script>
 
@@ -111,5 +116,9 @@ const prefixes = computed(() => PREFIXES[mode.value])
 .show-helper-text {
 	right: 0;
 	pointer-events: auto !important;
+	
+	&.is-highlighted {
+		color: inherit !important;
+	}
 }
 </style>