chore: ⬆️ Upgrade to Nuxt 4

app/components/composer/button.vue

@@ -0,0 +1,18 @@
+<template>
+    <Tooltip>
+        <TooltipTrigger as="div">
+            <slot />
+        </TooltipTrigger>
+        <TooltipContent>
+            <p>{{ tooltip }}</p>
+        </TooltipContent>
+    </Tooltip>
+</template>
+
+<script lang="ts" setup>
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+
+const { tooltip } = defineProps<{
+    tooltip: string;
+}>();
+</script>

app/components/composer/buttons.vue

@@ -0,0 +1,84 @@
+<template>
+    <ComposerButton :tooltip="m.game_tough_seal_adore()">
+        <Button variant="ghost" size="icon">
+            <AtSign class="!size-5" />
+        </Button>
+    </ComposerButton>
+    <ComposerButton :tooltip="m.plane_born_koala_hope()">
+        <Toggle variant="default" size="sm" :model-value="contentType === 'text/html'" @update:model-value="
+            (i) =>
+                (contentType = i ? 'text/html' : 'text/plain')
+        ">
+            <LetterText class="!size-5" />
+        </Toggle>
+    </ComposerButton>
+    <VisibilityPicker v-model:visibility="visibility">
+        <Button variant="ghost" size="icon" :disabled="relation?.type === 'edit'">
+            <component :is="visibilities[visibility].icon" />
+        </Button>
+    </VisibilityPicker>
+    <ComposerButton :tooltip="m.blue_ornate_coyote_tickle()">
+        <Button variant="ghost" size="icon">
+            <Smile class="!size-5" />
+        </Button>
+    </ComposerButton>
+    <ComposerButton :tooltip="m.top_patchy_earthworm_vent()">
+        <Button variant="ghost" size="icon" @click="emit('pickFile')">
+            <FilePlus2 class="!size-5" />
+        </Button>
+    </ComposerButton>
+    <ComposerButton :tooltip="m.frail_broad_mallard_dart()">
+        <Toggle variant="default" size="sm" v-model="sensitive">
+            <TriangleAlert class="!size-5" />
+        </Toggle>
+    </ComposerButton>
+    <CharacterCounter class="ml-auto" :max="(identity as Identity).instance.configuration.statuses.max_characters" :current="rawContent.length" />
+    <Button type="submit" size="lg" :disabled="sending || !canSend" @click="emit('submit')">
+        <Loader v-if="sending" class="!size-5 animate-spin" />
+        {{
+            relation?.type === "edit"
+                ? m.gaudy_strong_puma_slide()
+                : m.free_teal_bulldog_learn()
+        }}
+    </Button>
+</template>
+
+<script lang="ts" setup>
+import {
+    AtSign,
+    FilePlus2,
+    LetterText,
+    Loader,
+    Smile,
+    TriangleAlert,
+} from "lucide-vue-next";
+import * as m from "~~/paraglide/messages.js";
+import { Button } from "../ui/button";
+import { Toggle } from "../ui/toggle";
+import ComposerButton from "./button.vue";
+import CharacterCounter from "./character-counter.vue";
+import { type ComposerState, visibilities } from "./composer";
+import VisibilityPicker from "./visibility-picker.vue";
+
+const { relation, sending, canSend, rawContent } = defineProps<{
+    relation?: ComposerState["relation"];
+    sending: boolean;
+    canSend: boolean;
+    rawContent: string;
+}>();
+
+const contentType = defineModel<ComposerState["contentType"]>("contentType", {
+    required: true,
+});
+const visibility = defineModel<ComposerState["visibility"]>("visibility", {
+    required: true,
+});
+const sensitive = defineModel<ComposerState["sensitive"]>("sensitive", {
+    required: true,
+});
+
+const emit = defineEmits<{
+    submit: [];
+    pickFile: [];
+}>();
+</script>

app/components/composer/character-counter.vue

