feat: ✨ Add post composer

components/composer/composer.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class="px-6 py-4">
+        <div class="py-2 relative">
+            <textarea :disabled="submitting" ref="textarea" v-model="content" placeholder="You can use Markdown here!"
+                class="resize-none min-h-48 prose prose-invert max-h-[70dvh] w-full p-0 focus:!ring-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 bg-transparent appearance-none focus:!border-none focus:!outline-none disabled:cursor-not-allowed"></textarea>
+            <div
+                :class="['absolute bottom-0 right-0 p-2 text-gray-400 font-semibold text-xs', remainingCharacters < 0 && 'text-red-500']">
+                {{ remainingCharacters }}
+            </div>
+        </div>
+        <div class="flex flex-row gap-1 border-white/20">
+            <ButtonsPrimary :loading="submitting" @click="send" class="ml-auto rounded-full">
+                <span>Send!</span>
+            </ButtonsPrimary>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { Instance } from "~/types/mastodon/instance";
+
+const { textarea, input: content } = useTextareaAutosize();
+const { Control_Enter, Command_Enter } = useMagicKeys();
+
+watchEffect(() => {
+    if (Control_Enter.value || Command_Enter.value) {
+        send();
+    }
+});
+
+const props = defineProps<{
+    instance: Instance;
+}>();
+
+const emits = defineEmits<{
+    send: [];
+}>();
+
+const submitting = ref(false);
+const tokenData = useTokenData();
+const client = useMegalodon(tokenData);
+
+const send = async () => {
+    submitting.value = true;
+
+    await fetch(
+        new URL("/api/v1/statuses", client.value?.baseUrl ?? "").toString(),
+        {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${tokenData.value?.access_token}`,
+            },
+            body: JSON.stringify({
+                status: content.value,
+                content_type: "text/markdown",
+            }),
+        },
+    ).then((res) => {
+        if (!res.ok) {
+            throw new Error("Failed to send status");
+        }
+
+        content.value = "";
+        submitting.value = false;
+    });
+
+    emits("send");
+};
+
+const characterLimit = computed(
+    () => props.instance?.configuration.statuses.max_characters ?? 0,
+);
+const remainingCharacters = computed(
+    () => characterLimit.value - (content.value?.length ?? 0),
+);
+</script>

components/composer/modal.vue

@@ -0,0 +1,38 @@
+<template>
+    <HeadlessTransitionRoot as="template" :show="open">
+        <HeadlessDialog as="div" class="relative z-50" @close="emits('close')">
+            <HeadlessTransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0"
+                enter-to="opacity-100" leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
+                <div class="fixed inset-0 bg-black/70 transition-opacity" />
+            </HeadlessTransitionChild>
+
+            <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+                <div class="flex min-h-full items-start justify-center p-4 text-center sm:items-center sm:p-0">
+                    <HeadlessTransitionChild as="template" enter="ease-out duration-300"
+                        enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                        enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200"
+                        leave-from="opacity-100 translate-y-0 sm:scale-100"
+                        leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+                        <HeadlessDialogPanel
+                            class="relative transform overflow-hidden rounded-lg bg-dark-700 ring-1 ring-white/10 text-left shadow-xl transition-all sm:my-8 w-full max-w-xl">
+                            <Composer v-if="instance" :instance="instance" @send="emits('close')" />
+                        </HeadlessDialogPanel>
+                    </HeadlessTransitionChild>
+                </div>
+            </div>
+        </HeadlessDialog>
+    </HeadlessTransitionRoot>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+    open: boolean;
+}>();
+
+const client = useMegalodon();
+const instance = useInstance(client);
+
+const emits = defineEmits<{
+    close: [];
+}>();
+</script>