From 241b28241cfd7731062d7b1b90c84a22c7100d14 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Wed, 23 Nov 2022 11:48:01 +0800
Subject: [PATCH] feat: basic mutli-accounts support

---
 components/account/AccountInfo.vue     |  7 ++-
 components/account/AccountMe.vue       | 15 -------
 components/account/AccountSignIn.vue   | 14 +++---
 components/account/AccountSwitcher.vue |  9 ++++
 components/modal/ModalContainer.vue    | 35 +++++++++++++++
 components/modal/ModalDialog.vue       | 29 ++++++++++++
 components/modal/ModalDrawer.vue       | 61 ++++++++++++++++++++++++++
 composables/accounts.ts                |  4 +-
 composables/content.ts                 |  3 --
 composables/dialog.ts                  | 11 +++++
 composables/utils.ts                   |  3 ++
 layouts/default.vue                    |  6 ++-
 pages/signin/callback.vue              |  2 +-
 shim.d.ts                              |  2 +-
 unocss.config.ts                       |  3 +-
 15 files changed, 170 insertions(+), 34 deletions(-)
 delete mode 100644 components/account/AccountMe.vue
 create mode 100644 components/account/AccountSwitcher.vue
 create mode 100644 components/modal/ModalContainer.vue
 create mode 100644 components/modal/ModalDialog.vue
 create mode 100644 components/modal/ModalDrawer.vue
 create mode 100644 composables/dialog.ts

diff --git a/components/account/AccountInfo.vue b/components/account/AccountInfo.vue
index f2118b5f..96cb242c 100644
--- a/components/account/AccountInfo.vue
+++ b/components/account/AccountInfo.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import type { Account } from 'masto'
 
