feat(WordSuggestHint): set current search to form

src/components/SuggestWordForm.vue

@@ -140,6 +140,10 @@ import { createToastNotify } from "@stores/index.ts";
 import { sendEmail } from "@services/sendMail.ts";
 import type { SendEmailPayload } from "@ts_types/generated/graphql.ts";
 
+const props = defineProps<{
+  berlinerWord?: string;
+}>();
+
 export interface FormData {
   berlinerWord?: string;
   translation?: string;
@@ -182,6 +186,10 @@ const turnstileSiteKey = import.meta.env.PUBLIC_TURNSTILE_SITE_KEY;
 const isVerified = ref(false);
 const isSending = ref(false);
 
+if (props.berlinerWord) {
+  formData.berlinerWord = props.berlinerWord;
+}
+
 const sendMail = async (): Promise<void> => {
   const createBody = `
   <p>Ein neues Berliner Wort wurde eingereicht:</p>

src/components/WordSuggestHint.vue

@@ -1,7 +1,9 @@
 <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>
+    <button type="button" class="c-button c-button--center-icon" @click="getModalLoaded">
+      <CirclePlus />Wort hinzufügen
+    </button>
 
     <Modal
       v-if="loadModal"
@@ -11,17 +13,22 @@
       @close="showModal = false"
       @mounted="modalMounted = true"
     >
-      <SuggestWordForm />
+      <SuggestWordForm :berliner-word="wordSearch.search" />
     </Modal>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, defineAsyncComponent } from "vue";
+import CirclePlus from "virtual:icons/lucide/circle-plus";
+import { $wordSearch } from "@stores/index.ts";
+import { useStore } from "@nanostores/vue";
 
 const Modal = defineAsyncComponent(() => import("@components/Modal.vue"));
 const SuggestWordForm = defineAsyncComponent(() => import("@components/SuggestWordForm.vue"));
 
+const wordSearch = useStore($wordSearch);
+
 const showModal = ref(false);
 const loadModal = ref(false);
 const modalMounted = ref(false);