Nikurasu/elk
1
0
Fork 0
forked from Mirrors/elk
Code Pull requests Releases 2 Packages 1 Activity

Merge branch 'main' into userquin/feat-remember-last-position

Browse source 
# Conflicts:
#	components/status/StatusActions.vue
This commit is contained in:
userquin 2023-01-08 09:31:24 +01:00
commit 7c355eeec7
135 changed files with 745 additions and 670 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.env.example
View file

@ -1,4 +1,5 @@
NUXT_PUBLIC_TRANSLATE_API=
NUXT_PUBLIC_DEFAULT_SERVER=
# Production only
NUXT_CLOUDFLARE_ACCOUNT_ID=

4
components/account/AccountAvatar.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts">
import type { Account } from 'masto'
import type { mastodon } from 'masto'
defineProps<{
account: Account
account: mastodon.v1.Account
square?: boolean
}>()

6
components/account/AccountBigAvatar.vue
View file

@ -1,17 +1,17 @@
<script setup lang="ts">
import type { Account } from 'masto'
import type { mastodon } from 'masto'
// Avatar with a background base achieving a 3px border to be used in status cards
// The border is used for Avatar on Avatar for reblogs and connecting replies
defineProps<{
account: Account
account: mastodon.v1.Account
square?: boolean
}>()
</script>
<template>
<div :key="account.avatar" v-bind="$attrs" :rounded-full="!square" :bg-base="!square" w-54px h-54px flex items-center justify-center>
<div :key="account.avatar" v-bind="$attrs" :style="{ 'clip-path': square ? `url(#avatar-mask)` : 'none' }" :class="{ 'rounded-full': !square }" bg-base w-54px h-54px flex items-center justify-center>
<AccountAvatar :account="account" w-48px h-48px :square="square" />
</div>
</template>

5
components/account/AccountBigCard.vue
View file

@ -1,7 +1,8 @@
<script lang="ts" setup>
import type { Account } from 'masto'
import type { mastodon } from 'masto'
const { account, as = 'div' } = $defineProps<{
account: Account
account: mastodon.v1.Account
as?: string
}>()

19
components/account/AccountBotIndicator.vue
View file

@ -1,5 +1,20 @@
<script setup lang="ts">
defineProps<{
showLabel?: boolean
}>()
</script>
<template>
<div flex="~" items-center border="~ base" text-secondary-light rounded-md px-1 text-xs my-auto>
{{ $t('account.bot') }}
<div
flex="~ gap1" items-center
:class="{ 'border border-base rounded-md px-1': showLabel }"
text-secondary-light text-xs
>
<CommonTooltip :content="$t('account.bot')" :disabled="showLabel">
<div i-ri:robot-line />
</CommonTooltip>
<div v-if="showLabel">
{{ $t('account.bot') }}
</div>
</div>
</template>

4
components/account/AccountCard.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts">
import type { Account } from 'masto'
import type { mastodon } from 'masto'
const { account } = defineProps<{
account: Account
account: mastodon.v1.Account
hoverCard?: boolean
}>()

4
components/account/AccountDisplayName.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts">
import type { Account } from 'masto'
import type { mastodon } from 'masto'
defineProps<{
account: Account
account: mastodon.v1.Account
}>()
</script>

12
components/account/AccountFollowButton.vue
View file

