From d8c7558bcb36563c7471413fca8b6ebc10eb0f16 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Wed, 8 May 2024 02:15:21 -1000
Subject: [PATCH] feat: :lipstick: UI changes, new collapsible sidebars

---
 .gitignore                                   |   1 +
 components/avatars/Centered.vue              |  18 +++
 components/composer/modal.vue                |   2 +-
 components/sidebars/collapsible-aside.vue    |  39 ++++++
 components/sidebars/navigation.vue           |  60 +++++----
 components/social-elements/notes/header.vue  |  20 ++-
 components/social-elements/notes/note.vue    |   2 +-
 components/social-elements/users/Account.vue |  18 +--
 layouts/app.vue                              |  51 ++++----
 layouts/default.vue                          |   2 +-
 package.json                                 | 126 +++++++++----------
 pages/[username]/index.vue                   |  47 ++++---
 pages/oauth/authorize.vue                    |   6 +-
 pages/oauth/consent.vue                      |  10 +-
 14 files changed, 222 insertions(+), 180 deletions(-)
 create mode 100644 components/avatars/Centered.vue
 create mode 100644 components/sidebars/collapsible-aside.vue

diff --git a/.gitignore b/.gitignore
index 4a7f73a..61880e3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,4 @@ logs
 .env
 .env.*
 !.env.example
+config
\ No newline at end of file
diff --git a/components/avatars/Centered.vue b/components/avatars/Centered.vue
new file mode 100644
index 0000000..22c2938
--- /dev/null
+++ b/components/avatars/Centered.vue
@@ -0,0 +1,18 @@
+<template>
+    <div v-bind="$props" class="bg-dark-700 overflow-hidden flex items-center justify-center">
+        <Skeleton :enabled="!url" class="!h-full !w-full">
+            <img class="cursor-pointer bg-dark-700 ring-1 w-full h-full object-cover" :src="url" :alt="alt" />
+        </Skeleton>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+
+interface Props extends /* @vue-ignore */ HTMLAttributes {
+    url?: string;
+    alt?: string;
+}
+
+defineProps<Props>();
+</script>
\ No newline at end of file
diff --git a/components/composer/modal.vue b/components/composer/modal.vue
index a97f069..1e0ba3f 100644
--- a/components/composer/modal.vue
+++ b/components/composer/modal.vue
@@ -14,7 +14,7 @@
                         leave-from="opacity-100 translate-y-0 sm:scale-100"
                         leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
                         <HeadlessDialogPanel
-                            class="relative transform overflow-hidden rounded-lg bg-dark-700 ring-1 ring-white/10 text-left shadow-xl transition-all sm:my-8 w-full max-w-xl">
+                            class="relative transform overflow-hidden rounded-lg bg-dark-700 ring-1 ring-dark-800 text-left shadow-xl transition-all sm:my-8 w-full max-w-xl">
                             <Composer v-if="instance" :instance="instance" />
                         </HeadlessDialogPanel>
                     </HeadlessTransitionChild>
diff --git a/components/sidebars/collapsible-aside.vue b/components/sidebars/collapsible-aside.vue
new file mode 100644
index 0000000..81d6957
--- /dev/null
+++ b/components/sidebars/collapsible-aside.vue
@@ -0,0 +1,39 @@
+<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']">
+            <div class="bg-dark-900 ring-1 ring-white/10 h-full overflow-y-auto w-full">
+                <slot />
+            </div>
+            <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>
+</template>
+
+<script lang="ts" setup>
+// slides in and out from the left or right
+import type { HTMLAttributes } from "vue";
+
+interface Props extends /* @vue-ignore */ HTMLAttributes {
+    direction?: "left" | "right";
+    initial?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    direction: "left",
+    initial: false,
+});
+
+const leaveClass = computed(() =>
+    props.direction === "left"
+        ? "-translate-x-[calc(100%-1rem)]"
+        : "translate-x-[calc(100%-1rem)]",
+);
+const enterClass = "translate-x-0";
+const open = ref(props.initial);
+</script>
\ No newline at end of file
diff --git a/components/sidebars/navigation.vue b/components/sidebars/navigation.vue
index 9982b0c..1d477be 100644
--- a/components/sidebars/navigation.vue
+++ b/components/sidebars/navigation.vue
@@ -64,13 +64,15 @@
             </template>
 
             <template #items>
