ui: improve layout

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>

layouts/default.vue

@@ -1,19 +1,19 @@
 <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 class="hidden md:block w-1/4" relative>
-        <div fixed>
+        <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/4 min-h-screen" border="l r base">
-        <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 class="hidden md:block w-1/4">
-          <div fixed>
+        <div sticky top-0 h-screen flex="~ col">
           <slot name="right">
             <NavTitle p5 />
             <NavSide border="y base" py8 />
@@ -22,7 +22,6 @@
           </slot>
         </div>
       </div>
-      </div>
     </main>
   </div>
 </template>

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",

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')

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()
 

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;

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: [