feat: add title for pages

app.vue

@@ -2,7 +2,7 @@
 import { APP_NAME } from './constants'
 
 useHead({
-  title: APP_NAME,
+  titleTemplate: title => `${title ? `${title} | ` : ''}${APP_NAME}${import.meta.env.DEV ? ' (dev)' : ''}`,
   link: [
     {
       rel: 'icon', type: 'image/svg+png', href: '/favicon.png',

pages/@[account].vue

@@ -3,6 +3,12 @@ const params = useRoute().params
 const accountName = $computed(() => params.account as string)
 
 const account = await fetchAccountByName(accountName).catch(() => null)
+
+if (account) {
+  useHead({
+    title: `${account.displayName} (@${account.acct})`,
+  })
+}
 </script>
 
 <template>

pages/bookmarks.vue

@@ -4,6 +4,10 @@ definePageMeta({
 })
 
 const paginator = masto.bookmarks.getIterator()
+
+useHead({
+  title: 'Bookmarks',
+})
 </script>
 
 <template>

pages/conversations.vue

@@ -4,6 +4,10 @@ definePageMeta({
 })
 
 const paginator = masto.conversations.getIterator()
+
+useHead({
+  title: 'Conversations',
+})
 </script>
 
 <template>

pages/explore.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
 const paginator = masto.trends.getStatuses()
+
+useHead({
+  title: 'Explore',
+})
 </script>
 
 <template>

pages/favourites.vue

@@ -4,6 +4,10 @@ definePageMeta({
 })
 
 const paginator = masto.favourites.getIterator()
+
+useHead({
+  title: 'Favourites',
+})
 </script>
 
 <template>

pages/notifications.vue

@@ -11,6 +11,10 @@ const tab = $(useLocalStorage<typeof tabNames[number]>(STORAGE_KEY_NOTIFY_TAB, '
 const paginator = $computed(() => {
   return masto.notifications.getIterator(tab === 'All' ? undefined : { types: ['mention'] })
 })
+
+useHead({
+  title: 'Notifications',
+})
 </script>
 
 <template>

pages/public/index.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
-
 const paginator = masto.timelines.getPublicIterable()
+
+useHead({
+  title: 'Federated'
+})
 </script>
 
 <template>

pages/public/local.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
 const { data: timelines } = await useAsyncData('timelines-home', () => masto.timelines.fetchPublic({ local: true }).then(r => r.value))
+
+useHead({
+  title: 'Local'
+})
 </script>
 
 <template>

pages/tags/[tag].vue

@@ -3,6 +3,10 @@ const params = useRoute().params
 const tag = $computed(() => params.tag as string)
 
 const paginator = masto.timelines.getHashtagIterable(tag)
+
+useHead({
+  title: `#${tag}`,
+})
 </script>
 
 <template>