refactor: tidy composables

composables/hydration.ts

@@ -1 +0,0 @@
-export const isHydrated = ref(false)

composables/masto.ts

@@ -1,160 +0,0 @@
-import type { Ref } from 'vue'
-import type { Account, Relationship, Status } from 'masto'
-import { withoutProtocol } from 'ufo'
-import type { ElkMasto } from '~/types'
-
-export const useMasto = () => useNuxtApp().$masto as ElkMasto
-
-export const isMastoInitialised = computed(() => process.client && useMasto().loggedIn.value)
-
-export const onMastoInit = (cb: () => unknown) => {
-  watchOnce(isMastoInitialised, () => {
-    cb()
-  }, { immediate: isMastoInitialised.value })
-}
-
-export function getDisplayName(account?: Account, options?: { rich?: boolean }) {
-  const displayName = account?.displayName || account?.username || ''
-  if (options?.rich)
-    return displayName
-  return displayName.replace(/:([\w-]+?):/g, '')
-}
-
-export function getShortHandle({ acct }: Account) {
-  if (!acct)
-    return ''
-  return `@${acct.includes('@') ? acct.split('@')[0] : acct}`
-}
-
-export function getServerName(account: Account) {
-  if (account.acct?.includes('@'))
-    return account.acct.split('@')[1]
-  // We should only lack the server name if we're on the same server as the account
-  return currentInstance.value?.uri || ''
-}
-
-export function getFullHandle(account: Account) {
-  const handle = `@${account.acct}`
-  if (!currentUser.value || account.acct.includes('@'))
-    return handle
-  return `${handle}@${getServerName(account)}`
-}
-
-export function toShortHandle(fullHandle: string) {
-  if (!currentUser.value)
-    return fullHandle
-  const server = currentUser.value.server
-  if (fullHandle.endsWith(`@${server}`))
-    return fullHandle.slice(0, -server.length - 1)
-  return fullHandle
-}
-
-export function extractAccountHandle(account: Account) {
-  let handle = getFullHandle(account).slice(1)
-  const uri = currentInstance.value?.uri ?? currentServer.value
-  if (currentInstance.value && handle.endsWith(`@${uri}`))
-    handle = handle.slice(0, -uri.length - 1)
-
-  return handle
-}
-
-export function getAccountRoute(account: Account) {
-  return useRouter().resolve({
-    name: 'account-index',
-    params: {
-      server: currentServer.value,
-      account: extractAccountHandle(account),
-    },
-  })
-}
-export function getAccountFollowingRoute(account: Account) {
-  return useRouter().resolve({
-    name: 'account-following',
-    params: {
-      server: currentServer.value,
-      account: extractAccountHandle(account),
-    },
-  })
-}
-export function getAccountFollowersRoute(account: Account) {
-  return useRouter().resolve({
-    name: 'account-followers',
-    params: {
-      server: currentServer.value,
-      account: extractAccountHandle(account),
-    },
-  })
-}
-
-export function getStatusRoute(status: Status) {
-  return useRouter().resolve({
-    name: 'status',
-    params: {
-      server: currentServer.value,
-      account: extractAccountHandle(status.account),
-      status: status.id,
-    },
-  })
-}
-
-export function getTagRoute(tag: string) {
-  return useRouter().resolve({
-    name: 'tag',
-    params: {
-      server: currentServer.value,
-      tag,
-    },
-  })
-}
-
-export function getStatusPermalinkRoute(status: Status) {
-  return status.url ? withoutProtocol(status.url) : null
-}
-
-export function getStatusInReplyToRoute(status: Status) {
-  return useRouter().resolve({
-    name: 'status-by-id',
-    params: {
-      server: currentServer.value,
-      status: status.inReplyToId,
-    },
-  })
-}
-
-export function useAccountHandle(account: Account, fullServer = true) {
-  return computed(() => fullServer
-    ? getFullHandle(account)
-    : getShortHandle(account),
-  )
-}
-
-// Batch requests for relationships when used in the UI
-// We don't want to hold to old values, so every time a Relationship is needed it
-// is requested again from the server to show the latest state
-
-const requestedRelationships = new Map<string, Ref<Relationship | undefined>>()
-let timeoutHandle: NodeJS.Timeout | undefined
-
-export function useRelationship(account: Account): Ref<Relationship | undefined> {
-  if (!currentUser.value)
-    return ref()
-  let relationship = requestedRelationships.get(account.id)
-  if (relationship)
-    return relationship
-  relationship = ref<Relationship | undefined>()
-  requestedRelationships.set(account.id, relationship)
-  if (timeoutHandle)
-    clearTimeout(timeoutHandle)
-  timeoutHandle = setTimeout(() => {
-    timeoutHandle = undefined
-    fetchRelationships()
-  }, 100)
-  return relationship
-}
-
-async function fetchRelationships() {
-  const requested = Array.from(requestedRelationships.entries()).filter(([, r]) => !r.value)
-  const relationships = await useMasto().accounts.fetchRelationships(requested.map(([id]) => id))
-  for (let i = 0; i < requested.length; i++)
-    requested[i][1].value = relationships[i]
-}

