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>