versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 03:29:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: ✨ Add quoting, replies, refactor parts of old code

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-04-27 20:35:26 -10:00
parent 0f214b6a17
commit b4e682a562
No known key found for this signature in database
8 changed files with 167 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

47
components/composer/composer.vue
View file

@ -1,6 +1,19 @@
<template>
<div class="px-6 py-4">
<div class="py-2 relative">
<div v-if="respondingTo" class="mb-4">
<span v-if="respondingType === 'reply'" class="text-gray-400 uppercase text-xs font-semibold">
<Icon name="tabler:arrow-back-up" class="h-4 w-4 text-gray-400 mb-0.5" aria-hidden="true" />
Replying to
</span>
<span v-else-if="respondingType === 'quote'" class="text-gray-400 uppercase text-xs font-semibold">
<Icon name="tabler:quote" class="h-4 w-4 text-gray-400" aria-hidden="true" />
Quoting
</span>
<div class="mt-2 max-h-72 overflow-y-auto">
<SocialElementsNotesNote :note="respondingTo" :small="true" :disabled="true" />
</div>
</div>
<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
@ -18,9 +31,31 @@
<script lang="ts" setup>
import type { Instance } from "~/types/mastodon/instance";
import type { Status } from "~/types/mastodon/status";
const { textarea, input: content } = useTextareaAutosize();
const textarea = ref<HTMLTextAreaElement | undefined>(undefined);
const { input: content } = useTextareaAutosize({
element: textarea,
});
const { Control_Enter, Command_Enter } = useMagicKeys();
const respondingTo = ref<Status | null>(null);
const respondingType = ref<"reply" | "quote" | null>(null);
onMounted(() => {
useListen("composer:reply", (note: Status) => {
respondingTo.value = note;
respondingType.value = "reply";
content.value = `@${note.account.acct} `;
textarea.value?.focus();
});
useListen("composer:quote", (note: Status) => {
respondingTo.value = note;
respondingType.value = "quote";
content.value = `@${note.account.acct} `;
textarea.value?.focus();
});
});
watchEffect(() => {
if (Control_Enter.value || Command_Enter.value) {
@ -46,8 +81,16 @@ const send = async () => {
Authorization: `Bearer ${tokenData.value?.access_token}`,
},
body: JSON.stringify({
status: content.value,
status: content.value.trim(),
content_type: "text/markdown",
in_reply_to_id:
respondingType.value === "reply"
? respondingTo.value?.id
: null,
quote_id:
respondingType.value === "quote"
? respondingTo.value?.id
: null,
}),
})
.then(async (res) => {

10
components/composer/modal.vue
View file

@ -26,6 +26,16 @@
<script lang="ts" setup>
const open = ref(false);
useListen("note:reply", async (note) => {
open.value = true;
await nextTick();
useEvent("composer:reply", note);
});
useListen("note:quote", async (note) => {
open.value = true;
await nextTick();
useEvent("composer:quote", note);
});
useListen("composer:open", () => {
open.value = true;
});