From d6f36eaecfdf3ed6bbec57dd7092906bf5b494ca Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Fri, 28 Jun 2024 17:05:50 -1000
Subject: [PATCH] refactor: :recycle: Rewrite timeline rendering code

---
 bun.lockb                                     | Bin 653156 -> 653156 bytes
 components/composer/composer.vue              |   2 +-
 components/sidebars/collapsible-aside.vue     |   2 +-
 .../social-elements/notes/note-content.vue    |   2 +-
 components/social-elements/notes/note.vue     |   8 +-
 .../social-elements/notifications/notif.vue   |  43 ++-
 components/timelines/account.vue              |  33 ++-
 components/timelines/home.vue                 |  30 ++-
 components/timelines/local.vue                |  30 ++-
 components/timelines/notifications.vue        |  55 ++--
 components/timelines/public.vue               |  30 ++-
 components/timelines/timeline-item.vue        |  26 ++
 components/timelines/timeline.vue             | 125 +++++----
 composables/AccountTimeline.ts                |  41 +--
 composables/HomeTimeline.ts                   |  30 +--
 composables/LocalTimeline.ts                  |  32 +--
 composables/NotificationTimeline.ts           |  32 +--
 composables/PublicTimeline.ts                 |  30 +--
 composables/Timeline.ts                       | 254 +++++++-----------
 package.json                                  |   2 +-
 pages/[username]/[uuid].vue                   |   6 +-
 pages/[username]/index.vue                    |   2 +-
 pages/notifications.vue                       |   2 +-
 settings.ts                                   |  10 +
 24 files changed, 392 insertions(+), 435 deletions(-)
 create mode 100644 components/timelines/timeline-item.vue