-                <HeadlessMenuItem v-for="timeline in visibleTimelines" :key="timeline.href" :href="timeline.href">
-                    <NuxtLink>
-                        <ButtonsDropdownElement :icon="timeline.icon" class="w-full">
-                            {{ timeline.name }}
-                        </ButtonsDropdownElement>
-                    </NuxtLink>
-                </HeadlessMenuItem>
+                <ClientOnly>
+                    <HeadlessMenuItem v-for="timeline in visibleTimelines" :key="timeline.href" :href="timeline.href">
+                        <NuxtLink>
+                            <ButtonsDropdownElement :icon="timeline.icon" class="w-full">
+                                {{ timeline.name }}
+                            </ButtonsDropdownElement>
+                        </NuxtLink>
+                    </HeadlessMenuItem>
+                </ClientOnly>
             </template>
         </DropdownsAdaptiveDropdown>
         <NuxtLink href="/notifications" class="flex flex-col items-center justify-center p-2 rounded">
@@ -86,25 +88,27 @@
             </template>
 
             <template #items>
-                <HeadlessMenuItem v-if="tokenData">
-                    <ButtonsDropdownElement icon="tabler:logout" class="w-full"
-                        @click="signOut().finally(() => loadingAuth = false)" :loading="loadingAuth">
-                        Sign Out
-                    </ButtonsDropdownElement>
-                </HeadlessMenuItem>
-                <HeadlessMenuItem v-if="!tokenData">
-                    <ButtonsDropdownElement icon="tabler:login" class="w-full"
-                        @click="signIn().finally(() => loadingAuth = false)" :loading="loadingAuth">
-                        Sign In
-                    </ButtonsDropdownElement>
-                </HeadlessMenuItem>
-                <HeadlessMenuItem v-if="!tokenData">
-                    <NuxtLink href="/register">
-                        <ButtonsDropdownElement icon="tabler:certificate" class="w-full">
-                            Register
+                <ClientOnly>
+                    <HeadlessMenuItem v-if="tokenData">
+                        <ButtonsDropdownElement icon="tabler:logout" class="w-full"
+                            @click="signOut().finally(() => loadingAuth = false)" :loading="loadingAuth">
+                            Sign Out
                         </ButtonsDropdownElement>
-                    </NuxtLink>
-                </HeadlessMenuItem>
+                    </HeadlessMenuItem>
+                    <HeadlessMenuItem v-if="!tokenData">
+                        <ButtonsDropdownElement icon="tabler:login" class="w-full"
+                            @click="signIn().finally(() => loadingAuth = false)" :loading="loadingAuth">
+                            Sign In
+                        </ButtonsDropdownElement>
+                    </HeadlessMenuItem>
+                    <HeadlessMenuItem v-if="!tokenData">
+                        <NuxtLink href="/register">
+                            <ButtonsDropdownElement icon="tabler:certificate" class="w-full">
+                                Register
+                            </ButtonsDropdownElement>
+                        </NuxtLink>
+                    </HeadlessMenuItem>
+                </ClientOnly>
             </template>
         </DropdownsAdaptiveDropdown>
         <button @click="compose" v-if="tokenData"
