feat: create premium profile page

pages/posts.vue

@@ -383,7 +383,7 @@
   <!-- Search -->
   <SafeTeleport to="#navbar-actions">
     <button
-      class="focus-visible:focus-util hover:hover-bg-util hover:hover-text-util relative rounded-lg px-2 py-1.5"
+      class="focus-visible:focus-util hover:hover-bg-util hover:hover-text-util relative rounded-md p-2"
       type="button"
       @click="toggleSearchMenu()"
     >

pages/premium/index.vue

@@ -34,12 +34,14 @@
   })
 </script>
 
+<!-- TODO: Normalize design -->
+
 <template>
   <!-- Sign in -->
   <!-- TODO: Make more obvious? -->
   <SafeTeleport to="#navbar-actions">
     <NuxtLink
-      class="focus-visible:focus-util hover:hover-bg-util hover:hover-text-util relative rounded-lg px-2 py-1.5"
+      class="focus-visible:focus-util hover:hover-bg-util hover:hover-text-util relative rounded-md p-2"
       href="/premium/sign-in"
     >
       <span class="sr-only">Sign in</span>

pages/premium/profile.vue

@@ -1,15 +1,107 @@
 <script lang="ts" setup>
-  const { status, data, signIn, signOut } = useAuth()
+  import { ArrowLeftOnRectangleIcon } from '@heroicons/vue/24/solid'
+
+  const { data, signOut: _signOut } = useAuth()
+
+  const links = [
+    {
+      name: 'Saved posts',
+      description: 'Save posts to your device and enjoy them later',
+      href: '/premium/saved-posts'
+    },
+    {
+      name: 'Tag collections',
+      description: 'Create lists of tags to quickly search or filter posts',
+      href: '/premium/tag-collections'
+    },
+    {
+      name: 'Additional Boorus',
+      description: 'Browse posts from other Boorus',
+      href: '/premium/additional-boorus'
+    },
+    {
+      name: 'Backup',
+      description: 'Backup your saved posts, tag collections and settings',
+      href: '/premium/backup'
+    }
+  ]
+
+  function signOut() {
+    _signOut()
+    window.location.reload()
+  }
+
+  useSeoMeta({
+    title: 'Premium profile'
+  })
 
   definePageMeta({ middleware: 'auth' })
 </script>
 
 <template>
-  <main>
-    <!-- Status & welcome back -->
+  <!-- Sign out -->
+  <SafeTeleport to="#navbar-actions">
+    <button
+      class="focus-visible:focus-util hover:hover-bg-util hover:hover-text-util relative rounded-md p-2"
+      type="button"
+      @click="signOut"
+    >
+      <span class="sr-only">Sign out</span>
+
+      <ArrowLeftOnRectangleIcon class="h-6 w-6 text-base-content-highlight" />
+    </button>
+  </SafeTeleport>
+
+  <main class="container relative mx-auto max-w-3xl flex-1 px-4 sm:px-6 lg:px-8">
+    <!-- -->
+
+    <!-- Status -->
+    <!-- TODO: Add thank you note -->
+    <section class="mt-4">
+      <h1 class="text-2xl font-bold leading-10 tracking-tight text-base-content-highlight">Premium profile</h1>
+
+      <h2 class="truncate">
+        Signed in as
+
+        <span
+          class="inline-flex items-center rounded-md bg-primary-400/10 px-2 py-1 text-sm font-medium text-primary-400 ring-1 ring-inset ring-primary-400/20"
+        >
+          {{ data.email }}
+        </span>
+      </h2>
+    </section>
+
+    <!-- Links -->
+    <section>
+      <ol class="mt-6 space-y-4">
+        <!-- -->
+
+        <NuxtLink
+          v-for="link in links"
+          :key="link.name"
+          :href="link.href"
+          class="hover:hover-bg-util focus-visible:focus-util block w-full rounded-md border border-base-0/20 px-4 py-3"
+        >
+          <h3 class="text-lg font-bold tracking-tight text-base-content-highlight">
+            {{ link.name }}
+          </h3>
 
-    <!-- Sign out -->
+          <p class="text-sm">
+            {{ link.description }}
+          </p>
+        </NuxtLink>
+      </ol>
+    </section>
 
-    <!-- Premium options -->
+    <!-- Manage subscription -->
+    <section class="absolute inset-x-0 bottom-0 w-full p-4 text-center">
+      <NuxtLink
+        class="hover:hover-text-util focus-visible:focus-util underline"
+        href="https://app.gumroad.com/library?query=Rule+34+App"
+        target="_blank"
+      >
+        Manage subscription
+      </NuxtLink>
+    </section>
   </main>
 </template>

pages/premium/sign-in.vue

@@ -54,7 +54,7 @@
     <!-- -->
 
     <!-- Sign in -->
-    <section class="-mt-6 flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
+    <section class="-mt-12 flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
       <div class="sm:mx-auto sm:w-full sm:max-w-sm">
         <img
           alt="Logo"
@@ -69,7 +69,7 @@
         </h2>
       </div>
 
-      <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+      <div class="mt-24 sm:mx-auto sm:w-full sm:max-w-sm">
         <form
           class="space-y-6"
           @submit.prevent="onSubmit"