feat: publish widget markup (#12)

components/account/AccountMe.client.vue

@@ -3,10 +3,11 @@ const { currentUser } = useAppStore()
 </script>
 
 <template>
-  <div p4>
+  <div flex flex-col gap-4 p4>
     <!-- TODO: multiple account switcher -->
     <AccountInfo v-if="currentUser?.account" :account="currentUser.account" />
     <!-- TODO: dialog for select server -->
     <a v-else href="/api/mas.to/login" px2 py1 bg-teal6 text-white m2 rounded>Login</a>
+    <PublishWidget />
   </div>
 </template>

components/publish/PublishWidget.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div flex flex-col gap-4>
+    <textarea p2 border-rounded w-full h-40 color-black placeholder="What's on your mind?" />
+    <div flex justify-end>
+      <button h-9 w-22 bg-primary border-rounded>
+        Publish!
+      </button>
+    </div>
+  </div>
+</template>

layouts/default.vue

@@ -3,7 +3,7 @@
     <main grid="~ lg:cols-[1fr_40rem_1fr]" max-w-70rem mxa h-full>
       <div>
         <slot name="left">
-          <NavTitle p4 />
+          <AccountMe />
         </slot>
       </div>
       <div h-full of-auto border="l r border">
@@ -11,7 +11,7 @@
       </div>
       <div flex="~ col">
         <slot name="right">
-          <AccountMe />
+          <NavTitle p5 />
           <NavSide border="y border" py8 />
           <div flex-auto />
           <NavFooter />

plugins/store.client.ts

@@ -4,15 +4,24 @@ import type { UserLogin } from '~/types'
 function createStore() {
   const { server, token } = useAppCookies()
   const accounts = useLocalStorage<UserLogin[]>('nuxtodon-accounts', [], { deep: true })
-  const currentIndex = useLocalStorage<number>('nuxtodon-current-user', -1)
+  const currentId = useLocalStorage<string>('nuxtodon-current-user', '')
-  const currentUser = computed<UserLogin | undefined>(() => accounts.value[currentIndex.value])
+  const currentUser = computed<UserLogin | undefined>(() => {
+    let user: UserLogin | undefined
+    if (currentId.value) {
+      user = accounts.value.find(user => user.account?.id === currentId.value)
+      if (user)
+        return user
+    }
+    // Fallback to the first account
+    return accounts.value[0]
+  })
 
   async function login(user: UserLogin) {
     const existing = accounts.value.findIndex(u => u.server === user.server && u.token === user.token)
     if (existing !== -1) {
-      if (currentIndex.value === existing)
+      if (currentId.value === accounts.value[existing].account?.id)
         return null
-      currentIndex.value = existing
+      currentId.value = user.account?.id
       server.value = user.server
       token.value = user.token
       return true
@@ -26,10 +35,9 @@ function createStore() {
     user.account = me
 
     accounts.value.push(user)
-    currentIndex.value = accounts.value.length
+    currentId.value = me.id
     server.value = user.server
     token.value = user.token
-
     return true
   }