fix: home input validation

resources/ts/views/HomeView.vue

@@ -8,29 +8,42 @@ const listNameInput = ref<string>(generateSlug(4));
 function onRandom() {
     listNameInput.value = generateSlug(4);
 }
+
+function onInput() {
+    listNameInput.value = listNameInput.value
+        .normalize("NFD")
+        .replace(/[\s_]/g, "-")
+        .replace(/[^a-z0-9-]/g, "")
+        .toLowerCase();
+}
 </script>
 
 <template>
     <div class="p-4">
-        <div class="mb-4 italic text-xl font-extralight" v-html="$t('home')">
-        </div>
+        <div
+            class="mb-4 italic text-xl font-extralight"
+            v-html="$t('home')"
+        ></div>
         <div class="flex gap-2 mb-4">
             <input
                 v-model="listNameInput"
                 type="text"
                 :placeholder="$t('new_task_hint')"
                 class="input grow"
+                @input="onInput"
             />
-            <button
-                class="btn btn-square"
-                @click="onRandom"
-            >
+            <button class="btn btn-square" @click="onRandom">
                 <dices-icon />
             </button>
         </div>
         <div class="w-full px-4">
-            <router-link class="btn btn-lg" :to="`/${listNameInput}`">
-                <arrow-big-right-dash-icon class="inline" /> {{ $t('home_button') }}
+            <router-link
+                class="btn btn-lg"
+                :class="listNameInput.trim().length === 0 ? 'btn-disabled' : ''"
+                :to="`/${listNameInput.trim()}`"
+            >
+                <arrow-big-right-dash-icon class="inline" />
+                {{ $t("home_button") }}
             </router-link>
         </div>
     </div>