refactor: signin page

components/account/AccountHeader.vue

@@ -25,7 +25,7 @@ const createdAt = $computed(() => {
             </NuxtLink>
           </div>
           <NuxtLink flex flex-col :to="`/@${account.acct}`">
-            <CommonRichContent font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
+            <CommonRichContent font-bold text-2xl :content="getDisplayName(account)" :emojis="account.emojis" />
             <p op50>
               @{{ account.acct }}
             </p>

components/account/AccountSignIn.vue

@@ -1,10 +1,29 @@
+<script setup lang="ts">
+import { DEFAULT_SERVER } from '~/constants'
+
+const server = ref<string>()
+
+async function oauth() {
+  const a = document.createElement('a')
+  a.href = `/api/${server.value || DEFAULT_SERVER}/login`
+  a.target = '_blank'
+  a.click()
+}
+</script>
+
 <template>
-  <div p8 flex="~ col gap4">
-    <div text-sm op50>
-      Sign in to follow profiles or hashtags, favourite, share and reply to posts, or interact from your account on a different server.
+  <div h-full text-center justify-center flex="~ col items-center gap2">
+    <div text-4xl mb-10>
+      Nuxtodon
     </div>
-    <NuxtLink to="/signin" class="btn-solid text-center">
+
+    <div>Mastodon Server</div>
+    <div flex bg-gray:10 px2 py1 mxa rounded border="~ border" w-80 text-xl items-center>
+      <span op35 mr1 text-sm>https://</span>
+      <input v-model="server" :placeholder="DEFAULT_SERVER" outline-none bg-transparent>
+    </div>
+    <button btn-solid mxa @click="oauth()">
       Sign in
-    </NuxtLink>
+    </button>
   </div>
 </template>

components/account/AccountSignInEntry.vue

@@ -0,0 +1,10 @@
+<template>
+  <div p8 flex="~ col gap4">
+    <div text-sm op50>
+      Sign in to follow profiles or hashtags, favourite, share and reply to posts, or interact from your account on a different server.
+    </div>
+    <NuxtLink to="/signin" class="btn-solid text-center">
+      Sign in
+    </NuxtLink>
+  </div>
+</template>

components/nav/NavSide.vue

@@ -38,6 +38,10 @@
         <div i-ri:bookmark-line />
         <span>Bookmarks</span>
       </NuxtLink>
+      <NuxtLink flex gap2 items-center :to="`/@${currentUser.account?.username}`" active-class="text-primary">
+        <AccountAvatar :account="currentUser.account" h="1.2em" />
+        <span>Profile</span>
+      </NuxtLink>
     </template>
   </div>
 </template>

components/publish/PublishWidget.vue

@@ -55,8 +55,8 @@ onUnmounted(() => {
     />
     <div flex justify-end>
       <button
-        h-9 w-22 bg-primary border-rounded
-        :disabled="draft.status === ''"
+        btn-solid
+        :disabled="!draft.status"
         @click="publish"
       >
         Publish!