@@ -0,0 +1,39 @@
+<template>
+    <Tooltip>
+        <TooltipTrigger as-child>
+            <div v-bind="$attrs" class="m-1">
+                <TriangleAlert v-if="isOverflowing" class="text-destructive-foreground size-6" />
+                <svg v-else viewBox="0 0 100 100" class="transform rotate-[-90deg] size-6">
+                    <!-- Background Circle -->
+                    <circle cx="50" cy="50" r="46" stroke="currentColor" class="text-muted" stroke-width="8"
+                        fill="none" />
+                    <!-- Progress Circle -->
+                    <circle cx="50" cy="50" r="46" stroke="currentColor" stroke-width="8" fill="none"
+                        stroke-dasharray="100" :stroke-dashoffset="100 - percentage" pathLength="100"
+                        stroke-linecap="round" class="text-accent-foreground transition-all duration-500" />
+                </svg>
+            </div>
+        </TooltipTrigger>
+        <TooltipContent class="text-center">
+            <p>{{ current }} / {{ max }}</p>
+            <p v-if="isOverflowing">Too long!</p>
+        </TooltipContent>
+    </Tooltip>
+</template>
+
+<script lang="ts" setup>
+import { TriangleAlert } from "lucide-vue-next";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+
+const { max, current } = defineProps<{
+    max: number;
+    current: number;
+}>();
+
+const percentage = computed(() => {
+    return Math.min((current / max) * 100, 100);
+});
+const isOverflowing = computed(() => {
+    return current > max;
+});
+</script>

app/components/composer/composer.ts