-const { link = true } = defineProps<{
+const { account, link = true, fullServer = false } = defineProps<{
   account: Account
   link?: boolean
+  fullServer?: boolean
 }>()
+
+const id = computed(() => fullServer && !account.acct.includes('@') ? `@${account.acct}@${account.url.match(UserLinkRE)?.[1]}` : `@${account.acct}`)
 </script>
 
 <template>
@@ -17,7 +20,7 @@ const { link = true } = defineProps<{
     <NuxtLink flex flex-col :to="link ? `/@${account.acct}` : null">
       <CommonRichContent font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
       <p op35 text-sm>
-        @{{ account.acct }}
+        {{ id }}
       </p>
       <slot name="bottom" />
     </NuxtLink>
diff --git a/components/account/AccountMe.vue b/components/account/AccountMe.vue
deleted file mode 100644
index 9bb41928..00000000
--- a/components/account/AccountMe.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-const account = $computed(() => currentUser.value?.account)
-</script>
-
-<template>
-  <div flex flex-col gap-4 p4>
-    <!-- TODO: multiple account switcher -->
-    <template v-if="account">
-      <AccountInfo :account="account" />
-      <PublishWidget draft-key="home" />
-    </template>
-    <!-- TODO: dialog for select server -->
-    <a v-else href="/api/mas.to/login" px2 py1 bg-teal6 text-white m2 rounded>Login</a>
-  </div>
-</template>
diff --git a/components/account/AccountSignIn.vue b/components/account/AccountSignIn.vue
index abb6d924..f9536b6c 100644
--- a/components/account/AccountSignIn.vue
+++ b/components/account/AccountSignIn.vue
@@ -4,25 +4,21 @@ 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()
+  location.href = `/api/${server.value || DEFAULT_SERVER}/login`
 }
 </script>
 
 <template>
   <div h-full text-center justify-center flex="~ col items-center gap2">
-    <div text-4xl mb-10>
-      Nuxtodon
+    <div text-3xl mb2>
+      Sign in
     </div>
-
-    <div>Mastodon Server</div>
+    <div>Mastodon Server Name</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()">
+    <button btn-solid mxa mt2 @click="oauth()">
       Sign in
     </button>
   </div>
diff --git a/components/account/AccountSwitcher.vue b/components/account/AccountSwitcher.vue
new file mode 100644
index 00000000..c32c309f
--- /dev/null
+++ b/components/account/AccountSwitcher.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const accounts = useAccounts()
+</script>
+
+<template>
+  <div flex flex-col gap-4 p4>
+    <AccountInfo :account="currentUser?.account" :link="false" @click="openAccountSwitcher" />
+  </div>
+</template>
diff --git a/components/modal/ModalContainer.vue b/components/modal/ModalContainer.vue
new file mode 100644
index 00000000..954803db
--- /dev/null
+++ b/components/modal/ModalContainer.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { isAccountSwitcherOpen, isSigninDialogOpen } from '~/composables/dialog'
+
+const accounts = useAccounts()
+</script>
+
+<template>
+  <ModalDrawer
+    v-model="isAccountSwitcherOpen"
+  >
+    <div max-w-60rem mxa p4>
+      <h1 text-2xl>
+        Switch Account
+      </h1>
+      <template v-for="acc of accounts" :key="acc.id">
+        <AccountInfo
+          :account="acc.account"
+          :link="false"
+          :full-server="true"
+          py4 border="b base"
+          @click="loginTo(acc)"
+        />
+      </template>
+      <div py2 mx--2>
+        <button btn-text flex="~ gap-1" items-center @click="openSigninDialog">
+          <div i-ri:user-add-line />
+          Add another account
+        </button>
+      </div>
+    </div>
+  </ModalDrawer>
+  <ModalDialog v-model="isSigninDialogOpen">
+    <AccountSignIn m6 />
+  </ModalDialog>
+</template>
diff --git a/components/modal/ModalDialog.vue b/components/modal/ModalDialog.vue
new file mode 100644
index 00000000..0262b820
--- /dev/null
+++ b/components/modal/ModalDialog.vue
@@ -0,0 +1,29 @@
+<script setup lang='ts'>
+const { modelValue } = defineModel<{
+  modelValue: boolean
+}>()
+</script>
+
+<template>
+  <div
+    class="fixed top-0 bottom-0 left-0 right-0 z-60"
+    :class="modelValue ? '' : 'pointer-events-none'"
+  >
+    <div
+      class="
+        bg-base bottom-0 left-0 right-0 top-0 absolute transition-opacity duration-500 ease-out
+      "
+      :class="modelValue ? 'opacity-85' : 'opacity-0'"
+      @click="modelValue = false"
+    />
+    <div
+      class="
+        bg-base absolute transition-all duration-200 ease-out shadow rounded-md transform
+        border border-base left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2
+      "
+      :class="modelValue ? 'opacity-100' : 'opacity-0'"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/components/modal/ModalDrawer.vue b/components/modal/ModalDrawer.vue
new file mode 100644
index 00000000..94a8043e
--- /dev/null
+++ b/components/modal/ModalDrawer.vue
@@ -0,0 +1,61 @@
+<script setup lang='ts'>
+const {
+  direction = 'bottom',
+} = defineProps<{
+  direction?: string
+}>()
+
+const { modelValue } = defineModel<{
+  modelValue: boolean
+}>()
+
+const positionClass = computed(() => {
+  switch (direction) {
+    case 'bottom':
+      return 'bottom-0 left-0 right-0 border-t'
+    case 'top':
+      return 'top-0 left-0 right-0 border-b'
+    case 'left':
+      return 'bottom-0 left-0 top-0 border-r'
+    case 'right':
+      return 'bottom-0 top-0 right-0 border-l'
+    default:
+      return ''
+  }
+})
+
+const transform = computed(() => {
+  switch (direction) {
+    case 'bottom':
+      return 'translateY(100%)'
+    case 'top':
+      return 'translateY(-100%)'
+    case 'left':
+      return 'translateX(-100%)'
+    case 'right':
+      return 'translateX(100%)'
+    default:
+      return ''
+  }
+})
+</script>
+
+<template>
+  <div
+    fixed top-0 bottom-0 left-0 right-0 z-40
+    :class="modelValue ? '' : 'pointer-events-none'"
+  >
+    <div
+      bg-base bottom-0 left-0 right-0 top-0 absolute transition-opacity duration-500 ease-out
+      :class="modelValue ? 'opacity-85' : 'opacity-0'"
+      @click="modelValue = false"
+    />
+    <div
+      bg-base border border-base absolute transition-all duration-200 ease-out
+      :class="positionClass"
+      :style="modelValue ? {} : { transform }"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/composables/accounts.ts b/composables/accounts.ts
index 1e7736a0..72e2b28e 100644
--- a/composables/accounts.ts
+++ b/composables/accounts.ts
@@ -18,7 +18,9 @@ export const currentUser = computed<UserLogin | undefined>(() => {
 
 export const currentServer = computed<string>(() => currentUser.value?.server || DEFAULT_SERVER)
 
-export async function loginCallback(user: UserLogin) {
+export const useAccounts = () => accounts
+
+export async function loginTo(user: UserLogin) {
   const existing = accounts.value.findIndex(u => u.server === user.server && u.token === user.token)
   if (existing !== -1) {
     if (currentId.value === accounts.value[existing].account?.id)
diff --git a/composables/content.ts b/composables/content.ts
index f1d55c14..916b2fa4 100644
--- a/composables/content.ts
+++ b/composables/content.ts
@@ -8,9 +8,6 @@ import { RouterLink } from 'vue-router'
 type Node = DefaultTreeAdapterMap['childNode']
 type Element = DefaultTreeAdapterMap['element']
 
-const UserLinkRE = /^https?:\/\/([^/]+)\/@([^/]+)$/
-const TagLinkRE = /^https?:\/\/([^/]+)\/tags\/([^/]+)$/
-
 export function defaultHandle(el: Element) {
   // Redirect mentions to the user page
   if (el.tagName === 'a' && el.attrs.find(i => i.name === 'class' && i.value.includes('mention'))) {
diff --git a/composables/dialog.ts b/composables/dialog.ts
new file mode 100644
index 00000000..86526c17
--- /dev/null
+++ b/composables/dialog.ts
@@ -0,0 +1,11 @@
+export const isAccountSwitcherOpen = ref(false)
+export const isSigninDialogOpen = ref(false)
+
+export function openAccountSwitcher() {
+  isAccountSwitcherOpen.value = true
+}
+
+export function openSigninDialog() {
+  isSigninDialogOpen.value = true
+  isAccountSwitcherOpen.value = false
+}
diff --git a/composables/utils.ts b/composables/utils.ts
index 11bc5fa7..a2eaf2a0 100644
--- a/composables/utils.ts
+++ b/composables/utils.ts
@@ -1,5 +1,8 @@
 import type { Emoji } from 'masto'
 
+export const UserLinkRE = /^https?:\/\/([^/]+)\/@([^/]+)$/
+export const TagLinkRE = /^https?:\/\/([^/]+)\/tags\/([^/]+)$/
+
 export function getDataUrlFromArr(arr: Uint8ClampedArray, w: number, h: number) {
   if (typeof w === 'undefined' || typeof h === 'undefined')
     w = h = Math.sqrt(arr.length / 4)
diff --git a/layouts/default.vue b/layouts/default.vue
index bc5d8153..25b28ac5 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -4,7 +4,10 @@
       <div class="hidden md:block w-1/4" relative>
         <div sticky top-0 h-screen flex="~ col">
           <slot name="left">
-            <AccountMe v-if="currentUser" />
+            <template v-if="currentUser">
+              <AccountSwitcher />
+              <PublishWidget px4 draft-key="home" />
+            </template>
             <AccountSignInEntry v-else />
           </slot>
         </div>
@@ -23,5 +26,6 @@
         </div>
       </div>
     </main>
+    <ModalContainer />
   </div>
 </template>
diff --git a/pages/signin/callback.vue b/pages/signin/callback.vue
index 5df2dda1..01062ee8 100644
--- a/pages/signin/callback.vue
+++ b/pages/signin/callback.vue
@@ -6,7 +6,7 @@ definePageMeta({
 const { query } = useRoute()
 
 onMounted(async () => {
-  await loginCallback(query as any)
+  await loginTo(query as any)
   await nextTick()
   await nextTick()
   location.pathname = '/'
diff --git a/shim.d.ts b/shim.d.ts
index 7642b6ce..8872a1f9 100644
--- a/shim.d.ts
+++ b/shim.d.ts
@@ -1 +1 @@
-/// <references type="unplugin-vue-macros/macros-global" />
+/// <reference types="unplugin-vue-macros/macros-global" />
diff --git a/unocss.config.ts b/unocss.config.ts
index 6c66a8a2..770ebabf 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -17,7 +17,8 @@ export default defineConfig({
       'text-base': 'text-$c-text-base',
       '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',
+      'btn-outline': 'px-4 py-2 rounded text-$c-primary border border-$c-primary hover:bg-$c-primary hover:text-white interact-disabled',
+      'btn-text': 'px-4 py-2 text-$c-primary hover:text-$c-primary-active interact-disabled',
     },
   ],
   presets: [