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

components/composer/composer.vue

@@ -1,12 +1,11 @@
 <template>
     <div v-if="respondingTo" class="mb-4" role="region" aria-label="Responding to">
         <OverlayScrollbarsComponent :defer="true" class="max-h-72 overflow-y-auto">
-            <LazySocialElementsNotesNote :note="respondingTo" :small="true" :disabled="true"
-                class="!rounded-none !bg-primary-500/10" />
+            <Note :note="respondingTo" :small="true" :disabled="true" class="!rounded-none !bg-primary-500/10" />
         </OverlayScrollbarsComponent>
     </div>
     <div class="px-6 pb-4 pt-5">
-        <InputsRichTextbox v-model:model-content="content" @paste="handlePaste" :disabled="loading"
+        <RichTextboxInput v-model:model-content="content" @paste="handlePaste" :disabled="loading"
             :placeholder="chosenSplash" :max-characters="characterLimit" class="focus:!ring-0 max-h-[70dvh]" />
         <!-- Content warning textbox -->
         <div v-if="cw" class="mb-4">
@@ -14,33 +13,33 @@
                 class="w-full p-2 mt-1 text-sm prose prose-invert bg-dark-900 rounded focus:!ring-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 appearance-none focus:!border-none focus:!outline-none"
                 aria-label="Content warning" />
         </div>
-        <ComposerFileUploader v-model:files="files" ref="uploader" />
+        <FileUploader v-model:files="files" ref="uploader" />
         <div class="flex flex-row gap-1 border-white/20">
-            <ComposerButton title="Mention someone">
+            <Button title="Mention someone">
                 <iconify-icon height="1.5rem" width="1.5rem" icon="tabler:at" aria-hidden="true" />
-            </ComposerButton>
-            <ComposerButton title="Toggle Markdown" @click="markdown = !markdown" :toggled="markdown">
+            </Button>
+            <Button title="Toggle Markdown" @click="markdown = !markdown" :toggled="markdown">
                 <iconify-icon width="1.25rem" height="1.25rem"
                     :icon="markdown ? 'tabler:markdown' : 'tabler:markdown-off'" aria-hidden="true" />
-            </ComposerButton>
-            <ComposerButton title="Use a custom emoji">
+            </Button>
+            <Button title="Use a custom emoji">
                 <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:mood-smile" aria-hidden="true" />
-            </ComposerButton>
-            <ComposerButton title="Add media" @click="openFilePicker">
+            </Button>
+            <Button title="Add media" @click="openFilePicker">
                 <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:photo-up" aria-hidden="true" />
-            </ComposerButton>
-            <ComposerButton title="Add a file" @click="openFilePicker">
+            </Button>
+            <Button title="Add a file" @click="openFilePicker">
                 <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:file-upload" aria-hidden="true" />
-            </ComposerButton>
-            <ComposerButton title="Add content warning" @click="cw = !cw" :toggled="cw">
+            </Button>
+            <Button title="Add content warning" @click="cw = !cw" :toggled="cw">
                 <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:rating-18-plus" aria-hidden="true" />
-            </ComposerButton>
-            <ButtonsPrimary :loading="loading" @click="send" class="ml-auto rounded-full"
+            </Button>
+            <ButtonPrimary :loading="loading" @click="send" class="ml-auto rounded-full"
                 :disabled="!canSubmit || loading">
                 <span>{{
                     respondingType === "edit" ? "Edit!" : "Send!"
                 }}</span>
-            </ButtonsPrimary>
+            </ButtonPrimary>
         </div>
     </div>
 </template>
@@ -49,7 +48,12 @@
 import type { Instance, Status } from "@lysand-org/client/types";
 import { nanoid } from "nanoid";
 import { OverlayScrollbarsComponent } from "#imports";
-import type FileUploader from "./file-uploader.vue";
+import ButtonPrimary from "../buttons/button-primary.vue";
+import RichTextboxInput from "../inputs/rich-textbox-input.vue";
+import Note from "../social-elements/notes/note.vue";
+import Button from "./button.vue";
+// biome-ignore lint/style/useImportType: Biome doesn't see the Vue code
+import FileUploader from "./file-uploader.vue";
 
 const uploader = ref<InstanceType<typeof FileUploader> | undefined>(undefined);
 const { Control_Enter, Command_Enter, Control_Alt } = useMagicKeys();

components/composer/emoji-suggestbox.vue

@@ -1,17 +1,18 @@
 <template>
