From 936488f51ed53f87c63693f4ebac301b0d93e9db Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Wed, 23 Nov 2022 10:53:22 +0800
Subject: [PATCH] ui: improve layout

---
 components/account/AccountSignIn.vue | 10 +++++++++
 layouts/default.vue                  | 31 ++++++++++++++--------------
 package.json                         |  1 -
 pages/{login => signin}/callback.vue |  0
 pages/{login => signin}/index.vue    |  2 +-
 server/api/[server]/oauth.ts         |  2 +-
 styles/vars.css                      |  1 +
 unocss.config.ts                     |  2 ++
 8 files changed, 30 insertions(+), 19 deletions(-)
 create mode 100644 components/account/AccountSignIn.vue
 rename pages/{login => signin}/callback.vue (100%)
 rename pages/{login => signin}/index.vue (93%)

diff --git a/components/account/AccountSignIn.vue b/components/account/AccountSignIn.vue
new file mode 100644
index 00000000..43865a26
--- /dev/null
+++ b/components/account/AccountSignIn.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/layouts/default.vue b/layouts/default.vue
index 4f87a135..6a8073c8 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,26 +1,25 @@
 <template>
   <div h-full>
     <main flex w-full mxa lg:max-w-80rem>
-      <div class="w-1/4" hidden lg:flex flex-col items-end>
-        <div fixed>
+      <div class="hidden md:block w-1/4" relative>
+        <div sticky top-0 h-screen flex="~ col">
           <slot name="left">
-            <AccountMe />
+            <AccountMe v-if="currentUser" />
+            <AccountSignIn v-else />
           </slot>
         </div>
       </div>
-      <div class="lg:w-3/4" flex>
-        <div class="w-full md:w-2/3" border="l r base" min-h-screen>
-          <slot />
-        </div>
-        <div hidden md:flex="~ col" class="w-1/3">
-          <div fixed>
-            <slot name="right">
-              <NavTitle p5 />
-              <NavSide border="y base" py8 />
-              <div flex-auto />
-              <NavFooter />
-            </slot>
-          </div>
+      <div class="w-full md:w-2/4 min-h-screen" border="l r base">
+        <slot />
+      </div>
+      <div class="hidden md:block w-1/4">
+        <div sticky top-0 h-screen flex="~ col">
+          <slot name="right">
+            <NavTitle p5 />
+            <NavSide border="y base" py8 />
+            <div flex-auto />
+            <NavFooter />
+          </slot>
         </div>
       </div>
     </main>
diff --git a/package.json b/package.json
index 73210ff0..79686157 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,6 @@
     "@iconify-json/logos": "^1.1.18",
     "@iconify-json/ri": "^1.1.3",
     "@iconify-json/twemoji": "^1.1.5",
-    "@nuxtjs/color-mode": "^3.1.8",
     "@pinia/nuxt": "^0.4.3",
     "@types/fs-extra": "^9.0.13",
     "@types/sanitize-html": "^2.6.2",
diff --git a/pages/login/callback.vue b/pages/signin/callback.vue
similarity index 100%
rename from pages/login/callback.vue
rename to pages/signin/callback.vue
diff --git a/pages/login/index.vue b/pages/signin/index.vue
similarity index 93%
rename from pages/login/index.vue
rename to pages/signin/index.vue
index 9b6169c4..c0d5e5b3 100644
--- a/pages/login/index.vue
+++ b/pages/signin/index.vue
@@ -3,7 +3,7 @@ definePageMeta({
   layout: 'none',
 })
 
-const server = ref(useAppCookies().server.value)
+const server = ref()
 
 async function oauth() {
   const a = document.createElement('a')
diff --git a/server/api/[server]/oauth.ts b/server/api/[server]/oauth.ts
index fcb42f88..785fe36c 100644
--- a/server/api/[server]/oauth.ts
+++ b/server/api/[server]/oauth.ts
@@ -28,7 +28,7 @@ export default defineEventHandler(async ({ context, req, res }) => {
   })
 
   res.writeHead(302, {
-    Location: `${HOST_DOMAIN}/login/callback?${stringifyQuery({ server, token: result.access_token })}`,
+    Location: `${HOST_DOMAIN}/signin/callback?${stringifyQuery({ server, token: result.access_token })}`,
   })
   res.end()
 
diff --git a/styles/vars.css b/styles/vars.css
index 6436b647..320c1012 100644
--- a/styles/vars.css
+++ b/styles/vars.css
@@ -1,5 +1,6 @@
 :root {
   --c-primary: #53b3cb;
+  --c-primary-active: #3a7b8c;
   --c-border: #88888820;
   --c-bg-base: #fff;
   --c-text-base: #222;
diff --git a/unocss.config.ts b/unocss.config.ts
index c2be019c..95068164 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -15,6 +15,8 @@ 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',
     },
   ],
   presets: [