feat: wip

components/account/AccountFollowButton.vue

@@ -7,8 +7,8 @@ const { account, command, ...props } = defineProps<{
   command?: boolean
 }>()
 
-const isSelf = $computed(() => currentUser.value?.account.id === account.id)
+const isSelf = $computed(() => checkUser(currentUser.value) && currentUser.value.account.id === account.id)
-const enable = $computed(() => !isSelf && currentUser.value)
+const enable = $computed(() => !isSelf && !isGuest.value)
 const relationship = $computed(() => props.relationship || useRelationship(account).value)
 
 const masto = useMasto()

components/account/AccountHeader.vue

@@ -60,7 +60,7 @@ watchEffect(() => {
   iconFields.value = icons
 })
 
-const isSelf = $computed(() => currentUser.value?.account.id === account.id)
+const isSelf = $computed(() => checkUser(currentUser.value) && currentUser.value?.account.id === account.id)
 </script>
 
 <template>

components/account/AccountMoreButton.vue

@@ -53,7 +53,7 @@ const toggleBlockDomain = async () => {
         />
       </NuxtLink>
 
-      <template v-if="currentUser">
+      <template v-if="!isGuest">
         <template v-if="!isSelf">
           <CommonDropdownItem
             :text="$t('menu.mention_account', [`@${account.acct}`])"

components/status/StatusActionsMore.vue

@@ -23,7 +23,7 @@ const clipboard = useClipboard()
 const router = useRouter()
 const route = useRoute()
 
-const isAuthor = $computed(() => status.account.id === currentUser.value?.account.id)
+const isAuthor = $computed(() => checkUser(currentUser.value) && status.account.id === currentUser.value?.account.id)
 
 const {
   toggle: _toggleTranslation,
@@ -178,7 +178,7 @@ async function editStatus() {
         />
 
         <CommonDropdownItem
-          v-if="currentUser && (status.account.id === currentUser.account.id || status.mentions.some(m => m.id === currentUser!.account.id))"
+          v-if="!isGuest && (status.account.id === currentUser!.account!.id || status.mentions.some(m => m.id === currentUser!.account!.id))"
           :text="status.muted ? $t('menu.unmute_conversation') : $t('menu.mute_conversation')"
           :icon="status.muted ? 'i-ri:eye-line' : 'i-ri:eye-off-line'"
           :command="command"

components/status/StatusReplyingTo.vue

@@ -22,7 +22,11 @@ const account = isSelf ? computed(() => status.account) : useAccountById(status.
       <template v-if="account">
         <div i-ri:reply-fill :class="collapsed ? '' : 'scale-x-[-1]'" text-secondary-light />
         <template v-if="!collapsed">
-          <AccountAvatar v-if="isSelf || simplified || status.inReplyToAccountId === currentUser?.account.id" :account="account" :link="false" w-5 h-5 mx-0.5 />
+          <AccountAvatar
+            v-if="isSelf || simplified
+              || (checkUser(currentUser) && status.inReplyToAccountId === currentUser?.account.id)"
+            :account="account" :link="false" w-5 h-5 mx-0.5
+          />
           <AccountInlineInfo v-else :account="account" :link="false" mx-0.5 />
         </template>
       </template>

components/user/UserDropdown.vue

@@ -1,12 +1,8 @@
-<script setup lang="ts">
-// workaround: cannot use TSNonNull `!` in template
-const account = $computed(() => currentUser.value!.account!)
-</script>
-
 <template>
   <VDropdown :distance="0" placement="top-start">
     <button btn-action-icon :aria-label="$t('action.switch_account')">
-      <div :class="{ 'hidden xl:block': currentUser }" i-ri:more-2-line />
+      <!-- TODO -->
+      <div :class="{ 'hidden xl:block': !isGuest }" i-ri:more-2-line />
       <AccountAvatar v-if="!isGuest" xl:hidden :account="account" w-9 h-9 />
       <span v-else>TODO: Guest</span>
     </button>

components/user/UserPicker.vue

@@ -1,16 +1,6 @@
 <script setup lang="ts">
-import type { UserLogin } from '~/types'
-
 const all = useUsers()
-
-const router = useRouter()
 const masto = useMasto()
-const switchUser = (user: UserLogin) => {
-  if (!user.guest && !isGuest.value && user.account.id === currentUser.value!.account!.id)
-    router.push(getAccountRoute(user.account))
-  else
-    masto.loginTo(user)
-}
 </script>
 
 <template>
@@ -23,10 +13,10 @@ const switchUser = (user: UserLogin) => {
           aria-label="Switch user"
           :class="user.account?.id === currentUser?.account?.id ? '' : 'op25 grayscale'"
           hover="filter-none op100"
-          @click="switchUser(user)"
+          @click="switchUser(user, masto)"
         >
           <AccountAvatar v-if="!user.guest" w-13 h-13 :account="user.account" />
-          <span v-else>TODO: Guest</span>
+          <span v-else>TODO: Guest from {{ user.server }}</span>
         </button>
       </template>
     </div>

components/user/UserSwitcher.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { UserLogin } from '~/types'
-
 const emit = defineEmits<{
   (event: 'click'): void
 }>()
@@ -8,20 +6,10 @@ const emit = defineEmits<{
 const all = useUsers()
 
 const sorted = computed(() => {
-  return [
+  return all.value.sort((a, b) => isSameUser(a, currentUser.value) ? -1 : isSameUser(b, currentUser.value) ? 1 : 0)
-    currentUser.value!,
-    ...all.value.filter(account => account.token !== currentUser.value?.token),
-  ].filter(Boolean)
 })
 
-const router = useRouter()
 const masto = useMasto()
-const switchUser = (user: UserLogin) => {
-  if (user.account.id === currentUser.value?.account.id)
-    router.push(getAccountRoute(user.account))
-  else
-    masto.loginTo(user)
-}
 </script>
 
 <template>
@@ -31,11 +19,12 @@ const switchUser = (user: UserLogin) => {
         flex rounded px4 py3 text-left
         hover:bg-active cursor-pointer transition-100
         aria-label="Switch user"
-        @click="switchUser(user)"
+        @click="switchUser(user, masto)"
       >
-        <AccountInfo :account="user.account" :hover-card="false" />
+        <AccountInfo v-if="!user.guest" :account="user.account" :hover-card="false" />
+        <span v-else>TODO: Guest from {{ user.server }}</span>
         <div flex-auto />
-        <div v-if="user.token === currentUser?.token" i-ri:check-line text-primary mya text-2xl />
+        <div v-if="isSameUser(user, currentUser)" i-ri:check-line text-primary mya text-2xl />
       </button>
     </template>
     <div border="t base" pt2>
@@ -46,7 +35,7 @@ const switchUser = (user: UserLogin) => {
       />
       <CommonDropdownItem
         v-if="isMastoInitialised && currentUser"
-        :text="$t('user.sign_out_account', [getFullHandle(currentUser.account)])"
+        :text="$t('user.sign_out_account', [getFullHandle(currentUser)])"
         icon="i-ri:logout-box-line rtl-flip"
         @click="signout"
       />

composables/masto.ts

@@ -141,7 +141,7 @@ const requestedRelationships = new Map<string, Ref<Relationship | undefined>>()
 let timeoutHandle: NodeJS.Timeout | undefined
 
 export function useRelationship(account: Account): Ref<Relationship | undefined> {
-  if (!currentUser.value)
+  if (isGuest.value)
     return ref()
   let relationship = requestedRelationships.get(account.id)
   if (relationship)

composables/search.ts

@@ -25,7 +25,7 @@ export function useSearch(query: MaybeRef<string>, options?: UseSearchOptions) {
      * Based on the source it seems like modifying the params when calling next would result in a new search,
      * but that doesn't seem to be the case. So instead we just create a new paginator with the new params.
      */
-    paginator = masto.search({ q: unref(query), resolve: !!currentUser.value, type: unref(options?.type) })
+    paginator = masto.search({ q: unref(query), resolve: !isGuest.value, type: unref(options?.type) })
     const nextResults = await paginator.next()
 
     done.value = nextResults.done || false

composables/users.ts

@@ -65,6 +65,8 @@ export const currentInstance = computed<null | Instance>(() => {
 })
 export const checkUser = (val: UserLogin | undefined): val is UserLogin<true> => !!(val && !val.guest)
 export const isGuest = computed(() => !checkUser(currentUser.value))
+export const isSameUser = (a: UserLogin | undefined, b: UserLogin | undefined) =>
+  a && b && a.server === b.server && a.token === b.token
 
 export const currentUserHandle = computed(() =>
   isGuestId.value ? GUEST_ID : currentUser.value!.account!.acct
@@ -140,6 +142,14 @@ async function loginTo(user?: UserLogin) {
   return masto
 }
 
+export const switchUser = (user: UserLogin, masto: ElkMasto) => {
+  const router = useRouter()
+  if (!user.guest && !isGuest.value && user.account.id === currentUser.value!.account!.id)
+    router.push(getAccountRoute(user.account))
+  else
+    masto.loginTo(user)
+}
+
 export function setAccountInfo(userId: string, account: AccountCredentials) {
   const index = getUsersIndexByUserId(userId)
   if (index === -1)

layouts/default.vue

@@ -18,11 +18,13 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
               </div>
               <div v-if="isMastoInitialised" flex flex-col>
                 <UserSignInEntry v-if="!currentUser" sm:hidden />
+                <!-- TODO -->
                 <div v-if="currentUser" p6 pb8 w-full>
                   <div hidden xl-block>
                     <UserPicker v-if="showUserPicker" />
                     <div v-else flex="~" items-center justify-between>
                       <NuxtLink
+                        v-if="checkUser(currentUser)"
                         hidden xl:block
                         rounded-full text-start w-full
                         hover:bg-active cursor-pointer transition-100
@@ -30,6 +32,9 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
                       >
                         <AccountInfo :account="currentUser.account" md:break-words />
                       </NuxtLink>
+                      <div v-else>
+                        TODO: guest {{ currentUser.server }} @ default.vue
+                      </div>
                       <UserDropdown />
                     </div>
                   </div>

pages/[[server]]/@[account]/[status].vue

@@ -73,7 +73,7 @@ onReactivated(() => {
           :actions="status.visibility !== 'direct'"
         />
         <PublishWidget
-          v-if="currentUser"
+          v-if="!isGuest"
           ref="publishWidget"
           border="y base"
           :draft-key="replyDraft!.key"