@@ -133,6 +137,12 @@ const timelines = ref([
         name: "Local",
         icon: "tabler:home",
     },
+    {
+        href: "/notifications",
+        name: "Notifications",
+        icon: "tabler:bell",
+        requiresAuth: true,
+    },
 ]);
 
 const visibleTimelines = computed(() =>
diff --git a/components/social-elements/notes/header.vue b/components/social-elements/notes/header.vue
index 849bbb2..1b71f36 100644
--- a/components/social-elements/notes/header.vue
+++ b/components/social-elements/notes/header.vue
@@ -1,11 +1,9 @@
 <template>
     <div v-if="small" class="flex flex-row">
-        <Skeleton :enabled="!note" shape="rect" class="!h-6 w-6">
-            <NuxtLink :href="accountUrl" class="shrink-0">
-                <img class="h-6 w-6 rounded ring-1 ring-white/5 shrink-0" :src="note?.account.avatar"
-                    :alt="`${note?.account.acct}'s avatar`" />
-            </NuxtLink>
-        </Skeleton>
+        <NuxtLink :href="accountUrl" class="shrink-0">
+            <AvatarsCentered :url="note?.account.avatar" :alt="`${note?.account.acct}'s avatar`"
+                class="h-6 w-6 rounded ring-1 ring-white/5" />
+        </NuxtLink>
         <div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
             <div class="flex flex-row text-sm items-center justify-between w-full">
                 <NuxtLink :href="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all">
@@ -23,12 +21,10 @@
         </div>
     </div>
     <div v-else class="flex flex-row">
-        <Skeleton :enabled="!note" shape="rect" class="!h-12 w-12">
-            <NuxtLink :href="accountUrl" class="shrink-0">
-                <img class="h-12 w-12 rounded ring-1 ring-white/5" :src="note?.account.avatar"
-                    :alt="`${note?.account.acct}'s avatar`" />
-            </NuxtLink>
-        </Skeleton>
+        <NuxtLink :href="accountUrl" class="shrink-0">
+            <AvatarsCentered :url="note?.account.avatar" :alt="`${note?.account.acct}'s avatar`"
+                class="h-12 w-12 rounded ring-1 ring-white/5" />
+        </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="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all">
diff --git a/components/social-elements/notes/note.vue b/components/social-elements/notes/note.vue
index f05c4cf..6438863 100644
--- a/components/social-elements/notes/note.vue
+++ b/components/social-elements/notes/note.vue
@@ -42,7 +42,7 @@
         </div>
         <Skeleton class="!h-10 w-full mt-6" :enabled="!props.note || !loaded" v-if="!small || !showInteractions">
             <div v-if="showInteractions"
-                class="mt-6 flex flex-row items-stretch disabled:*:opacity-70 disabled:*:cursor-not-allowed relative justify-between text-sm h-10 hover:enabled:[&>button]:bg-dark-800 [&>button]:duration-200 [&>button]:rounded [&>button]:flex [&>button]:flex-1 [&>button]:flex-row [&>button]:items-center [&>button]:justify-center">
+                class="mt-6 flex flex-row items-stretch disabled:*:opacity-70 *:max-w-28 disabled:*:cursor-not-allowed relative justify-around text-sm h-10 hover:enabled:[&>button]:bg-dark-800 [&>button]:duration-200 [&>button]:rounded [&>button]:flex [&>button]:flex-1 [&>button]:flex-row [&>button]:items-center [&>button]:justify-center">
                 <button class="group" @click="note && useEvent('note:reply', note)" :disabled="!isSignedIn">
                     <Icon name="tabler:arrow-back-up"
                         class="h-5 w-5 text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
diff --git a/components/social-elements/users/Account.vue b/components/social-elements/users/Account.vue
index a57cd0a..e2d5d0b 100644
--- a/components/social-elements/users/Account.vue
+++ b/components/social-elements/users/Account.vue
@@ -1,20 +1,12 @@
 <template>
     <ClientOnly>
-        <div class="w-full rounded ring-1 ring-white/10 pb-10">
-            <Skeleton :enabled="skeleton" class="!w-full !h-full !aspect-[8/3]">
-                <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" :alt="`${account.acct}'s header image'`" />
-                </div>
-            </Skeleton>
+        <div class="w-full ring-1 ring-inset ring-white/5 pb-10">
+            <AvatarsCentered :url="account?.header" :alt="`${account?.acct}'s header image'`"
+                class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700" />
 
             <div class="flex items-start justify-between px-4 py-3">
-                <div class="h-32 w-32 -mt-[4.5rem] z-10 bg-dark-700 rounded shrink-0 overflow-hidden">
-                    <Skeleton :enabled="skeleton" class="!h-full !w-full">
-                        <img class="cursor-pointer bg-dark-700 ring-1 ring-white/10"
-                            :src="account?.avatar" :alt="`${account?.acct}'s avatar'`" />
-                    </Skeleton>
-                </div>
+                <AvatarsCentered :url="account?.avatar" :alt="`${account?.acct}'s avatar'`"
+                    class="h-32 w-32 -mt-[4.5rem] z-10 shrink-0 rounded ring-2 ring-dark-800" />
 
                 <ClientOnly>
                     <ButtonsSecondary v-if="account && account?.id === me?.id">Edit Profile
diff --git a/layouts/app.vue b/layouts/app.vue
index 3428fd0..589ab5d 100644
--- a/layouts/app.vue
+++ b/layouts/app.vue
@@ -1,25 +1,22 @@
 <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 lg:justify-between">
-            <aside v-if="width > 1024"
-                class="max-w-md max-h-dvh overflow-y-auto w-full bg-dark-900 ring-1 ring-white/10 hidden lg:flex flex-col">
-                <ClientOnly>
-                    <div class="grow p-10 mb-10" 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>
+        <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">
+                <slot />
+            </div>
+            <ClientOnly>
+                <CollapsibleAside v-if="width > 1280 && tokenData" direction="right"
+                    class="max-w-md max-h-dvh overflow-y-auto w-full hidden xl:flex">
+                    <TimelinesTimelineScroller>
                         <TimelinesNotifications />
                     </TimelinesTimelineScroller>
-                    <div class="mt-auto prose prose-invert prose-sm flex flex-col gap-4 px-10 pb-10" v-if="!tokenData">
+                    <!-- <div class="mt-auto prose prose-invert prose-sm flex flex-col gap-4 px-10 pb-10" v-if="!tokenData">
                         <div class="text-center">
                             <strong
                                 class="bg-gradient-to-tr from-pink-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">Lysand
@@ -40,18 +37,12 @@
                                 Mobile Apps
                             </ButtonsSecondary>
                         </NuxtLink>
-                    </div>
-                </ClientOnly>
-            </aside>
-            <div class="w-full max-h-dvh">
-                <slot />
-            </div>
-            <aside v-if="width > 1024"
-                class="max-w-md max-h-dvh overflow-y-auto w-full bg-dark-900 ring-1 ring-white/10 lg:block hidden">
-                <slot name="right">
-                    <SocialElementsInstancePresentation />
-                </slot>
-            </aside>
+                    </div> -->
+                </CollapsibleAside>
+                <div v-else-if="width > 1280" class="max-w-md w-full max-h-dvh hidden xl:flex">
+                    <!-- Padding only container -->
+                </div>
+            </ClientOnly>
         </div>
     </div>
     <ComposerModal />
@@ -59,6 +50,7 @@
 
 <script setup lang="ts">
 import { convert } from "html-to-text";
+import CollapsibleAside from "~/components/sidebars/collapsible-aside.vue";
 
 const tokenData = useTokenData();
 const client = useMegalodon(tokenData);
@@ -72,7 +64,6 @@ useServerSeoMeta({
     description: convert(description.value?.content ?? ""),
     ogSiteName: "Lysand",
     colorScheme: "dark",
-    referrer: "no-referrer",
 });
 
 const { n } = useMagicKeys();
diff --git a/layouts/default.vue b/layouts/default.vue
index 5d06042..c2aa476 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="from-dark-600 to-dark-900 bg-gradient-to-tl min-h-dvh">
+    <div class="from-dark-600 to-dark-900 bg-gradient-to-tl min-h-dvh pb-20 md:pb-0">
         <SidebarsNavigation />
         <slot />
     </div>
diff --git a/package.json b/package.json
index 0854f1b..932bdb6 100644
--- a/package.json
+++ b/package.json
@@ -1,65 +1,65 @@
 {
-  "name": "lysand-fe",
-  "private": true,
-  "type": "module",
-  "license": "AGPL-3.0",
-  "author": {
-    "email": "contact@cpluspatch.com",
-    "name": "CPlusPatch",
-    "url": "https://cpluspatch.com"
-  },
-  "maintainers": [
-    {
-      "email": "contact@cpluspatch.com",
-      "name": "CPlusPatch",
-      "url": "https://cpluspatch.com"
-    }
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/lysand-org/lysand-fe.git"
-  },
-  "scripts": {
-    "build": "nuxt build",
-    "dev": "nuxt dev",
-    "generate": "nuxt generate",
-    "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
-  },
-  "dependencies": {
-    "@nuxt/fonts": "^0.7.0",
-    "@tailwindcss/typography": "^0.5.12",
-    "@vee-validate/nuxt": "^4.12.6",
-    "@vee-validate/zod": "^4.12.6",
-    "c12": "^1.10.0",
-    "html-to-text": "^9.0.5",
-    "megalodon": "^10.0.0",
-    "mitt": "^3.0.1",
-    "nuxt": "^3.11.2",
-    "nuxt-headlessui": "^1.2.0",
-    "nuxt-icon": "^0.6.10",
-    "nuxt-security": "^2.0.0-beta.0",
-    "nuxt-shiki": "^0.3.0",
-    "shiki": "^1.3.0",
-    "vue": "^3.4.21",
-    "vue-router": "^4.3.0",
-    "zod": "^3.23.0"
-  },
-  "devDependencies": {
-    "@biomejs/biome": "^1.6.4",
-    "@nuxtjs/seo": "^2.0.0-rc.10",
-    "@nuxtjs/tailwindcss": "^6.11.4",
-    "@tailwindcss/forms": "^0.5.7",
-    "@types/html-to-text": "^9.0.4",
-    "@vue-email/nuxt": "^0.8.19"
-  },
-  "trustedDependencies": [
-    "@biomejs/biome",
-    "@fortawesome/fontawesome-common-types",
-    "@fortawesome/free-regular-svg-icons",
-    "@fortawesome/free-solid-svg-icons",
-    "esbuild",
-    "json-editor-vue",
-    "vue-demi"
-  ]
+    "name": "lysand-fe",
+    "private": true,
+    "type": "module",
+    "license": "AGPL-3.0",
+    "author": {
+        "email": "contact@cpluspatch.com",
+        "name": "CPlusPatch",
+        "url": "https://cpluspatch.com"
+    },
+    "maintainers": [
+        {
+            "email": "contact@cpluspatch.com",
+            "name": "CPlusPatch",
+            "url": "https://cpluspatch.com"
+        }
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/lysand-org/lysand-fe.git"
+    },
+    "scripts": {
+        "build": "nuxt build",
+        "dev": "nuxt dev",
+        "generate": "nuxt generate",
+        "preview": "nuxt preview",
+        "postinstall": "nuxt prepare"
+    },
+    "dependencies": {
+        "@nuxt/fonts": "^0.7.0",
+        "@tailwindcss/typography": "^0.5.12",
+        "@vee-validate/nuxt": "^4.12.6",
+        "@vee-validate/zod": "^4.12.6",
+        "c12": "^1.10.0",
+        "html-to-text": "^9.0.5",
+        "megalodon": "^10.0.0",
+        "mitt": "^3.0.1",
+        "nuxt": "^3.11.2",
+        "nuxt-headlessui": "^1.2.0",
+        "nuxt-icon": "^0.6.10",
+        "nuxt-security": "^2.0.0-beta.0",
+        "nuxt-shiki": "^0.3.0",
+        "shiki": "^1.3.0",
+        "vue": "^3.4.21",
+        "vue-router": "^4.3.0",
+        "zod": "^3.23.0"
+    },
+    "devDependencies": {
+        "@biomejs/biome": "^1.6.4",
+        "@nuxtjs/seo": "^2.0.0-rc.10",
+        "@nuxtjs/tailwindcss": "^6.11.4",
+        "@tailwindcss/forms": "^0.5.7",
+        "@types/html-to-text": "^9.0.4",
+        "@vue-email/nuxt": "^0.8.19"
+    },
+    "trustedDependencies": [
+        "@biomejs/biome",
+        "@fortawesome/fontawesome-common-types",
+        "@fortawesome/free-regular-svg-icons",
+        "@fortawesome/free-solid-svg-icons",
+        "esbuild",
+        "json-editor-vue",
+        "vue-demi"
+    ]
 }
diff --git a/pages/[username]/index.vue b/pages/[username]/index.vue
index c89d648..5d62da6 100644
--- a/pages/[username]/index.vue
+++ b/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>
\ No newline at end of file
diff --git a/pages/oauth/authorize.vue b/pages/oauth/authorize.vue
index f0f3c2f..6c337bd 100644
--- a/pages/oauth/authorize.vue
+++ b/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>
diff --git a/pages/oauth/consent.vue b/pages/oauth/consent.vue
index 48a62b5..d10d6fc 100644
--- a/pages/oauth/consent.vue
+++ b/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>