feat: ✨ Add post composer

components/buttons/primary.vue

@@ -1,5 +1,5 @@
 <template>
-    <ButtonsBase class="bg-pink-500 hover:bg-pink-400">
+    <ButtonsBase :loading="loading" class="bg-pink-500 hover:bg-pink-400">
         <slot />
     </ButtonsBase>
 </template>
@@ -9,7 +9,11 @@ import type { ButtonHTMLAttributes } from "vue";
 
 interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}
 
-defineProps<Props>();
+defineProps<
+    Props & {
+        loading?: boolean;
+    }
+>();
 </script>
 
 <style></style>

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>

components/sidebars/navigation.vue

@@ -17,7 +17,6 @@
             </NuxtLink>
         </div>
 
-        <!-- Login buttons -->
         <div class="flex flex-col gap-3 mt-auto">
             <h3 class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
                 Account</h3>
@@ -41,13 +40,14 @@
             <h3 v-if="tokenData"
                 class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
                 Posts</h3>
-            <ButtonsBase v-if="tokenData" @click="compose" disabled
+            <ButtonsBase v-if="tokenData" @click="compose"
                 class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 bg-gradient-to-tr from-pink-300 via-purple-300 to-indigo-400 overflow-hidden h-12 w-full duration-200">
                 <Icon name="tabler:writing" class="shrink-0 text-2xl" />
                 <span class="pr-28 line-clamp-1">Compose</span>
             </ButtonsBase>
         </div>
     </aside>
+    <ComposerModal :open="composerOpen" @close="composerOpen = false" />
 </template>
 
 <script lang="ts" setup>
@@ -64,6 +64,7 @@ const timelines = ref([
     },
 ]);
 
+const composerOpen = ref(false);
 const loadingAuth = ref(false);
 
 const appData = useAppData();
@@ -71,7 +72,7 @@ const tokenData = useTokenData();
 const client = useMegalodon();
 
 const compose = () => {
-    alert("Not implemented yet");
+    composerOpen.value = true;
 };
 
 const signIn = async () => {