frontend/app/components/composer/composer.vue

<template>
    <div v-if="relation" class="overflow-auto max-h-72">
        <Note :note="relation.note" :hide-actions="true" :small-layout="true" />
    </div>

    <InputGroup class="p-1">
        <InputGroupAddon
            v-if="store.sensitive"
            align="block-start"
            class="pt-3"
        >
            <Input
                v-model:model-value="store.contentWarning"
                placeholder="Put your content warning here"
            />
        </InputGroupAddon>

        <EditorContent
            data-slot="input-group-control"
            @paste-files="uploadFiles"
            v-model:content="store.content"
            v-model:raw-content="store.rawContent"
            :placeholder="getRandomSplash()"
            class=" placeholder:text-muted-foreground flex field-sizing-content min-h-58 w-full px-4 text-base disabled:opacity-50 md:text-sm flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none"
            :disabled="store.sending"
            :mode="store.contentType === 'text/html' ? 'rich' : 'plain'"
        />

        <InputGroupAddon
            v-if="store.files.length > 0"
            align="block-end"
            class="overflow-x-auto *:shrink-0"
        >
            <Files v-model:files="store.files" :composer-key="composerKey" />
        </InputGroupAddon>

        <InputGroupAddon align="block-end">
            <Select v-model:model-value="store.contentType">
                <SelectTrigger
                    as-child
                    disable-default-classes
                    disable-select-icon
                >
                    <InputGroupButton variant="ghost" size="icon-sm">
                        <LetterText v-if="store.contentType === 'text/html'" />
                        <Type v-else />
                    </InputGroupButton>
                </SelectTrigger>
                <SelectContent>
                    <SelectItem value="text/plain">Plain text</SelectItem>
                    <SelectItem value="text/html">Rich text</SelectItem>
                </SelectContent>
            </Select>
            <VisibilityPicker v-model:visibility="store.visibility">
                <InputGroupButton
                    variant="ghost"
                    size="icon-sm"
                    :disabled="store.relation?.type === 'edit'"
                >
                    <component :is="visibilities[store.visibility].icon" />
                </InputGroupButton>
            </VisibilityPicker>
            <InputGroupButton
                variant="ghost"
                size="icon-sm"
                @click="fileInput?.click()"
            >
                <FilePlus2 />
            </InputGroupButton>
            <Toggle size="sm" v-model="store.sensitive">
                <TriangleAlert />
            </Toggle>
            <InputGroupText
                :class="['ml-auto', charactersLeft < 0 && 'text-destructive']"
            >
                {{ charactersLeft.toLocaleString(getLocale(), {
                    maximumFractionDigits: 2,
                    notation: 'compact',
                    compactDisplay: 'short',
                }) }}
            </InputGroupText>
            <Separator orientation="vertical" class="h-4!" />
            <InputGroupButton
                variant="default"
                size="icon-sm"
                :disabled="store.sending || !store.canSend"
                @click="send"
            >
                <Spinner v-if="store.sending" />
                <ArrowUp v-else />
                <span class="sr-only">Send</span>
            </InputGroupButton>
        </InputGroupAddon>
    </InputGroup>

    <input
        type="file"
        ref="fileInput"
        @change="uploadFileFromEvent"
        class="hidden"
        multiple
    >
</template>

<script lang="ts" setup>
import {
    ArrowUp,
    FilePlus2,
    LetterText,
    TriangleAlert,
    Type,
} from "lucide-vue-next";
import { Separator } from "reka-ui";
import Note from "~/components/notes/note.vue";
import { getLocale } from "~~/paraglide/runtime";
import EditorContent from "../editor/content.vue";
import { Input } from "../ui/input";
import {
    InputGroup,
    InputGroupAddon,
    InputGroupButton,
    InputGroupText,
} from "../ui/input-group";
import { Select, SelectContent, SelectItem, SelectTrigger } from "../ui/select";
import { Spinner } from "../ui/spinner";
import { Toggle } from "../ui/toggle";
import Files from "./files.vue";
import { visibilities } from "./visibilities";
import VisibilityPicker from "./visibility-picker.vue";

const props = defineProps<{
    relation?: ComposerState["relation"];
}>();

const { Control_Enter, Command_Enter } = useMagicKeys();
const { play } = useAudio();
const fileInput = useTemplateRef<HTMLInputElement>("fileInput");
const composerKey = props.relation
    ? (`${props.relation.type}-${props.relation.note.id}` as const)
    : "blank";
const store = useComposerStore(composerKey)();
const authStore = useAuthStore();
const charactersLeft = computed(() => {
    const max = authStore.instance?.configuration.statuses.max_characters ?? 0;

    return max - store.rawContent.length;
});

watch([Control_Enter, Command_Enter], () => {
    if (store.sending || !preferences.ctrl_enter_send.value) {
        return;
    }

    send();
});

const getRandomSplash = (): string => {
    const splashes = useConfig().COMPOSER_SPLASHES;

    return splashes[Math.floor(Math.random() * splashes.length)] as string;
};

const send = async () => {
    const result =
        store.relation?.type === "edit"
            ? await store.sendEdit()
            : await store.send();

    if (result) {
        play("publish");
        store.$reset();
        useEvent("composer:close");
    }
};

watch(
    props,
    async (props) => {
        if (props.relation && !store.relation) {
            store.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) {
        store.uploadFile(file);
    }

    target.value = "";
};

const uploadFiles = (files: File[]) => {
    for (const file of files) {
        store.uploadFile(file);
    }
};
</script>