refactor: update composable names

components/account/AccountMe.client.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { currentUser } = $(useAppStore())
+const { currentUser } = $(useClientState())
 
 const account = $computed(() => currentUser?.account)
 </script>

components/nav/NavSide.vue

@@ -1,17 +1,19 @@
 <script setup lang="ts">
-
+const isLogin = useLoginState()
 </script>
 
 <template>
   <div px6 py2 flex="~ col gap6" text-lg>
-    <NuxtLink flex gap2 items-center to="/home" active-class="text-primary">
-      <div i-ri:home-5-line />
-      <span>Home</span>
-    </NuxtLink>
-    <NuxtLink flex gap2 items-center to="/notifications" active-class="text-primary">
-      <div i-ri:notification-4-line />
-      <span>Notifications</span>
-    </NuxtLink>
+    <template v-if="isLogin">
+      <NuxtLink flex gap2 items-center to="/home" active-class="text-primary">
+        <div i-ri:home-5-line />
+        <span>Home</span>
+      </NuxtLink>
+      <NuxtLink flex gap2 items-center to="/notifications" active-class="text-primary">
+        <div i-ri:notification-4-line />
+        <span>Notifications</span>
+      </NuxtLink>
+    </template>
     <NuxtLink flex gap2 items-center to="/explore" active-class="text-primary">
       <div i-ri:hashtag />
       <span>Explore</span>
@@ -24,17 +26,19 @@
       <div i-ri:earth-line />
       <span>Federated</span>
     </NuxtLink>
-    <NuxtLink flex gap2 items-center active-class="text-primary">
-      <div i-ri:at-line />
-      <span>Messages</span>
-    </NuxtLink>
-    <NuxtLink flex gap2 items-center to="/favourites" active-class="text-primary">
-      <div i-ri:heart-3-line />
-      <span>Favorites</span>
-    </NuxtLink>
-    <NuxtLink flex gap2 items-center to="/bookmarks" active-class="text-primary">
-      <div i-ri:bookmark-line />
-      <span>Bookmarks</span>
-    </NuxtLink>
+    <template v-if="isLogin">
+      <NuxtLink flex gap2 items-center active-class="text-primary">
+        <div i-ri:at-line />
+        <span>Messages</span>
+      </NuxtLink>
+      <NuxtLink flex gap2 items-center to="/favourites" active-class="text-primary">
+        <div i-ri:heart-3-line />
+        <span>Favorites</span>
+      </NuxtLink>
+      <NuxtLink flex gap2 items-center to="/bookmarks" active-class="text-primary">
+        <div i-ri:bookmark-line />
+        <span>Bookmarks</span>
+      </NuxtLink>
+    </template>
   </div>
 </template>

composables/client.ts

@@ -1,10 +1,10 @@
 import type { MastoClient } from 'masto'
-import type { AppStore } from '~~/plugins/store.client'
+import type { ClientState } from '~/plugins/store.client'
 
 export function useMasto() {
-  return inject('masto') as Promise<MastoClient>
+  return useNuxtApp().$masto as Promise<MastoClient>
 }
 
-export function useAppStore() {
-  return inject('app-store') as AppStore
+export function useClientState() {
+  return useNuxtApp().$clientState as ClientState
 }

composables/cookies.ts

@@ -9,3 +9,8 @@ export function useAppCookies() {
     token,
   }
 }
+
+export function useLoginState() {
+  const token = useCookie('nuxtodon-token')
+  return computed(() => !!token.value)
+}

layouts/default.vue

@@ -1,6 +1,6 @@
 <template>
   <div h-full of-hidden>
-    <main grid="~ lg:cols-[1fr_40rem_1fr]" max-w-70rem mxa h-full>
+    <main grid="~ lg:cols-[1fr_40rem_1fr]" max-w-80rem mxa h-full>
       <div>
         <slot name="left">
           <AccountMe />

package.json

@@ -1,6 +1,6 @@
 {
-  "private": true,
   "type": "module",
+  "private": true,
   "packageManager": "pnpm@7.9.0",
   "scripts": {
     "build": "nuxi build",

pages/login/callback.vue

@@ -2,7 +2,7 @@
 const { query } = useRoute()
 
 onMounted(async () => {
-  const { login } = useAppStore()
+  const { login } = useClientState()
   await login(query as any)
   await nextTick()
   await nextTick()

plugins/masto.ts

@@ -5,7 +5,8 @@ export default defineNuxtPlugin((nuxt) => {
 
   const masto = login({
     url: `https://${server.value}`,
-    accessToken: token.value,
+    accessToken: token.value || undefined,
   })
-  nuxt.vueApp.provide('masto', masto)
+
+  nuxt.$masto = masto
 })

plugins/store.client.ts

@@ -1,10 +1,12 @@
 import { login as loginMasto } from 'masto'
 import type { UserLogin } from '~/types'
 
-function createStore() {
+function createClientState() {
   const { server, token } = useAppCookies()
+
   const accounts = useLocalStorage<UserLogin[]>('nuxtodon-accounts', [], { deep: true })
   const currentId = useLocalStorage<string>('nuxtodon-current-user', '')
+
   const currentUser = computed<UserLogin | undefined>(() => {
     let user: UserLogin | undefined
     if (currentId.value) {
@@ -48,8 +50,8 @@ function createStore() {
   }
 }
 
-export type AppStore = ReturnType<typeof createStore>
+export type ClientState = ReturnType<typeof createClientState>
 
 export default defineNuxtPlugin((nuxt) => {
-  nuxt.vueApp.provide('app-store', createStore())
+  nuxt.$clientState = createClientState()
 })