composables/masto/account.ts

@@ -0,0 +1,53 @@
+import type { Account } from 'masto'
+
+export function getDisplayName(account?: Account, options?: { rich?: boolean }) {
+  const displayName = account?.displayName || account?.username || ''
+  if (options?.rich)
+    return displayName
+  return displayName.replace(/:([\w-]+?):/g, '')
+}
+
+export function getShortHandle({ acct }: Account) {
+  if (!acct)
+    return ''
+  return `@${acct.includes('@') ? acct.split('@')[0] : acct}`
+}
+
+export function getServerName(account: Account) {
+  if (account.acct?.includes('@'))
+    return account.acct.split('@')[1]
+  // We should only lack the server name if we're on the same server as the account
+  return currentInstance.value?.uri || ''
+}
+
+export function getFullHandle(account: Account) {
+  const handle = `@${account.acct}`
+  if (!currentUser.value || account.acct.includes('@'))
+    return handle
+  return `${handle}@${getServerName(account)}`
+}
+
+export function toShortHandle(fullHandle: string) {
+  if (!currentUser.value)
+    return fullHandle
+  const server = currentUser.value.server
+  if (fullHandle.endsWith(`@${server}`))
+    return fullHandle.slice(0, -server.length - 1)
+  return fullHandle
+}
+
+export function extractAccountHandle(account: Account) {
+  let handle = getFullHandle(account).slice(1)
+  const uri = currentInstance.value?.uri ?? currentServer.value
+  if (currentInstance.value && handle.endsWith(`@${uri}`))
+    handle = handle.slice(0, -uri.length - 1)
+
+  return handle
+}
+
+export function useAccountHandle(account: Account, fullServer = true) {
+  return computed(() => fullServer
+    ? getFullHandle(account)
+    : getShortHandle(account),
+  )
+}

composables/masto/masto.ts

@@ -0,0 +1,11 @@
+import type { ElkMasto } from '~/types'
+
+export const useMasto = () => useNuxtApp().$masto as ElkMasto
+
+export const isMastoInitialised = computed(() => process.client && useMasto().loggedIn.value)
+
+export const onMastoInit = (cb: () => unknown) => {
+  watchOnce(isMastoInitialised, () => {
+    cb()
+  }, { immediate: isMastoInitialised.value })
+}

composables/masto/relationship.ts

@@ -0,0 +1,33 @@
+import type { Account, Relationship } from 'masto'
+import type { Ref } from 'vue'
+
+// Batch requests for relationships when used in the UI
+// We don't want to hold to old values, so every time a Relationship is needed it
+// is requested again from the server to show the latest state
+
+const requestedRelationships = new Map<string, Ref<Relationship | undefined>>()
+let timeoutHandle: NodeJS.Timeout | undefined
+
+export function useRelationship(account: Account): Ref<Relationship | undefined> {
+  if (!currentUser.value)
+    return ref()
+  let relationship = requestedRelationships.get(account.id)
+  if (relationship)
+    return relationship
+  relationship = ref<Relationship | undefined>()
+  requestedRelationships.set(account.id, relationship)
+  if (timeoutHandle)
+    clearTimeout(timeoutHandle)
+  timeoutHandle = setTimeout(() => {
+    timeoutHandle = undefined
+    fetchRelationships()
+  }, 100)
+  return relationship
+}
+
+async function fetchRelationships() {
+  const requested = Array.from(requestedRelationships.entries()).filter(([, r]) => !r.value)
+  const relationships = await useMasto().accounts.fetchRelationships(requested.map(([id]) => id))
+  for (let i = 0; i < requested.length; i++)
+    requested[i][1].value = relationships[i]
+}