@@ -0,0 +1,240 @@
+import type { ResponseError } from "@versia/client";
+import type { Attachment, Status, StatusSource } from "@versia/client/schemas";
+import { AtSign, Globe, Lock, LockOpen } from "lucide-vue-next";
+import type { FunctionalComponent } from "vue";
+import { toast } from "vue-sonner";
+import type { z } from "zod";
+import * as m from "~~/paraglide/messages.js";
+
+export interface ComposerState {
+    relation?: {
+        type: "reply" | "quote" | "edit";
+        note: z.infer<typeof Status>;
+        source?: z.infer<typeof StatusSource>;
+    };
+    content: string;
+    rawContent: string;
+    sensitive: boolean;
+    contentWarning: string;
+    contentType: "text/html" | "text/plain";
+    visibility: z.infer<typeof Status.shape.visibility>;
+    files: {
+        apiId?: string;
+        file: File;
+        alt?: string;
+        uploading: boolean;
+        updating: boolean;
+    }[];
+    sending: boolean;
+    canSend: boolean;
+}
+
+const { play } = useAudio();
+export const state = reactive<ComposerState>({
+    relation: undefined,
+    content: "",
+    rawContent: "",
+    sensitive: false,
+    contentWarning: "",
+    contentType: "text/html",
+    visibility: preferences.default_visibility.value,
+    files: [],
+    sending: false,
+    canSend: false,
+});
+
+watch(
+    state,
+    (newState) => {
+        const characterLimit =
+            identity.value?.instance.configuration.statuses.max_characters ?? 0;
+        const characterCount = newState.rawContent.length;
+
+        state.canSend =
+            characterCount > 0
+                ? characterCount <= characterLimit
+                : newState.files.length > 0;
+    },
+    { immediate: true },
+);
+
+export const visibilities: Record<
+    z.infer<typeof Status.shape.visibility>,
+    {
+        icon: FunctionalComponent;
+        name: string;
+        text: string;
+    }
+> = {
+    public: {
+        icon: Globe,
+        name: m.lost_trick_dog_grace(),
+        text: m.last_mean_peacock_zip(),
+    },
+    unlisted: {
+        icon: LockOpen,
+        name: m.funny_slow_jannes_walk(),
+        text: m.grand_strong_gibbon_race(),
+    },
+    private: {
+        icon: Lock,
+        name: m.grassy_empty_raven_startle(),
+        text: m.white_teal_ostrich_yell(),
+    },
+    direct: {
+        icon: AtSign,
+        name: m.pretty_bold_baboon_wave(),
+        text: m.lucky_mean_robin_link(),
+    },
+};
+
+export const getRandomSplash = (): string => {
+    const splashes = useConfig().COMPOSER_SPLASHES;
+
+    return splashes[Math.floor(Math.random() * splashes.length)] as string;
+};
+
+export const calculateMentionsFromReply = (
+    note: z.infer<typeof Status>,
+): string => {
+    const peopleToMention = note.mentions
+        .concat(note.account)
+        // Deduplicate mentions
+        .filter((men, i, a) => a.indexOf(men) === i)
+        // Remove self
+        .filter((men) => men.id !== identity.value?.account.id);
+
+    if (peopleToMention.length === 0) {
+        return "";
+    }
+
+    const mentions = peopleToMention.map((me) => `@${me.acct}`).join(" ");
+
+    return `${mentions} `;
+};
+
+const fileFromUrl = (url: URL | string): Promise<File> => {
+    return fetch(url).then((response) => {
+        if (!response.ok) {
+            throw new Error("Failed to fetch file");
+        }
+
+        return response.blob().then((blob) => {
+            const file = new File([blob], "file", { type: blob.type });
+            return file;
+        });
+    });
+};
+
+export const stateFromRelation = async (
+    relationType: "reply" | "quote" | "edit",
+    note: z.infer<typeof Status>,
+    source?: z.infer<typeof StatusSource>,
+): Promise<void> => {
+    state.relation = {
+        type: relationType,
+        note,
+        source,
+    };
+    state.content = note.content || calculateMentionsFromReply(note);
+    state.rawContent = source?.text || "";
+
+    if (relationType === "edit") {
+        state.sensitive = note.sensitive;
+        state.contentWarning = source?.spoiler_text || note.spoiler_text;
+        state.visibility = note.visibility;
+        state.files = await Promise.all(
+            note.media_attachments.map(async (file) => ({
+                apiId: file.id,
+                alt: file.description ?? undefined,
+                file: await fileFromUrl(file.url),
+                uploading: false,
+                updating: false,
+            })),
+        );
+    }
+};
+
+export const uploadFile = (file: File): Promise<void> => {
+    const index =
+        state.files.push({
+            file,
+            uploading: true,
+            updating: false,
+        }) - 1;
+
+    return client.value
+        .uploadMedia(file)
+        .then((media) => {
+            if (!state.files[index]) {
+                throw new Error("File not found");
+            }
+
+            state.files[index].uploading = false;
+            state.files[index].apiId = (
+                media.data as z.infer<typeof Attachment>
+            ).id;
+        })
+        .catch(() => {
+            state.files.splice(index, 1);
+        });
+};
+
+export const send = async (): Promise<void> => {
+    if (state.sending) {
+        return;
+    }
+
+    state.sending = true;
+
+    try {
+        if (state.relation?.type === "edit") {
+            const { data } = await client.value.editStatus(
+                state.relation.note.id,
+                {
+                    status: state.content,
+                    content_type: state.contentType,
+                    sensitive: state.sensitive,
+                    spoiler_text: state.sensitive
+                        ? state.contentWarning
+                        : undefined,
+                    media_ids: state.files
+                        .map((f) => f.apiId)
+                        .filter((f) => f !== undefined),
+                },
+            );
+
+            useEvent("composer:send-edit", data);
+            play("publish");
+            useEvent("composer:close");
+        } else {
+            const { data } = await client.value.postStatus(state.content, {
+                content_type: state.contentType,
+                sensitive: state.sensitive,
+                spoiler_text: state.sensitive
+                    ? state.contentWarning
+                    : undefined,
+                media_ids: state.files
+                    .map((f) => f.apiId)
+                    .filter((f) => f !== undefined),
+                quote_id:
+                    state.relation?.type === "quote"
+                        ? state.relation.note.id
+                        : undefined,
+                in_reply_to_id:
+                    state.relation?.type === "reply"
+                        ? state.relation.note.id
+                        : undefined,
+                visibility: state.visibility,
+            });
+
+            useEvent("composer:send", data as z.infer<typeof Status>);
+            play("publish");
+            useEvent("composer:close");
+        }
+    } catch (e) {
+        toast.error((e as ResponseError).message);
+    } finally {
+        state.sending = false;
+    }
+};

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>

app/components/composer/content-warning.vue

