feat: basic mutli-accounts support

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>

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>

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>