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

components/composer/composer.vue

@@ -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) => {

components/composer/modal.vue

@@ -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;
 });

components/dropdowns/AdaptiveDropdown.vue

@@ -2,7 +2,7 @@
     <HeadlessMenu v-slot="{ close }">
         <slot name="button"></slot>
 
-        <HeadlessMenuItems @click="close" class="fixed inset-0 z-5 bg-black/50">
+        <HeadlessMenuItems @click="close" class="fixed z-20 inset-0 z-5 bg-black/50">
 
         </HeadlessMenuItems>
 
@@ -12,7 +12,7 @@
             leave-active-class="transition ease-out duration-75" leave-from-class="transform opacity-100 scale-100"
             leave-to-class="transform opacity-0 scale-95">
             <HeadlessMenuItems
-                :class="['z-10 mt-2 rounded overflow-hidden bg-dark-900 shadow-lg ring-1 ring-white/10 focus:outline-none',
+                :class="['z-20 mt-2 rounded overflow-hidden bg-dark-900 shadow-lg ring-1 ring-white/10 focus:outline-none',
         isSmallScreen ? 'bottom-0 fixed inset-x-0 w-full origin-bottom' : 'absolute right-0 origin-top-right top-full min-w-56']">
                 <div v-if="isSmallScreen" class="w-full bg-white/10 py-2">
                     <div class="rounded-full h-1 bg-gray-400 w-12 mx-auto"></div>

components/social-elements/notes/note.vue

@@ -1,6 +1,9 @@
 <template>
     <div
-        class="first:rounded-t last:rounded-b ring-1 ring-white/5 p-6 flex flex-col bg-dark-800 hover:bg-dark-700 duration-200">
+        class="first:rounded-t last:rounded-b ring-1 relative ring-white/5 p-6 flex flex-col bg-dark-800 hover:bg-dark-700 duration-200">
+        <!-- Overlay that blocks clicks for disabled notes -->
+        <div v-if="disabled" class="absolute z-10 inset-0 hover:cursor-not-allowed">
+        </div>
         <div v-if="reblog" class="mb-4 flex flex-row gap-2 items-center text-pink-500">
             <Skeleton :enabled="!loaded" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
                 <Icon name="tabler:repeat" class="h-6 w-6" aria-hidden="true" />
@@ -12,7 +15,7 @@
         <SocialElementsNotesHeader :note="note" :small="small" />
         <div v-if="!collapsed">
             <NuxtLink :href="url" class="mt-6 block relative">
-                <Skeleton :enabled="!loaded" :min-width="50" :max-width="100" width-unit="%" shape="rect"
+                <Skeleton :enabled="!props.note || !loaded" :min-width="50" :max-width="100" width-unit="%" shape="rect"
                     type="content">
                     <div v-if="content"
                         :class="['prose prose-invert duration-200 !max-w-full break-words prose-a:no-underline content']"
@@ -24,6 +27,9 @@
                 <SocialElementsNotesAttachment v-for="attachment of note.media_attachments" :key="attachment.id"
                     :attachment="attachment" />
             </div>
+            <div v-if="isQuote && note?.reblog" class="mt-4">
+                <SocialElementsNotesNote :note="note?.reblog" :small="true" />
+            </div>
         </div>
         <div v-else
             class="rounded text-center ring-1 !max-w-full ring-white/10 h-52 mt-6 prose prose-invert p-4 flex flex-col justify-center items-center">
@@ -34,23 +40,31 @@
                 }}</span>
             <ButtonsSecondary @click="collapsed = false" class="mt-4">Show content</ButtonsSecondary>
         </div>
-        <Skeleton class="!h-10 w-full mt-6" :enabled="true" v-if="!note && !small"></Skeleton>
+        <Skeleton class="!h-10 w-full mt-6" :enabled="!props.note || !loaded" v-if="!small || !showInteractions">
-        <div v-else-if="!small"
+            <div v-if="showInteractions"
                 class="mt-6 flex flex-row items-stretch relative justify-between text-sm h-10 hover:[&>button]:bg-dark-800 [&>button]:duration-200 [&>button]:rounded [&>button]:flex [&>button]:flex-1 [&>button]:flex-row [&>button]:items-center [&>button]:justify-center">
-            <button>
+                <button class="group" @click="note && useEvent('note:reply', note)">
-                <Icon name="tabler:arrow-back-up" class="h-5 w-5 text-gray-200" aria-hidden="true" />
+                    <Icon name="tabler:arrow-back-up" class="h-5 w-5 text-gray-200 group-hover:text-blue-600"
+                        aria-hidden="true" />
                     <span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.replies_count) }}</span>
                 </button>