@ -1,9 +1,9 @@
<script setup lang="ts">
import type { Account, Relationship } from 'masto'
import type { mastodon } from 'masto'
const { account, command, ...props } = defineProps<{
account: Account
relationship?: Relationship
account: mastodon.v1.Account
relationship?: mastodon.v1.Relationship
command?: boolean
}>()
@ -15,7 +15,7 @@ const masto = useMasto()
async function toggleFollow() {
relationship!.following = !relationship!.following
try {
const newRel = await masto.accounts[relationship!.following ? 'follow' : 'unfollow'](account.id)
const newRel = await masto.v1.accounts[relationship!.following ? 'follow' : 'unfollow'](account.id)
Object.assign(relationship!, newRel)
}
catch {
@ -27,7 +27,7 @@ async function toggleFollow() {
async function unblock() {
relationship!.blocking = false
try {
const newRel = await masto.accounts.unblock(account.id)
const newRel = await masto.v1.accounts.unblock(account.id)
Object.assign(relationship!, newRel)
}
catch {
@ -39,7 +39,7 @@ async function unblock() {
async function unmute() {
relationship!.muting = false
try {
const newRel = await masto.accounts.unmute(account.id)
const newRel = await masto.v1.accounts.unmute(account.id)
Object.assign(relationship!, newRel)
}
catch {

4
components/account/AccountHandle.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts">
import type { Account } from 'masto'
import type { mastodon } from 'masto'
const { account } = defineProps<{
account: Account
account: mastodon.v1.Account
}>()
const serverName = $computed(() => getServerName(account))

14
components/account/AccountHeader.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts">
import type { Account, Field } from 'masto'
import type { mastodon } from 'masto'
const { account } = defineProps<{
account: Account
account: mastodon.v1.Account
command?: boolean
}>()
@ -14,8 +14,8 @@ const createdAt = $(useFormattedDateTime(() => account.createdAt, {
year: 'numeric',
}))
const namedFields = ref<Field[]>([])
const iconFields = ref<Field[]>([])
const namedFields = ref<mastodon.v1.AccountField[]>([])
const iconFields = ref<mastodon.v1.AccountField[]>([])
function getFieldIconTitle(fieldName: string) {
return fieldName === 'Joined' ? t('account.joined') : fieldName
@ -40,8 +40,8 @@ function previewAvatar() {
}
watchEffect(() => {
const named: Field[] = []
const icons: Field[] = []
const named: mastodon.v1.AccountField[] = []
const icons: mastodon.v1.AccountField[] = []
account.fields?.forEach((field) => {
const icon = getAccountFieldIcon(field.name)
@ -76,7 +76,7 @@ const isSelf = $computed(() => currentUser.value?.account.id === account.id)
<div flex="~ col gap1">
<div flex justify-between>
<AccountDisplayName :account="account" font-bold sm:text-2xl text-xl />
<AccountBotIndicator v-if="account.bot" />
<AccountBotIndicator v-if="account.bot" show-label />
</div>
<AccountHandle :account="account" />
</div>

4
components/account/AccountHoverCard.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts">
import type { Account } from 'masto'
import type { mastodon } from 'masto'
const { account } = defineProps<{
account: Account
account: mastodon.v1.Account
}>()
const relationship = $(useRelationship(account))

4
components/account/AccountHoverWrapper.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts">
import type { Account } from 'masto'
import type { mastodon } from 'masto'
const props = defineProps<{
account?: Account
account?: mastodon.v1.Account
handle?: string
disabled?: boolean
}>()

4
components/account/AccountInfo.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts">
import type { Account } from 'masto'
import type { mastodon } from 'masto'
const { account, as = 'div' } = defineProps<{
account: Account
account: mastodon.v1.Account
as?: string
hoverCard?: boolean
square?: boolean

4
components/account/AccountInlineInfo.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts">
import type { Account } from 'masto'
import type { mastodon } from 'masto'
const { link = true, avatar = true } = defineProps<{
account: Account
account: mastodon.v1.Account
link?: boolean
avatar?: boolean
}>()

12
components/account/AccountMoreButton.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts">
import type { Account } from 'masto'
import type { mastodon } from 'masto'
const { account } = defineProps<{
account: Account
account: mastodon.v1.Account
command?: boolean
}>()
let relationship = $(useRelationship(account))
@ -15,24 +15,24 @@ const toggleMute = async () => {
relationship!.muting = !relationship!.muting
relationship = relationship!.muting
? await masto.accounts.mute(account.id, {
? await masto.v1.accounts.mute(account.id, {
// TODO support more options
})
: await masto.accounts.unmute(account.id)
: await masto.v1.accounts.unmute(account.id)
}
const toggleBlockUser = async () => {
// TODO: Add confirmation
relationship!.blocking = !relationship!.blocking
relationship = await masto.accounts[relationship!.blocking ? 'block' : 'unblock'](account.id)
relationship = await masto.v1.accounts[relationship!.blocking ? 'block' : 'unblock'](account.id)
}
const toggleBlockDomain = async () => {
// TODO: Add confirmation
relationship!.domainBlocking = !relationship!.domainBlocking
await masto.domainBlocks[relationship!.domainBlocking ? 'block' : 'unblock'](getServerName(account))
await masto.v1.domainBlocks[relationship!.domainBlocking ? 'block' : 'unblock'](getServerName(account))
}
</script>

11
components/account/AccountMoved.vue
View file

@ -1,10 +1,8 @@
<script setup lang="ts">
// type used in <template>
// eslint-disable-next-line @typescript-eslint/consistent-type-imports
import type { Account } from 'masto'
import type { mastodon } from 'masto'
defineProps<{
account: Account
account: mastodon.v1.Account
}>()
</script>
@ -16,9 +14,8 @@ defineProps<{
</div>
<div flex>
<!-- type error of masto.js -->
<NuxtLink :to="getAccountRoute(account.moved as unknown as Account)">
<AccountInfo :account="account.moved as unknown as Account" />
<NuxtLink :to="getAccountRoute(account.moved!)">
<AccountInfo :account="account.moved!" />
</NuxtLink>
<div flex-auto />
<div flex items-center>

4
components/account/AccountPaginator.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts">
import type { Account, Paginator } from 'masto'
import type { Paginator, mastodon } from 'masto'
const { paginator } = defineProps<{
paginator: Paginator<any, Account[]>
paginator: Paginator<mastodon.v1.Account[], mastodon.DefaultPaginationParams>
}>()
</script>

4
components/account/AccountPostsFollowers.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts">
import type { Account } from 'masto'
import type { mastodon } from 'masto'
const props = defineProps<{
account: Account
account: mastodon.v1.Account
}>()
const { formatHumanReadableNumber, formatNumber, forSR } = useHumanReadableNumber()

2
components/command/CommandItem.vue
View file

@ -1,5 +1,5 @@
<script lang="ts" setup>
import type { ResolvedCommand } from '@/composables/command'
import type { ResolvedCommand } from '~/composables/command'
const emit = defineEmits<{
(event: 'activate'): void

22
components/command/CommandPanel.vue
View file

@ -1,6 +1,6 @@
<script setup lang="ts">
import type { AccountResult, HashTagResult, SearchResult as SearchResultType } from '@/components/search/types'
import type { CommandScope, QueryResult, QueryResultItem } from '@/composables/command'
import type { SearchResult as SearchResultType } from '~/composables/masto/search'
import type { CommandScope, QueryResult, QueryResultItem } from '~/composables/command'
const emit = defineEmits<{
(event: 'close'): void
@ -39,22 +39,8 @@ const searchResult = $computed<QueryResult>(() => {
// TODO extract this scope
// duplicate in SearchWidget.vue
const hashtagList = hashtags.value.slice(0, 3)
.map<HashTagResult>(hashtag => ({
type: 'hashtag',
id: hashtag.id,
hashtag,
to: getTagRoute(hashtag.name),
}))
.map(toSearchQueryResultItem)
const accountList = accounts.value
.map<AccountResult>(account => ({
type: 'account',
id: account.id,
account,
to: getAccountRoute(account),
}))
.map(toSearchQueryResultItem)
const hashtagList = hashtags.value.slice(0, 3).map(toSearchQueryResultItem)
const accountList = accounts.value.map(toSearchQueryResultItem)
const grouped: QueryResult['grouped'] = new Map()
grouped.set('Hashtags', hashtagList)

2
components/common/CommonAlert.vue
View file

@ -20,7 +20,7 @@ function close() {
<div>
<slot />
</div>
<button text-xl hover:text-primary bg-hover-overflow w-1.4em h-1.4em @click="close()">
<button text-xl hover:text-primary bg-hover-overflow w="1.4em" h="1.4em" @click="close()">
<div i-ri:close-line />
</button>
</div>

25
components/common/CommonPaginator.vue
View file

@ -1,4 +1,4 @@
<script setup lang="ts">
<script setup lang="ts" generic="T extends any, O extends any">
// @ts-expect-error missing types
import { DynamicScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
@ -12,20 +12,23 @@ const {
eventType = 'update',
preprocess,
} = defineProps<{
paginator: Paginator<any, any[]>
keyProp?: string
paginator: Paginator<T[], O>
keyProp?: keyof T
virtualScroller?: boolean
stream?: Promise<WsEvents>
eventType?: 'notification' | 'update'
preprocess?: (items: any[]) => any[]
preprocess?: (items: T[]) => any[]
}>()
defineSlots<{
default: {
item: any
item: T
active?: boolean
older?: any
newer?: any // newer is undefined when index === 0
older?: T
newer?: T // newer is undefined when index === 0
}
items: {
items: T[]
}
updater: {
number: number
@ -35,6 +38,8 @@ defineSlots<{
done: {}
}>()
const { t } = useI18n()
const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, stream, eventType, preprocess)
</script>
@ -62,7 +67,7 @@ const { items, prevItems, update, state, endAnchor, error } = usePaginator(pagin
<template v-else>
<slot
v-for="item, index of items"
:key="item[keyProp]"
:key="(item as any)[keyProp]"
:item="item"
:older="items[index + 1]"
:newer="items[index - 1]"
@ -75,11 +80,11 @@ const { items, prevItems, update, state, endAnchor, error } = usePaginator(pagin
</slot>
<slot v-else-if="state === 'done'" name="done">
<div p5 text-secondary italic text-center>
{{ $t('common.end_of_list') }}
{{ t('common.end_of_list') }}
</div>
</slot>
<div v-else-if="state === 'error'" p5 text-secondary>
{{ $t('common.error') }}: {{ error }}
{{ t('common.error') }}: {{ error }}
</div>
</div>
</template>

4
components/common/CommonTrending.vue
View file

@ -1,11 +1,11 @@
<script lang="ts" setup>
import type { History } from 'masto'
import type { mastodon } from 'masto'
const {
history,
maxDay = 2,
} = $defineProps<{
history: History[]
history: mastodon.v1.TagHistory[]
maxDay?: number
}>()

4
components/common/CommonTrendingCharts.vue
View file

@ -1,5 +1,5 @@
<script lang="ts" setup>
import type { History } from 'masto'
import type { mastodon } from 'masto'
import sparkline from '@fnando/sparkline'
const {
@ -7,7 +7,7 @@ const {
width = 60,
height = 40,
} = $defineProps<{
history?: History[]
history?: mastodon.v1.TagHistory[]
width?: number
height?: number
}>()

4
components/content/ContentRich.setup.ts
View file

@ -1,4 +1,4 @@
import type { Emoji } from 'masto'
import type { mastodon } from 'masto'
defineOptions({
name: 'ContentRich',
@ -10,7 +10,7 @@ const {
markdown = true,
} = defineProps<{
content: string
emojis?: Emoji[]
emojis?: mastodon.v1.CustomEmoji[]
markdown?: boolean
}>()

4
components/conversation/ConversationCard.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts">
import type { Conversation } from 'masto'
import type { mastodon } from 'masto'
const { conversation } = defineProps<{
conversation: Conversation
conversation: mastodon.v1.Conversation
}>()
const withAccounts = $computed(() =>

4
components/conversation/ConversationPaginator.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts">
import type { Conversation, Paginator } from 'masto'
import type { Paginator, mastodon } from 'masto'
const { paginator } = defineProps<{
paginator: Paginator<any, Conversation[]>
paginator: Paginator<mastodon.v1.Conversation[], mastodon.DefaultPaginationParams>
}>()
</script>

4
components/modal/ModalContainer.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import type { Status } from 'masto'
import type { mastodon } from 'masto'
import type { ConfirmDialogChoice } from '~/types'
import {
isCommandPanelOpen,
@ -30,7 +30,7 @@ useEventListener('keydown', (e: KeyboardEvent) => {
}
})
const handlePublished = (status: Status) => {
const handlePublished = (status: mastodon.v1.Status) => {
lastPublishDialogStatus.value = status
isPublishDialogOpen.value = false
}

6
components/modal/ModalMediaPreview.vue
View file

@ -40,14 +40,14 @@ onUnmounted(() => locked.value = false)
<div relative h-full w-full flex pt-12 w-100vh @click="onClick">
<button
v-if="hasNext" pointer-events-auto btn-action-icon bg="black/20" :aria-label="$t('action.previous')"
hover:bg="black/40" dark:bg="white/30" dark:hover:bg="white/20" absolute top="1/2" right-1 z5
hover:bg="black/40" dark:bg="white/30" dark-hover:bg="white/20" absolute top="1/2" right-1 z5
:title="$t('action.next')" @click="next"
>
<div i-ri:arrow-right-s-line text-white />
</button>
<button
v-if="hasPrev" pointer-events-auto btn-action-icon bg="black/20" aria-label="action.next"
hover:bg="black/40" dark:bg="white/30" dark:hover:bg="white/20" absolute top="1/2" left-1 z5
hover:bg="black/40" dark:bg="white/30" dark:hover-bg="white/20" absolute top="1/2" left-1 z5
:title="$t('action.prev')" @click="prev"
>
<div i-ri:arrow-left-s-line text-white />
@ -60,7 +60,7 @@ onUnmounted(() => locked.value = false)
<div absolute top-0 w-full flex justify-between>
<button
btn-action-icon bg="black/30" aria-label="action.close" hover:bg="black/40" dark:bg="white/30"
dark:hover:bg="white/20" pointer-events-auto shrink-0 @click="emit('close')"
dark:hover-bg="white/20" pointer-events-auto shrink-0 @click="emit('close')"
>
<div i-ri:close-line text-white />
</button>

4
components/modal/ModalMediaPreviewCarousel.vue
View file

@ -1,10 +1,10 @@
<script setup lang="ts">
import { SwipeDirection } from '@vueuse/core'
import { useReducedMotion } from '@vueuse/motion'
import type { Attachment } from 'masto'
import type { mastodon } from 'masto'
const { media = [], threshold = 20 } = defineProps<{
media?: Attachment[]
media?: mastodon.v1.MediaAttachment[]
threshold?: number
}>()

2
components/nav/NavFooter.vue
View file

@ -16,7 +16,7 @@ function toggleDark() {
<footer p4 text-sm text-secondary-light flex="~ col">
<div flex="~ gap2" items-center mb4>
<CommonTooltip :content="$t('nav.toggle_theme')">
<button flex i-ri:sun-line dark:i-ri:moon-line text-lg :aria-label="$t('nav.toggle_theme')" @click="toggleDark()" />
<button flex i-ri:sun-line dark-i-ri:moon-line text-lg :aria-label="$t('nav.toggle_theme')" @click="toggleDark()" />
</CommonTooltip>
<CommonTooltip :content="$t('nav.zen_mode')">
<button

4
components/notification/NotificationCard.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts">
import type { Notification } from 'masto'
import type { mastodon } from 'masto'
const { notification } = defineProps<{
notification: Notification
notification: mastodon.v1.Notification
}>()
const nuxt = useNuxtApp()

15
components/notification/NotificationPaginator.vue
View file

@ -1,20 +1,19 @@
<script setup lang="ts">
// type used in <template>
// eslint-disable-next-line @typescript-eslint/consistent-type-imports
import type { Notification, Paginator, WsEvents } from 'masto'
import { mastodon } from 'masto'
import type { Paginator, WsEvents } from 'masto'
// type used in <template>
// eslint-disable-next-line @typescript-eslint/consistent-type-imports
import type { GroupedAccountLike, GroupedLikeNotifications, NotificationSlot } from '~/types'
const { paginator, stream } = defineProps<{
paginator: Paginator<any, Notification[]>
paginator: Paginator<mastodon.v1.Notification[], mastodon.v1.ListNotificationsParams>
stream?: Promise<WsEvents>
}>()
const groupCapacity = Number.MAX_VALUE // No limit
// Group by type (and status when applicable)
const groupId = (item: Notification): string => {
const groupId = (item: mastodon.v1.Notification): string => {
// If the update is related to an status, group notifications from the same account (boost + favorite the same status)
const id = item.status
? {
@ -27,12 +26,12 @@ const groupId = (item: Notification): string => {
return JSON.stringify(id)
}
function groupItems(items: Notification[]): NotificationSlot[] {
function groupItems(items: mastodon.v1.Notification[]): NotificationSlot[] {
const results: NotificationSlot[] = []
let id = 0
let currentGroupId = ''
let currentGroup: Notification[] = []
let currentGroup: mastodon.v1.Notification[] = []
const processGroup = () => {
if (currentGroup.length === 0)
return
@ -127,7 +126,7 @@ const { formatNumber } = useHumanReadableNumber()
/>
<NotificationCard
v-else
:notification="item as Notification"
:notification="item as mastodon.v1.Notification"
hover:bg-active
border="b base"
/>

2
components/notification/NotificationSubscribePushNotificationError.vue
View file

@ -31,7 +31,7 @@ const { modelValue } = defineModel<{
:aria-label="$t('settings.notifications.push_notifications.subscription_error.clear_error')"
@click="modelValue = false"
>
<span aria-hidden="true" w-1.75em h-1.75em i-ri:close-line />
<span aria-hidden="true" w="1.75em" h="1.75em" i-ri:close-line />
</button>
</CommonTooltip>
</head>

4
components/publish/PublishAttachment.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts">
import type { Attachment } from 'masto'
import type { mastodon } from 'masto'
const props = withDefaults(defineProps<{
attachment: Attachment
attachment: mastodon.v1.MediaAttachment
alt?: string
removable?: boolean
dialogLabelledBy?: string

28
components/publish/PublishWidget.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import type { Attachment, CreateStatusParams, Status, StatusVisibility } from 'masto'
import type { mastodon } from 'masto'
import { fileOpen } from 'browser-fs-access'
import { useDropZone } from '@vueuse/core'
import { EditorContent } from '@tiptap/vue-3'
@ -18,13 +18,13 @@ const {
initial?: () => Draft
placeholder?: string
inReplyToId?: string
inReplyToVisibility?: StatusVisibility
inReplyToVisibility?: mastodon.v1.StatusVisibility
expanded?: boolean
dialogLabelledBy?: string
}>()
const emit = defineEmits<{
(evt: 'published', status: Status): void
(evt: 'published', status: mastodon.v1.Status): void
}>()
const { t } = useI18n()
@ -103,7 +103,7 @@ async function uploadAttachments(files: File[]) {
if (draft.attachments.length < limit) {
isExceedingAttachmentLimit = false
try {
const attachment = await masto.mediaAttachments.create({
const attachment = await masto.v1.mediaAttachments.create({
file,
})
draft.attachments.push(attachment)
@ -122,9 +122,9 @@ async function uploadAttachments(files: File[]) {
isUploading = false
}
async function setDescription(att: Attachment, description: string) {
async function setDescription(att: mastodon.v1.MediaAttachment, description: string) {
att.description = description
await masto.mediaAttachments.update(att.id, { description: att.description })
await masto.v1.mediaAttachments.update(att.id, { description: att.description })
}
function removeAttachment(index: number) {
@ -136,8 +136,8 @@ async function publish() {
...draft.params,
status: htmlToText(draft.params.status || ''),
mediaIds: draft.attachments.map(a => a.id),
...(masto.version.includes('+glitch') ? { 'content-type': 'text/markdown' } : {}),
} as CreateStatusParams
...((masto.config as any).props.version.raw.includes('+glitch') ? { 'content-type': 'text/markdown' } : {}),
} as mastodon.v1.CreateStatusParams
if (process.dev) {
// eslint-disable-next-line no-console
@ -154,11 +154,13 @@ async function publish() {
try {
isSending = true
let status: Status
let status: mastodon.v1.Status
if (!draft.editingStatus)
status = await masto.statuses.create(payload)
status = await masto.v1.statuses.create(payload)
else
status = await masto.statuses.update(draft.editingStatus.id, payload)
status = await masto.v1.statuses.update(draft.editingStatus.id, payload)
if (draft.params.inReplyToId)
navigateToStatus({ status })
draft = initial()
emit('published', status)
@ -251,7 +253,7 @@ defineExpose({
:aria-label="$t('action.clear_upload_failed')"
@click="failed = []"
>
<span aria-hidden="true" w-1.75em h-1.75em i-ri:close-line />
<span aria-hidden="true" w="1.75em" h="1.75em" i-ri:close-line />
</button>
</CommonTooltip>
</head>
@ -313,7 +315,7 @@ defineExpose({
<div flex-auto />
<div dir="ltr" pointer-events-none pe-1 pt-2 text-sm tabular-nums text-secondary flex gap-0.5 :class="{ 'text-rose-500': characterCount > characterLimit }">
<div dir="ltr" pointer-events-none pe-1 pt-2 text-sm tabular-nums text-secondary flex gap="0.5" :class="{ 'text-rose-500': characterCount > characterLimit }">
{{ characterCount ?? 0 }}<span text-secondary-light>/</span><span text-secondary-light>{{ characterLimit }}</span>
</div>

8
components/search/SearchAccountInfo.vue
View file

@ -1,13 +1,13 @@
<script setup lang="ts">
import type { Account } from 'masto'
import type { mastodon } from 'masto'
defineProps<{
account: Account
account: mastodon.v1.Account
}>()
</script>
<template>
<button flex gap-2 items-center>
<div flex gap-2 items-center>
<AccountAvatar w-10 h-10 :account="account" shrink-0 />
<div flex="~ col gap1" shrink h-full overflow-hidden leading-none>
<div flex="~" gap-2>
@ -16,5 +16,5 @@ defineProps<{
</div>
<AccountHandle text-sm :account="account" text-secondary-light />
</div>
</button>
</div>
</template>

11
components/search/SearchHashtagInfo.vue
View file

@ -1,7 +1,9 @@
<script setup lang="ts">
import type { Tag } from 'masto'
import type { mastodon } from 'masto'
const { hashtag } = defineProps<{ hashtag: Tag }>()
const { hashtag } = defineProps<{
hashtag: mastodon.v1.Tag
}>()
const totalTrend = $computed(() =>
hashtag.history?.reduce((total: number, item) => total + (Number(item.accounts) || 0), 0),
@ -20,7 +22,10 @@ const totalTrend = $computed(() =>
<CommonTrending :history="hashtag.history" text-xs text-secondary truncate />
</div>
<div v-if="totalTrend" absolute left-15 right-0 top-0 bottom-4 op35 flex place-items-center place-content-center ml-auto>
<CommonTrendingCharts :history="hashtag.history" text-xs text-secondary width="150" height="20" h-full w-full />
<CommonTrendingCharts
:history="hashtag.history" :width="150" :height="20"
text-xs text-secondary h-full w-full
/>
</div>
</div>
</template>

8
components/search/SearchResult.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import type { SearchResult } from './types'
import type { SearchResult } from '~/composables/masto/search'
defineProps<{
result: SearchResult
@ -21,9 +21,9 @@ const onActivate = () => {
:class="{ 'bg-active': active }"
@click="() => onActivate()"
>
<SearchHashtagInfo v-if="result.type === 'hashtag'" :hashtag="result.hashtag" />
<SearchAccountInfo v-else-if="result.type === 'account' && result.account" :account="result.account" />
<StatusCard v-else-if="result.type === 'status' && result.status" :status="result.status" :actions="false" :show-reply-to="false" />
<SearchHashtagInfo v-if="result.type === 'hashtag'" :hashtag="result.data" />
<SearchAccountInfo v-else-if="result.type === 'account'" :account="result.data" />
<StatusCard v-else-if="result.type === 'status'" :status="result.data" :actions="false" :show-reply-to="false" />
<!-- <div v-else-if="result.type === 'action'" text-center>
{{ result.action!.label }}
</div> -->

31
components/search/SearchWidget.vue
View file

@ -1,6 +1,4 @@
<script setup lang="ts">
import type { AccountResult, HashTagResult, StatusResult } from './types'
const query = ref('')
const { accounts, hashtags, loading, statuses } = useSearch(query)
const index = ref(0)
@ -15,24 +13,9 @@ const results = computed(() => {
return []
const results = [
...hashtags.value.slice(0, 3).map<HashTagResult>(hashtag => ({
type: 'hashtag',
id: hashtag.id,
hashtag,
to: getTagRoute(hashtag.name),
})),
...accounts.value.map<AccountResult>(account => ({
type: 'account',
id: account.id,
account,
to: getAccountRoute(account),
})),
...statuses.value.map<StatusResult>(status => ({
type: 'status',
id: status.id,
status,
to: getStatusRoute(status),
})),
...hashtags.value.slice(0, 3),
...accounts.value,
...statuses.value,
// Disable until search page is implemented
// {
@ -53,16 +36,18 @@ watch([results, focused], () => index.value = -1)
const shift = (delta: number) => index.value = (index.value + delta % results.value.length + results.value.length) % results.value.length
const activate = () => {
(document.activeElement as HTMLElement).blur()
const currentIndex = index.value
index.value = -1
if (query.value.length === 0)
return
(document.activeElement as HTMLElement).blur()
// Disable until search page is implemented
// if (currentIndex === -1)
// router.push(`/search?q=${query.value}`)
if (currentIndex === -1)
// router.push(`/search?q=${query.value}`)
return
router.push(results.value[currentIndex].to)
}

17
components/search/types.ts
View file

@ -1,17 +0,0 @@
import type { Account, Status } from 'masto'
import type { RouteLocation } from 'vue-router'
export type BuildResult<K extends keyof any, T> = {
[P in K]: T
} & {
id: string
type: K
to: RouteLocation & {
href: string
}
}
export type HashTagResult = BuildResult<'hashtag', any>
export type AccountResult = BuildResult<'account', Account>
export type StatusResult = BuildResult<'status', Status>
export type SearchResult = HashTagResult | AccountResult | StatusResult

4
components/settings/SettingsProfileMetadata.vue
View file

@ -1,9 +1,9 @@
<script setup lang="ts">
import type { UpdateCredentialsParams } from 'masto'
import type { mastodon } from 'masto'
const { form } = defineModel<{
form: {
fieldsAttributes: NonNullable<UpdateCredentialsParams['fieldsAttributes']>
fieldsAttributes: NonNullable<mastodon.v1.UpdateCredentialsParams['fieldsAttributes']>
}
}>()
const dropdown = $ref<any>()

4
components/status/StatusAccountDetails.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts">
import type { Account } from 'masto'
import type { mastodon } from 'masto'
const { account, link = true } = defineProps<{
account: Account
account: mastodon.v1.Account
link?: boolean
}>()
</script>

14
components/status/StatusActions.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts">
import type { Status } from 'masto'
import type { mastodon } from 'masto'
const props = defineProps<{
status: Status
status: mastodon.v1.Status
details?: boolean
command?: boolean
}>()
@ -25,14 +25,10 @@ const { formatHumanReadableNumber, formatNumber, forSR } = useHumanReadableNumbe
const reply = () => {
if (!checkLogin())
return
if (details) {
if (details)
focusEditor()
}
else {
nuxtApp.$rememberStatusPosition(status)
navigateTo({ path: getStatusRoute(status).href, state: { focusReply: true } })
}
else
navigateToStatus({ status, focusReply: true })
}
</script>

14
components/status/StatusActionsMore.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts">
import type { Status } from 'masto'
import type { mastodon } from 'masto'
const props = defineProps<{
status: Status
status: mastodon.v1.Status
details?: boolean
command?: boolean
}>()
@ -40,21 +40,21 @@ const toggleTranslation = async () => {
const masto = useMasto()
const getPermalinkUrl = (status: Status) => {
const getPermalinkUrl = (status: mastodon.v1.Status) => {
const url = getStatusPermalinkRoute(status)
if (url)
return `${location.origin}/${url}`
return null
}
const copyLink = async (status: Status) => {
const copyLink = async (status: mastodon.v1.Status) => {
const url = getPermalinkUrl(status)
if (url)
await clipboard.copy(url)
}
const { share, isSupported: isShareSupported } = useShare()
const shareLink = async (status: Status) => {
const shareLink = async (status: mastodon.v1.Status) => {
const url = getPermalinkUrl(status)
if (url)
await share({ url })
@ -69,7 +69,7 @@ const deleteStatus = async () => {
return
removeCachedStatus(status.id)
await masto.statuses.remove(status.id)
await masto.v1.statuses.remove(status.id)
if (route.name === 'status')
router.back()
@ -87,7 +87,7 @@ const deleteAndRedraft = async () => {
}
removeCachedStatus(status.id)
await masto.statuses.remove(status.id)
await masto.v1.statuses.remove(status.id)
await openPublishDialog('dialog', await getDraftFromStatus(status), true)
// Go to the new status, if the page is the old status

6
components/status/StatusAttachment.vue
View file

@ -1,13 +1,13 @@
<script setup lang="ts">
import { clamp } from '@vueuse/core'
import type { Attachment } from 'masto'
import type { mastodon } from 'masto'
const {
attachment,
fullSize = false,
} = defineProps<{
attachment: Attachment
attachments?: Attachment[]
attachment: mastodon.v1.MediaAttachment
attachments?: mastodon.v1.MediaAttachment[]
fullSize?: boolean
}>()

4
components/status/StatusBody.vue
View file

@ -1,11 +1,11 @@
<script setup lang="ts">
import type { Status, StatusEdit } from 'masto'
import type { mastodon } from 'masto'
const {
status,
withAction = true,
} = defineProps<{
status: Status | StatusEdit
status: mastodon.v1.Status | mastodon.v1.StatusEdit
withAction?: boolean
}>()

100
components/status/StatusCard.vue
View file

@ -1,25 +1,26 @@
<script setup lang="ts">
import type { FilterContext, Status } from 'masto'
import type { mastodon } from 'masto'
const props = withDefaults(
defineProps<{
status: Status
status: mastodon.v1.Status
actions?: boolean
context?: FilterContext
context?: mastodon.v2.FilterContext
hover?: boolean
faded?: boolean
// If we know the prev and next status in the timeline, we can simplify the card
older?: Status
newer?: Status
older?: mastodon.v1.Status
newer?: mastodon.v1.Status
// Manual overrides
hasOlder?: boolean
hasNewer?: boolean
// When looking into a detailed view of a post, we can simplify the replying badges
// to the main expanded post
main?: Status
main?: mastodon.v1.Status
}>(),
{ actions: true, showReplyTo: true },
{ actions: true },
)
const status = $computed(() => {
@ -32,9 +33,13 @@ const status = $computed(() => {
const directReply = $computed(() => props.hasNewer || (!!status.inReplyToId && (status.inReplyToId === props.newer?.id || status.inReplyToId === props.newer?.reblog?.id)))
// Use reblogged status, connect it to further replies
const connectReply = $computed(() => props.hasOlder || status.id === props.older?.inReplyToId || status.id === props.older?.reblog?.inReplyToId)
// Open a detailed status, the replies directly to it
const replyToMain = $computed(() => props.main && props.main.id === status.inReplyToId)
const rebloggedBy = $computed(() => props.status.reblog ? props.status.account : null)
const statusRoute = $computed(() => getStatusRoute(status))
const el = ref<HTMLElement>()
const router = useRouter()
@ -47,14 +52,13 @@ function onclick(evt: MouseEvent | KeyboardEvent) {
}
function go(evt: MouseEvent | KeyboardEvent) {
const route = getStatusRoute(status)
if (evt.metaKey || evt.ctrlKey) {
window.open(route.href)
window.open(statusRoute.href)
}
else {
useNuxtApp().$rememberStatusPosition(status)
cacheStatus(status)
router.push(route)
router.push(statusRoute)
}
}
@ -64,24 +68,19 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
// Content Filter logic
const filterResult = $computed(() => status.filtered?.length ? status.filtered[0] : null)
const filter = $computed(() => filterResult?.filter)
const filter = $computed(() => filterResult?.filter as mastodon.v2.Filter)
// a bit of a hack due to Filter being different in v1 and v2
// clean up when masto.js supports explicit versions: https://github.com/neet/masto.js/issues/722
const filterPhrase = $computed(() => filter?.phrase || (filter as any)?.title)
const isFiltered = $computed(() => filterPhrase && (props.context ? filter?.context.includes(props.context) : false))
const isSelfReply = $computed(() => status.inReplyToAccountId === status.account.id)
const collapseRebloggedBy = $computed(() => rebloggedBy?.id === status.account.id)
// Collapse ReplyingTo badge if it is a self-reply (thread)
const collapseReplyingTo = $computed(() => (!rebloggedBy || collapseRebloggedBy) && status.inReplyToAccountId === status.account.id)
// Only show avatar in ReplyingTo badge if it was reblogged by the same account or if it is against the main post
const simplifyReplyingTo = $computed(() =>
(props.main && props.main.account.id === status.inReplyToAccountId) || (rebloggedBy && rebloggedBy.id === status.inReplyToAccountId),
)
const isDM = $computed(() => status.visibility === 'direct')
const showUpperBorder = $computed(() => props.newer && !directReply)
const showReplyTo = $computed(() => !replyToMain && !directReply)
</script>
<template>
@ -89,8 +88,7 @@ const isDM = $computed(() => status.visibility === 'direct')
v-if="filter?.filterAction !== 'hide'"
:id="`status-${status.id}`"
ref="el"
relative flex flex-col gap-1 pl-3 pr-4 pt-1
class="pb-1.5"
relative flex="~ col gap1" p="l-3 r-4 b-2"
:class="{ 'hover:bg-active': hover }"
tabindex="0"
focus:outline-none focus-visible:ring="2 primary"
@ -98,10 +96,37 @@ const isDM = $computed(() => status.visibility === 'direct')
@click="onclick"
@keydown.enter="onclick"
>
<div v-if="newer && !directReply" w-auto h-1px bg-border />
<div flex justify-between>
<!-- Upper border -->
<div :h="showUpperBorder ? '1px' : '0'" w-auto bg-border mb-1 />
<!-- Line connecting to previous status -->
<template v-if="status.inReplyToAccountId">
<StatusReplyingTo
v-if="showReplyTo"
ml-6 pt-1 pl-5
:status="status"
:is-self-reply="isSelfReply"
:class="faded ? 'text-secondary-light' : ''"
/>
<div flex="~ col gap-1" items-center pos="absolute top-0 left-0" w="20.5" z--1>
<template v-if="showReplyTo">
<div w="1px" h="0.5" border="x base" mt-3 />
<div w="1px" h="0.5" border="x base" />
<div w="1px" h="0.5" border="x base" />
</template>
<div w="1px" h-10 border="x base" />
</div>
</template>
<!-- Reblog status & Meta -->
<div flex="~ col" justify-between>
<slot name="meta">
<div v-if="rebloggedBy && !collapseRebloggedBy" relative text-secondary ws-nowrap flex="~" items-center pt1 pb0.5 px-1px bg-base>
<div
v-if="rebloggedBy && !collapseRebloggedBy"
flex="~" items-center
p="t-1 b-0.5 x-1px"
relative text-secondary ws-nowrap
>
<div i-ri:repeat-fill me-46px text-primary w-16px h-16px />
<div absolute top-1 ms-24px w-32px h-32px rounded-full>
<AccountHoverWrapper :account="rebloggedBy">
@ -112,11 +137,11 @@ const isDM = $computed(() => status.visibility === 'direct')
</div>
<AccountInlineInfo font-bold :account="rebloggedBy" :avatar="false" text-sm />
</div>
<div v-else />
</slot>
<StatusReplyingTo v-if="!directReply && !collapseReplyingTo" :status="status" :simplified="!!simplifyReplyingTo" :class="faded ? 'text-secondary-light' : ''" pt1 />
</div>
<div flex gap-3 :class="{ 'text-secondary': faded }">
<!-- Avatar -->
<div relative>
<div v-if="collapseRebloggedBy" absolute flex items-center justify-center top--6px px-2px py-3px rounded-full bg-base>
<div i-ri:repeat-fill text-primary w-16px h-16px />
@ -126,24 +151,25 @@ const isDM = $computed(() => status.visibility === 'direct')
<AccountBigAvatar :account="status.account" />
</NuxtLink>
</AccountHoverWrapper>
<div v-if="connectReply" w-full h-full flex justify-center>
<div class="w-2.5px" bg-primary-light />
<div v-if="connectReply" w-full h-full flex mt--3px justify-center>
<div w-1px border="x base" />
</div>
</div>
<!-- Main -->
<div flex="~ col 1" min-w-0>
<!-- Account Info -->
<div flex items-center space-x-1>
<AccountHoverWrapper :account="status.account">
<StatusAccountDetails :account="status.account" />
</AccountHoverWrapper>
<div v-if="!directReply && collapseReplyingTo" flex="~" ps-1 items-center justify-center>
<StatusReplyingTo :collapsed="true" :status="status" :class="faded ? 'text-secondary-light' : ''" />
</div>
<div flex-auto />
<div v-if="!userSettings.zenMode" text-sm text-secondary flex="~ row nowrap" hover:underline>
<div v-show="!userSettings.zenMode" text-sm text-secondary flex="~ row nowrap" hover:underline>
<AccountBotIndicator v-if="status.account.bot" me-2 />
<div flex>
<CommonTooltip :content="createdAt">
<a :title="status.createdAt" :href="getStatusRoute(status).href" @click.prevent="go($event)">
<a :title="status.createdAt" :href="statusRoute.href" @click.prevent="go($event)">
<time text-sm ws-nowrap hover:underline :datetime="status.createdAt">
{{ timeago }}
</time>
@ -154,10 +180,10 @@ const isDM = $computed(() => status.visibility === 'direct')
</div>
<StatusActionsMore v-if="actions !== false" :status="status" me--2 />
</div>
<!-- Content -->
<StatusContent :status="status" :context="context" mb2 :class="{ 'mt-2 mb1': isDM }" />
<div>
<StatusActions v-if="(actions !== false && !userSettings.zenMode)" :status="status" />
</div>
<StatusActions v-if="actions !== false" v-show="!userSettings.zenMode" :status="status" />
</div>
</div>
</div>

6
components/status/StatusContent.vue
View file

@ -1,9 +1,9 @@
<script setup lang="ts">
import type { FilterContext, Status } from 'masto'
import type { mastodon } from 'masto'
const { status, context } = defineProps<{
status: Status
context?: FilterContext | 'details'
status: mastodon.v1.Status
context?: mastodon.v2.FilterContext | 'details'
}>()
const isDM = $computed(() => status.visibility === 'direct')

4
components/status/StatusDetails.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts">
import type { Status } from 'masto'
import type { mastodon } from 'masto'
const props = withDefaults(defineProps<{
status: Status
status: mastodon.v1.Status
command?: boolean
actions?: boolean
}>(), {

4
components/status/StatusMedia.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts">
import type { Status, StatusEdit } from 'masto'
import type { mastodon } from 'masto'
const { status } = defineProps<{
status: Status | StatusEdit
status: mastodon.v1.Status | mastodon.v1.StatusEdit
fullSize?: boolean
}>()
</script>

6
components/status/StatusPoll.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts">
import type { Status } from 'masto'
import type { mastodon } from 'masto'
const { status } = defineProps<{
status: Status
status: mastodon.v1.Status
}>()
const poll = reactive({ ...status.poll! })
@ -30,7 +30,7 @@ async function vote(e: Event) {
poll.votersCount = (poll.votersCount || 0) + 1
cacheStatus({ ...status, poll }, undefined, true)
await masto.poll.vote(poll.id, { choices })
await masto.v1.polls.vote(poll.id, { choices })
}
const votersCount = $computed(() => poll.votersCount ?? 0)

6
components/status/StatusPreviewCard.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts">
import type { Card, CardType } from 'masto'
import type { mastodon } from 'masto'
const props = defineProps<{
card: Card
card: mastodon.v1.PreviewCard
/** For the preview image, only the small image mode is displayed */
smallPictureOnly?: boolean
/** When it is root card in the list, not appear as a child card */
@ -24,7 +24,7 @@ const providerName = $computed(() => props.card.providerName ? props.card.provid
const gitHubCards = $(useFeatureFlag('experimentalGitHubCards'))
// TODO: handle card.type: 'photo' | 'video' | 'rich';
const cardTypeIconMap: Record<CardType, string> = {
const cardTypeIconMap: Record<mastodon.v1.PreviewCardType, string> = {
link: 'i-ri:profile-line',
photo: 'i-ri:image-line',
video: 'i-ri:play-line',

4
components/status/StatusPreviewCardInfo.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts">
import type { Card } from 'masto'
import type { mastodon } from 'masto'
defineProps<{
card: Card
card: mastodon.v1.PreviewCard
/** When it is root card in the list, not appear as a child card */
root?: boolean
/** For the preview image, only the small image mode is displayed */

4
components/status/StatusPreviewGitHub.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts">
import type { Card } from 'masto'
import type { mastodon } from 'masto'
const props = defineProps<{
card: Card
card: mastodon.v1.PreviewCard
}>()
type UrlType = 'user' | 'repo' | 'issue' | 'pull'

48
components/status/StatusReplyingTo.vue
View file

@ -1,10 +1,12 @@
<script setup lang="ts">
import type { Status } from 'masto'
import type { mastodon } from 'masto'
const { status, collapsed = false, simplified = false } = defineProps<{
status: Status
collapsed?: boolean
simplified?: boolean
const {
status,
isSelfReply = false,
} = defineProps<{
status: mastodon.v1.Status
isSelfReply: boolean
}>()
const isSelf = $computed(() => status.inReplyToAccountId === status.account.id)
@ -12,21 +14,25 @@ const account = isSelf ? computed(() => status.account) : useAccountById(status.
</script>
<template>
<div v-if="status.inReplyToAccountId" flex="~ wrap" gap-1 items-end>
<NuxtLink
v-if="status.inReplyToId"
flex="~" items-center h-auto font-bold text-sm text-secondary gap-1
:to="getStatusInReplyToRoute(status)"
:title="account ? `Replying to ${getDisplayName(account)}` : 'Replying to someone'"
>
<template v-if="account">
<div i-ri:reply-fill :class="collapsed ? '' : 'scale-x-[-1]'" text-secondary-light />
<template v-if="!collapsed">
<AccountAvatar v-if="isSelf || simplified || status.inReplyToAccountId === currentUser?.account.id" :account="account" :link="false" w-5 h-5 mx-0.5 />
<AccountInlineInfo v-else :account="account" :link="false" mx-0.5 />
<NuxtLink
v-if="status.inReplyToId"
flex="~ gap2" items-center h-auto text-sm text-secondary
:to="getStatusInReplyToRoute(status)"
:title=" $t('status.replying_to', [account ? getDisplayName(account) : $t('status.someone')])"
>
<template v-if="isSelfReply">
<span btn-text p0 mb-1>{{ $t('status.show_full_thread') }}</span>
</template>
<template v-else>
<div i-ri-chat-1-line />
<i18n-t keypath="status.replying_to">
<template v-if="account">
<AccountInlineInfo :account="account" :link="false" mx1 />
</template>
</template>
<div i-ri:question-answer-line text-secondary-light text-lg />
</NuxtLink>
</div>
<template v-else>
{{ $t('status.someone') }}
</template>
</i18n-t>
</template>
</NuxtLink>
</template>

2
components/status/StatusSpoiler.vue
View file

@ -11,7 +11,7 @@ watchEffect(() => {
<template>
<div v-if="enabled" flex flex-col items-start>
<div class="content-rich" px-4 pb-2.5 text-center text-secondary w-full border="~ base" border-0 border-b-dotted border-b-3 mt-2>
<div class="content-rich" p="x-4 b-2.5" text-center text-secondary w-full border="~ base" border-0 border-b-dotted border-b-3 mt-2>
<slot name="spoiler" />
</div>
<div flex="~ gap-1 center" w-full mt="-4.5">

8
components/status/edit/StatusEditHistory.vue
View file

@ -1,15 +1,15 @@
<script setup lang="ts">
import type { Status, StatusEdit } from 'masto'
import type { mastodon } from 'masto'
import { formatTimeAgo } from '@vueuse/core'
const { status } = defineProps<{
status: Status
status: mastodon.v1.Status
}>()
const masto = useMasto()
const { data: statusEdits } = useAsyncData(`status:history:${status.id}`, () => masto.statuses.fetchHistory(status.id).then(res => res.reverse()))
const { data: statusEdits } = useAsyncData(`status:history:${status.id}`, () => masto.v1.statuses.listHistory(status.id).then(res => res.reverse()))
const showHistory = (edit: StatusEdit) => {
const showHistory = (edit: mastodon.v1.StatusEdit) => {
openEditHistoryDialog(edit)
}
const timeAgoOptions = useTimeAgoOptions()

4
components/status/edit/StatusEditIndicator.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts">
import type { Status } from 'masto'
import type { mastodon } from 'masto'
const { status } = defineProps<{
status: Status
status: mastodon.v1.Status
inline: boolean
}>()

4
components/status/edit/StatusEditPreview.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts">
import type { StatusEdit } from 'masto'
import type { mastodon } from 'masto'
const { edit } = defineProps<{
edit: StatusEdit
edit: mastodon.v1.StatusEdit
}>()
</script>

10
components/tag/TagActionButton.vue
View file

@ -1,21 +1,21 @@
<script setup lang="ts">
import type { Tag } from 'masto'
import type { mastodon } from 'masto'
const { tag } = defineProps<{
tag: Tag
tag: mastodon.v1.Tag
}>()
const emit = defineEmits<{
(event: 'change'): void
}>()
const { tags } = useMasto()
const masto = useMasto()
const toggleFollowTag = async () => {
if (tag.following)
await tags.unfollow(tag.name)
await masto.v1.tags.unfollow(tag.name)
else
await tags.follow(tag.name)
await masto.v1.tags.follow(tag.name)
emit('change')
}

4
components/tag/TagCard.vue
View file

@ -1,10 +1,10 @@
<script lang="ts" setup>
import type { Tag } from 'masto'
import type { mastodon } from 'masto'
const {
tag,
} = $defineProps<{
tag: Tag
tag: mastodon.v1.Tag
}>()
const to = $computed(() => new URL(tag.url).pathname)

2
components/timeline/TimelineBlocks.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
const paginator = useMasto().blocks.iterate()
const paginator = useMasto().v1.blocks.list()
</script>
<template>

2
components/timeline/TimelineBookmarks.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
const paginator = useMasto().bookmarks.iterate()
const paginator = useMasto().v1.bookmarks.list()
</script>
<template>

2
components/timeline/TimelineConversations.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
const paginator = useMasto().conversations.iterate()
const paginator = useMasto().v1.conversations.list()
</script>
<template>

4
components/timeline/TimelineDomainBlocks.vue
View file

@ -1,9 +1,9 @@
<script setup lang="ts">
const masto = useMasto()
const paginator = masto.domainBlocks.iterate()
const paginator = masto.v1.domainBlocks.list()
const unblock = async (domain: string) => {
await masto.domainBlocks.unblock(domain)
await masto.v1.domainBlocks.unblock(domain)
}
</script>

2
components/timeline/TimelineFavourites.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
const paginator = useMasto().favourites.iterate()
const paginator = useMasto().v1.favourites.list()
</script>
<template>

4
components/timeline/TimelineHome.vue
View file

@ -1,6 +1,6 @@
<script setup lang="ts">
const paginator = useMasto().timelines.iterateHome()
const stream = useMasto().stream.streamUser()
const paginator = useMasto().v1.timelines.listHome()
const stream = useMasto().v1.stream.streamUser()
onBeforeUnmount(() => stream?.then(s => s.disconnect()))
</script>

4
components/timeline/TimelineList.vue
View file

@ -1,8 +1,8 @@
<script setup lang="ts">
import type { Status } from 'masto'
import type { mastodon } from 'masto'
defineProps<{
timelines: Status[]
timelines: mastodon.v1.Status[]
}>()
</script>

4
components/timeline/TimelineMentions.vue
View file

@ -1,11 +1,11 @@
<script setup lang="ts">
// Default limit is 20 notifications, and servers are normally caped to 30
const paginator = useMasto().notifications.iterate({ limit: 30, types: ['mention'] })
const paginator = useMasto().v1.notifications.list({ limit: 30, types: ['mention'] })
const { clearNotifications } = useNotifications()
onActivated(clearNotifications)
const stream = useMasto().stream.streamUser()
const stream = useMasto().v1.stream.streamUser()
</script>
<template>

2
components/timeline/TimelineMutes.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
const paginator = useMasto().mutes.iterate()
const paginator = useMasto().v1.mutes.list()
</script>
<template>

4
components/timeline/TimelineNotifications.vue
View file

@ -1,11 +1,11 @@
<script setup lang="ts">
// Default limit is 20 notifications, and servers are normally caped to 30
const paginator = useMasto().notifications.iterate({ limit: 30 })
const paginator = useMasto().v1.notifications.list({ limit: 30 })
const { clearNotifications } = useNotifications()
onActivated(clearNotifications)
const stream = useMasto().stream.streamUser()
const stream = useMasto().v1.stream.streamUser()
</script>
<template>

10
components/timeline/TimelinePaginator.vue
View file

@ -2,14 +2,14 @@
// @ts-expect-error missing types
import { DynamicScrollerItem } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import type { Account, FilterContext, Paginator, Status, WsEvents } from 'masto'
import type { Paginator, WsEvents, mastodon } from 'masto'
const { paginator, stream, account } = defineProps<{
paginator: Paginator<any, Status[]>
paginator: Paginator<mastodon.v1.Status[], mastodon.v1.ListAccountStatusesParams>
stream?: Promise<WsEvents>
context?: FilterContext
account?: Account
preprocess?: (items: any[]) => any[]
context?: mastodon.v2.FilterContext
account?: mastodon.v1.Account
preprocess?: (items: mastodon.v1.Status[]) => mastodon.v1.Status[]
}>()
const { formatNumber } = useHumanReadableNumber()

2
components/timeline/TimelinePinned.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
const paginator = useMasto().accounts.iterateStatuses(currentUser.value!.account.id, { pinned: true })
const paginator = useMasto().v1.accounts.listStatuses(currentUser.value!.account.id, { pinned: true })
</script>
<template>

4
components/timeline/TimelinePublic.vue
View file

@ -1,6 +1,6 @@
<script setup lang="ts">
const paginator = useMasto().timelines.iteratePublic()
const stream = useMasto().stream.streamPublicTimeline()
const paginator = useMasto().v1.timelines.listPublic()
const stream = useMasto().v1.stream.streamPublicTimeline()
onBeforeUnmount(() => stream.then(s => s.disconnect()))
</script>

4
components/timeline/TimelinePublicLocal.vue
View file

@ -1,6 +1,6 @@
<script setup lang="ts">
const paginator = useMasto().timelines.iteratePublic({ local: true })
const stream = useMasto().stream.streamCommunityTimeline()
const paginator = useMasto().v1.timelines.listPublic({ local: true })
const stream = useMasto().v1.stream.streamCommunityTimeline()
onBeforeUnmount(() => stream.then(s => s.disconnect()))
</script>

4
components/tiptap/TiptapHashtagList.vue
View file

@ -1,9 +1,9 @@
<script setup lang="ts">
import type { Tag } from 'masto'
import type { mastodon } from 'masto'
import CommonScrollIntoView from '../common/CommonScrollIntoView.vue'
const { items, command } = defineProps<{
items: Tag[]
items: mastodon.v1.Tag[]
command: Function
isPending?: boolean
}>()

4
components/tiptap/TiptapMentionList.vue
View file

@ -1,9 +1,9 @@
<script setup lang="ts">
import type { Account } from 'masto'
import type { mastodon } from 'masto'
import CommonScrollIntoView from '../common/CommonScrollIntoView.vue'
const { items, command } = defineProps<{
items: Account[]
items: mastodon.v1.Account[]
command: Function
isPending?: boolean
}>()

3
components/user/UserSignIn.vue
View file

@ -1,7 +1,6 @@
<script setup lang="ts">
import Fuse from 'fuse.js'
import { $fetch } from 'ofetch'
import { DEFAULT_SERVER } from '~/constants'
const input = $ref<HTMLInputElement>()
let server = $ref<string>('')
@ -26,7 +25,7 @@ async function oauth() {
server = server.split('/')[0]
try {
location.href = await $fetch<string>(`/api/${server || DEFAULT_SERVER}/login`, {
location.href = await $fetch<string>(`/api/${server || publicServer.value}/login`, {
method: 'POST',
body: {
origin: location.origin,

30
composables/cache.ts
View file

@ -1,5 +1,5 @@
import LRU from 'lru-cache'
import type { Account, Status } from 'masto'
import type { mastodon } from 'masto'
const cache = new LRU<string, any>({
max: 1000,
@ -17,13 +17,13 @@ function removeCached(key: string) {
cache.delete(key)
}
export function fetchStatus(id: string, force = false): Promise<Status> {
export function fetchStatus(id: string, force = false): Promise<mastodon.v1.Status> {
const server = currentServer.value
const key = `${server}:status:${id}`
const cached = cache.get(key)
if (cached && !force)
return cached
const promise = useMasto().statuses.fetch(id)
const promise = useMasto().v1.statuses.fetch(id)
.then((status) => {
cacheStatus(status)
return status
@ -32,7 +32,7 @@ export function fetchStatus(id: string, force = false): Promise<Status> {
return promise
}
export function fetchAccountById(id?: string | null): Promise<Account | null> {
export function fetchAccountById(id?: string | null): Promise<mastodon.v1.Account | null> {
if (!id)
return Promise.resolve(null)
@ -41,11 +41,11 @@ export function fetchAccountById(id?: string | null): Promise<Account | null> {
const cached = cache.get(key)
if (cached)
return cached
const uri = currentInstance.value?.uri
const promise = useMasto().accounts.fetch(id)
const domain = currentInstance.value?.domain
const promise = useMasto().v1.accounts.fetch(id)
.then((r) => {
if (r.acct && !r.acct.includes('@') && uri)
r.acct = `${r.acct}@${uri}`
if (r.acct && !r.acct.includes('@') && domain)
r.acct = `${r.acct}@${domain}`
cacheAccount(r, server, true)
return r
@ -54,17 +54,17 @@ export function fetchAccountById(id?: string | null): Promise<Account | null> {
return promise
}
export async function fetchAccountByHandle(acct: string): Promise<Account> {
export async function fetchAccountByHandle(acct: string): Promise<mastodon.v1.Account> {
const server = currentServer.value
const key = `${server}:account:${acct}`
const cached = cache.get(key)
if (cached)
return cached
const uri = currentInstance.value?.uri
const account = useMasto().accounts.lookup({ acct })
const domain = currentInstance.value?.domain
const account = useMasto().v1.accounts.lookup({ acct })
.then((r) => {
if (r.acct && !r.acct.includes('@') && uri)
r.acct = `${r.acct}@${uri}`
if (r.acct && !r.acct.includes('@') && domain)
r.acct = `${r.acct}@${domain}`
cacheAccount(r, server, true)
return r
@ -81,7 +81,7 @@ export function useAccountById(id?: string | null) {
return useAsyncState(() => fetchAccountById(id), null).state
}
export function cacheStatus(status: Status, server = currentServer.value, override?: boolean) {
export function cacheStatus(status: mastodon.v1.Status, server = currentServer.value, override?: boolean) {
setCached(`${server}:status:${status.id}`, status, override)
}
@ -89,7 +89,7 @@ export function removeCachedStatus(id: string, server = currentServer.value) {
removeCached(`${server}:status:${id}`)
}
export function cacheAccount(account: Account, server = currentServer.value, override?: boolean) {
export function cacheAccount(account: mastodon.v1.Account, server = currentServer.value, override?: boolean) {
setCached(`${server}:account:${account.id}`, account, override)
setCached(`${server}:account:${account.acct}`, account, override)
}

2
composables/command.ts
View file

@ -2,7 +2,7 @@ import type { ComputedRef } from 'vue'
import { defineStore } from 'pinia'
import Fuse from 'fuse.js'
import type { LocaleObject } from '#i18n'
import type { SearchResult } from '@/components/search/types'
import type { SearchResult } from '~/composables/masto/search'
// @unocss-include

21
composables/content-parse.ts
View file

@ -1,12 +1,12 @@
// @unimport-disable
import type { Emoji } from 'masto'
import type { mastodon } from 'masto'
import type { Node } from 'ultrahtml'
import { ELEMENT_NODE, TEXT_NODE, h, parse, render } from 'ultrahtml'
import { DOCUMENT_NODE, ELEMENT_NODE, TEXT_NODE, h, parse, render } from 'ultrahtml'
import { findAndReplaceEmojisInText } from '@iconify/utils'
import { emojiRegEx, getEmojiAttributes } from '../config/emojis'
export interface ContentParseOptions {
emojis?: Record<string, Emoji>
emojis?: Record<string, mastodon.v1.CustomEmoji>
markdown?: boolean
replaceUnicodeEmoji?: boolean
astTransforms?: Transform[]
@ -79,13 +79,15 @@ export function parseMastodonHTML(
transforms.push(replaceCustomEmoji(options.emojis || {}))
transforms.push(transformParagraphs)
return transformSync(parse(html), transforms)
}
/**
* Converts raw HTML form Mastodon server to HTML for Tiptap editor
*/
export function convertMastodonHTML(html: string, customEmojis: Record<string, Emoji> = {}) {
export function convertMastodonHTML(html: string, customEmojis: Record<string, mastodon.v1.CustomEmoji> = {}) {
const tree = parseMastodonHTML(html, {
emojis: customEmojis,
markdown: true,
@ -285,7 +287,7 @@ function transformUnicodeEmoji(node: Node) {
return matches.filter(Boolean)
}
function replaceCustomEmoji(customEmojis: Record<string, Emoji>): Transform {
function replaceCustomEmoji(customEmojis: Record<string, mastodon.v1.CustomEmoji>): Transform {
return (node) => {
if (node.type !== TEXT_NODE)
return node
@ -313,6 +315,8 @@ const _markdownReplacements: [RegExp, (c: (string | Node)[]) => Node][] = [
[/\*(.*?)\*/g, c => h('em', null, c)],
[/~~(.*?)~~/g, c => h('del', null, c)],
[/`([^`]+?)`/g, c => h('code', null, c)],
// transform @username@twitter.com as links
[/(?:^|\b)@([a-zA-Z0-9_]+)@twitter\.com(?:$|\b)/gi, c => h('a', { href: `https://twitter.com/${c[0]}`, target: '_blank', class: 'mention external' }, `@${c[0]}@twitter.com`)],
]
function _markdownProcess(value: string) {
@ -349,3 +353,10 @@ function transformMarkdown(node: Node) {
return node
return _markdownProcess(node.value)
}
function transformParagraphs(node: Node): Node | Node[] {
// For top level paragraphs, inject an empty <p> to preserve status paragraphs in our editor (except for the last one)
if (node.parent?.type === DOCUMENT_NODE && node.name === 'p' && node.parent.children.at(-1) !== node)
return [node, h('p')]
return node
}

12
composables/dialog.ts
View file

@ -1,14 +1,14 @@
import type { Attachment, Status, StatusEdit } from 'masto'
import type { mastodon } from 'masto'
import type { ConfirmDialogChoice, ConfirmDialogLabel, Draft } from '~/types'
import { STORAGE_KEY_FIRST_VISIT } from '~/constants'
export const confirmDialogChoice = ref<ConfirmDialogChoice>()
export const confirmDialogLabel = ref<ConfirmDialogLabel>()
export const mediaPreviewList = ref<Attachment[]>([])
export const mediaPreviewList = ref<mastodon.v1.MediaAttachment[]>([])
export const mediaPreviewIndex = ref(0)
export const statusEdit = ref<StatusEdit>()
export const statusEdit = ref<mastodon.v1.StatusEdit>()
export const dialogDraftKey = ref<string>()
export const commandPanelInput = ref('')
@ -23,7 +23,7 @@ export const isPreviewHelpOpen = ref(isFirstVisit.value)
export const isCommandPanelOpen = ref(false)
export const isConfirmDialogOpen = ref(false)
export const lastPublishDialogStatus = ref<Status | null>(null)
export const lastPublishDialogStatus = ref<mastodon.v1.Status | null>(null)
export function openSigninDialog() {
isSigninDialogOpen.value = true
@ -80,7 +80,7 @@ if (process.client) {
restoreMediaPreviewFromState()
}
export function openMediaPreview(attachments: Attachment[], index = 0) {
export function openMediaPreview(attachments: mastodon.v1.MediaAttachment[], index = 0) {
mediaPreviewList.value = attachments
mediaPreviewIndex.value = index
isMediaPreviewOpen.value = true
@ -97,7 +97,7 @@ export function closeMediaPreview() {
history.back()
}
export function openEditHistoryDialog(edit: StatusEdit) {
export function openEditHistoryDialog(edit: mastodon.v1.StatusEdit) {
statusEdit.value = edit
isEditHistoryDialogOpen.value = true
}

10
composables/emojis.ts
View file

@ -1,4 +1,4 @@
import type { Emoji } from 'masto'
import type { mastodon } from 'masto'
import type { CustomEmojisInfo } from './push-notifications/types'
import { STORAGE_KEY_CUSTOM_EMOJIS } from '~/constants'
@ -20,14 +20,14 @@ export async function updateCustomEmojis() {
return
const masto = useMasto()
const emojis = await masto.customEmojis.fetchAll()
const emojis = await masto.v1.customEmojis.list()
Object.assign(currentCustomEmojis.value, {
lastUpdate: Date.now(),
emojis,
})
}
function transformEmojiData(emojis: Emoji[]) {
function transformEmojiData(emojis: mastodon.v1.CustomEmoji[]) {
const result = []
for (const emoji of emojis) {
@ -52,9 +52,9 @@ export const customEmojisData = computed(() => currentCustomEmojis.value.emojis.
}]
: undefined)
export function useEmojisFallback(emojisGetter: () => Emoji[] | undefined) {
export function useEmojisFallback(emojisGetter: () => mastodon.v1.CustomEmoji[] | undefined) {
return computed(() => {
const result: Emoji[] = []
const result: mastodon.v1.CustomEmoji[] = []
const emojis = emojisGetter()
if (emojis)
result.push(...emojis)

14
composables/i18n.ts
View file

@ -2,11 +2,11 @@ import type { MaybeComputedRef, MaybeRef, UseTimeAgoOptions } from '@vueuse/core
const formatter = Intl.NumberFormat()
export const formattedNumber = (num: number, useFormatter: Intl.NumberFormat = formatter) => {
export function formattedNumber(num: number, useFormatter: Intl.NumberFormat = formatter) {
return useFormatter.format(num)
}
export const useHumanReadableNumber = () => {
export function useHumanReadableNumber() {
const { n, locale } = useI18n()
const fn = (num: number) => {
@ -29,10 +29,8 @@ export const useHumanReadableNumber = () => {
}
}
export const useFormattedDateTime = (
value: MaybeComputedRef<string | number | Date | undefined | null>,
options: Intl.DateTimeFormatOptions = { dateStyle: 'long', timeStyle: 'medium' },
) => {
export function useFormattedDateTime(value: MaybeComputedRef<string | number | Date | undefined | null>,
options: Intl.DateTimeFormatOptions = { dateStyle: 'long', timeStyle: 'medium' }) {
const { locale } = useI18n()
const formatter = $computed(() => Intl.DateTimeFormat(locale.value, options))
return computed(() => {
@ -41,7 +39,7 @@ export const useFormattedDateTime = (
})
}
export const useTimeAgoOptions = (short = false): UseTimeAgoOptions<false> => {
export function useTimeAgoOptions(short = false): UseTimeAgoOptions<false> {
const { d, t, n: fnf, locale } = useI18n()
const prefix = short ? 'short_' : ''
@ -56,7 +54,7 @@ export const useTimeAgoOptions = (short = false): UseTimeAgoOptions<false> => {
return {
rounding: 'floor',
showSecond: !short,
updateInterval: short ? 60_000 : 1_000,
updateInterval: short ? 60000 : 1000,
messages: {
justNow: t('time_ago_options.just_now'),
// just return the value

18
composables/masto/account.ts
View file

@ -1,26 +1,26 @@
import type { Account } from 'masto'
import type { mastodon } from 'masto'
export function getDisplayName(account?: Account, options?: { rich?: boolean }) {
export function getDisplayName(account?: mastodon.v1.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) {
export function getShortHandle({ acct }: mastodon.v1.Account) {
if (!acct)
return ''
return `@${acct.includes('@') ? acct.split('@')[0] : acct}`
}
export function getServerName(account: Account) {
export function getServerName(account: mastodon.v1.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 || ''
return currentInstance.value?.domain || ''
}
export function getFullHandle(account: Account) {
export function getFullHandle(account: mastodon.v1.Account) {
const handle = `@${account.acct}`
if (!currentUser.value || account.acct.includes('@'))
return handle
@ -36,16 +36,16 @@ export function toShortHandle(fullHandle: string) {
return fullHandle
}
export function extractAccountHandle(account: Account) {
export function extractAccountHandle(account: mastodon.v1.Account) {
let handle = getFullHandle(account).slice(1)
const uri = currentInstance.value?.uri ?? currentServer.value
const uri = currentInstance.value?.domain ?? currentServer.value
if (currentInstance.value && handle.endsWith(`@${uri}`))
handle = handle.slice(0, -uri.length - 1)
return handle
}
export function useAccountHandle(account: Account, fullServer = true) {
export function useAccountHandle(account: mastodon.v1.Account, fullServer = true) {
return computed(() => fullServer
? getFullHandle(account)
: getShortHandle(account),

10
composables/masto/relationship.ts
View file

@ -1,20 +1,20 @@
import type { Account, Relationship } from 'masto'
import type { mastodon } 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>>()
const requestedRelationships = new Map<string, Ref<mastodon.v1.Relationship | undefined>>()
let timeoutHandle: NodeJS.Timeout | undefined
export function useRelationship(account: Account): Ref<Relationship | undefined> {
export function useRelationship(account: mastodon.v1.Account): Ref<mastodon.v1.Relationship | undefined> {
if (!currentUser.value)
return ref()
let relationship = requestedRelationships.get(account.id)
if (relationship)
return relationship
relationship = ref<Relationship | undefined>()
relationship = ref<mastodon.v1.Relationship | undefined>()
requestedRelationships.set(account.id, relationship)
if (timeoutHandle)
clearTimeout(timeoutHandle)
@ -27,7 +27,7 @@ export function useRelationship(account: Account): Ref<Relationship | undefined>
async function fetchRelationships() {
const requested = Array.from(requestedRelationships.entries()).filter(([, r]) => !r.value)
const relationships = await useMasto().accounts.fetchRelationships(requested.map(([id]) => id))
const relationships = await useMasto().v1.accounts.fetchRelationships(requested.map(([id]) => id))
for (let i = 0; i < requested.length; i++)
requested[i][1].value = relationships[i]
}

14
composables/masto/routes.ts
View file

@ -1,7 +1,7 @@
import { withoutProtocol } from 'ufo'
import type { Account, Status } from 'masto'
import type { mastodon } from 'masto'
export function getAccountRoute(account: Account) {
export function getAccountRoute(account: mastodon.v1.Account) {
return useRouter().resolve({
name: 'account-index',
params: {
@ -10,7 +10,7 @@ export function getAccountRoute(account: Account) {
},
})
}
export function getAccountFollowingRoute(account: Account) {
export function getAccountFollowingRoute(account: mastodon.v1.Account) {
return useRouter().resolve({
name: 'account-following',
params: {
@ -19,7 +19,7 @@ export function getAccountFollowingRoute(account: Account) {
},
})
}
export function getAccountFollowersRoute(account: Account) {
export function getAccountFollowersRoute(account: mastodon.v1.Account) {
return useRouter().resolve({
name: 'account-followers',
params: {
@ -29,7 +29,7 @@ export function getAccountFollowersRoute(account: Account) {
})
}
export function getStatusRoute(status: Status) {
export function getStatusRoute(status: mastodon.v1.Status) {
return useRouter().resolve({
name: 'status',
params: {
@ -50,11 +50,11 @@ export function getTagRoute(tag: string) {
})
}
export function getStatusPermalinkRoute(status: Status) {
export function getStatusPermalinkRoute(status: mastodon.v1.Status) {
return status.url ? withoutProtocol(status.url) : null
}
export function getStatusInReplyToRoute(status: Status) {
export function getStatusInReplyToRoute(status: mastodon.v1.Status) {
return useRouter().resolve({
name: 'status-by-id',
params: {

89
composables/masto/search.ts
View file

@ -1,19 +1,64 @@
import type { MaybeRef } from '@vueuse/core'
import type { Account, Paginator, Results, SearchParams, Status } from 'masto'
import type { Paginator, mastodon } from 'masto'
import type { RouteLocation } from 'vue-router'
export interface UseSearchOptions {
type?: MaybeRef<'accounts' | 'hashtags' | 'statuses'>
type?: MaybeRef<mastodon.v2.SearchType>
}
export interface BuildSearchResult<K extends keyof any, T> {
id: string
type: K
data: T
to: RouteLocation & {
href: string
}
}
export type AccountSearchResult = BuildSearchResult<'account', mastodon.v1.Account>
export type HashTagSearchResult = BuildSearchResult<'hashtag', mastodon.v1.Tag>
export type StatusSearchResult = BuildSearchResult<'status', mastodon.v1.Status>
export type SearchResult = HashTagSearchResult | AccountSearchResult | StatusSearchResult
export function useSearch(query: MaybeRef<string>, options?: UseSearchOptions) {
const done = ref(false)
const masto = useMasto()
const loading = ref(false)
const statuses = ref<Status[]>([])
const accounts = ref<Account[]>([])
const hashtags = ref<any[]>([])
const accounts = ref<AccountSearchResult[]>([])
const hashtags = ref<HashTagSearchResult[]>([])
const statuses = ref<StatusSearchResult[]>([])
let paginator: Paginator<SearchParams, Results> | undefined
let paginator: Paginator<mastodon.v2.Search, mastodon.v2.SearchParams> | undefined
const appendResults = (results: mastodon.v2.Search, empty = false) => {
if (empty) {
accounts.value = []
hashtags.value = []
statuses.value = []
}
accounts.value = [...accounts.value, ...results.accounts.map<AccountSearchResult>(account => ({
type: 'account',
id: account.id,
data: account,
to: getAccountRoute(account),
}))]
hashtags.value = [...hashtags.value, ...results.hashtags.map<HashTagSearchResult>(hashtag => ({
type: 'hashtag',
id: `hashtag-${hashtag.name}`,
data: hashtag,
to: getTagRoute(hashtag.name),
}))]
statuses.value = [...statuses.value, ...results.statuses.map<StatusSearchResult>(status => ({
type: 'status',
id: status.id,
data: status,
to: getStatusRoute(status),
}))]
}
watch(() => unref(query), () => {
loading.value = !!(unref(query) && isMastoInitialised.value)
})
debouncedWatch(() => unref(query), async () => {
if (!unref(query) || !isMastoInitialised.value)
@ -25,17 +70,19 @@ export function useSearch(query: MaybeRef<string>, options?: UseSearchOptions) {
* Based on the source it seems like modifying the params when calling next would result in a new search,
* but that doesn't seem to be the case. So instead we just create a new paginator with the new params.
*/
paginator = masto.search({ q: unref(query), resolve: !!currentUser.value, type: unref(options?.type) })
paginator = masto.v2.search({
q: unref(query),
resolve: !!currentUser.value,
type: unref(options?.type),
})
const nextResults = await paginator.next()
done.value = nextResults.done || false
statuses.value = nextResults.value?.statuses || []
accounts.value = nextResults.value?.accounts || []
hashtags.value = nextResults.value?.hashtags || []
done.value = !!nextResults.done
if (!nextResults.done)
appendResults(nextResults.value, true)
loading.value = false
}, { debounce: 500 })
}, { debounce: 300 })
const next = async () => {
if (!unref(query) || !isMastoInitialised.value || !paginator)
@ -45,19 +92,9 @@ export function useSearch(query: MaybeRef<string>, options?: UseSearchOptions) {
const nextResults = await paginator.next()
loading.value = false
done.value = nextResults.done || false
statuses.value = [
...statuses.value,
...(nextResults.value.statuses || []),
]
accounts.value = [
...statuses.value,
...(nextResults.value.accounts || []),
]
hashtags.value = [
...statuses.value,
...(nextResults.value.statuses || []),
]
done.value = !!nextResults.done
if (!nextResults.done)
appendResults(nextResults.value)
}
return {

18
composables/masto/status.ts
View file

@ -1,14 +1,14 @@
import type { Status } from 'masto'
import type { mastodon } from 'masto'
type Action = 'reblogged' | 'favourited' | 'bookmarked' | 'pinned' | 'muted'
type CountField = 'reblogsCount' | 'favouritesCount'
export interface StatusActionsProps {
status: Status
status: mastodon.v1.Status
}
export function useStatusActions(props: StatusActionsProps) {
let status = $ref<Status>({ ...props.status })
let status = $ref<mastodon.v1.Status>({ ...props.status })
const masto = useMasto()
watch(
@ -27,7 +27,7 @@ export function useStatusActions(props: StatusActionsProps) {
muted: false,
})
async function toggleStatusAction(action: Action, fetchNewStatus: () => Promise<Status>, countField?: CountField) {
async function toggleStatusAction(action: Action, fetchNewStatus: () => Promise<mastodon.v1.Status>, countField?: CountField) {
// check login
if (!checkLogin())
return
@ -46,7 +46,7 @@ export function useStatusActions(props: StatusActionsProps) {
}
const toggleReblog = () => toggleStatusAction(
'reblogged',
() => masto.statuses[status.reblogged ? 'unreblog' : 'reblog'](status.id).then((res) => {
() => masto.v1.statuses[status.reblogged ? 'unreblog' : 'reblog'](status.id).then((res) => {
if (status.reblogged)
// returns the original status
return res.reblog!
@ -57,23 +57,23 @@ export function useStatusActions(props: StatusActionsProps) {
const toggleFavourite = () => toggleStatusAction(
'favourited',
() => masto.statuses[status.favourited ? 'unfavourite' : 'favourite'](status.id),
() => masto.v1.statuses[status.favourited ? 'unfavourite' : 'favourite'](status.id),
'favouritesCount',
)
const toggleBookmark = () => toggleStatusAction(
'bookmarked',
() => masto.statuses[status.bookmarked ? 'unbookmark' : 'bookmark'](status.id),
() => masto.v1.statuses[status.bookmarked ? 'unbookmark' : 'bookmark'](status.id),
)
const togglePin = async () => toggleStatusAction(
'pinned',
() => masto.statuses[status.pinned ? 'unpin' : 'pin'](status.id),
() => masto.v1.statuses[status.pinned ? 'unpin' : 'pin'](status.id),
)
const toggleMute = async () => toggleStatusAction(
'muted',
() => masto.statuses[status.muted ? 'unmute' : 'mute'](status.id),
() => masto.v1.statuses[status.muted ? 'unmute' : 'mute'](status.id),
)
return {

12
composables/masto/statusDrafts.ts
View file

@ -1,4 +1,4 @@
import type { Account, CreateStatusParams, Status } from 'masto'
import type { mastodon } from 'masto'
import { STORAGE_KEY_DRAFTS } from '~/constants'
import type { Draft, DraftMap } from '~/types'
import type { Mutable } from '~/types/utils'
@ -10,7 +10,7 @@ export const builtinDraftKeys = [
'home',
]
export function getDefaultDraft(options: Partial<Mutable<CreateStatusParams> & Omit<Draft, 'params'>> = {}): Draft {
export function getDefaultDraft(options: Partial<Mutable<mastodon.v1.CreateStatusParams> & Omit<Draft, 'params'>> = {}): Draft {
const {
attachments = [],
initialText = '',
@ -38,7 +38,7 @@ export function getDefaultDraft(options: Partial<Mutable<CreateStatusParams> & O
}
}
export async function getDraftFromStatus(status: Status): Promise<Draft> {
export async function getDraftFromStatus(status: mastodon.v1.Status): Promise<Draft> {
return getDefaultDraft({
status: await convertMastodonHTML(status.content),
mediaIds: status.mediaAttachments.map(att => att.id),
@ -54,7 +54,7 @@ function mentionHTML(acct: string) {
return `<span data-type="mention" data-id="${acct}" contenteditable="false">@${acct}</span>`
}
export function getReplyDraft(status: Status) {
export function getReplyDraft(status: mastodon.v1.Status) {
const accountsToMention: string[] = []
const userId = currentUser.value?.account.id
if (status.account.id !== userId)
@ -112,13 +112,13 @@ export function useDraft(
return { draft, isEmpty }
}
export function mentionUser(account: Account) {
export function mentionUser(account: mastodon.v1.Account) {
openPublishDialog('dialog', getDefaultDraft({
status: `@${account.acct} `,
}), true)
}
export function directMessageUser(account: Account) {
export function directMessageUser(account: mastodon.v1.Account) {
openPublishDialog('dialog', getDefaultDraft({
status: `@${account.acct} `,
visibility: 'direct',

6
composables/masto/translate.ts
View file

@ -1,4 +1,4 @@
import type { Status, StatusEdit } from 'masto'
import type { mastodon } from 'masto'
export interface TranslationResponse {
translatedText: string
@ -24,9 +24,9 @@ export async function translateText(text: string, from?: string | null, to?: str
return translatedText
}
const translations = new WeakMap<Status | StatusEdit, { visible: boolean; text: string }>()
const translations = new WeakMap<mastodon.v1.Status | mastodon.v1.StatusEdit, { visible: boolean; text: string }>()
export function useTranslation(status: Status | StatusEdit) {
export function useTranslation(status: mastodon.v1.Status | mastodon.v1.StatusEdit) {
if (!translations.has(status))
translations.set(status, reactive({ visible: false, text: '' }))

4
composables/misc.ts
View file

@ -1,4 +1,4 @@
import type { Emoji } from 'masto'
import type { mastodon } from 'masto'
export const UserLinkRE = /^https?:\/\/([^/]+)\/@([^/]+)$/
export const TagLinkRE = /^https?:\/\/([^/]+)\/tags\/([^/]+)$/
@ -21,7 +21,7 @@ export function getDataUrlFromArr(arr: Uint8ClampedArray, w: number, h: number)
return canvas.toDataURL()
}
export function emojisArrayToObject(emojis: Emoji[]) {
export function emojisArrayToObject(emojis: mastodon.v1.CustomEmoji[]) {
return Object.fromEntries(emojis.map(i => [i.shortcode, i]))
}

4
composables/paginator.ts
View file

@ -2,8 +2,8 @@ import type { Paginator, WsEvents } from 'masto'
import type { PaginatorState } from '~/types'
import { onReactivated } from '~/composables/vue'
export function usePaginator<T>(
paginator: Paginator<any, T[]>,
export function usePaginator<T, P>(
paginator: Paginator<T[], P>,
stream?: Promise<WsEvents>,
eventType: 'notification' | 'update' = 'update',
preprocess: (items: T[]) => T[] = (items: T[]) => items,

20
composables/push-notifications/createPushSubscription.ts
View file

@ -1,8 +1,4 @@
import type {
CreatePushSubscriptionParams,
PushSubscription as MastoPushSubscription,
SubscriptionPolicy,
} from 'masto'
import type { mastodon } from 'masto'
import type {
CreatePushNotification,
PushManagerSubscriptionInfo,
@ -12,14 +8,14 @@ import type {
export const createPushSubscription = async (
user: RequiredUserLogin,
notificationData: CreatePushNotification,
policy: SubscriptionPolicy = 'all',
policy: mastodon.v1.SubscriptionPolicy = 'all',
force = false,
): Promise<MastoPushSubscription | undefined> => {
): Promise<mastodon.v1.WebPushSubscription | undefined> => {
const { server: serverEndpoint, vapidKey } = user
return await getRegistration()
.then(getPushSubscription)
.then(({ registration, subscription }): Promise<MastoPushSubscription | undefined> => {
.then(({ registration, subscription }): Promise<mastodon.v1.WebPushSubscription | undefined> => {
if (subscription) {
const currentServerKey = (new Uint8Array(subscription.options.applicationServerKey!)).toString()
const subscriptionServerKey = urlBase64ToUint8Array(vapidKey).toString()
@ -114,10 +110,10 @@ async function removePushNotificationDataOnError(e: Error) {
async function sendSubscriptionToBackend(
subscription: PushSubscription,
data: CreatePushNotification,
policy: SubscriptionPolicy,
): Promise<MastoPushSubscription> {
policy: mastodon.v1.SubscriptionPolicy,
): Promise<mastodon.v1.WebPushSubscription> {
const { endpoint, keys } = subscription.toJSON()
const params: CreatePushSubscriptionParams = {
const params: mastodon.v1.CreateWebPushSubscriptionParams = {
policy,
subscription: {
endpoint: endpoint!,
@ -129,5 +125,5 @@ async function sendSubscriptionToBackend(
data,
}
return await useMasto().pushSubscriptions.create(params)
return await useMasto().v1.webPushSubscriptions.create(params)
}

12
composables/push-notifications/types.ts
View file

@ -1,4 +1,4 @@
import type { Emoji, PushSubscription as MastoPushSubscription, PushSubscriptionAlerts, SubscriptionPolicy } from 'masto'
import type { mastodon } from 'masto'
import type { UserLogin } from '~/types'
@ -9,18 +9,18 @@ export interface PushManagerSubscriptionInfo {
}
export interface RequiredUserLogin extends Required<Omit<UserLogin, 'account' | 'pushSubscription'>> {
pushSubscription?: MastoPushSubscription
pushSubscription?: mastodon.v1.WebPushSubscription
}
export interface CreatePushNotification {
alerts?: Partial<PushSubscriptionAlerts> | null
policy?: SubscriptionPolicy
alerts?: Partial<mastodon.v1.WebPushSubscriptionAlerts> | null
policy?: mastodon.v1.SubscriptionPolicy
}
export type PushNotificationRequest = Record<string, boolean>
export type PushNotificationPolicy = Record<string, SubscriptionPolicy>
export type PushNotificationPolicy = Record<string, mastodon.v1.SubscriptionPolicy>
export interface CustomEmojisInfo {
lastUpdate: number
emojis: Emoji[]
emojis: mastodon.v1.CustomEmoji[]
}

8
composables/push-notifications/usePushManager.ts
View file

@ -1,4 +1,4 @@
import type { SubscriptionPolicy } from 'masto'
import type { mastodon } from 'masto'
import type {
CreatePushNotification,
PushNotificationPolicy,
@ -62,7 +62,7 @@ export const usePushManager = () => {
const subscribe = async (
notificationData?: CreatePushNotification,
policy?: SubscriptionPolicy,
policy?: mastodon.v1.SubscriptionPolicy,
force?: boolean,
): Promise<SubscriptionResult> => {
if (!isSupported)
@ -117,7 +117,7 @@ export const usePushManager = () => {
await removePushNotificationData(currentUser.value)
}
const saveSettings = async (policy?: SubscriptionPolicy) => {
const saveSettings = async (policy?: mastodon.v1.SubscriptionPolicy) => {
if (policy)
pushNotificationData.value.policy = policy
@ -168,7 +168,7 @@ export const usePushManager = () => {
if (policyChanged)
await subscribe(data, policy, true)
else
currentUser.value.pushSubscription = await masto.pushSubscriptions.update({ data })
currentUser.value.pushSubscription = await masto.v1.webPushSubscriptions.update({ data })
policyChanged && await nextTick()

3
composables/status.ts Normal file
View file

@ -0,0 +1,3 @@
import type { mastodon } from 'masto'
export const navigateToStatus = ({ status, focusReply = false }: { status: mastodon.v1.Status; focusReply?: boolean }) => navigateTo({ path: getStatusRoute(status).href, state: { focusReply } })

6
composables/timeline.ts
View file

@ -1,15 +1,15 @@
import type { Status } from 'masto'
import type { mastodon } from 'masto'
const maxDistance = 10
const maxSteps = 1000
// Checks if (b) is a reply to (a)
function areStatusesConsecutive(a: Status, b: Status) {
function areStatusesConsecutive(a: mastodon.v1.Status, b: mastodon.v1.Status) {
const inReplyToId = b.inReplyToId ?? b.reblog?.inReplyToId
return !!inReplyToId && (inReplyToId === a.reblog?.id || inReplyToId === a.id)
}
export function reorderedTimeline(items: Status[]) {
export function reorderedTimeline(items: mastodon.v1.Status[]) {
let steps = 0
const newItems = [...items]
for (let i = items.length - 1; i > 0; i--) {

4
composables/tiptap/suggestion.ts
View file

@ -14,7 +14,7 @@ export const MentionSuggestion: Partial<SuggestionOptions> = {
if (query.length === 0)
return []
const mentionPaginator = useMasto().search({ q: query, type: 'accounts', limit: 25, resolve: true })
const mentionPaginator = useMasto().v2.search({ q: query, type: 'accounts', limit: 25, resolve: true })
const results = await mentionPaginator.next()
return results.value.accounts
@ -29,7 +29,7 @@ export const HashtagSuggestion: Partial<SuggestionOptions> = {
if (query.length === 0)
return []
const paginator = useMasto().search({ q: query, type: 'hashtags', limit: 25, resolve: true })
const paginator = useMasto().v2.search({ q: query, type: 'hashtags', limit: 25, resolve: true })
const results = await paginator.next()
return results.value.hashtags

Some files were not shown because too many files have changed in this diff Show more