refactor: ♻️ Disable Nuxt component auto-importing (obscures code flow)

components/inputs/checkbox-input.vue

@@ -1,10 +1,11 @@
 <template>
-    <InputsText type="checkbox" v-bind="$attrs, $props"
+    <TextInput type="checkbox" v-bind="$attrs, $props"
         class="rounded disabled:hover:cursor-wait text-primary-700 !size-5" />
 </template>
 
 <script lang="ts" setup>
 import type { InputHTMLAttributes } from "vue";
+import TextInput from "./text-input.vue";
 
 interface Props extends /* @vue-ignore */ InputHTMLAttributes {}
 

components/inputs/password-input.vue

@@ -1,13 +1,13 @@
 <template>
-    <InputsText @input="e => content = (e.target as HTMLInputElement).value" v-bind="$attrs, $props" v-model="content"
+    <TextInput @input="e => content = (e.target as HTMLInputElement).value" v-bind="$attrs, $props" v-model="content"
         :type="showPassword ? 'text' : 'password'" :spellcheck="false" />
     <Progress.Root class="flex flex-row items-center gap-x-2" v-if="showStrength">
         <Progress.Label class="text-xs text-gray-300 font-semibold w-12">
             {{ text }}
         </Progress.Label>
         <Progress.Track class="rounded-sm w-full h-2 duration-300" :style="{
-        backgroundColor: color,
-    }">
+            backgroundColor: color,
+        }">
             <Progress.Range />
         </Progress.Track>
     </Progress.Root>
@@ -27,6 +27,7 @@ const showPassword = ref(false);
 const content = ref("");
 
 import type { InputHTMLAttributes } from "vue";
+import TextInput from "./text-input.vue";
 
 interface Props extends /* @vue-ignore */ InputHTMLAttributes {
     isInvalid?: boolean;
@@ -66,6 +67,7 @@ const color = computed(() => {
 });
 
 onMounted(() => {
+    // Workaround to make sure the teleport is rendered after the parent component
     teleport.value = true;
 });
 </script>

components/inputs/rich-textbox-input.vue

@@ -8,15 +8,17 @@
             aria-live="polite">
             {{ remainingCharacters }}
         </div>
-        <ComposerEmojiSuggestbox :textarea="textarea" v-if="!!currentlyBeingTypedEmoji"
+        <EmojiSuggestbox :textarea="textarea" v-if="!!currentlyBeingTypedEmoji"
             :currently-typing-emoji="currentlyBeingTypedEmoji" @autocomplete="autocompleteEmoji" />
-        <ComposerMentionSuggestbox :textarea="textarea" v-if="!!currentlyBeingTypedMention"
+        <MentionSuggestbox :textarea="textarea" v-if="!!currentlyBeingTypedMention"
             :currently-typing-mention="currentlyBeingTypedMention" @autocomplete="autocompleteMention" />
     </div>
 </template>
 
 <script lang="ts" setup>
 import { char, createRegExp, exactly } from "magic-regexp";
+import EmojiSuggestbox from "../composer/emoji-suggestbox.vue";
+import MentionSuggestbox from "../composer/mention-suggestbox.vue";
 
 defineOptions({
     inheritAttrs: false,