frontend/components/composer/composer.vue

<template>
    <Input v-model:model-value="state.contentWarning" v-if="state.sensitive"
        placeholder="Put your content warning here" />

    <Textarea :placeholder="chosenSplash" v-model:model-value="state.content"
        class="!border-none !ring-0 !outline-none rounded-none p-0 max-h-full min-h-48 !ring-offset-0"
        :disabled="sending" />

    <DialogFooter class="items-center flex-row">
        <TooltipProvider>
            <Tooltip>
                <TooltipTrigger as="div">
                    <Button variant="ghost" size="icon">
                        <AtSign class="!size-5" />
                    </Button>
                </TooltipTrigger>
                <TooltipContent>
                    <p>Mention someone</p>
                </TooltipContent>
            </Tooltip>
        </TooltipProvider>
        <TooltipProvider>
            <Tooltip>
                <TooltipTrigger as="div">
                    <Toggle variant="default" size="sm" :pressed="state.contentType === 'text/markdown'"
                        @update:pressed="i => state.contentType = i ? 'text/plain' : 'text/markdown'">
                        <LetterText class="!size-5" />
                    </Toggle>
                </TooltipTrigger>
                <TooltipContent>
                    <p>Enable Markdown</p>
                </TooltipContent>
            </Tooltip>
        </TooltipProvider>
        <Select v-model:model-value="state.visibility">
            <SelectTrigger :as-child="true" :disabled="relation?.type === 'edit'">
                <Button variant="ghost" size="icon">
                    <component :is="visibilities[state.visibility].icon" class="!size-5" />
                </Button>
            </SelectTrigger>
            <SelectContent>
                <SelectItem v-for="(v, k) in visibilities" :key="k" @click="state.visibility = k" :value="k">
                    <div class="flex flex-row gap-4 items-center w-full justify-between">
                        <div class="flex flex-col gap-1">
                            <span class="font-semibold">{{ v.name }}</span>
                            <span>{{ v.text }}</span>
                        </div>
                        <component :is="v.icon" class="!size-5" />
                    </div>
                </SelectItem>
            </SelectContent>
        </Select>
        <TooltipProvider>
            <Tooltip>
                <TooltipTrigger as="div">
                    <Button variant="ghost" size="icon">
                        <Smile class="!size-5" />
                    </Button>
                </TooltipTrigger>
                <TooltipContent>
                    <p>Insert emoji</p>
                </TooltipContent>
            </Tooltip>
        </TooltipProvider>
        <TooltipProvider>
            <Tooltip>
                <TooltipTrigger as="div">
                    <Button variant="ghost" size="icon">
                        <FilePlus2 class="!size-5" />
                    </Button>
                </TooltipTrigger>
                <TooltipContent>
                    <p>Attach a file</p>
                </TooltipContent>
            </Tooltip>
        </TooltipProvider>
        <TooltipProvider>
            <Tooltip>
                <TooltipTrigger as="div">
                    <Toggle variant="default" size="sm" @update:pressed="i => state.sensitive = i">
                        <TriangleAlert class="!size-5" />
                    </Toggle>
                </TooltipTrigger>
                <TooltipContent>
                    <p>Mark as sensitive</p>
                </TooltipContent>
            </Tooltip>
        </TooltipProvider>
        <Button type="submit" size="lg" class="ml-auto" :disabled="sending" @click="submit">
            <Loader v-if="sending" class="!size-5 animate-spin" />
            {{ relation?.type === "edit" ? "Save" : "Send" }}
        </Button>
    </DialogFooter>
</template>

<script lang="ts" setup>
import type { ResponseError } from "@versia/client";
import type { Status } from "@versia/client/types";
import {
    AtSign,
    FilePlus2,
    Globe,
    LetterText,
    Loader,
    Lock,
    LockOpen,
    Smile,
    TriangleAlert,
} from "lucide-vue-next";
import { SelectTrigger } from "radix-vue";
import { toast } from "vue-sonner";
import { Select, SelectContent, SelectItem } from "~/components/ui/select";
import { Button } from "../ui/button";
import { Input } from "../ui/input";
import { Textarea } from "../ui/textarea";
import { Toggle } from "../ui/toggle";

const { Control_Enter, Command_Enter } = useMagicKeys();

watch([Control_Enter, Command_Enter], () => {
    if (sending.value) {
        return;
    }

    submit();
});

const { relation } = defineProps<{
    relation?: {
        type: "reply" | "quote" | "edit";
        note: Status;
    };
}>();

const state = reactive({
    content: "",
    sensitive: false,
    contentWarning: "",
    contentType: "text/markdown" as "text/markdown" | "text/plain",
    visibility: "public" as Status["visibility"],
    files: [] as {
        apiId?: string;
        file: File;
        alt: string;
        uploading: boolean;
        updating: boolean;
    }[],
});
const sending = ref(false);

const splashes = useConfig().COMPOSER_SPLASHES;
const chosenSplash = splashes[Math.floor(Math.random() * splashes.length)];

const submit = async () => {
    sending.value = true;

    try {
        if (relation?.type === "edit") {
            await client.value.editStatus(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),
            });
        }

        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: relation?.type === "quote" ? relation.note.id : undefined,
            in_reply_to_id:
                relation?.type === "reply" ? relation.note.id : undefined,
            visibility: state.visibility,
        });

        useEvent("composer:close");
    } catch (_e) {
        const e = _e as ResponseError;
        toast.error(e.message);
    } finally {
        sending.value = false;
    }
};

const visibilities = {
    public: {
        icon: Globe,
        name: "Public",
        text: "Can be seen by anyone.",
    },
    unlisted: {
        icon: LockOpen,
        name: "Unlisted",
        text: "Can be seen by anyone with the link.",
    },
    private: {
        icon: Lock,
        name: "Private",
        text: "Can only be seen by your followers.",
    },
    direct: {
        icon: AtSign,
        name: "Direct",
        text: "Can only be seen by mentioned users.",
    },
};
</script>