feat: move quick add magic to a popup behind an icon

src/components/misc/Icon.ts

@@ -67,6 +67,7 @@ import {
 	faStar,
 	faSun,
 	faTimesCircle,
+	faCircleQuestion,
 } from '@fortawesome/free-regular-svg-icons'
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
 
@@ -86,6 +87,7 @@ library.add(faCheckDouble)
 library.add(faChessKnight)
 library.add(faChevronDown)
 library.add(faCircleInfo)
+library.add(faCircleQuestion)
 library.add(faClock)
 library.add(faCloudDownloadAlt)
 library.add(faCloudUploadAlt)

src/components/tasks/add-task.vue

@@ -16,6 +16,7 @@
 				<span class="icon is-small is-left">
 					<icon icon="tasks"/>
 				</span>
+				<quick-add-magic/>
 			</p>
 			<p class="control">
 				<x-button
@@ -32,11 +33,10 @@
 				</x-button>
 			</p>
 		</div>
-		<Expandable :open="errorMessage !== '' || showQuickAddMagicHelp">
+		<Expandable :open="errorMessage !== ''">
 			<p class="pt-3 mt-0 help is-danger" v-if="errorMessage !== ''">
 				{{ errorMessage }}
 			</p>
-			<quick-add-magic v-else class="quick-add-magic" @hide="() => showQuickAddMagicHelp = false"/>
 		</Expandable>
 	</div>
 </template>
@@ -44,7 +44,6 @@
 <script setup lang="ts">
 import {computed, ref} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {useLocalStorage} from '@vueuse/core'
 
 import {RELATION_KIND} from '@/types/IRelationKind'
 import type {ITask} from '@/modelTypes/ITask'
@@ -85,8 +84,6 @@ const taskStore = useTaskStore()
 // 	newTaskInput.value.focus()
 // })
 
-const showQuickAddMagicHelp = useLocalStorage('show-quick-add-magic', true)
-
 const errorMessage = ref('')
 
 function resetEmptyTitleError(e: KeyboardEvent) {
@@ -238,8 +235,4 @@ defineExpose({
 	white-space: nowrap;
 	text-overflow: ellipsis;
 }
-
-.quick-add-magic {
-	padding-top: 0.75rem;
-}
 </style>

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

@@ -1,10 +1,13 @@
 <template>
 	<div v-if="mode !== 'disabled' && prefixes !== undefined">
-		<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>
+		<BaseButton
+			@click="() => visible = true"
+			class="icon is-small show-helper-text"
+			v-tooltip="$t('task.quickAddMagic.hint')"
+			:aria-label="$t('task.quickAddMagic.hint')"
+		>
+			<icon :icon="['far', 'circle-question']"/>
+		</BaseButton>
 		<modal
 			:enabled="visible"
 			@close="() => visible = false"
@@ -93,15 +96,20 @@
 <script setup lang="ts">
 import {ref, computed} from 'vue'
 
-import ButtonLink from '@/components/misc/ButtonLink.vue'
+import BaseButton from '@/components/base/BaseButton.vue'
 
 import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
 import {PREFIXES} from '@/modules/parseTaskText'
 
-const emit = defineEmits(['hide'])
-
 const visible = ref(false)
 const mode = ref(getQuickAddMagicMode())
 
 const prefixes = computed(() => PREFIXES[mode.value])
 </script>
+
+<style scoped>
+.show-helper-text {
+	right: 0;
+	pointer-events: auto !important;
+}
+</style>

src/i18n/lang/en.json

@@ -737,9 +737,7 @@
       "invalidAmount": "Please enter more than 0."
     },
     "quickAddMagic": {
-      "hint": "You can use Quick Add Magic",
-      "hide": "Hide",
-      "what": "What?",
+      "hint": "You can use Quick Add Magic. Click to learn more.",
       "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.",
       "multiple": "You can use this multiple times.",