elk/components/user/UserSwitcher.vue

62 lines
1.7 KiB
Vue
Raw Normal View History

2022-11-23 04:48:01 +01:00
<script setup lang="ts">
2022-11-28 08:12:13 +01:00
import type { UserLogin } from '~/types'
2022-11-28 08:03:26 +01:00
const emits = defineEmits<{
(event: 'click'): void
}>()
2022-11-23 05:25:48 +01:00
const all = useUsers()
2022-11-23 05:20:59 +01:00
2022-11-23 05:25:48 +01:00
const sorted = computed(() => {
2022-11-23 05:20:59 +01:00
return [
currentUser.value!,
2022-11-23 05:25:48 +01:00
...all.value.filter(account => account.token !== currentUser.value?.token),
2022-11-23 05:20:59 +01:00
].filter(Boolean)
})
2022-11-28 08:03:26 +01:00
const router = useRouter()
const masto = useMasto()
2022-11-28 08:03:26 +01:00
const switchUser = (user: UserLogin) => {
if (user.account.id === currentUser.value?.account.id)
router.push(getAccountRoute(user.account))
2022-11-30 01:22:35 +01:00
else
masto.loginTo(user)
2022-11-28 08:03:26 +01:00
}
2022-11-23 04:48:01 +01:00
</script>
<template>
<div sm:min-w-80 max-w-100vw mxa py2 flex="~ col" @click="emits('click')">
<template v-for="user of sorted" :key="user.id">
2022-11-28 08:03:26 +01:00
<button
flex rounded px4 py3 text-left
2022-11-28 08:03:26 +01:00
hover:bg-active cursor-pointer transition-100
2022-11-29 22:24:26 +01:00
aria-label="Switch user"
2022-11-28 08:03:26 +01:00
@click="switchUser(user)"
>
2022-11-30 08:30:17 +01:00
<AccountInfo :account="user.account" :hover-card="false" />
<div flex-auto />
<div v-if="user.token === currentUser?.token" i-ri:check-line text-primary mya text-2xl />
2022-11-28 08:03:26 +01:00
</button>
</template>
<div border="t base" pt2>
2022-11-30 00:25:29 +01:00
<CommonDropdownItem
:text="$t('user.add_existing')"
2022-11-30 00:25:29 +01:00
icon="i-ri:user-add-line"
@click="openSigninDialog"
/>
<NuxtLink to="/settings">
<CommonDropdownItem
2022-12-27 18:49:15 +01:00
:text="$t('nav.settings')"
icon="i-ri:settings-4-line"
/>
</NuxtLink>
2022-11-30 00:25:29 +01:00
<CommonDropdownItem
v-if="isMastoInitialised && currentUser"
2022-11-30 00:25:29 +01:00
:text="$t('user.sign_out_account', [getFullHandle(currentUser.account)])"
icon="i-ri:logout-box-line"
2022-11-23 05:20:59 +01:00
@click="signout"
2022-11-30 00:25:29 +01:00
/>
2022-11-23 05:20:59 +01:00
</div>
2022-11-23 04:48:01 +01:00
</div>
</template>