feat: add WordSuggestHint component

src/components/WordSuggestHint.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="c-word-suggest-hint">
+    <p>Dieses Wort ist anscheinend noch nicht Teil des Wörterbuchs. Möchtest du es hinzufügen?</p>
+    <button type="button" class="c-button" @click="getModalLoaded">Wort hinzufügen</button>
+
+    <Modal
+      v-if="loadModal"
+      :open="showModal"
+      position="center"
+      :disable-scroll="true"
+      @close="showModal = false"
+      @mounted="modalMounted = true"
+    >
+      <SuggestWordForm />
+    </Modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from "vue";
+
+const Modal = defineAsyncComponent(() => import("@components/Modal.vue"));
+const SuggestWordForm = defineAsyncComponent(() => import("@components/SuggestWordForm.vue"));
+
+const showModal = ref(false);
+const loadModal = ref(false);
+const modalMounted = ref(false);
+
+/**
+ * This function is responsible for loading and displaying the modal.
+ * If the modal is already mounted, it will be displayed immediately.
+ * If the modal is not yet mounted, it will trigger the loading of the modal.
+ * It will then keep retrying to display the modal every 100ms until the modal is mounted.
+ *
+ * @return  {void}
+ */
+const getModalLoaded = (): void => {
+  // If the modal is already mounted, display it immediately
+  if (modalMounted.value) {
+    showModal.value = true;
+  } else {
+    // If the modal is not yet loading, trigger the loading of the modal
+    if (!loadModal.value) {
+      loadModal.value = true;
+    }
+    // Retry to display the modal every 100ms until it is mounted
+    setTimeout(getModalLoaded, 100);
+  }
+};
+</script>
+
+<style scoped></style>

src/components/word-search/WordSearchList.vue

@@ -8,6 +8,8 @@
       {{ searchResultCount }} {{ searchResultCount === 1 ? "Ergebnis" : "Ergebnisse" }}
     </p>
 
+    <WordSuggestHint v-if="searchResultCount === 0" />
+
     <WordList />
   </div>
 </template>
@@ -16,6 +18,7 @@
 import WordList from "@components/WordList.vue";
 import SearchWords from "@components/SearchWords.vue";
 import WordSearchFilterToggle from "@components/word-search/WordSearchFilterToggle.vue";
+import WordSuggestHint from "@components/WordSuggestHint.vue";
 import { $wordSearch, $searchResultCount } from "@stores/index.ts";
 import { useStore } from "@nanostores/vue";
 import type { Maybe } from "@ts_types/generated/graphql.ts";