composables/masto/routes.ts

@@ -0,0 +1,65 @@
+import { withoutProtocol } from 'ufo'
+import type { Account, Status } from 'masto'
+
+export function getAccountRoute(account: Account) {
+  return useRouter().resolve({
+    name: 'account-index',
+    params: {
+      server: currentServer.value,
+      account: extractAccountHandle(account),
+    },
+  })
+}
+export function getAccountFollowingRoute(account: Account) {
+  return useRouter().resolve({
+    name: 'account-following',
+    params: {
+      server: currentServer.value,
+      account: extractAccountHandle(account),
+    },
+  })
+}
+export function getAccountFollowersRoute(account: Account) {
+  return useRouter().resolve({
+    name: 'account-followers',
+    params: {
+      server: currentServer.value,
+      account: extractAccountHandle(account),
+    },
+  })
+}
+
+export function getStatusRoute(status: Status) {
+  return useRouter().resolve({
+    name: 'status',
+    params: {
+      server: currentServer.value,
+      account: extractAccountHandle(status.account),
+      status: status.id,
+    },
+  })
+}
+
+export function getTagRoute(tag: string) {
+  return useRouter().resolve({
+    name: 'tag',
+    params: {
+      server: currentServer.value,
+      tag,
+    },
+  })
+}
+
+export function getStatusPermalinkRoute(status: Status) {
+  return status.url ? withoutProtocol(status.url) : null
+}
+
+export function getStatusInReplyToRoute(status: Status) {
+  return useRouter().resolve({
+    name: 'status-by-id',
+    params: {
+      server: currentServer.value,
+      status: status.inReplyToId,
+    },
+  })
+}

composables/paginator.ts

@@ -1,5 +1,4 @@
 import type { Paginator, WsEvents } from 'masto'
-import { useDeactivated } from './lifecycle'
 import type { PaginatorState } from '~/types'
 
 export function usePaginator<T>(

composables/vue.ts

@@ -1,5 +1,10 @@
 import type { ComponentInternalInstance } from 'vue'
 import { onActivated, onDeactivated, ref } from 'vue'
+import type { ActiveHeadEntry, HeadEntryOptions, UseHeadInput } from '@vueuse/head'
+import type { HeadAugmentations } from '@nuxt/schema'
+import { useHead } from '#head'
+
+export const isHydrated = ref(false)
 
 /**
  * ### Whether the current component is running in the background
@@ -28,3 +33,13 @@ export function onReactivated(hook: Function, target?: ComponentInternalInstance
   }, target)
   onDeactivated(() => initial.value = false)
 }
+
+// TODO: Workaround for Nuxt bug: https://github.com/elk-zone/elk/pull/199#issuecomment-1329771961
+export function useHeadFixed<T extends HeadAugmentations>(input: UseHeadInput<T>, options?: HeadEntryOptions): ActiveHeadEntry<UseHeadInput<T>> | void {
+  const deactivated = useDeactivated()
+  return useHead(() => {
+    if (deactivated.value)
+      return {}
+    return resolveUnref(input)
+  }, options)
+}

composables/workarounds.ts

@@ -1,13 +0,0 @@
-import type { ActiveHeadEntry, HeadEntryOptions, UseHeadInput } from '@vueuse/head'
-import type { HeadAugmentations } from '@nuxt/schema'
-import { useHead } from '#head'
-
-// TODO: Workaround for Nuxt bug: https://github.com/elk-zone/elk/pull/199#issuecomment-1329771961
-export function useHeadFixed<T extends HeadAugmentations>(input: UseHeadInput<T>, options?: HeadEntryOptions): ActiveHeadEntry<UseHeadInput<T>> | void {
-  const deactivated = useDeactivated()
-  return useHead(() => {
-    if (deactivated.value)
-      return {}
-    return resolveUnref(input)
-  }, options)
-}