feat: 💄 UI refactoring

components/headers/greeting.vue

@@ -0,0 +1,27 @@
+<template>
+    <ClientOnly>
+        <div v-if="me" class="bg-dark-800 p-6 my-5 rounded ring-1 ring-white/5">
+            <div class="sm:flex sm:items-center sm:justify-between">
+                <div class="sm:flex sm:space-x-5">
+                    <AvatarsCentered :url="me.avatar"
+                        class="mx-auto shrink-0 size-20 rounded overflow-hidden ring-1 ring-white/10" />
+                    <div class="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
+                        <p class="text-sm font-medium text-gray-300">Welcome back,</p>
+                        <p class="text-xl font-bold text-gray-50 sm:text-2xl"
+                            v-html="useParsedContent(me.display_name, []).value"></p>
+                        <p class="text-sm font-medium text-gray-500">@{{ me.acct }}</p>
+                    </div>
+                </div>
+                <div class="mt-5 flex justify-center sm:mt-0">
+                    <ButtonsSecondary @click="useEvent('composer:open')">
+                        Compose
+                    </ButtonsSecondary>
+                </div>
+            </div>
+        </div>
+    </ClientOnly>
+</template>
+
+<script lang="ts" setup>
+const me = useMe();
+</script>

components/sidebars/collapsible-aside.vue

@@ -1,18 +1,16 @@
 <template>
-    <aside v-bind="$props" class="overflow-hidden">
-        <div
-            :class="['flex max-h-dvh overflow-hidden w-full 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">
-                <slot />
-            </OverlayScrollbarsComponent>
-            <button @click="open = !open"
-                class="h-full bg-dark-700/50 hover:bg-dark-400/50 hover:cursor-pointer duration-200 py-4 px-0.5 flex items-center justify-center w-4 shrink-0">
-                <Icon name="tabler:chevron-right"
-                    :class="['text-gray-200 duration-200', direction === 'left' ? open ? 'rotate-180' : 'rotate-0' : open ? 'rotate-0' : 'rotate-180']"
-                    aria-hidden="true" />
-            </button>
-        </div>
+    <aside v-bind="$props"
+        :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">
+            <slot />
+        </OverlayScrollbarsComponent>
+        <button @click="open = !open"
+            class="h-full bg-dark-700 hover:bg-dark-400 hover:cursor-pointer duration-200 py-4 px-0.5 flex items-center justify-center w-4 shrink-0">
+            <Icon name="tabler:chevron-right"
+                :class="['text-gray-200 duration-200', direction === 'left' ? open ? 'rotate-180' : 'rotate-0' : open ? 'rotate-0' : 'rotate-180']"
+                aria-hidden="true" />
+        </button>
     </aside>
 </template>
 
@@ -33,9 +31,11 @@ const props = withDefaults(defineProps<Props>(), {
 
 const leaveClass = computed(() =>
     props.direction === "left"
-        ? "-translate-x-[calc(100%-1rem)]"
-        : "translate-x-[calc(100%-1rem)]",
+        ? "-left-[calc(28rem-6rem)]"
+        : "-right-[calc(28rem-1rem)]",
+);
+const enterClass = computed(() =>
+    props.direction === "left" ? "left-0" : "right-0",
 );
-const enterClass = "translate-x-0";
 const open = ref(props.initial);
 </script>

layouts/app.vue

@@ -1,18 +1,13 @@
 <template>
     <div class="from-dark-600 to-dark-900 bg-gradient-to-tl min-h-dvh">
         <SidebarsNavigation />
-        <div class="relative md:pl-20 min-h-dvh flex flex-row justify-center xl:justify-between">
-            <ClientOnly>
-                <CollapsibleAside v-if="width > 1280" class="max-w-md max-h-dvh overflow-y-auto w-full xl:flex hidden">
-                    <SocialElementsInstancePresentation />
-                </CollapsibleAside>
-            </ClientOnly>
-            <div class="w-full max-h-dvh max-w-2xl">
+        <div class="relative md:pl-20 min-h-dvh flex flex-row overflow-hidden justify-center xl:justify-between">
+            <OverlayScrollbarsComponent :defer="true" class="w-full max-h-dvh overflow-y-auto">
                 <slot />
-            </div>
+            </OverlayScrollbarsComponent>
             <ClientOnly>
                 <CollapsibleAside v-if="width > 1280 && tokenData" direction="right"
-                    class="max-w-md max-h-dvh overflow-y-auto w-full hidden xl:flex">
+                    class="max-w-md max-h-dvh overflow-y-auto w-full hidden absolute inset-y-0 xl:flex">
                     <TimelinesTimelineScroller>
                         <TimelinesNotifications />
                     </TimelinesTimelineScroller>
@@ -51,6 +46,7 @@
 <script setup lang="ts">
 import { convert } from "html-to-text";
 import CollapsibleAside from "~/components/sidebars/collapsible-aside.vue";
+import { OverlayScrollbarsComponent } from "#imports";
 
 const tokenData = useTokenData();
 const client = useMegalodon(tokenData);

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",
 });