feat: ✨ Timeline refactors, timelines now auto-refresh

components/social-elements/notes/note.vue

@@ -70,10 +70,16 @@
                         </ButtonsDropdownElement>
                     </HeadlessMenuItem>
                     <HeadlessMenuItem>
-                        <ButtonsDropdownElement @click="note && copy(note.uri)" icon="tabler:code" class="w-full">
+                        <ButtonsDropdownElement @click="note && copy(note.uri)" icon="tabler:link" class="w-full">
                             Copy Link
                         </ButtonsDropdownElement>
                     </HeadlessMenuItem>
+                    <HeadlessMenuItem>
+                        <ButtonsDropdownElement @click="note && deleteNote()" icon="tabler:backspace"
+                            class="w-full border-r-2 border-red-500">
+                            Delete
+                        </ButtonsDropdownElement>
+                    </HeadlessMenuItem>
                 </template>
             </DropdownsAdaptiveDropdown>
         </div>
@@ -89,6 +95,10 @@ const props = defineProps<{
     small?: boolean;
 }>();
 
+const emits = defineEmits<{
+    delete: [];
+}>();
+
 // Handle reblogs
 const note = computed(() => props.note?.reblog ?? props.note);
 const noteClosed = ref(
@@ -96,7 +106,8 @@ const noteClosed = ref(
 );
 
 const { copy } = useClipboard();
-const client = useMegalodon();
+const tokenData = useTokenData();
+const client = useMegalodon(tokenData);
 const mentions = await useResolveMentions(
     note.value?.mentions ?? [],
     client.value,
@@ -124,6 +135,15 @@ const numberFormat = (number = 0) =>
     }).format(number);
 const attachments = note.value?.media_attachments ?? [];
 const noteUrl = note.value && `/@${note.value.account.acct}/${note.value.id}`;
+
+const deleteNote = async () => {
+    const result = await client.value?.deleteStatus(note.value?.id ?? "");
+
+    if (result?.data) {
+        console.log("Status deleted", result.data);
+        emits('delete')
+    }
+};
 </script>
 
 <style>

components/timelines/Account.vue

@@ -0,0 +1,21 @@
+<template>
+    <TimelinesTimeline :timeline="timeline" :load-next="loadNext" :load-prev="loadPrev" @delete="noteDelete" />
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+    id?: string;
+}>();
+
+const client = useMegalodon();
+const timelineParameters = ref({});
+const { timeline, loadNext, loadPrev } = useAccountTimeline(
+    client.value,
+    props.id ?? null,
+    timelineParameters,
+);
+
+const noteDelete = async (id: string) => {
+    timeline.value = timeline.value.filter((note) => note.id !== id);
+};
+</script>

components/timelines/Local.vue

@@ -0,0 +1,16 @@
+<template>
+    <TimelinesTimeline :timeline="timeline" :load-next="loadNext" :load-prev="loadPrev" @delete="noteDelete" />
+</template>
+
+<script lang="ts" setup>
+const client = useMegalodon();
+const timelineParameters = ref({});
+const { timeline, loadNext, loadPrev } = useLocalTimeline(
+    client.value,
+    timelineParameters,
+);
+
+const noteDelete = async (id: string) => {
+    timeline.value = timeline.value.filter((note) => note.id !== id);
+};
+</script>

components/timelines/Public.vue

@@ -1,49 +1,16 @@
 <template>
-    <ClientOnly>
+    <TimelinesTimeline :timeline="timeline" :load-next="loadNext" :load-prev="loadPrev" @delete="noteDelete" />
-
-        <SocialElementsNotesNote v-for="note of timeline" :key="note.id" :note="note" />
-        <span ref="skeleton"></span>
-        <SocialElementsNotesNote v-for="index of 5" v-if="!hasReachedEnd" :skeleton="true" />
-
-        <div v-if="hasReachedEnd"
-            class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3">
-            <Icon name="tabler:message-off" class="h-6 w-6" />
-            <span>No more posts, you've seen them all</span>
-        </div>
-    </ClientOnly>
 </template>
 
 <script lang="ts" setup>
 const client = useMegalodon();
-
-const isLoading = ref(true);
-
 const timelineParameters = ref({});
-const hasReachedEnd = ref(false);
 const { timeline, loadNext, loadPrev } = usePublicTimeline(
     client.value,
     timelineParameters,
 );
-const skeleton = ref<HTMLSpanElement | null>(null);
 
-onMounted(() => {
+const noteDelete = async (id: string) => {
-    useIntersectionObserver(skeleton, async (entries) => {
+    timeline.value = timeline.value.filter((note) => note.id !== id);
-        if (
+};
-            entries[0].isIntersecting &&
-            !hasReachedEnd.value &&
-            !isLoading.value
-        ) {
-            isLoading.value = true;
-            await loadNext();
-        }
-    });
-});
-
-watch(timeline, (newTimeline, oldTimeline) => {
-    isLoading.value = false;
-    // If less than NOTES_PER_PAGE statuses are returned, we have reached the end
-    if (newTimeline.length - oldTimeline.length < useConfig().NOTES_PER_PAGE) {
-        hasReachedEnd.value = true;
-    }
-});
 </script>

components/timelines/timeline.vue

