feat: sign out

components/account/AccountAvatar.vue

@@ -7,5 +7,5 @@ defineProps<{
 </script>
 
 <template>
-  <img :src="account.avatar" :alt="account.username" rounded bg-gray:10>
+  <img :src="account.avatar" :alt="account.username" rounded-full bg-gray:10>
 </template>

components/account/AccountSwitcher.vue

@@ -1,9 +1,48 @@
 <script setup lang="ts">
-const accounts = useAccounts()
+const allAccounts = useAccounts()
+
+const sortedAccounts = computed(() => {
+  return [
+    currentUser.value!,
+    ...allAccounts.value.filter(account => account.token !== currentUser.value?.token),
+  ].filter(Boolean)
+})
 </script>
 
 <template>
-  <div flex flex-col gap-4 p4>
-    <AccountInfo :account="currentUser?.account" :link="false" @click="openAccountSwitcher" />
+  <div max-w-40rem mxa p4 flex="~ col gap2">
+    <h1 text-2xl>
+      Switch Account
+    </h1>
+    <div mx--2>
+      <template v-for="acc of sortedAccounts" :key="acc.id">
+        <AccountInfo
+          :account="acc.account"
+          :link="false"
+          :full-server="true"
+          rounded p2
+          hover:bg-active cursor-pointer
+          @click="loginTo(acc)"
+        >
+          <template v-if="acc.token === currentUser?.token">
+            <div flex-auto />
+            <div i-ri:check-line text-primary mya text-2xl />
+          </template>
+        </AccountInfo>
+      </template>
+    </div>
+    <div mx--4 border="t base" pt2>
+      <button btn-text flex="~ gap-1" items-center @click="openSigninDialog">
+        <div i-ri:user-add-line />
+        Add another account
+      </button>
+      <button
+        v-if="currentUser" btn-text hover:text-red4 flex="~ gap-1" items-center
+        @click="signout"
+      >
+        <div i-ri:logout-box-line />
+        Sign out @{{ currentUser.account!.acct }}
+      </button>
+    </div>
   </div>
 </template>

components/modal/ModalContainer.vue

@@ -1,33 +1,10 @@
 <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 v-model="isAccountSwitcherOpen">
+    <AccountSwitcher />
   </ModalDrawer>
   <ModalDialog v-model="isSigninDialogOpen">
     <AccountSignIn m6 />

composables/accounts.ts

@@ -26,6 +26,7 @@ export async function loginTo(user: UserLogin) {
     if (currentId.value === accounts.value[existing].account?.id)
       return null
     currentId.value = user.account?.id
+    await reloadPage()
     return true
   }
 
@@ -38,5 +39,25 @@ export async function loginTo(user: UserLogin) {
 
   accounts.value.push(user)
   currentId.value = me.id
+  await reloadPage()
   return true
 }
+
+export async function signout() {
+  // TODO: confirm
+  if (!currentUser.value)
+    return
+
+  const index = accounts.value.findIndex(u => u.account?.id === currentUser.value?.account?.id)
+  if (index === -1)
+    return
+
+  accounts.value.splice(index, 1)
+  currentId.value = accounts.value[0]?.account?.id
+  await reloadPage()
+}
+
+export async function reloadPage(path = '/') {
+  await nextTick()
+  location.pathname = path
+}

layouts/default.vue

@@ -9,7 +9,13 @@
             </template>
             <AccountSignInEntry v-else />
             <div flex-auto />
-            <AccountSwitcher v-if="currentUser" />
+            <AccountInfo
+              v-if="currentUser"
+              p4
+              :account="currentUser?.account"
+              :link="false"
+              @click="openAccountSwitcher"
+            />
           </slot>
         </div>
       </div>

pages/signin/callback.vue

@@ -7,9 +7,6 @@ const { query } = useRoute()
 
 onMounted(async () => {
   await loginTo(query as any)
-  await nextTick()
-  await nextTick()
-  location.pathname = '/'
 })
 </script>
 

styles/vars.css

@@ -3,10 +3,12 @@
   --c-primary-active: #3a7b8c;
   --c-border: #88888820;
   --c-bg-base: #fff;
+  --c-bg-active: #efefef;
   --c-text-base: #222;
 }
 
 .dark {
   --c-bg-base: #111;
+  --c-bg-active: #222;
   --c-text-base: #fff;
 }

unocss.config.ts

@@ -14,6 +14,7 @@ export default defineConfig({
     {
       'border-base': 'border-$c-border',
       'bg-base': 'bg-$c-bg-base',
+      'bg-active': 'bg-$c-bg-active',
       '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',