feat: 💄 UI refactoring

pages/[username]/[uuid].vue

@@ -1,20 +1,19 @@
 <template>
     <ClientOnly>
-        <OverlayScrollbarsComponent v-if="loaded" :defer="true" class="max-h-dvh min-h-dvh overflow-y-auto pb-72">
+        <div v-if="loaded" :defer="true" class="mx-auto max-w-2xl w-full pb-72">
             <SocialElementsNotesNote v-for="note of context?.ancestors" :note="note" />
             <div ref="element" class="first:rounded-t last:rounded-b overflow-hidden">
                 <SocialElementsNotesNote class="!rounded-none border-2 border-pink-500" v-if="note" :note="note" />
             </div>
             <SocialElementsNotesNote v-for="note of context?.descendants" :note="note" />
-        </OverlayScrollbarsComponent>
-        <OverlayScrollbarsComponent :defer="true" v-else class="max-h-dvh min-h-dvh overflow-y-auto">
+        </div>
+        <div :defer="true" v-else class="mx-auto max-w-2xl w-full overflow-y-auto">
             <SocialElementsNotesNote v-for="_ of 5" :skeleton="true" />
-        </OverlayScrollbarsComponent>
+        </div>
     </ClientOnly>
 </template>
 
 <script setup lang="ts">
-import { OverlayScrollbarsComponent } from "#imports";
 definePageMeta({
     layout: "app",
 });

pages/[username]/index.vue

@@ -1,15 +1,14 @@
 <template>
-    <OverlayScrollbarsComponent class="max-h-dvh overflow-y-auto w-full">
+    <div class="mx-auto max-w-2xl w-full">
         <TimelinesTimelineScroller>
             <SocialElementsUsersAccount :account="account ?? undefined" />
             <TimelinesAccount :id="accountId" :key="accountId" />
         </TimelinesTimelineScroller>
-    </OverlayScrollbarsComponent>
+    </div>
 </template>
 
 <script setup lang="ts">
 import type { Account } from "~/types/mastodon/account";
-import { OverlayScrollbarsComponent } from "#imports";
 
 definePageMeta({
     layout: "app",

pages/home.vue

@@ -1,14 +1,16 @@
 <template>
-    <OverlayScrollbarsComponent :defer="true" class="max-h-dvh overflow-y-auto">
+    <div class="mx-auto max-w-2xl w-full">
         <TimelinesTimelineScroller>
+            <HeadersGreeting />
             <TimelinesHome />
         </TimelinesTimelineScroller>
-    </OverlayScrollbarsComponent>
+    </div>
 </template>
 
 <script setup lang="ts">
-import { OverlayScrollbarsComponent } from "#imports";
 definePageMeta({
     layout: "app",
 });
+
+const me = useMe();
 </script>

pages/index.vue

@@ -1,13 +1,14 @@
 <template>
-    <OverlayScrollbarsComponent :defer="true" class="max-h-dvh overflow-y-auto">
+    <div class="mx-auto max-w-2xl w-full">
         <TimelinesTimelineScroller>
+            <HeadersGreeting />
             <TimelinesPublic />
         </TimelinesTimelineScroller>
-    </OverlayScrollbarsComponent>
+    </div>
 </template>
 
+
 <script setup lang="ts">
-import { OverlayScrollbarsComponent } from "#imports";
 definePageMeta({
     layout: "app",
 });

pages/local.vue

@@ -1,13 +1,14 @@
 <template>
-    <OverlayScrollbarsComponent :defer="true" class="max-h-dvh overflow-y-auto">
+    <div class="mx-auto max-w-2xl w-full">
         <TimelinesTimelineScroller>
+            <HeadersGreeting />
             <TimelinesLocal />
         </TimelinesTimelineScroller>
-    </OverlayScrollbarsComponent>
+    </div>
 </template>
 
+
 <script lang="ts" setup>
-import { OverlayScrollbarsComponent } from "#imports";
 definePageMeta({
     layout: "app",
 });

pages/notifications.vue

@@ -1,6 +1,6 @@
 <template>
     <ClientOnly>
-        <OverlayScrollbarsComponent :defer="true" class="max-h-dvh overflow-y-auto">
+        <div class="mx-auto max-w-2xl w-full">
             <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">
@@ -13,14 +13,16 @@
                 </button>
             </div>
             <TimelinesTimelineScroller v-else>
-                <TimelinesNotifications />
+                <HeadersGreeting />
+                <div class="rounded overflow-hidden ring-1 ring-white/10">
+                    <TimelinesNotifications />
+                </div>
             </TimelinesTimelineScroller>
-        </OverlayScrollbarsComponent>
+        </div>
     </ClientOnly>
 </template>
 
 <script lang="ts" setup>
-import { OverlayScrollbarsComponent } from "#imports";
 definePageMeta({
     layout: "app",
 });

pages/public.vue

@@ -1,13 +1,13 @@
 <template>
-    <OverlayScrollbarsComponent :defer="true" class="max-h-dvh overflow-y-auto">
+    <div class="mx-auto max-w-2xl w-full">
         <TimelinesTimelineScroller>
+            <HeadersGreeting />
             <TimelinesPublic />
         </TimelinesTimelineScroller>
-    </OverlayScrollbarsComponent>
+    </div>
 </template>
 
 <script setup lang="ts">
-import { OverlayScrollbarsComponent } from "#imports";
 definePageMeta({
     layout: "app",
 });