feat: ✨ Add new navigation sidebar and instance description block on /

components/buttons/base.vue

@@ -1,6 +1,6 @@
 <template>
     <button v-bind="$props" type="button"
-        class="rounded-md duration-200 hover:shadow disabled:opacity-70 disabled:cursor-wait px-3 py-2 text-sm font-semibold text-white shadow-sm">
+        class="rounded-md duration-200 hover:shadow disabled:opacity-70 disabled:cursor-not-allowed px-3 py-2 text-sm font-semibold text-white shadow-sm">
         <slot />
     </button>
 </template>

components/sidebars/navigation.vue

@@ -0,0 +1,48 @@
+<template>
+    <aside
+        class="fixed h-dvh z-20 md:flex hidden flex-col p-4 bg-dark-800 gap-10 max-w-20 hover:max-w-72 duration-200 group">
+        <NuxtLink class="rounded w-11 h-11 ring-1 ring-white/10 hover:scale-105 duration-200" href="/">
+            <img src="https://lysand.org/logo.png" alt="Lysand logo" />
+        </NuxtLink>
+
+        <div class="flex flex-col gap-3">
+            <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
+                    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>
+                </ButtonsBase>
+            </NuxtLink>
+        </div>
+
+        <!-- Login buttons -->
+        <div class="flex flex-col gap-3 mt-auto">
+            <h3 class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
+                Account</h3>
+            <NuxtLink>
+                <ButtonsBase disabled
+                    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="tabler:login" class="shrink-0 text-2xl" />
+                    <span class="pr-28 line-clamp-1">Sign In</span>
+                </ButtonsBase>
+            </NuxtLink>
+        </div>
+    </aside>
+</template>
+
+<script lang="ts" setup>
+const timelines = ref([
+    {
+        href: "/public",
+        name: "Public",
+        icon: "tabler:world",
+    },
+    {
+        href: "/local",
+        name: "Local",
+        icon: "tabler:home",
+    },
+]);
+</script>

composables/ExtendedDescription.ts

@@ -0,0 +1,13 @@
+import type { Mastodon } from "megalodon";
+
+export const useExtendedDescription = async (client: Mastodon | null) => {
+    if (!client) {
+        return null;
+    }
+
+    return (await client.client.get("/api/v1/instance/extended_description"))
+        .data as {
+        updated_at: string;
+        content: string;
+    };
+};

composables/Instance.ts

@@ -1,9 +1,12 @@
 import type { Mastodon } from "megalodon";
+import type { Instance } from "~/types/mastodon/instance";
 
 export const useInstance = async (client: Mastodon | null) => {
     if (!client) {
         return null;
     }
 
-    return (await client.getInstance()).data;
+    return (await client.getInstance()).data as Instance & {
+        banner?: string;
+    };
 };

composables/LocalTimeline.ts

@@ -0,0 +1,86 @@
+import type { Mastodon } from "megalodon";
+import type { Status } from "~/types/mastodon/status";
+
+export const useLocalTimeline = (
+    client: Mastodon | 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>;
+} => {
+    if (!client) {
+        return {
+            timeline: ref([]),
+            loadNext: async () => {},
+            loadPrev: async () => {},
+        };
+    }
+
+    const fetchedNotes = ref<Status[]>([]);
+    const fetchedNoteIds = new Set<string>();
+    let nextMaxId: string | undefined = undefined;
+    let prevMinId: string | undefined = undefined;
+
+    const loadNext = async () => {
+        const response = await client.getLocalTimeline({
+            ...ref(options).value,
+            max_id: nextMaxId,
+            limit: useConfig().NOTES_PER_PAGE,
+        });
+
+        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);
+            }
+        } else {
+            nextMaxId = undefined;
+        }
+    };
+
+    const loadPrev = async () => {
+        const response = await client.getLocalTimeline({
+            ...ref(options).value,
+            min_id: prevMinId,
+            limit: useConfig().NOTES_PER_PAGE,
+        });
+
+        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;
+        }
+    };
+
+    watch(
+        () => ref(options).value,
+        async ({ max_id, min_id }) => {
+            nextMaxId = max_id;
+            prevMinId = min_id;
+            await loadNext();
+        },
+        { immediate: true },
+    );
+
+    return { timeline: fetchedNotes, loadNext, loadPrev };
+};

