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 h-full text-center justify-center flex="~ col items-center gap2">
-    <div text-sm op50>
+    <div text-4xl mb-10>
-      Sign in to follow profiles or hashtags, favourite, share and reply to posts, or interact from your account on a different server.
+      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
+        btn-solid
-        :disabled="draft.status === ''"
+        :disabled="!draft.status"
         @click="publish"
       >
         Publish!

layouts/default.vue

@@ -5,7 +5,7 @@
         <div sticky top-0 h-screen flex="~ col">
           <slot name="left">
             <AccountMe v-if="currentUser" />
-            <AccountSignIn v-else />
+            <AccountSignInEntry v-else />
           </slot>
         </div>
       </div>

pages/signin/index.vue

@@ -2,30 +2,8 @@
 definePageMeta({
   layout: 'none',
 })
-
-const server = ref()
-
-async function oauth() {
-  const a = document.createElement('a')
-  a.href = `/api/${server.value}/login`
-  a.target = '_blank'
-  a.click()
-}
 </script>
 
 <template>
-  <div h-full text-center justify-center flex="~ col items-center gap2">
+  <AccountSignIn />
-    <div text-4xl mb-10>
-      Nuxtodon
-    </div>
-
-    <div>Mastodon Server</div>
-    <div bg-gray:10 px2 py1 rounded border="~ border" w-50 mxa flex>
-      <span op25 mr1>https://</span>
-      <input v-model="server" outline-none bg-transparent>
-    </div>
-    <button bg-teal6 px2 py1 rounded w-20 mxa mt-5 @click="oauth()">
-      Login
-    </button>
-  </div>
 </template>

shim.d.ts

@@ -0,0 +1 @@
+/// <references type="unplugin-vue-macros/macros-global" />

tsconfig.json

@@ -1,10 +1,5 @@
 {
   "extends": "./.nuxt/tsconfig.json",
-  "compilerOptions": {
-    "types": [
-      "unplugin-vue-macros/macros-global"
-    ]
-  },
   "vueCompilerOptions": {
     "plugins": [
       "@vue-macros/volar/define-model",

unocss.config.ts

@@ -15,8 +15,9 @@ export default defineConfig({
       'border-base': 'border-$c-border',
       'bg-base': 'bg-$c-bg-base',
       'text-base': 'text-$c-text-base',
-      'btn-solid': 'px-4 py-2 rounded text-white bg-$c-primary hover:bg-$c-primary-active',
+      'interact-disabled': 'disabled:opacity-50 disabled:pointer-events-none disabled:saturate-0',
-      'btn-outline': 'px-4 py-2 rounded text-$c-primary border-$c-primary hover:bg-$c-primary hover:text-white',
+      'btn-solid': 'px-4 py-2 rounded text-white bg-$c-primary hover:bg-$c-primary-active interact-disabled',
+      'btn-outline': 'px-4 py-2 rounded text-$c-primary border-$c-primary hover:bg-$c-primary hover:text-white interact-disabled',
     },
   ],
   presets: [