feat: 💄 UI changes, new collapsible sidebars

pages/[username]/index.vue

@@ -1,30 +1,19 @@
 <template>
-    <NuxtLayout name="app">
-        <div class="max-h-dvh overflow-y-scroll">
-            <SocialElementsUsersAccount v-if="isMobile" :account="account ?? undefined" />
-            <TimelinesTimelineScroller>
-                <TimelinesAccount :id="accountId ?? undefined" :key="accountId ?? undefined" />
-            </TimelinesTimelineScroller>
-        </div>
-        <template #right>
-            <SocialElementsUsersAccount v-if="!isMobile" :account="account ?? undefined" />
-            <div v-else>
-
-            </div>
-        </template>
-    </NuxtLayout>
+    <div class="max-h-dvh overflow-y-scroll w-full">
+        <SocialElementsUsersAccount :account="account ?? undefined" />
+        <TimelinesTimelineScroller>
+            <TimelinesAccount :id="accountId" :key="accountId" />
+        </TimelinesTimelineScroller>
+    </div>
 </template>
 
 <script setup lang="ts">
 import type { Account } from "~/types/mastodon/account";
 
 definePageMeta({
-    layout: false,
+    layout: "app",
 });
 
-const { width } = useWindowSize();
-const isMobile = computed(() => width.value < 1024);
-
 const route = useRoute();
 const client = useMegalodon(undefined, true);
 const username = (route.params.username as string).replace("@", "");
@@ -33,12 +22,22 @@ const accounts = useAccountSearch(client, username);
 const account = computed<Account | null>(
     () => accounts.value?.find((account) => account.acct === username) ?? null,
 );
-const accountId = computed(() => account.value?.id ?? null);
+const accountId = computed(() => account.value?.id ?? undefined);
 
-useSeoMeta({
-    title: account.value?.display_name,
-    description: account.value?.note,
-    ogImage: account.value?.avatar,
-    profileUsername: account.value?.acct,
+useServerSeoMeta({
+    title: computed(() =>
+        account.value ? account.value.display_name : "Loading",
+    ),
+    ogTitle: computed(() =>
+        account.value ? account.value.display_name : "Loading",
+    ),
+    ogImage: computed(() => (account.value ? account.value.avatar : undefined)),
+    ogType: "profile",
+    ogDescription: computed(() =>
+        account.value ? account.value.note : undefined,
+    ),
+    description: computed(() =>
+        account.value ? account.value.note : undefined,
+    ),
 });
 </script>

pages/oauth/authorize.vue

@@ -1,9 +1,9 @@
 <template>
-    <div class="flex min-h-screen relative flex-col justify-center py-12 lg:px-8">
+    <div class="flex min-h-screen relative flex-col justify-center py-12 px-8">
         <img crossorigin="anonymous" src="https://cdn.lysand.org/logo-long-dark.webp" alt="Lysand logo"
             class="mx-auto h-24 hidden md:block" />
         <div v-if="validUrlParameters"
-            class="mt-10 sm:mx-auto w-full sm:max-w-md px-10 py-10 rounded md:ring-1 md:ring-white/10">
+            class="sm:mx-auto w-full sm:max-w-md px-10 py-10 rounded md:ring-1 md:ring-white/10">
             <div v-if="error" class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white mb-10">
                 <h2 class="font-bold text-lg">An error occured</h2>
                 <span class="text-sm">{{ error_description }}</span>
@@ -48,7 +48,7 @@
                 <ButtonsPrimary type="submit" class="w-full">Sign in</ButtonsPrimary>
             </VeeForm>
         </div>
-        <div v-else class="mx-auto max-w-md mt-10">
+        <div v-else class="mx-auto max-w-md">
             <h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Invalid access
                 parameters
             </h1>

pages/oauth/consent.vue

@@ -1,12 +1,7 @@
 <template>
     <ClientOnly>
         <div class="flex min-h-screen relative flex-col justify-center px-6 py-12 lg:px-8">
-            <div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
-                aria-hidden="true">
-                <div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
-                    style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)" />
-            </div>
-            <div v-if="validUrlParameters" class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+            <div v-if="validUrlParameters" class="sm:mx-auto sm:w-full sm:max-w-sm">
                 <form class="space-y-6" method="POST"
                     :action="url.pathname.replace('/oauth/consent', '/oauth/authorize')">
                     <input type="hidden" v-for="([key, value]) in url.searchParams" :key="key" :name="key"
@@ -68,7 +63,8 @@
                     <li v-for="client of useConfig().RECOMMENDED_CLIENTS" :key="client.name" class="w-full">
                         <a :href="client.link" target="_blank"
                             class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full flex flex-row gap-3 items-center">
-                            <img crossorigin="anonymous" :src="client.icon" :alt="`${client.name}'s logo'`" class="h-10 w-10" />
+                            <img crossorigin="anonymous" :src="client.icon" :alt="`${client.name}'s logo'`"
+                                class="h-10 w-10" />
                             <div class="flex flex-col justify-between items-start">
                                 <h2 class="font-bold text-gray-100">{{ client.name }}</h2>
                                 <span class="underline text-pink-700">{{ client.link }}</span>