layouts/default.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="from-dark-600 to-dark-900 bg-gradient-to-tl min-h-dvh">
+        <SidebarsNavigation />
         <slot />
     </div>
 </template>

package.json

@@ -54,6 +54,8 @@
         "@fortawesome/fontawesome-common-types",
         "@fortawesome/free-regular-svg-icons",
         "@fortawesome/free-solid-svg-icons",
-        "json-editor-vue"
+        "esbuild",
+        "json-editor-vue",
+        "vue-demi"
     ]
 }

pages/[username]/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        class="flex mx-auto max-w-7xl min-h-screen flex-col gap-x-6 md:flex-row justify-center items-start md:py-12 lg:px-8 relative">
+        class="flex mx-auto md:pl-20 max-w-7xl min-h-screen flex-col gap-x-6 md:flex-row justify-center items-start md:py-12 lg:pr-8 relative">
         <div v-if="account" class="w-full rounded ring-1 md:max-w-lg ring-white/10 pb-10">
             <div class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700">
                 <img v-if="account.header" :src="account.header" class="object-cover w-full h-full" />

pages/index.vue

@@ -1,7 +1,9 @@
 <template>
-    <div class="relative isolate px-6 pt-14 lg:px-8">
+    <div class="relative min-h-dvh flex flex-row justify-center lg:justify-between">
+        <div class="max-w-md w-full hidden lg:block">
 
-        <div class="mx-auto max-w-md py-32 sm:py-48 lg:py-56">
+        </div>
+        <div class="flex flex-col justify-center max-w-lg w-full py-32 sm:py-48 px-6 lg:px-8">
             <div class="hidden sm:mb-8 sm:flex sm:justify-center">
                 <div
                     class="relative rounded px-3 py-1 text-sm leading-6 text-gray-300 ring-1 ring-white/10 hover:ring-white/20">
@@ -52,11 +54,51 @@
                 </p>
             </div>
         </div>
+        <aside
+            class="max-w-md max-h-dvh overflow-y-scroll w-full bg-dark-700 ring-1 ring-white/10 hidden lg:flex p-10 flex-col gap-4">
+            <div
+                class="aspect-video shrink-0 w-full rounded ring-white/5 bg-dark-900 shadow overflow-hidden ring-1 hover:ring-2 duration-100">
+                <img class="object-cover w-full h-full duration-150 hover:scale-[102%] ease-in-out"
+                    v-if="instance?.banner" :src="instance.banner" />
+            </div>
+
+            <div class="prose prose-invert prose-sm">
+                <h2 class="text-center mb-10">{{ instance?.title }}</h2>
+                <div v-html="description?.content"></div>
+            </div>
+
+            <div v-if="contact" class="flex flex-col gap-2 mt-auto">
+                <h2 class="text-gray-200 font-semibold uppercase text-xs">Administrator</h2>
+                <div class="flex flex-row">
+                    <NuxtLink :href="''">
+                        <img class="h-12 w-12 rounded ring-1 ring-white/5" :src="contact.avatar" alt="" />
+                    </NuxtLink>
+                    <div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
+                        <div class="flex flex-row items-center justify-between w-full">
+                            <NuxtLink :href="''" class="font-semibold text-gray-200 line-clamp-1 break-all">
+                                {{
+                        contact.display_name }}
+                            </NuxtLink>
+                        </div>
+                        <span class="text-gray-400 text-sm line-clamp-1 break-all w-full">
+                            @{{
+                        contact.acct
+                            }}
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </aside>
     </div>
 </template>
 
 <script setup lang="ts">
 const baseUrl = useBaseUrl();
+const client = await useMegalodon();
+// TODO: Add banner to the instance
+const instance = await useInstance(client);
+const description = await useExtendedDescription(client);
+const contact = instance?.contact_account;
 
 useServerSeoMeta({
     title: "Welcome to Lysand!",

pages/local.vue

@@ -0,0 +1,50 @@
+<template>
+    <ClientOnly>
+        <div class="max-w-2xl mx-auto md:py-20 md:px-10">
+            <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>
+
+<script lang="ts" setup>
+const client = await useMegalodon();
+
+const isLoading = ref(true);
+
+const timelineParameters = ref({});
+const hasReachedEnd = ref(false);
+const { timeline, loadNext, loadPrev } = useLocalTimeline(
+    client,
+    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>