feat: ✨ Add home timeline for logged-in users

components/sidebars/navigation.vue

@@ -9,7 +9,7 @@
             <h3 class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
                 Timelines</h3>
             <NuxtLink v-for="timeline in timelines" :key="timeline.href" :to="timeline.href">
-                <ButtonsBase
+                <ButtonsBase v-if="!timeline.requiresAuth || (timeline.requiresAuth && tokenData)"
                     class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200">
                     <Icon :name="timeline.icon" class="shrink-0 text-2xl" />
                     <span class="pr-28 line-clamp-1">{{ timeline.name }}</span>
@@ -54,6 +54,12 @@
 
 <script lang="ts" setup>
 const timelines = ref([
+    {
+        href: "/home",
+        name: "Home",
+        icon: "tabler:home",
+        requiresAuth: true,
+    },
     {
         href: "/public",
         name: "Public",

components/timelines/Home.vue

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

composables/HomeTimeline.ts

@@ -0,0 +1,23 @@
+import type { Mastodon } from "megalodon";
+import type { Status } from "~/types/mastodon/status";
+
+export const useHomeTimeline = (
+    client: Mastodon | 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,
+    );
+};

pages/home.vue

@@ -0,0 +1,9 @@
+<template>
+    <TimelinesHome />
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+    layout: "app",
+});
+</script>