chore: ⬆️ Upgrade to Nuxt 4

app/components/composer/composer.vue

@@ -0,0 +1,83 @@
+<template>
+    <div v-if="relation" class="overflow-auto max-h-72">
+        <Note :note="relation.note" :hide-actions="true" :small-layout="true" />
+    </div>
+
+    <ContentWarning v-if="state.sensitive" v-model="state.contentWarning" />
+
+    <EditorContent @paste-files="uploadFiles" v-model:content="state.content" v-model:raw-content="state.rawContent" :placeholder="getRandomSplash()"
+        class="[&>.tiptap]:!border-none [&>.tiptap]:!ring-0 [&>.tiptap]:!outline-none [&>.tiptap]:rounded-none p-0 [&>.tiptap]:max-h-[50dvh] [&>.tiptap]:overflow-y-auto [&>.tiptap]:min-h-48 [&>.tiptap]:!ring-offset-0 [&>.tiptap]:h-full"
+        :disabled="state.sending" :mode="state.contentType === 'text/html' ? 'rich' : 'plain'" />
+
+    <div class="w-full flex flex-row gap-2 overflow-x-auto *:shrink-0 pb-2">
+        <input type="file" ref="fileInput" @change="uploadFileFromEvent" class="hidden" multiple />
+        <Files v-model:files="state.files" />
+    </div>
+
+    <DialogFooter class="items-center flex-row overflow-x-auto">
+        <ComposerButtons @submit="send" @pick-file="fileInput?.click()" v-model:content-type="state.contentType" v-model:sensitive="state.sensitive" v-model:visibility="state.visibility" :relation="state.relation" :sending="state.sending" :can-send="state.canSend" :raw-content="state.rawContent" />
+    </DialogFooter>
+</template>
+
+<script lang="ts" setup>
+import Note from "~/components/notes/note.vue";
+import EditorContent from "../editor/content.vue";
+import { DialogFooter } from "../ui/dialog";
+import ComposerButtons from "./buttons.vue";
+import {
+    type ComposerState,
+    getRandomSplash,
+    send,
+    state,
+    stateFromRelation,
+    uploadFile,
+} from "./composer";
+import ContentWarning from "./content-warning.vue";
+import Files from "./files.vue";
+
+const { Control_Enter, Command_Enter } = useMagicKeys();
+const fileInput = useTemplateRef<HTMLInputElement>("fileInput");
+
+watch([Control_Enter, Command_Enter], () => {
+    if (state.sending || !preferences.ctrl_enter_send.value) {
+        return;
+    }
+
+    send();
+});
+
+const props = defineProps<{
+    relation?: ComposerState["relation"];
+}>();
+
+watch(
+    props,
+    async (props) => {
+        if (props.relation) {
+            await stateFromRelation(
+                props.relation.type,
+                props.relation.note,
+                props.relation.source,
+            );
+        }
+    },
+    { immediate: true },
+);
+
+const uploadFileFromEvent = (e: Event) => {
+    const target = e.target as HTMLInputElement;
+    const files = Array.from(target.files ?? []);
+
+    for (const file of files) {
+        uploadFile(file);
+    }
+
+    target.value = "";
+};
+
+const uploadFiles = (files: File[]) => {
+    for (const file of files) {
+        uploadFile(file);
+    }
+};
+</script>