diff --git a/bun.lockb b/bun.lockb
index 51cfdaee45bc43194f23bbeabd4291c256c7fa7d..f811f3ac02daac325eea2bf5817b1c683c7fb9c2 100755
GIT binary patch
delta 187
zcmaFzPW{O{^$B_kIiZqAOEZ^whC8qSZ=hCj_0SgQPtxDQja4@V+da!arP=7W)sL~O
zd2+-7gLaM<Mj&R|&e6hrHpn4<g7{z6*?cQA^nDiZ3JqB1fAY1_`VbDTwR4w8KMN6b
za?4`yFLp59bnZV-^Gy@8y7H>7yi*TeOg!*qi}<tcDy!N>uQLNN%XZQ0tXF0-8nwSF
mU;|=yAm-Tqs({m*h1E!}B)w{SUMZ*K^lz^@q_+cE-x>iR%TwF{

delta 187
zcmaFzPW{O{^$B_k2KN~1*wmTaBvx6^s8P*y`?*tENH5}~P~XyUGycFk&l>%<`Z0Dj
zPmZWHXy<5Q1Y)M`94*XegB%2JPZwIV^GM^OM4t3w-5L>rztZ+8jD`!Rgr;+IR1_LH
z&kg#voPFxS`D<&XCb`a%-aIXf_elbe%f@eyPhPB8x29e6Ix`TnY!|)GdSxb~Vf(8B
mHXvpPVvg;v3OK!4SPk_`(yONDm2yf>|Mr?gdOMKytq}k!(@tan

diff --git a/components/composer/composer.vue b/components/composer/composer.vue
index 4838ebf..5596d71 100644
--- a/components/composer/composer.vue
+++ b/components/composer/composer.vue
@@ -1,7 +1,7 @@
 <template>
     <div v-if="respondingTo" class="mb-4" role="region" aria-label="Responding to">
         <OverlayScrollbarsComponent :defer="true" class="max-h-72 overflow-y-auto">
-            <Note :note="respondingTo" :small="true" :disabled="true" class="!rounded-none !bg-primary-500/10" />
+            <Note :element="respondingTo" :small="true" :disabled="true" class="!rounded-none !bg-primary-500/10" />
         </OverlayScrollbarsComponent>
     </div>
     <div class="px-6 pb-4 pt-5">
diff --git a/components/sidebars/collapsible-aside.vue b/components/sidebars/collapsible-aside.vue
index 99baf59..9773bcb 100644
--- a/components/sidebars/collapsible-aside.vue
+++ b/components/sidebars/collapsible-aside.vue
@@ -2,7 +2,7 @@
     <aside v-bind="$props" role="complementary" :aria-expanded="open ? 'true' : 'false'"
         :class="['flex max-h-dvh overflow-hidden duration-200', open ? enterClass : leaveClass, direction === 'left' ? 'flex-row' : 'flex-row-reverse']">
         <OverlayScrollbarsComponent :defer="true"
-            class="bg-dark-900 ring-1 ring-white/10 h-full overflow-y-auto w-full">
+            class="bg-dark-700 ring-1 ring-white/10 h-full overflow-y-auto w-full">
             <slot />
         </OverlayScrollbarsComponent>
         <button @click="open = !open" aria-label="Toggle sidebar"
diff --git a/components/social-elements/notes/note-content.vue b/components/social-elements/notes/note-content.vue
index 0cd2660..f62ea30 100644
--- a/components/social-elements/notes/note-content.vue
+++ b/components/social-elements/notes/note-content.vue
@@ -11,7 +11,7 @@
             class="[&:not(:first-child)]:mt-6 grid grid-cols-2 gap-4 [&>*]:aspect-square [&:has(>:last-child:nth-child(1))>*]:aspect-video [&:has(>:last-child:nth-child(1))]:block">
             <Attachment v-for="attachment of note.media_attachments" :key="attachment.id" :attachment="attachment" />
         </div>
-        <Note v-if="isQuote && note?.quote" :note="note?.quote" :small="true" class="mt-4 !rounded" />
+        <Note v-if="isQuote && note?.quote" :element="note?.quote" :small="true" class="mt-4 !rounded" />
     </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">
diff --git a/components/social-elements/notes/note.vue b/components/social-elements/notes/note.vue
index 196194e..e34e496 100644
--- a/components/social-elements/notes/note.vue
+++ b/components/social-elements/notes/note.vue
@@ -16,7 +16,7 @@
         <Header :note="outputtedNote" :small="small" />
         <NoteContent :note="outputtedNote" :loaded="loaded" :url="url" :content="content" :is-quote="isQuote"
             :should-hide="shouldHide" />
-        <Skeleton class="!h-10 w-full mt-6" :enabled="!props.note || !loaded" v-if="!small || !showInteractions">
+        <Skeleton class="!h-10 w-full mt-6" :enabled="!props.element || !loaded" v-if="!small || !showInteractions">
             <div v-if="showInteractions"
                 class="mt-6 flex flex-row items-stretch disabled:*:opacity-70 [&>button]:max-w-28 disabled:*:cursor-not-allowed relative justify-around text-sm h-10 hover:enabled:[&>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="outputtedNote && useEvent('note:reply', outputtedNote)"
@@ -61,7 +61,7 @@
                                 </ButtonDropdown>
                             </Menu.Item>
                             <Menu.Item value="">
-                                <ButtonDropdown @click="copy(JSON.stringify(props.note, null, 4))" icon="tabler:code"
+                                <ButtonDropdown @click="copy(JSON.stringify(props.element, null, 4))" icon="tabler:code"
                                     class="w-full">
                                     Copy API
                                     Response
@@ -158,7 +158,7 @@ import ReplyHeader from "./reply-header.vue";
 
 const props = withDefaults(
     defineProps<{
-        note?: Status;
+        element?: Status;
         small?: boolean;
         disabled?: boolean;
         showInteractions?: boolean;
@@ -168,7 +168,7 @@ const props = withDefaults(
     },
 );
 
-const noteRef = ref(props.note);
+const noteRef = ref(props.element);
 
 useListen("composer:send-edit", (note) => {
     if (note.id === noteRef.value?.id) {
diff --git a/components/social-elements/notifications/notif.vue b/components/social-elements/notifications/notif.vue
index 4eec79c..6ab2c1a 100644
--- a/components/social-elements/notifications/notif.vue
+++ b/components/social-elements/notifications/notif.vue
@@ -1,22 +1,20 @@
 <template>
     <div class="flex flex-col p-1 bg-dark-400">
         <div class="px-4 pt-2 pb-3 flex flex-row gap-2 items-center">
-            <Skeleton :enabled="!notification" shape="rect" class="!h-6" :min-width="40" :max-width="100"
-                width-unit="%">
+            <Skeleton :enabled="!element" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
                 <iconify-icon :icon="icon" width="1.5rem" height="1.5rem" class="text-gray-200" aria-hidden="true" />
-                <Avatar v-if="notification?.account?.avatar" :src="notification?.account.avatar"
-                    :alt="`${notification?.account.acct}'s avatar'`"
-                    class="h-6 w-6 shrink-0 rounded ring-1 ring-white/10" />
+                <Avatar v-if="element?.account?.avatar" :src="element?.account.avatar"
+                    :alt="`${element?.account.acct}'s avatar'`" class="h-6 w-6 shrink-0 rounded ring-1 ring-white/10" />
                 <span class="text-gray-200 line-clamp-1"><strong v-html="display_name"></strong> {{ text
                     }}</span>
             </Skeleton>
         </div>
         <div>
-            <Note v-if="notification?.status || !notification" :note="notification?.status" :small="true" />
-            <div v-else-if="notification.account" class="p-6 ring-1 ring-white/5 bg-dark-800">
-                <SmallCard :account="notification.account" />
+            <Note v-if="element?.status || !element" :element="element?.status" :small="true" />
+            <div v-else-if="element.account" class="p-6 ring-1 ring-white/5 bg-dark-800">
+                <SmallCard :account="element.account" />
             </div>
-            <div v-if="notification?.type === 'follow_request' && relationship?.requested_by"
+            <div v-if="element?.type === 'follow_request' && relationship?.requested_by"
                 class="w-full grid grid-cols-2 gap-4 p-2 ">
                 <Button theme="primary" :loading="isWorkingOnFollowRequest"
                     @click="acceptFollowRequest"><span>Accept</span>
@@ -38,52 +36,49 @@ import Note from "../notes/note.vue";
 import SmallCard from "../users/SmallCard.vue";
 
 const props = defineProps<{
-    notification?: Notification;
+    element?: Notification;
 }>();
 
 const client = useClient();
 const isWorkingOnFollowRequest = ref(false);
 const { relationship } = useRelationship(
     client,
-    props.notification?.account?.id ?? null,
+    props.element?.account?.id ?? null,
 );
 
 const acceptFollowRequest = async () => {
-    if (!props.notification?.account) {
+    if (!props.element?.account) {
         return;
     }
     isWorkingOnFollowRequest.value = true;
     const { data } = await client.value.acceptFollowRequest(
-        props.notification.account.id,
+        props.element.account.id,
     );
     relationship.value = data;
     isWorkingOnFollowRequest.value = false;
 };
 
 const rejectFollowRequest = async () => {
-    if (!props.notification?.account) {
+    if (!props.element?.account) {
         return;
     }
     isWorkingOnFollowRequest.value = true;
     const { data } = await client.value.rejectFollowRequest(
-        props.notification.account.id,
+        props.element.account.id,
     );
     relationship.value = data;
     isWorkingOnFollowRequest.value = false;
 };
 
 const settings = useSettings();
-const { display_name } = useParsedAccount(
-    props.notification?.account,
-    settings,
-);
+const { display_name } = useParsedAccount(props.element?.account, settings);
 
 const text = computed(() => {
-    if (!props.notification) {
+    if (!props.element) {
         return "";
     }
 
-    switch (props.notification.type) {
+    switch (props.element.type) {
         case "mention":
             return "mentioned you";
         case "reblog":
@@ -95,17 +90,17 @@ const text = computed(() => {
         case "follow_request":
             return "requested to follow you";
         default: {
-            console.error("Unknown notification type", props.notification.type);
+            console.error("Unknown notification type", props.element.type);
             return "";
         }
     }
 });
 const icon = computed(() => {
-    if (!props.notification) {
+    if (!props.element) {
         return "";
     }
 
-    switch (props.notification.type) {
+    switch (props.element.type) {
         case "mention":
             return "tabler:at";
         case "reblog":
diff --git a/components/timelines/account.vue b/components/timelines/account.vue
index 2d0d8e8..f59a45b 100644
--- a/components/timelines/account.vue
+++ b/components/timelines/account.vue
@@ -1,23 +1,36 @@
 <template>
-    <Timeline :timeline="timeline" :load-next="loadNext" :load-prev="loadPrev" />
+    <Timeline type="status" :items="(items as Status[])" :is-loading="isLoading" :has-reached-end="hasReachedEnd"
+        :error="error" :load-next="loadNext" :load-prev="loadPrev" :remove-item="removeItem"
+        :update-item="updateItem" />
 </template>
 
 <script lang="ts" setup>
+import type { Status } from "@lysand-org/client/types";
 import Timeline from "./timeline.vue";
 
+const client = useClient();
+
 const props = defineProps<{
-    id?: string;
+    id: string;
 }>();
 
-const client = useClient();
-const timelineParameters = ref({});
-const { timeline, loadNext, loadPrev } = useAccountTimeline(
-    client.value,
-    props.id || null,
-    timelineParameters,
-);
+const {
+    error,
+    hasReachedEnd,
+    isLoading,
+    items,
+    loadNext,
+    loadPrev,
+    removeItem,
+    updateItem,
+} = useAccountTimeline(client.value, props.id);
 
+// Example of how to handle global events
 useListen("note:delete", ({ id }) => {
-    timeline.value = timeline.value.filter((note) => note.id !== id);
+    removeItem(id);
+});
+
+useListen("note:edit", (updatedNote) => {
+    updateItem(updatedNote);
 });
 </script>
\ No newline at end of file
diff --git a/components/timelines/home.vue b/components/timelines/home.vue
index 56250c7..38ed467 100644
--- a/components/timelines/home.vue
+++ b/components/timelines/home.vue
@@ -1,18 +1,32 @@
 <template>
-    <Timeline :timeline="timeline" :load-next="loadNext" :load-prev="loadPrev" />
+    <Timeline type="status" :items="(items as Status[])" :is-loading="isLoading" :has-reached-end="hasReachedEnd"
+        :error="error" :load-next="loadNext" :load-prev="loadPrev" :remove-item="removeItem"
+        :update-item="updateItem" />
 </template>
 
 <script lang="ts" setup>
+import type { Status } from "@lysand-org/client/types";
+import { useHomeTimeline } from "~/composables/HomeTimeline";
 import Timeline from "./timeline.vue";
-
 const client = useClient();
-const timelineParameters = ref({});
-const { timeline, loadNext, loadPrev } = useHomeTimeline(
-    client.value,
-    timelineParameters,
-);
 
+const {
+    error,
+    hasReachedEnd,
+    isLoading,
+    items,
+    loadNext,
+    loadPrev,
+    removeItem,
+    updateItem,
+} = useHomeTimeline(client.value);
+
+// Example of how to handle global events
 useListen("note:delete", ({ id }) => {
-    timeline.value = timeline.value.filter((note) => note.id !== id);
+    removeItem(id);
+});
+
+useListen("note:edit", (updatedNote) => {
+    updateItem(updatedNote);
 });
 </script>
\ No newline at end of file
diff --git a/components/timelines/local.vue b/components/timelines/local.vue
index 3b41e61..35249e7 100644
--- a/components/timelines/local.vue
+++ b/components/timelines/local.vue
@@ -1,18 +1,32 @@
 <template>
-    <Timeline :timeline="timeline" :load-next="loadNext" :load-prev="loadPrev" />
+    <Timeline type="status" :items="(items as Status[])" :is-loading="isLoading" :has-reached-end="hasReachedEnd"
+        :error="error" :load-next="loadNext" :load-prev="loadPrev" :remove-item="removeItem"
+        :update-item="updateItem" />
 </template>
 
 <script lang="ts" setup>
+import type { Status } from "@lysand-org/client/types";
+import { useLocalTimeline } from "~/composables/LocalTimeline";
 import Timeline from "./timeline.vue";
-
 const client = useClient();
-const timelineParameters = ref({});
-const { timeline, loadNext, loadPrev } = useLocalTimeline(
-    client.value,
-    timelineParameters,
-);
 
+const {
+    error,
+    hasReachedEnd,
+    isLoading,
+    items,
+    loadNext,
+    loadPrev,
+    removeItem,
+    updateItem,
+} = useLocalTimeline(client.value);
+
+// Example of how to handle global events
 useListen("note:delete", ({ id }) => {
-    timeline.value = timeline.value.filter((note) => note.id !== id);
+    removeItem(id);
+});
+
+useListen("note:edit", (updatedNote) => {
+    updateItem(updatedNote);
 });
 </script>
\ No newline at end of file
diff --git a/components/timelines/notifications.vue b/components/timelines/notifications.vue
index ecdeb51..8692d64 100644
--- a/components/timelines/notifications.vue
+++ b/components/timelines/notifications.vue
@@ -1,47 +1,24 @@
 <template>
-    <Notif v-for="notif of timeline" :key="notif.id" :notification="notif" />
-    <span ref="skeleton"></span>
-    <Notif 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">
-        <iconify-icon name="tabler:message-off" width="1.5rem" height="1.5rem" />
-        <span>No more notifications, you've seen them all</span>
-    </div>
+    <Timeline type="notification" :items="(items as Notification[])" :is-loading="isLoading"
+        :has-reached-end="hasReachedEnd" :error="error" :load-next="loadNext" :load-prev="loadPrev"
+        :remove-item="removeItem" :update-item="updateItem" />
 </template>
 
 <script lang="ts" setup>
-import Notif from "../social-elements/notifications/notif.vue";
+import type { Notification } from "@lysand-org/client/types";
+import { useNotificationTimeline } from "~/composables/NotificationTimeline";
+import Timeline from "./timeline.vue";
 
 const client = useClient();
 
-const isLoading = ref(true);
-
-const timelineParameters = ref({});
-const hasReachedEnd = ref(false);
-const { timeline, loadNext, loadPrev } = useNotificationTimeline(
-    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;
-    }
-});
+const {
+    error,
+    hasReachedEnd,
+    isLoading,
+    items,
+    loadNext,
+    loadPrev,
+    removeItem,
+    updateItem,
+} = useNotificationTimeline(client.value);
 </script>
\ No newline at end of file
diff --git a/components/timelines/public.vue b/components/timelines/public.vue
index 14285f4..1a3992a 100644
--- a/components/timelines/public.vue
+++ b/components/timelines/public.vue
@@ -1,18 +1,32 @@
 <template>
-    <Timeline :timeline="timeline" :load-next="loadNext" :load-prev="loadPrev" />
+    <Timeline type="status" :items="(items as Status[])" :is-loading="isLoading" :has-reached-end="hasReachedEnd"
+        :error="error" :load-next="loadNext" :load-prev="loadPrev" :remove-item="removeItem"
+        :update-item="updateItem" />
 </template>
 
 <script lang="ts" setup>
+import type { Status } from "@lysand-org/client/types";
+import { usePublicTimeline } from "~/composables/PublicTimeline";
 import Timeline from "./timeline.vue";
-
 const client = useClient();
-const timelineParameters = ref({});
-const { timeline, loadNext, loadPrev } = usePublicTimeline(
-    client.value,
-    timelineParameters,
-);
 
+const {
+    error,
+    hasReachedEnd,
+    isLoading,
+    items,
+    loadNext,
+    loadPrev,
+    removeItem,
+    updateItem,
+} = usePublicTimeline(client.value);
+
+// Example of how to handle global events
 useListen("note:delete", ({ id }) => {
-    timeline.value = timeline.value.filter((note) => note.id !== id);
+    removeItem(id);
+});
+
+useListen("note:edit", (updatedNote) => {
+    updateItem(updatedNote);
 });
 </script>
\ No newline at end of file
diff --git a/components/timelines/timeline-item.vue b/components/timelines/timeline-item.vue
new file mode 100644
index 0000000..6019415
--- /dev/null
+++ b/components/timelines/timeline-item.vue
@@ -0,0 +1,26 @@
+<template>
+    <component :is="itemComponent" :element="item" @update="$emit('update', $event)"
+        @delete="$emit('delete', item?.id)" />
+</template>
+
+<script lang="ts" setup>
+import type { Notification, Status } from "@lysand-org/client/types";
+import { computed } from "vue";
+import NoteItem from "../social-elements/notes/note.vue";
+import NotificationItem from "../social-elements/notifications/notif.vue";
+
+const props = defineProps<{
+    item?: Status | Notification;
+    type: "status" | "notification";
+}>();
+
+const itemComponent = computed(() => {
+    if (props.type === "status") {
+        return NoteItem;
+    }
+    if (props.type === "notification") {
+        return NotificationItem;
+    }
+    return null;
+});
+</script>
\ No newline at end of file
diff --git a/components/timelines/timeline.vue b/components/timelines/timeline.vue
index e48d4ba..5dfc620 100644
--- a/components/timelines/timeline.vue
+++ b/components/timelines/timeline.vue
@@ -1,69 +1,92 @@
+<!-- Timeline.vue -->
 <template>
-    <TransitionGroup leave-active-class="ease-in duration-200" leave-from-class="scale-100 opacity-100"
-        leave-to-class="opacity-0 scale-90">
-        <Note v-for="note of timeline" :key="note.id" :note="note" />
-    </TransitionGroup>
-    <span ref="skeleton"></span>
-    <Note v-for="_ of 5" v-if="!hasReachedEnd" :skeleton="true" />
+    <div class="timeline">
+        <TransitionGroup name="timeline-item" tag="div" class="timeline-items">
+            <TimelineItem :type="type" v-for="item in items" :key="item.id" :item="item" @update="updateItem"
+                @delete="removeItem" />
+        </TransitionGroup>
 
-    <div v-if="hasReachedEnd" class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3">
-        <iconify-icon icon="tabler:message-off" width="1.5rem" height="1.5rem" />
-        <span>No more posts, you've seen them all</span>
+        <TimelineItem v-if="isLoading" :type="type" v-for="_ in 5" />
+
+        <div v-if="error" class="timeline-error">
+            {{ error.message }}
+        </div>
+
+        <div v-if="hasReachedEnd && items.length > 0"
+            class="flex flex-col items-center justify-center gap-2 text-gray-200 text-center p-10">
+            <span class="text-lg font-semibold">You've scrolled so far, there's nothing left to show.</span>
+            <span class="text-sm">You can always go back and see what you missed.</span>
+        </div>
+
+        <div v-else-if="hasReachedEnd && items.length === 0"
+            class="flex flex-col items-center justify-center gap-2 text-gray-200 text-center p-10">
+            <span class="text-lg font-semibold">There's nothing to show here.</span>
+            <span class="text-sm">Either you're all caught up or there's nothing to show.</span>
+        </div>
+
+        <div v-else-if="!infiniteScroll.value" class="py-10 px-4">
+            <Button theme="secondary" @click="loadNext" :disabled="isLoading" class="w-full">
+                Load More
+            </Button>
+        </div>
+
+        <div v-else ref="loadMoreTrigger" class="h-20"></div>
     </div>
 </template>
 
 <script lang="ts" setup>
-import type { Status } from "@lysand-org/client/types";
-import Note from "../social-elements/notes/note.vue";
+import type { Notification, Status } from "@lysand-org/client/types";
+import { useIntersectionObserver } from "@vueuse/core";
+import { onMounted, watch } from "vue";
+import Button from "~/packages/ui/components/buttons/button.vue";
+import { SettingIds } from "~/settings";
+import TimelineItem from "./timeline-item.vue";
 
 const props = defineProps<{
-    timeline: Status[];
-    loadNext: () => Promise<void>;
-    loadPrev: () => Promise<void>;
+    items: Status[] | Notification[];
+    type: "status" | "notification";
+    isLoading: boolean;
+    hasReachedEnd: boolean;
+    error: Error | null;
+    loadNext: () => void;
+    loadPrev: () => void;
+    removeItem: (id: string) => void;
+    updateItem: ((item: Status) => void) | ((item: Notification) => void);
 }>();
 
-const isLoading = ref(true);
+const emit = defineEmits<(e: "update") => void>();
 
-const hasReachedEnd = ref(false);
-const skeleton = ref<HTMLSpanElement | null>(null);
+const loadMoreTrigger = ref<HTMLElement | null>(null);
 
-onMounted(() => {
-    useIntersectionObserver(skeleton, async (entries) => {
-        if (
-            entries[0]?.isIntersecting &&
-            !hasReachedEnd.value &&
-            !isLoading.value
-        ) {
-            isLoading.value = true;
-            await props.loadNext();
-        }
-    });
+useIntersectionObserver(loadMoreTrigger, ([observer]) => {
+    if (observer?.isIntersecting && !props.isLoading && !props.hasReachedEnd) {
+        props.loadNext();
+    }
 });
 
-useListen("composer:send", () => {
-    props.loadPrev();
-});
-
-// Every 5 seconds, load newer posts (prev)
-useIntervalFn(() => {
-    props.loadPrev();
-}, 10000);
+const infiniteScroll = useSetting(SettingIds.InfiniteScroll);
 
 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;
-        }
+    () => props.items,
+    () => {
+        emit("update");
     },
 );
-</script>
\ No newline at end of file
+
+onMounted(() => {
+    props.loadNext();
+});
+</script>
+
+<style scoped>
+.timeline-item-enter-active,
+.timeline-item-leave-active {
+    transition: all 0.5s ease;
+}
+
+.timeline-item-enter-from,
+.timeline-item-leave-to {
+    opacity: 0;
+    transform: translateX(30px);
+}
+</style>
\ No newline at end of file
diff --git a/composables/AccountTimeline.ts b/composables/AccountTimeline.ts
index 40413ce..81496dc 100644
--- a/composables/AccountTimeline.ts
+++ b/composables/AccountTimeline.ts
@@ -1,32 +1,15 @@
 import type { LysandClient } from "@lysand-org/client";
 import type { Status } from "@lysand-org/client/types";
+import { type TimelineOptions, useTimeline } from "./Timeline";
 
-export const useAccountTimeline = (
-    client: LysandClient | null,
-    id: MaybeRef<string | null>,
-    options: MaybeRef<{
-        limit?: number | undefined;
-        max_id?: string | undefined;
-        since_id?: string | undefined;
-        min_id?: string | undefined;
-        pinned?: boolean | undefined;
-        exclude_replies?: boolean | undefined;
-        exclude_reblogs?: boolean | undefined;
-        only_media?: boolean;
-    }>,
-): {
-    timeline: Ref<Status[]>;
-    loadNext: () => Promise<void>;
-    loadPrev: () => Promise<void>;
-} => {
-    return useIdTimeline(
-        client,
-        id,
-        (client, options) =>
-            client?.getAccountStatuses(ref(id).value ?? "", {
-                only_media: false,
-                ...options,
-            }),
-        options,
-    );
-};
+export function useAccountTimeline(
+    client: LysandClient,
+    accountId: string,
+    options: Partial<TimelineOptions<Status>> = {},
+) {
+    return useTimeline(client, {
+        fetchFunction: (client, opts) =>
+            client.getAccountStatuses(accountId, opts),
+        ...options,
+    });
+}
diff --git a/composables/HomeTimeline.ts b/composables/HomeTimeline.ts
index 504fdd1..4037695 100644
--- a/composables/HomeTimeline.ts
+++ b/composables/HomeTimeline.ts
@@ -1,23 +1,13 @@
 import type { LysandClient } from "@lysand-org/client";
 import type { Status } from "@lysand-org/client/types";
+import { type TimelineOptions, useTimeline } from "./Timeline";
 
-export const useHomeTimeline = (
-    client: LysandClient | null,
-    options: MaybeRef<{
-        local?: boolean;
-        limit?: number;
-        max_id?: string;
-        since_id?: string;
-        min_id?: string;
-    }>,
-): {
-    timeline: Ref<Status[]>;
-    loadNext: () => Promise<void>;
-    loadPrev: () => Promise<void>;
-} => {
-    return useTimeline(
-        client,
-        (client, options) => client?.getHomeTimeline(options),
-        options,
-    );
-};
+export function useHomeTimeline(
+    client: LysandClient,
+    options: Partial<TimelineOptions<Status>> = {},
+) {
+    return useTimeline(client, {
+        fetchFunction: (client, opts) => client.getHomeTimeline(opts),
+        ...options,
+    });
+}
diff --git a/composables/LocalTimeline.ts b/composables/LocalTimeline.ts
index ab87a60..7465630 100644
--- a/composables/LocalTimeline.ts
+++ b/composables/LocalTimeline.ts
@@ -1,25 +1,13 @@
 import type { LysandClient } from "@lysand-org/client";
 import type { Status } from "@lysand-org/client/types";
+import { type TimelineOptions, useTimeline } from "./Timeline";
 
-export const useLocalTimeline = (
-    client: LysandClient | null,
-    options: MaybeRef<
-        Partial<{
-            only_media: boolean;
-            max_id: string;
-            since_id: string;
-            min_id: string;
-            limit: number;
-        }>
-    >,
-): {
-    timeline: Ref<Status[]>;
-    loadNext: () => Promise<void>;
-    loadPrev: () => Promise<void>;
-} => {
-    return useTimeline(
-        client,
-        (client, options) => client?.getLocalTimeline(options),
-        options,
-    );
-};
+export function useLocalTimeline(
+    client: LysandClient,
+    options: Partial<TimelineOptions<Status>> = {},
+) {
+    return useTimeline(client, {
+        fetchFunction: (client, opts) => client.getLocalTimeline(opts),
+        ...options,
+    });
+}
diff --git a/composables/NotificationTimeline.ts b/composables/NotificationTimeline.ts
index 53e63c5..ab5e410 100644
--- a/composables/NotificationTimeline.ts
+++ b/composables/NotificationTimeline.ts
@@ -1,25 +1,13 @@
 import type { LysandClient } from "@lysand-org/client";
 import type { Notification } from "@lysand-org/client/types";
+import { type TimelineOptions, useTimeline } from "./Timeline";
 
-export const useNotificationTimeline = (
-    client: LysandClient | null,
-    options: MaybeRef<{
-        limit?: number | undefined;
-        max_id?: string | undefined;
-        since_id?: string | undefined;
-        min_id?: string | undefined;
-        exclude_types?: string[] | undefined;
-        account_id?: string | undefined;
-    }>,
-): {
-    timeline: Ref<Notification[]>;
-    loadNext: () => Promise<void>;
-    loadPrev: () => Promise<void>;
-} => {
-    return useTimeline(
-        client,
-        // @ts-expect-error dont listen to the voices jesse
-        (client, options) => client?.getNotifications(options),
-        options,
-    );
-};
+export function useNotificationTimeline(
+    client: LysandClient,
+    options: Partial<TimelineOptions<Notification>> = {},
+) {
+    return useTimeline(client, {
+        fetchFunction: (client, opts) => client.getNotifications(opts),
+        ...options,
+    });
+}
diff --git a/composables/PublicTimeline.ts b/composables/PublicTimeline.ts
index 0bccb9c..18e5a11 100644
--- a/composables/PublicTimeline.ts
+++ b/composables/PublicTimeline.ts
@@ -1,23 +1,13 @@
 import type { LysandClient } from "@lysand-org/client";
 import type { Status } from "@lysand-org/client/types";
+import { type TimelineOptions, useTimeline } from "./Timeline";
 
-export const usePublicTimeline = (
-    client: LysandClient | null,
-    options: MaybeRef<{
-        only_media?: boolean;
-        limit?: number;
-        max_id?: string;
-        since_id?: string;
-        min_id?: string;
-    }>,
-): {
-    timeline: Ref<Status[]>;
-    loadNext: () => Promise<void>;
-    loadPrev: () => Promise<void>;
-} => {
-    return useTimeline(
-        client,
-        (client, options) => client?.getPublicTimeline(options),
-        options,
-    );
-};
+export function usePublicTimeline(
+    client: LysandClient,
+    options: Partial<TimelineOptions<Status>> = {},
+) {
+    return useTimeline(client, {
+        fetchFunction: (client, opts) => client.getPublicTimeline(opts),
+        ...options,
+    });
+}
diff --git a/composables/Timeline.ts b/composables/Timeline.ts
index 1a639a5..5f03508 100644
--- a/composables/Timeline.ts
+++ b/composables/Timeline.ts
@@ -1,184 +1,116 @@
 import type { LysandClient, Output } from "@lysand-org/client";
+import type { Notification, Status } from "@lysand-org/client/types";
+import { useIntervalFn } from "@vueuse/core";
 
-interface BaseOptions {
-    max_id?: string;
-    min_id?: string;
+export interface TimelineOptions<T> {
+    fetchFunction: (
+        client: LysandClient,
+        options: object,
+    ) => Promise<Output<T[]>>;
+    updateInterval?: number;
+    limit?: number;
 }
 
-type FetchTimelineFunction<Element, Options> = (
+export function useTimeline<T extends Status | Notification>(
     client: LysandClient,
-    options: Options & BaseOptions,
-) => Promise<Output<Element[]>>;
+    options: TimelineOptions<T>,
+) {
+    const items = ref<T[]>([]) as Ref<T[]>;
+    const isLoading = ref(false);
+    const hasReachedEnd = ref(false);
+    const error = ref<Error | null>(null);
 
-export const useTimeline = <
-    Element extends {
-        id: string;
-    },
-    Options,
->(
-    client: LysandClient | null,
-    fetchTimeline: FetchTimelineFunction<Element, Options> | null | undefined,
-    options: MaybeRef<Options & BaseOptions>,
-): {
-    timeline: Ref<Element[]>;
-    loadNext: () => Promise<void>;
-    loadPrev: () => Promise<void>;
-} => {
-    if (!(client && fetchTimeline)) {
-        return {
-            timeline: ref([]),
-            loadNext: async () => {
-                // ...
-            },
-            loadPrev: async () => {
-                // ...
-            },
-        };
-    }
+    const nextMaxId = ref<string | undefined>(undefined);
+    const prevMinId = ref<string | undefined>(undefined);
 
-    const fetchedNotes: Ref<Element[]> = ref([]);
-    const fetchedNoteIds = new Set<string>();
-    let nextMaxId: string | undefined = undefined;
-    let prevMinId: string | undefined = undefined;
+    const fetchItems = async (direction: "next" | "prev") => {
+        if (isLoading.value || (direction === "next" && hasReachedEnd.value)) {
+            return;
+        }
 
-    const loadNext = async () => {
-        const response = await fetchTimeline(client, {
-            ...(ref(options).value as Options & BaseOptions),
-            max_id: nextMaxId,
-            limit: useConfig().NOTES_PER_PAGE,
-        });
+        isLoading.value = true;
+        error.value = null;
 
-        const newNotes = response.data.filter(
-            (note) => !fetchedNoteIds.has(note.id),
-        );
-        if (newNotes.length > 0) {
-            fetchedNotes.value = [...fetchedNotes.value, ...newNotes];
-            nextMaxId = newNotes[newNotes.length - 1]?.id;
-            for (const note of newNotes) {
-                fetchedNoteIds.add(note.id);
+        try {
+            const response = await options.fetchFunction(client, {
+                limit: options.limit || 20,
+                max_id: direction === "next" ? nextMaxId.value : undefined,
+                min_id: direction === "prev" ? prevMinId.value : undefined,
+            });
+
+            const newItems = response.data.filter(
+                (item: T) =>
+                    !items.value.some((existing) => existing.id === item.id),
+            );
+
+            if (direction === "next") {
+                items.value.push(...newItems);
+                if (newItems.length < (options.limit || 20)) {
+                    hasReachedEnd.value = true;
+                }
+                if (newItems.length > 0) {
+                    nextMaxId.value = newItems[newItems.length - 1]?.id;
+                }
+            } else {
+                items.value.unshift(...newItems);
+                if (newItems.length > 0) {
+                    prevMinId.value = newItems[0]?.id;
+                }
             }
-        } else {
-            nextMaxId = undefined;
+        } catch (e) {
+            error.value =
+                e instanceof Error ? e : new Error("An error occurred");
+        } finally {
+            isLoading.value = false;
         }
     };
 
-    const loadPrev = async () => {
-        const response = await fetchTimeline(client, {
-            ...(ref(options).value as Options & BaseOptions),
-            min_id: prevMinId,
-            limit: useConfig().NOTES_PER_PAGE,
-        });
+    const loadNext = () => fetchItems("next");
+    const loadPrev = () => fetchItems("prev");
 
-        const newNotes = response.data.filter(
-            (note) => !fetchedNoteIds.has(note.id),
-        );
-        if (newNotes.length > 0) {
-            fetchedNotes.value = [...newNotes, ...fetchedNotes.value];
-            prevMinId = newNotes[0]?.id;
-            for (const note of newNotes) {
-                fetchedNoteIds.add(note.id);
-            }
-        } else {
-            prevMinId = undefined;
+    const addItem = (newItem: T) => {
+        items.value.unshift(newItem);
+    };
+
+    const removeItem = (id: string) => {
+        const index = items.value.findIndex((item) => item.id === id);
+        if (index !== -1) {
+            items.value.splice(index, 1);
         }
     };
 
-    watch(
-        () => ref(options).value,
-        async ({ max_id, min_id }) => {
-            nextMaxId = max_id;
-            prevMinId = min_id;
-            await loadNext();
-        },
-        { immediate: true },
-    );
-
-    return { timeline: fetchedNotes, loadNext, loadPrev };
-};
-
-export const useIdTimeline = <
-    Element extends {
-        id: string;
-    },
-    Options,
->(
-    client: LysandClient | null,
-    id: MaybeRef<string | null>,
-    fetchTimeline: FetchTimelineFunction<Element, Options> | null | undefined,
-    options: MaybeRef<Options & BaseOptions>,
-): {
-    timeline: Ref<Element[]>;
-    loadNext: () => Promise<void>;
-    loadPrev: () => Promise<void>;
-} => {
-    if (!(client && fetchTimeline)) {
-        return {
-            timeline: ref([]),
-            loadNext: async () => {
-                // ...
-            },
-            loadPrev: async () => {
-                // ...
-            },
-        };
-    }
-
-    const fetchedNotes: Ref<Element[]> = ref([]);
-    const fetchedNoteIds = new Set<string>();
-    let nextMaxId: string | undefined = undefined;
-    let prevMinId: string | undefined = undefined;
-
-    const loadNext = async () => {
-        const response = await fetchTimeline(client, {
-            ...(ref(options).value as Options & BaseOptions),
-            max_id: nextMaxId,
-            limit: useConfig().NOTES_PER_PAGE,
-        });
-
-        const newNotes = response.data.filter(
-            (note) => !fetchedNoteIds.has(note.id),
+    const updateItem = (updatedItem: T) => {
+        const index = items.value.findIndex(
+            (item) => item.id === updatedItem.id,
         );
-        if (newNotes.length > 0) {
-            fetchedNotes.value = [...fetchedNotes.value, ...newNotes];
-            nextMaxId = newNotes[newNotes.length - 1]?.id;
-            for (const note of newNotes) {
-                fetchedNoteIds.add(note.id);
-            }
-        } else {
-            nextMaxId = undefined;
+        if (index !== -1) {
+            items.value[index] = updatedItem;
         }
     };
 
-    const loadPrev = async () => {
-        const response = await fetchTimeline(client, {
-            ...(ref(options).value as Options & BaseOptions),
-            min_id: prevMinId,
-            limit: useConfig().NOTES_PER_PAGE,
-        });
+    // Set up periodic updates
+    const { pause, resume } = useIntervalFn(() => {
+        loadPrev();
+    }, options.updateInterval || 30000);
 
-        const newNotes = response.data.filter(
-            (note) => !fetchedNoteIds.has(note.id),
-        );
-        if (newNotes.length > 0) {
-            fetchedNotes.value = [...newNotes, ...fetchedNotes.value];
-            prevMinId = newNotes[0]?.id;
-            for (const note of newNotes) {
-                fetchedNoteIds.add(note.id);
-            }
-        } else {
-            prevMinId = undefined;
-        }
+    onMounted(() => {
+        loadNext();
+        resume();
+    });
+
+    onUnmounted(() => {
+        pause();
+    });
+
+    return {
+        items,
+        isLoading,
+        hasReachedEnd,
+        error,
+        loadNext,
+        loadPrev,
+        addItem,
+        removeItem,
+        updateItem,
     };
-
-    watch(
-        [() => ref(id).value, () => ref(options).value],
-        async ([id, { max_id, min_id }]) => {
-            nextMaxId = max_id;
-            prevMinId = min_id;
-            id && (await loadNext());
-        },
-        { immediate: true },
-    );
-
-    return { timeline: fetchedNotes, loadNext, loadPrev };
-};
+}
diff --git a/package.json b/package.json
index 837f966..434e3bb 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     },
     "dependencies": {
         "@ark-ui/vue": "^3.4.0",
-        "@lysand-org/client": "^0.2.1",
+        "@lysand-org/client": "^0.2.2",
         "@nuxt/fonts": "^0.7.0",
         "@tailwindcss/typography": "^0.5.13",
         "@vee-validate/nuxt": "^4.13.1",
diff --git a/pages/[username]/[uuid].vue b/pages/[username]/[uuid].vue
index 687be10..a67696d 100644
--- a/pages/[username]/[uuid].vue
+++ b/pages/[username]/[uuid].vue
@@ -1,10 +1,10 @@
 <template>
     <div v-if="loaded" :defer="true" class="mx-auto max-w-2xl w-full pb-72">
-        <Note v-for="note of context?.ancestors" :note="note" />
+        <Note v-for="note of context?.ancestors" :element="note" />
         <div ref="element" class="first:rounded-t last:rounded-b overflow-hidden">
-            <Note class="!rounded-none border-2 border-primary-500" v-if="note" :note="note" />
+            <Note class="!rounded-none border-2 border-primary-500" v-if="note" :element="note" />
         </div>
-        <Note v-for="note of context?.descendants" :note="note" />
+        <Note v-for="note of context?.descendants" :element="note" />
     </div>
     <div v-else class="mx-auto max-w-2xl w-full overflow-y-auto">
         <Note v-for="_ of 5" :skeleton="true" />
diff --git a/pages/[username]/index.vue b/pages/[username]/index.vue
index e822aa8..6ad22e6 100644
--- a/pages/[username]/index.vue
+++ b/pages/[username]/index.vue
@@ -3,7 +3,7 @@
         <div class="mx-auto max-w-2xl w-full">
             <TimelineScroller>
                 <AccountProfile :account="account ?? undefined" />
-                <AccountTimeline :id="accountId" :key="accountId" />
+                <AccountTimeline v-if="accountId" :id="accountId" :key="accountId" />
             </TimelineScroller>
         </div>
     </ErrorBoundary>
diff --git a/pages/notifications.vue b/pages/notifications.vue
index 2826377..ff0691e 100644
--- a/pages/notifications.vue
+++ b/pages/notifications.vue
@@ -13,7 +13,7 @@
         </div>
         <TimelineScroller v-else>
             <Greeting />
-            <div class="rounded overflow-hidden ring-1 ring-white/10">
+            <div class="rounded overflow-hidden">
                 <Notifications />
             </div>
         </TimelineScroller>
diff --git a/settings.ts b/settings.ts
index 144b891..0d8b2fa 100644
--- a/settings.ts
+++ b/settings.ts
@@ -65,6 +65,7 @@ export enum SettingIds {
     CustomEmojis = "custom-emojis",
     ShowContentWarning = "show-content-warning",
     PopupAvatarHover = "popup-avatar-hover",
+    InfiniteScroll = "infinite-scroll",
     ConfirmDelete = "confirm-delete",
     ConfirmFollow = "confirm-follow",
     ConfirmReblog = "confirm-reblog",
@@ -124,6 +125,15 @@ export const settings = [
         path: SettingPages.Behaviour,
         notImplemented: true,
     } as Setting<SettingType.Boolean>,
+    {
+        id: SettingIds.InfiniteScroll,
+        title: "Infinite Scroll",
+        description:
+            "Automatically load more notes when reaching the bottom of the page",
+        type: SettingType.Boolean,
+        value: true,
+        path: SettingPages.Behaviour,
+    } as Setting<SettingType.Boolean>,
     {
         id: SettingIds.ConfirmDelete,
         title: "Confirm Delete",