From b4e682a5620f4a82d7dd2f3bea7ccb27dcf86ffe Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Sat, 27 Apr 2024 20:35:26 -1000
Subject: [PATCH] feat: :sparkles: Add quoting, replies, refactor parts of old
 code

---
 bun.lockb                                 | Bin 494516 -> 494516 bytes
 components/composer/composer.vue          |  47 +++++++-
 components/composer/modal.vue             |  10 ++
 components/dropdowns/AdaptiveDropdown.vue |   4 +-
 components/social-elements/notes/note.vue | 133 +++++++++++++---------
 composables/EventBus.ts                   |   7 ++
 composables/NoteData.ts                   |  14 ++-
 tailwind.config.ts                        |  16 +++
 8 files changed, 167 insertions(+), 64 deletions(-)

diff --git a/bun.lockb b/bun.lockb
index 26f9be64b070185febf947bb552a9e3062d57f6e..030f01df77e2c73cbf95f89dac6e15dd276b2e29 100755
GIT binary patch
delta 163
zcmV;U09^mHmmaj29*`~|HWWoy7@JRGJ;Dt)IW=k=8$%-iRZRQ2oWw)sLjUACfljqf
z0lF#y4U=(9CzG&D2!}W;0k=3S0`1N~05O~=$5-1|Ra9~?O&Bw+%co<e8203)0CC1t
ztK<Xg%X6BGz)Lf{t8C**aqm4UbB86SHzmNgisrRKS7ZOXhh_Q#hh_Q$hh_Q%hh_Q&
Rw`KYUGAIEvx0oUa9BEGhMcM!W

delta 161
zcmV;S0AByJmmaj29*`~|0*=Kf2~I_2KAsT+fcYs14R^%^VA~?6-&{ZGO-Z(=fljqf
z0lF%a1YanVuuKStI4c3SI4c6}&Oiv<DF&A)ox}U4oMyVM>b;<`i4~`A5Dle|>$rXk
z=BqXsD3uJA-Fy0Dk73q5U4BD>z4>3>w!9Q#id}LrCCZ0o`T~b#`U8h$`UHn%`USUT
P`UWy60W!CkA_p94v3o{!

diff --git a/components/composer/composer.vue b/components/composer/composer.vue
index ce4b90b..0802885 100644
--- a/components/composer/composer.vue
+++ b/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) => {
diff --git a/components/composer/modal.vue b/components/composer/modal.vue
index 61008d9..a97f069 100644
--- a/components/composer/modal.vue
+++ b/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;
 });
diff --git a/components/dropdowns/AdaptiveDropdown.vue b/components/dropdowns/AdaptiveDropdown.vue
index 94309fa..3e88bbf 100644
--- a/components/dropdowns/AdaptiveDropdown.vue
+++ b/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>
diff --git a/components/social-elements/notes/note.vue b/components/social-elements/notes/note.vue
index 029e8c5..67ff78c 100644
--- a/components/social-elements/notes/note.vue
+++ b/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,55 +40,64 @@
                 }}</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>
-        <div v-else-if="!small"
-            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>
-                <Icon name="tabler:arrow-back-up" class="h-5 w-5 text-gray-200" aria-hidden="true" />
-                <span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.replies_count) }}</span>
-            </button>
-            <button>
-                <Icon name="tabler:heart" class="h-5 w-5 text-gray-200" aria-hidden="true" />
-                <span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.favourites_count) }}</span>
-            </button>
-            <button>
-                <Icon name="tabler:repeat" class="h-5 w-5 text-gray-200" aria-hidden="true" />
-                <span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.reblogs_count) }}</span>
-            </button>
-            <button>
-                <Icon name="tabler:quote" class="h-5 w-5 text-gray-200" aria-hidden="true" />
-                <span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(0) }}</span>
-            </button>
-            <DropdownsAdaptiveDropdown>
-                <template #button>
-                    <HeadlessMenuButton>
-                        <Icon name="tabler:dots" class="h-5 w-5 text-gray-200" aria-hidden="true" />
-                        <span class="sr-only">Open menu</span>
-                    </HeadlessMenuButton>
-                </template>
+        <Skeleton class="!h-10 w-full mt-6" :enabled="!props.note || !loaded" v-if="!small || !showInteractions">
+            <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 class="group" @click="note && useEvent('note:reply', note)">
+                    <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 class="group">
+                    <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 class="group">
+                    <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 class="group" @click="note && useEvent('note:quote', note)">
+                    <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>
+                    <template #button>
+                        <HeadlessMenuButton>
+                            <Icon name="tabler:dots" class="h-5 w-5 text-gray-200" aria-hidden="true" />
+                            <span class="sr-only">Open menu</span>
+                        </HeadlessMenuButton>
+                    </template>
 
-                <template #items>
-                    <HeadlessMenuItem>
-                        <ButtonsDropdownElement @click="copy(JSON.stringify(note, null, 4))" icon="tabler:code"
-                            class="w-full">
-                            Copy API
-                            Response
-                        </ButtonsDropdownElement>
-                    </HeadlessMenuItem>
-                    <HeadlessMenuItem>
-                        <ButtonsDropdownElement @click="copy(url)" icon="tabler:link" class="w-full">
-                            Copy Link
-                        </ButtonsDropdownElement>
-                    </HeadlessMenuItem>
-                    <HeadlessMenuItem>
-                        <ButtonsDropdownElement @click="remove" icon="tabler:backspace"
-                            class="w-full border-r-2 border-red-500">
-                            Delete
-                        </ButtonsDropdownElement>
-                    </HeadlessMenuItem>
-                </template>
-            </DropdownsAdaptiveDropdown>
-        </div>
+                    <template #items>
+                        <HeadlessMenuItem>
+                            <ButtonsDropdownElement @click="copy(JSON.stringify(note, null, 4))" icon="tabler:code"
+                                class="w-full">
+                                Copy API
+                                Response
+                            </ButtonsDropdownElement>
+                        </HeadlessMenuItem>
+                        <HeadlessMenuItem>
+                            <ButtonsDropdownElement @click="copy(url)" icon="tabler:link" class="w-full">
+                                Copy Link
+                            </ButtonsDropdownElement>
+                        </HeadlessMenuItem>
+                        <HeadlessMenuItem>
+                            <ButtonsDropdownElement @click="remove" icon="tabler:backspace"
+                                class="w-full border-r-2 border-red-500">
+                                Delete
+                            </ButtonsDropdownElement>
+                        </HeadlessMenuItem>
+                    </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<{
-    note?: Status;
-    small?: boolean;
-}>();
+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();
diff --git a/composables/EventBus.ts b/composables/EventBus.ts
index cd1a04f..8c04164 100644
--- a/composables/EventBus.ts
+++ b/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;
 };
diff --git a/composables/NoteData.ts b/composables/NoteData.ts
index 65d5bab..64998fa 100644
--- a/composables/NoteData.ts
+++ b/composables/NoteData.ts
@@ -5,10 +5,15 @@ export const useNoteData = (
     noteProp: MaybeRef<Status | undefined>,
     client: Ref<Mastodon | null>,
 ) => {
-    const renderedNote = computed(
-        () => toValue(noteProp)?.reblog ?? toValue(noteProp),
+    const isQuote = computed(() => !!toValue(noteProp)?.quote);
+    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,
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 04b1ebc..20e57f6 100644
--- a/tailwind.config.ts
+++ b/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],