feat: basic mutli-accounts support

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>

components/account/AccountMe.vue

@@ -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>

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>

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>