diff --git a/components/account/AccountCard.vue b/components/account/AccountCard.vue
index e870e984..c0f1263e 100644
--- a/components/account/AccountCard.vue
+++ b/components/account/AccountCard.vue
@@ -14,7 +14,7 @@ cacheAccount(account)
diff --git a/components/account/AccountHoverCard.vue b/components/account/AccountHoverCard.vue
index 349e30ed..a75ea2e2 100644
--- a/components/account/AccountHoverCard.vue
+++ b/components/account/AccountHoverCard.vue
@@ -9,7 +9,7 @@ defineProps<{
-
+
diff --git a/components/account/AccountInlineInfo.vue b/components/account/AccountInlineInfo.vue
index 6e6ea3db..335aa0b6 100644
--- a/components/account/AccountInlineInfo.vue
+++ b/components/account/AccountInlineInfo.vue
@@ -10,7 +10,7 @@ const { link = true } = defineProps<{
diff --git a/components/account/AccountPostsFollowers.vue b/components/account/AccountPostsFollowers.vue
index a3c11ebd..046e1d1b 100644
--- a/components/account/AccountPostsFollowers.vue
+++ b/components/account/AccountPostsFollowers.vue
@@ -8,21 +8,21 @@ defineProps<{
-
+
{{ formattedNumber(account.statusesCount) }}
-
+
{{ humanReadableNumber(account.followingCount) }}
-
+
{{ humanReadableNumber(account.followersCount) }}
diff --git a/components/nav/NavSide.vue b/components/nav/NavSide.vue
index eee95789..98844eaa 100644
--- a/components/nav/NavSide.vue
+++ b/components/nav/NavSide.vue
@@ -18,7 +18,7 @@ const { t } = useI18n()
diff --git a/components/nav/NavSideItem.vue b/components/nav/NavSideItem.vue
index 9eceba50..ac205727 100644
--- a/components/nav/NavSideItem.vue
+++ b/components/nav/NavSideItem.vue
@@ -2,7 +2,7 @@
const props = defineProps<{
text?: string
icon: string
- to: string
+ to: string | Record
}>()
defineSlots<{
@@ -15,7 +15,7 @@ const router = useRouter()
useCommand({
scope: 'Navigation',
- name: () => props.text ?? props.to,
+ name: () => props.text ?? typeof props.to === 'string' ? props.to as string : props.to.name,
icon: () => props.icon,
onActivate() {
diff --git a/components/notification/NotificationGroupedFollow.vue b/components/notification/NotificationGroupedFollow.vue
index 9d7885b6..84b4bccf 100644
--- a/components/notification/NotificationGroupedFollow.vue
+++ b/components/notification/NotificationGroupedFollow.vue
@@ -29,7 +29,7 @@ const isExpanded = ref(false)
:key="item.id"
:account="item.account"
>
-
+
diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
index 1d3c77d1..1b5720bd 100644
--- a/components/publish/PublishWidget.vue
+++ b/components/publish/PublishWidget.vue
@@ -157,7 +157,7 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
-
+
diff --git a/components/status/StatusActions.vue b/components/status/StatusActions.vue
index 56e9c515..ea3272ba 100644
--- a/components/status/StatusActions.vue
+++ b/components/status/StatusActions.vue
@@ -77,7 +77,7 @@ const toggleTranslation = async () => {
}
const copyLink = async (status: Status) => {
- const url = getStatusPermalink(status)
+ const url = getStatusPermalinkRoute(status)
if (url)
await clipboard.copy(`${location.origin}${url}`)
}
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index ee99722e..68794e7b 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -30,13 +30,13 @@ function onclick(evt: MouseEvent | KeyboardEvent) {
}
function go(evt: MouseEvent | KeyboardEvent) {
- const path = getStatusPath(status)
+ const route = getStatusRoute(status)
if (evt.metaKey || evt.ctrlKey) {
- window.open(path)
+ window.open(route.href)
}
else {
cacheStatus(status)
- router.push(path)
+ router.push(route)
}
}
@@ -57,7 +57,7 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
-
+
@@ -70,7 +70,7 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
-
+
diff --git a/components/status/StatusDetails.vue b/components/status/StatusDetails.vue
index 6b4d4b5e..42a80164 100644
--- a/components/status/StatusDetails.vue
+++ b/components/status/StatusDetails.vue
@@ -19,7 +19,7 @@ const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === sta
-
+
diff --git a/components/status/StatusReplyingTo.vue b/components/status/StatusReplyingTo.vue
index 455f541b..3f8ff8e7 100644
--- a/components/status/StatusReplyingTo.vue
+++ b/components/status/StatusReplyingTo.vue
@@ -12,7 +12,7 @@ const account = useAccountById(status.inReplyToAccountId!)
diff --git a/components/user/UserSwitcher.vue b/components/user/UserSwitcher.vue
index 71508291..36aa17b8 100644
--- a/components/user/UserSwitcher.vue
+++ b/components/user/UserSwitcher.vue
@@ -13,7 +13,7 @@ const sorted = computed(() => {
const router = useRouter()
const switchUser = (user: UserLogin) => {
if (user.account.id === currentUser.value?.account.id)
- router.push(getAccountPath(user.account))
+ router.push(getAccountRoute(user.account))
else
loginTo(user)
}
diff --git a/composables/masto.ts b/composables/masto.ts
index d1797d18..72ec095c 100644
--- a/composables/masto.ts
+++ b/composables/masto.ts
@@ -56,20 +56,69 @@ export function toShortHandle(fullHandle: string) {
return fullHandle
}
-export function getAccountPath(account: Account) {
- return `/${getFullHandle(account)}`
+export function getAccountRoute(account: Account) {
+ return useRouter().resolve({
+ name: 'account-index',
+ params: {
+ account: getFullHandle(account).slice(1),
+ },
+ state: {
+ account: account as any,
+ },
+ })
+}
+export function getAccountFollowingRoute(account: Account) {
+ return useRouter().resolve({
+ name: 'account-following',
+ params: {
+ account: getFullHandle(account).slice(1),
+ },
+ state: {
+ account: account as any,
+ },
+ })
+}
+export function getAccountFollowersRoute(account: Account) {
+ return useRouter().resolve({
+ name: 'account-followers',
+ params: {
+ account: getFullHandle(account).slice(1),
+ },
+ state: {
+ account: account as any,
+ },
+ })
}
-export function getStatusPath(status: Status) {
- return `/${getFullHandle(status.account)}/${status.id}`
+export function getStatusRoute(status: Status) {
+ return useRouter().resolve({
+ name: 'status',
+ params: {
+ account: getFullHandle(status.account).slice(1),
+ status: status.id,
+ },
+ state: {
+ status: status as any,
+ },
+ })
}
-export function getStatusPermalink(status: Status) {
- return status.url ? `/${withoutProtocol(status.url)}` : null
+export function getStatusPermalinkRouteRoute(status: Status) {
+ return status.url
+ ? useRouter().resolve({
+ name: 'permalink',
+ params: { permalink: withoutProtocol(status.url) },
+ })
+ : null
}
-export function getStatusInReplyToPath(status: Status) {
- return `/status/${status.inReplyToId}`
+export function getStatusInReplyToRoute(status: Status) {
+ return useRouter().resolve({
+ name: 'status-by-id',
+ params: {
+ status: status.inReplyToId,
+ },
+ })
}
export function useAccountHandle(account: Account, fullServer = true) {
diff --git a/layouts/default.vue b/layouts/default.vue
index 8a587f5b..5f7c1d1c 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -25,7 +25,7 @@
diff --git a/pages/@[account]/[status].vue b/pages/@[account]/[status].vue
index fca07af8..d1aadb1d 100644
--- a/pages/@[account]/[status].vue
+++ b/pages/@[account]/[status].vue
@@ -2,12 +2,16 @@
import type { Status } from 'masto'
import type { ComponentPublicInstance } from 'vue'
+definePageMeta({
+ name: 'status',
+})
+
const route = useRoute()
const id = $(computedEager(() => route.params.status as string))
const main = ref(null)
let bottomSpace = $ref(0)
-const { data: status, pending, refresh: refreshStatus } = useAsyncData(async () => (
+const { data: status, pending, refresh: refreshStatus } = useAsyncData(`status:${id}`, async () => (
window.history.state?.status as Status | undefined)
?? await fetchStatus(id),
)
diff --git a/pages/@[account]/index/followers.vue b/pages/@[account]/index/followers.vue
index a7109fb2..825c1564 100644
--- a/pages/@[account]/index/followers.vue
+++ b/pages/@[account]/index/followers.vue
@@ -2,6 +2,8 @@
const params = useRoute().params
const handle = $(computedEager(() => params.account as string))
+definePageMeta({ name: 'account-followers' })
+
const account = await fetchAccountByHandle(handle)
const paginator = account ? useMasto().accounts.getFollowersIterable(account.id, {}) : null
diff --git a/pages/@[account]/index/following.vue b/pages/@[account]/index/following.vue
index d08e6cae..3e05c670 100644
--- a/pages/@[account]/index/following.vue
+++ b/pages/@[account]/index/following.vue
@@ -2,6 +2,8 @@
const params = useRoute().params
const handle = $(computedEager(() => params.account as string))
+definePageMeta({ name: 'account-following' })
+
const account = await fetchAccountByHandle(handle)
const paginator = account ? useMasto().accounts.getFollowingIterable(account.id, {}) : null
diff --git a/pages/@[account]/index/index.vue b/pages/@[account]/index/index.vue
index 0b7de973..cae1ab00 100644
--- a/pages/@[account]/index/index.vue
+++ b/pages/@[account]/index/index.vue
@@ -1,13 +1,20 @@