From 24c573ccf032f096906e71875d8762733596c303 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Wed, 23 Nov 2022 11:06:56 +0800
Subject: [PATCH] refactor: signin page

---
 components/account/AccountHeader.vue      |  2 +-
 components/account/AccountSignIn.vue      | 29 +++++++++++++++++++----
 components/account/AccountSignInEntry.vue | 10 ++++++++
 components/nav/NavSide.vue                |  4 ++++
 components/publish/PublishWidget.vue      |  4 ++--
 layouts/default.vue                       |  2 +-
 pages/signin/index.vue                    | 24 +------------------
 shim.d.ts                                 |  1 +
 tsconfig.json                             |  5 ----
 unocss.config.ts                          |  5 ++--
 10 files changed, 47 insertions(+), 39 deletions(-)
 create mode 100644 components/account/AccountSignInEntry.vue
 create mode 100644 shim.d.ts

diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index 6e19946d..7dd99fab 100644
--- a/components/account/AccountHeader.vue
+++ b/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>
diff --git a/components/account/AccountSignIn.vue b/components/account/AccountSignIn.vue
index 43865a26..abb6d924 100644
--- a/components/account/AccountSignIn.vue
+++ b/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>
diff --git a/components/account/AccountSignInEntry.vue b/components/account/AccountSignInEntry.vue
new file mode 100644
index 00000000..43865a26
--- /dev/null
+++ b/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>
diff --git a/components/nav/NavSide.vue b/components/nav/NavSide.vue
index 4b0b5e85..4a40e232 100644
--- a/components/nav/NavSide.vue
+++ b/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>
diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
index 4fbc68ac..b4591b70 100644
--- a/components/publish/PublishWidget.vue
+++ b/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!
diff --git a/layouts/default.vue b/layouts/default.vue
index 6a8073c8..bc5d8153 100644
--- a/layouts/default.vue
+++ b/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>
diff --git a/pages/signin/index.vue b/pages/signin/index.vue
index c0d5e5b3..279a3992 100644
--- a/pages/signin/index.vue
+++ b/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">
-    <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>
+  <AccountSignIn />
 </template>
diff --git a/shim.d.ts b/shim.d.ts
new file mode 100644
index 00000000..7642b6ce
--- /dev/null
+++ b/shim.d.ts
@@ -0,0 +1 @@
+/// <references type="unplugin-vue-macros/macros-global" />
diff --git a/tsconfig.json b/tsconfig.json
index 12539ff5..740c4a37 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,10 +1,5 @@
 {
   "extends": "./.nuxt/tsconfig.json",
-  "compilerOptions": {
-    "types": [
-      "unplugin-vue-macros/macros-global"
-    ]
-  },
   "vueCompilerOptions": {
     "plugins": [
       "@vue-macros/volar/define-model",
diff --git a/unocss.config.ts b/unocss.config.ts
index 95068164..6c66a8a2 100644
--- a/unocss.config.ts
+++ b/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',
-      'btn-outline': 'px-4 py-2 rounded text-$c-primary border-$c-primary hover:bg-$c-primary hover:text-white',
+      'interact-disabled': 'disabled:opacity-50 disabled:pointer-events-none disabled:saturate-0',
+      '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: [