feat: ✨ Add bottom sidebar on mobile

pages/[username]/index.vue

@@ -1,8 +1,11 @@
 <template>
     <NuxtLayout name="app">
-        <SocialElementsUsersAccount v-if="isMobile" :account="account ?? undefined" />
-        <TimelinesAccount :id="accountId ?? undefined" :key="accountId ?? undefined" />
+        <div class="max-h-dvh overflow-y-scroll">
 
+            <TimelinesTimelineScroller>
+                <TimelinesAccount :id="accountId ?? undefined" :key="accountId ?? undefined" />
+            </TimelinesTimelineScroller>
+        </div>
         <template #right>
             <SocialElementsUsersAccount v-if="!isMobile" :account="account ?? undefined" />
             <div v-else>
@@ -17,6 +20,7 @@ import type { Account } from "~/types/mastodon/account";
 
 definePageMeta({
     layout: false,
+    keepalive: true,
 });
 
 const { width } = useWindowSize();
@@ -32,7 +36,7 @@ const account = computed<Account | null>(
 );
 const accountId = computed(() => account.value?.id ?? null);
 
-useServerSeoMeta({
+useSeoMeta({
     title: account.value?.display_name,
     description: account.value?.note,
     ogImage: account.value?.avatar,

pages/home.vue

@@ -1,5 +1,9 @@
 <template>
-    <TimelinesHome />
+    <div class="max-h-dvh overflow-y-auto">
+        <TimelinesTimelineScroller>
+            <TimelinesHome />
+        </TimelinesTimelineScroller>
+    </div>
 </template>
 
 <script setup lang="ts">

pages/index.vue

@@ -1,5 +1,9 @@
 <template>
-    <TimelinesPublic />
+    <div class="max-h-dvh overflow-y-scroll">
+        <TimelinesTimelineScroller>
+            <TimelinesPublic />
+        </TimelinesTimelineScroller>
+    </div>
 </template>
 
 <script setup lang="ts">

pages/local.vue

@@ -1,5 +1,9 @@
 <template>
-    <TimelinesLocal />
+    <div class="max-h-dvh overflow-y-auto">
+        <TimelinesTimelineScroller>
+            <TimelinesLocal />
+        </TimelinesTimelineScroller>
+    </div>
 </template>
 
 <script lang="ts" setup>

pages/notifications.vue

@@ -0,0 +1,27 @@
+<template>
+    <ClientOnly>
+        <div class="max-h-dvh overflow-y-auto">
+            <div class="shrink-0 p-10 h-dvh" v-if="!tokenData">
+                <button type="button"
+                    class="relative block h-full w-full rounded-lg border-2 border-dashed border-dark-300 p-12 text-center">
+                    <Icon name="tabler:notification" class="mx-auto h-12 w-12 text-gray-400" />
+                    <span class="mt-3 block text-sm font-semibold text-gray-200 max-w-56 mx-auto">Notifications
+                        will
+                        appear here
+                        when you
+                        sign in</span>
+                </button>
+            </div>
+            <TimelinesTimelineScroller v-else>
+                <TimelinesNotifications />
+            </TimelinesTimelineScroller>
+        </div>
+    </ClientOnly>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+    layout: "app",
+});
+const tokenData = useTokenData();
+</script>

pages/public.vue

@@ -1,5 +1,9 @@
 <template>
-    <TimelinesPublic />
+    <div class="max-h-dvh overflow-y-auto">
+        <TimelinesTimelineScroller>
+            <TimelinesPublic />
+        </TimelinesTimelineScroller>
+    </div>
 </template>
 
 <script setup lang="ts">