@@ -0,0 +1,62 @@
+<template>
+    <ClientOnly>
+
+        <SocialElementsNotesNote @delete="emits('delete', note.id)" v-for="note of timeline" :key="note.id"
+            :note="note" />
+        <span ref="skeleton"></span>
+        <SocialElementsNotesNote v-for="index of 5" v-if="!hasReachedEnd" :skeleton="true" />
+
+        <div v-if="hasReachedEnd"
+            class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3">
+            <Icon name="tabler:message-off" class="h-6 w-6" />
+            <span>No more posts, you've seen them all</span>
+        </div>
+    </ClientOnly>
+</template>
+
+<script lang="ts" setup>
+import type { Status } from '~/types/mastodon/status';
+
+const props = defineProps<{
+    timeline: Status[];
+    loadNext: () => Promise<void>;
+    loadPrev: () => Promise<void>;
+}>();
+
+const emits = defineEmits<{
+    delete: [id: string];
+}>();
+
+const isLoading = ref(true);
+
+const hasReachedEnd = ref(false);
+const skeleton = ref<HTMLSpanElement | null>(null);
+
+onMounted(() => {
+    useIntersectionObserver(skeleton, async (entries) => {
+        if (
+            entries[0].isIntersecting &&
+            !hasReachedEnd.value &&
+            !isLoading.value
+        ) {
+            isLoading.value = true;
+            await props.loadNext();
+        }
+    });
+});
+
+// Every 5 seconds, load newer posts (prev)
+useIntervalFn(() => {
+    props.loadPrev();
+}, 5000);
+
+watch(() => props.timeline, (newTimeline, oldTimeline) => {
+    // If posts are deleted, don't start loading more posts
+    if (newTimeline.length === oldTimeline.length - 1) return;
+    isLoading.value = false;
+    // If less than NOTES_PER_PAGE statuses are returned, we have reached the end
+    if (newTimeline.length - oldTimeline.length < useConfig().NOTES_PER_PAGE) {
+        hasReachedEnd.value = true;
+    }
+});
+</script>

pages/[username]/index.vue

@@ -1,19 +1,7 @@
 <template>
     <NuxtLayout name="app">
         <SocialElementsUsersAccount v-if="isMobile" :account="account ?? undefined" />
-        <ClientOnly>
+        <TimelinesAccount :id="accountId ?? undefined" :key="accountId ?? undefined" />
-            <div class="w-full">
-                <SocialElementsNotesNote v-for="note of timeline" :key="note.id" :note="note" />
-                <span ref="skeleton"></span>
-                <SocialElementsNotesNote v-for="index of 5" v-if="!hasReachedEnd" :skeleton="true" />
-
-                <div v-if="hasReachedEnd"
-                    class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3">
-                    <Icon name="tabler:message-off" class="h-6 w-6" />
-                    <span>No more posts, you've seen them all</span>
-                </div>
-            </div>
-        </ClientOnly>
 
         <template #right>
             <SocialElementsUsersAccount v-if="!isMobile" :account="account ?? undefined" />
@@ -44,42 +32,10 @@ const account = computed<Account | null>(
 );
 const accountId = computed(() => account.value?.id ?? null);
 
-onMounted(async () => {
-    useIntersectionObserver(skeleton, async (entries) => {
-        if (
-            entries[0].isIntersecting &&
-            !hasReachedEnd.value &&
-            !isLoadingTimeline.value
-        ) {
-            isLoadingTimeline.value = true;
-            await loadNext();
-        }
-    });
-});
-
 useServerSeoMeta({
     title: account.value?.display_name,
     description: account.value?.note,
     ogImage: account.value?.avatar,
     profileUsername: account.value?.acct,
 });
-
-const isLoadingTimeline = ref(true);
-
-const timelineParameters = ref({});
-const hasReachedEnd = ref(false);
-const { timeline, loadNext, loadPrev } = useAccountTimeline(
-    client.value,
-    accountId,
-    timelineParameters,
-);
-const skeleton = ref<HTMLSpanElement | null>(null);
-
-watch(timeline, (newTimeline, oldTimeline) => {
-    isLoadingTimeline.value = false;
-    // If less than NOTES_PER_PAGE statuses are returned, we have reached the end
-    if (newTimeline.length - oldTimeline.length < useConfig().NOTES_PER_PAGE) {
-        hasReachedEnd.value = true;
-    }
-});
 </script>

pages/local.vue

@@ -1,51 +1,9 @@
 <template>
-    <ClientOnly>
+    <TimelinesLocal />
-        <SocialElementsNotesNote v-for="note of timeline" :key="note.id" :note="note" />
-        <span ref="skeleton"></span>
-        <SocialElementsNotesNote v-for="index of 5" v-if="!hasReachedEnd" :skeleton="true" />
-
-        <div v-if="hasReachedEnd"
-            class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3">
-            <Icon name="tabler:message-off" class="h-6 w-6" />
-            <span>No more posts, you've seen them all</span>
-        </div>
-    </ClientOnly>
 </template>
 
 <script lang="ts" setup>
 definePageMeta({
     layout: "app",
 });
-const client = useMegalodon();
-
-const isLoading = ref(true);
-
-const timelineParameters = ref({});
-const hasReachedEnd = ref(false);
-const { timeline, loadNext, loadPrev } = useLocalTimeline(
-    client.value,
-    timelineParameters,
-);
-const skeleton = ref<HTMLSpanElement | null>(null);
-
-onMounted(() => {
-    useIntersectionObserver(skeleton, async (entries) => {
-        if (
-            entries[0].isIntersecting &&
-            !hasReachedEnd.value &&
-            !isLoading.value
-        ) {
-            isLoading.value = true;
-            await loadNext();
-        }
-    });
-});
-
-watch(timeline, (newTimeline, oldTimeline) => {
-    isLoading.value = false;
-    // If less than NOTES_PER_PAGE statuses are returned, we have reached the end
-    if (newTimeline.length - oldTimeline.length < useConfig().NOTES_PER_PAGE) {
-        hasReachedEnd.value = true;
-    }
-});
 </script>