-            <button>
+                <button class="group">
-                <Icon name="tabler:heart" class="h-5 w-5 text-gray-200" aria-hidden="true" />
+                    <Icon name="tabler:heart" v-if="!note?.favourited"
+                        class="h-5 w-5 text-gray-200 group-hover:text-pink-600" aria-hidden="true" />
+                    <Icon name="tabler:heart-filled" v-else class="h-5 w-5 text-pink-600 group-hover:text-gray-200"
+                        aria-hidden="true" />
                     <span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.favourites_count) }}</span>
                 </button>
-            <button>
+                <button class="group">
-                <Icon name="tabler:repeat" class="h-5 w-5 text-gray-200" aria-hidden="true" />
+                    <Icon name="tabler:repeat" v-if="!note?.reblogged"
+                        class="h-5 w-5 text-gray-200 group-hover:text-green-600" aria-hidden="true" />
+                    <Icon name="tabler:repeat-off" v-else class="h-5 w-5 text-green-600 group-hover:text-gray-200"
+                        aria-hidden="true" />
                     <span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.reblogs_count) }}</span>
                 </button>
-            <button>
+                <button class="group" @click="note && useEvent('note:quote', note)">
-                <Icon name="tabler:quote" class="h-5 w-5 text-gray-200" aria-hidden="true" />
+                    <Icon name="tabler:quote" class="h-5 w-5 text-gray-200 group-hover:text-blue-600"
+                        aria-hidden="true" />
                     <span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(0) }}</span>
                 </button>
                 <DropdownsAdaptiveDropdown>
@@ -83,6 +97,7 @@
                     </template>
                 </DropdownsAdaptiveDropdown>
             </div>
+        </Skeleton>
     </div>
 </template>
 
@@ -90,10 +105,17 @@
 import Skeleton from "~/components/skeleton/Skeleton.vue";
 import type { Status } from "~/types/mastodon/status";
 
-const props = defineProps<{
+const props = withDefaults(
+    defineProps<{
         note?: Status;
         small?: boolean;
-}>();
+        disabled?: boolean;
+        showInteractions?: boolean;
+    }>(),
+    {
+        showInteractions: true,
+    },
+);
 
 const tokenData = useTokenData();
 const client = useMegalodon(tokenData);
@@ -104,12 +126,11 @@ const {
     content,
     shouldHide,
     url,
+    isQuote,
     reblog,
     reblogDisplayName,
 } = useNoteData(ref(props.note), client);
 
-console.log(props.note?.account.display_name ?? "");
-
 const collapsed = ref(shouldHide.value);
 
 const { copy } = useClipboard();

composables/EventBus.ts

@@ -5,7 +5,14 @@ type ApplicationEvents = {
     "note:reply": Status;
     "note:delete": Status;
     "note:edit": Status;
+    "note:like": Status;
+    "note:unlike": Status;
+    "note:reblog": Status;
+    "note:unreblog": Status;
+    "note:quote": Status;
     "composer:open": undefined;
+    "composer:reply": Status;
+    "composer:quote": Status;
     "composer:send": Status;
     "composer:close": undefined;
 };

composables/NoteData.ts

@@ -5,10 +5,15 @@ export const useNoteData = (
     noteProp: MaybeRef<Status | undefined>,
     client: Ref<Mastodon | null>,
 ) => {
-    const renderedNote = computed(
+    const isQuote = computed(() => !!toValue(noteProp)?.quote);
-        () => toValue(noteProp)?.reblog ?? toValue(noteProp),
+    const isReblog = computed(
+        () => !isQuote.value && !!toValue(noteProp)?.reblog,
+    );
+    const renderedNote = computed(() =>
+        isReblog.value
+            ? toValue(noteProp)?.reblog ?? toValue(noteProp)
+            : toValue(noteProp),
     );
-    const isReblog = computed(() => !!toValue(noteProp)?.reblog);
     const shouldHide = computed(
         () =>
             renderedNote.value?.sensitive ||
@@ -31,7 +36,7 @@ export const useNoteData = (
         renderedNote.value?.account.emojis ?? [],
     );
     const reblog = computed(() =>
-        isReblog.value && renderedNote.value
+        isReblog.value && renderedNote.value && !isQuote.value
             ? {
                   avatar: renderedNote.value.account.avatar,
                   acct: renderedNote.value.account.acct,
@@ -57,6 +62,7 @@ export const useNoteData = (
         loaded,
         note: renderedNote,
         content,
+        isQuote,
         reblog,
         reblogDisplayName,
         shouldHide,

tailwind.config.ts

@@ -21,6 +21,22 @@ export default (<Partial<Config>>{
                     950: "#080808",
                 },
             },
+            animation: {
+                like: "like 1s ease-in-out",
+            },
+            keyframes: {
+                like: {
+                    "0%": {
+                        transform: "scale(1)",
+                    },
+                    "50%": {
+                        transform: "scale(1.3) rotate(45deg)",
+                    },
+                    "100%": {
+                        transform: "scale(1) rotate(360deg)",
+                    },
+                },
+            },
         },
     },
     plugins: [forms, typography],