@@ -0,0 +1,9 @@
+<template>
+    <Input v-model:model-value="contentWarning" placeholder="Put your content warning here" />
+</template>
+
+<script lang="ts" setup>
+import { Input } from "../ui/input";
+
+const contentWarning = defineModel<string>();
+</script>

app/components/composer/dialog.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import type { Status, StatusSource } from "@versia/client/schemas";
+import { toast } from "vue-sonner";
+import type { z } from "zod";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogTitle,
+} from "@/components/ui/dialog";
+import * as m from "~~/paraglide/messages.js";
+import Composer from "./composer.vue";
+
+useListen("composer:open", () => {
+    if (identity.value) {
+        open.value = true;
+    }
+});
+
+useListen("composer:edit", async (note) => {
+    const id = toast.loading(m.wise_late_fireant_walk(), {
+        duration: 0,
+    });
+    const { data: source } = await client.value.getStatusSource(note.id);
+    relation.value = {
+        type: "edit",
+        note,
+        source,
+    };
+    open.value = true;
+    toast.dismiss(id);
+});
+
+useListen("composer:reply", (note) => {
+    relation.value = {
+        type: "reply",
+        note,
+    };
+    open.value = true;
+});
+
+useListen("composer:quote", (note) => {
+    relation.value = {
+        type: "quote",
+        note,
+    };
+    open.value = true;
+});
+
+useListen("composer:close", () => {
+    open.value = false;
+    relation.value = null;
+    // Unfocus the active element
+    activeElement.value?.blur();
+});
+
+const activeElement = useActiveElement();
+const open = ref(false);
+const relation = ref(
+    null as {
+        type: "reply" | "quote" | "edit";
+        note: z.infer<typeof Status>;
+        source?: z.infer<typeof StatusSource>;
+    } | null,
+);
+</script>
+
+<template>
+    <Dialog
+        v-model:open="open"
+        @update:open="
+            (o) => {
+                if (!o) {
+                    relation = null; // Unfocus the active element
+                    activeElement?.blur();
+                }
+            }
+        "
+    >
+        <DialogContent
+            :hide-close="true"
+            class="sm:max-w-xl max-w-full w-[calc(100%-2*0.5rem)] grid-cols-1 max-h-[90dvh] p-5 pt-6 top-2 sm:top-1/2 translate-y-0 sm:-translate-y-1/2"
+        >
+            <DialogTitle class="sr-only">
+                {{
+                    relation?.type === "reply"
+                        ? m.loved_busy_mantis_slide()
+                        : relation?.type === "quote"
+                        ? "Quote"
+                        : m.chunky_dull_marlin_trip()
+                }}
+            </DialogTitle>
+            <DialogDescription class="sr-only">
+                {{
+                    relation?.type === "reply"
+                        ? m.tired_grassy_vulture_forgive()
+                        : relation?.type === "quote"
+                        ? m.livid_livid_nils_snip()
+                        : m.brief_cool_capybara_fear()
+                }}
+            </DialogDescription>
+            <Composer :relation="relation ?? undefined" />
+        </DialogContent>
+    </Dialog>
+</template>

app/components/composer/file-preview.vue