-    <ComposerSuggestbox class="max-h-40 overflow-auto !w-auto !flex-row">
+    <Suggestbox class="max-h-40 overflow-auto !w-auto !flex-row">
         <div v-for="(emoji, index) in topEmojis" :key="emoji.shortcode" @click="emit('autocomplete', emoji.shortcode)"
             :ref="el => { if (el) emojiRefs[index] = el as Element }" :title="emoji.shortcode"
             :class="['flex', 'justify-center', 'shrink-0', 'items-center', 'p-2', 'size-12', 'hover:bg-dark-900/70', { 'bg-primary-500': index === selectedEmojiIndex }]">
             <img :src="emoji.url" class="w-full h-full object-contain"
                 :alt="`Emoji with shortcode ${emoji.shortcode}`" />
         </div>
-    </ComposerSuggestbox>
+    </Suggestbox>
 </template>
 
 <script lang="ts" setup>
 import type { Emoji } from "@lysand-org/client/types";
 import { distance } from "fastest-levenshtein";
+import Suggestbox from "./suggestbox.vue";
 const props = defineProps<{
     currentlyTypingEmoji: string | null;
     textarea: HTMLTextAreaElement | undefined;

components/composer/file-uploader.vue

@@ -30,8 +30,8 @@
                 </button>
                 <!-- Alt text editor -->
                 <Popover.Root :positioning="{
-            strategy: 'fixed',
-        }" v-if="data.api_id" @update:open="o => !o && updateAltText(data.id, data.alt_text)">
+                    strategy: 'fixed',
+                }" v-if="data.api_id" @update:open="o => !o && updateAltText(data.id, data.alt_text)">
                     <Popover.Trigger aria-hidden="true"
                         class="absolute top-1 left-1 p-1 bg-dark-800 ring-1 ring-white/5 text-white text-xs rounded size-6">
                         <iconify-icon icon="tabler:alt" width="none" class="size-4" />
@@ -42,10 +42,10 @@
                             <textarea :disabled="data.progress < 1.0" @keydown.enter.stop v-model="data.alt_text"
                                 placeholder="Add alt text"
                                 class="w-full p-2 text-sm prose prose-invert bg-dark-900 rounded focus:!ring-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 appearance-none focus:!border-none focus:!outline-none" />
-                            <ButtonsSecondary @click="updateAltText(data.id, data.alt_text)" class="w-full"
+                            <ButtonSecondary @click="updateAltText(data.id, data.alt_text)" class="w-full"
                                 :loading="data.progress < 1.0">
                                 <span>Edit</span>
-                            </ButtonsSecondary>
+                            </ButtonSecondary>
                         </Popover.Content>
                     </Popover.Positioner>
                 </Popover.Root>
@@ -57,6 +57,7 @@
 <script lang="ts" setup>
 import { Popover } from "@ark-ui/vue";
 import { nanoid } from "nanoid";
+import ButtonSecondary from "../buttons/button-secondary.vue";
 
 const files = defineModel<
     {

components/composer/mention-suggestbox.vue

@@ -1,16 +1,17 @@
 <template>
-    <ComposerSuggestbox class="max-h-40 overflow-auto !w-auto !flex-row">
+    <Suggestbox class="max-h-40 overflow-auto !w-auto !flex-row">
         <div v-for="(user, index) in topUsers" :key="user.username" @click="emit('autocomplete', user.acct)"
             :ref="el => { if (el) userRefs[index] = el as Element }" :title="user.acct"
             :class="['flex', 'justify-center', 'shrink-0', 'items-center', 'p-2', 'size-12', 'hover:bg-dark-900/70', { 'bg-primary-500': index === selectedUserIndex }]">
             <img :src="user.avatar" class="w-full h-full object-contain" :alt="`User ${user.acct}`" />
         </div>
-    </ComposerSuggestbox>
+    </Suggestbox>
 </template>
 
 <script lang="ts" setup>
 import type { Account } from "@lysand-org/client/types";
 import { distance } from "fastest-levenshtein";
+import Suggestbox from "./suggestbox.vue";
 const props = defineProps<{
     currentlyTypingMention: string | null;
     textarea: HTMLTextAreaElement | undefined;

components/composer/modal.client.vue

@@ -31,6 +31,7 @@
 
 <script lang="ts" setup>
 import { Dialog } from "@ark-ui/vue";
+import Composer from "./composer.vue";
 const open = ref(false);
 
 const identity = useCurrentIdentity();