@@ -0,0 +1,127 @@
+<template>
+    <DropdownMenu>
+        <DropdownMenuTrigger
+            as="button"
+            :disabled="file.uploading || file.updating"
+            class="block bg-card text-card-foreground shadow-sm h-28 overflow-hidden rounded relative min-w-28 *:disabled:opacity-50"
+        >
+            <img :src="createObjectURL(file.file)" class="object-contain h-28 w-full" :alt="file.alt" />
+            <Badge
+                v-if="!(file.uploading || file.updating)"
+                class="absolute bottom-1 right-1"
+                variant="default"
+                >{{ formatBytes(file.file.size) }}</Badge
+            >
+            <Spinner v-else class="absolute bottom-1 right-1 size-8 p-1.5" />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent class="min-w-48">
+            <DropdownMenuLabel>{{ file.file.name }}</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem @click="editName">
+                <TextCursorInput />
+                Rename
+            </DropdownMenuItem>
+            <DropdownMenuItem @click="editCaption">
+                <Captions />
+                Add caption
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem @click="emit('remove')">
+                <Delete />
+                Remove
+            </DropdownMenuItem>
+        </DropdownMenuContent>
+    </DropdownMenu>
+</template>
+
+<script lang="ts" setup>
+import { Captions, Delete, TextCursorInput } from "lucide-vue-next";
+import Spinner from "~/components/graphics/spinner.vue";
+import { confirmModalService } from "~/components/modals/composable.ts";
+import { Badge } from "~/components/ui/badge";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+import type { ComposerState } from "./composer";
+
+const file = defineModel<ComposerState["files"][number]>("file", {
+    required: true,
+});
+
+const emit = defineEmits<{
+    remove: [];
+}>();
+
+const editName = async () => {
+    const result = await confirmModalService.confirm({
+        title: "Enter a new name",
+        defaultValue: file.value.file.name,
+        confirmText: "Edit",
+        inputType: "text",
+    });
+
+    if (result.confirmed) {
+        file.value.updating = true;
+        file.value.file = new File(
+            [file.value.file],
+            result.value ?? file.value.file.name,
+            {
+                type: file.value.file.type,
+                lastModified: file.value.file.lastModified,
+            },
+        );
+
+        try {
+            await client.value.updateMedia(file.value.apiId ?? "", {
+                file: file.value.file,
+            });
+        } finally {
+            file.value.updating = false;
+        }
+    }
+};
+
+const editCaption = async () => {
+    const result = await confirmModalService.confirm({
+        title: "Enter a caption",
+        message:
+            "Captions are useful for people with visual impairments, or when the image can't be displayed.",
+        defaultValue: file.value.alt,
+        confirmText: "Add",
+        inputType: "textarea",
+    });
+
+    if (result.confirmed) {
+        file.value.updating = true;
+        file.value.alt = result.value;
+
+        try {
+            await client.value.updateMedia(file.value.apiId ?? "", {
+                description: file.value.alt,
+            });
+        } finally {
+            file.value.updating = false;
+        }
+    }
+};
+
+const createObjectURL = URL.createObjectURL;
+
+const formatBytes = (bytes: number) => {
+    if (bytes === 0) {
+        return "0 Bytes";
+    }
+    const k = 1000;
+    const digitsAfterPoint = 2;
+    const sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${Number.parseFloat((bytes / k ** i).toFixed(digitsAfterPoint))} ${
+        sizes[i]
+    }`;
+};
+</script>

app/components/composer/files.vue

@@ -0,0 +1,13 @@
+<template>
+    <FilePreview v-for="(file, index) in files" :key="file.apiId" :file="file" @update:file="files[index] = $event"
+        @remove="files.splice(index, 1)" />
+</template>
+
+<script lang="ts" setup>
+import type { ComposerState } from "./composer";
+import FilePreview from "./file-preview.vue";
+
+const files = defineModel<ComposerState["files"]>("files", {
+    required: true,
+});
+</script>

app/components/composer/visibility-picker.vue

@@ -0,0 +1,33 @@
+<template>
+    <Select v-model:model-value="visibility">
+        <SelectTrigger as-child disable-default-classes disable-select-icon>
+            <slot />
+        </SelectTrigger>
+        <SelectContent>
+            <SelectItem v-for="(v, k) in visibilities" :key="k" @click="visibility = k" :value="k">
+                <div class="flex flex-row gap-3 items-center w-full justify-between">
+                    <component :is="v.icon" class="size-4" />
+                    <div class="flex flex-col gap-1">
+                        <span class="font-semibold">{{ v.name }}</span>
+                        <span>{{ v.text }}</span>
+                    </div>
+                </div>
+            </SelectItem>
+        </SelectContent>
+    </Select>
+</template>
+
+<script lang="ts" setup>
+import { Button } from "~/components/ui/button";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+} from "~/components/ui/select";
+import { type ComposerState, visibilities } from "./composer";
+
+const visibility = defineModel<ComposerState["visibility"]>("visibility", {
+    required: true,
+});
+</script>