zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

feat: add threaded drafts & posts (#2715)

Browse source 
Co-authored-by: Sebastian Di Luzio <sebastian.di-luzio@iu.org>
Co-authored-by: Emanuel Pina <contacto@emanuelpina.pt>
Co-authored-by: lazzzis <lazzzis@outlook.com>
Co-authored-by: Joaquín Sánchez <userquin@gmail.com>
Co-authored-by: TAKAHASHI Shuuji <shuuji3@gmail.com>
Co-authored-by: Francesco <129339155+katullo11@users.noreply.github.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: patak-dev <matias.capeletto@gmail.com>
This commit is contained in:
Sebastian Di Luzio 2024-04-08 11:53:26 +02:00 • committed by GitHub
parent 0538f97ada
commit 1234fb2dd1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 634 additions and 377 deletions
Download patch file Download diff file Expand all files Collapse all files

6
composables/dialog.ts
View file

@ -1,5 +1,5 @@
import type { mastodon } from 'masto'
import type { ConfirmDialogChoice, ConfirmDialogOptions, Draft, ErrorDialogData } from '~/types'
import type { ConfirmDialogChoice, ConfirmDialogOptions, DraftItem, ErrorDialogData } from '~/types'
import { STORAGE_KEY_FIRST_VISIT } from '~/constants'
export const confirmDialogChoice = ref<ConfirmDialogChoice>()
@ -49,7 +49,7 @@ export async function openConfirmDialog(label: ConfirmDialogOptions | string): P
return confirmDialogChoice.value!
}
export async function openPublishDialog(draftKey = 'dialog', draft?: Draft, overwrite = false): Promise<void> {
export async function openPublishDialog(draftKey = 'dialog', draft?: DraftItem, overwrite = false): Promise<void> {
dialogDraftKey.value = draftKey
if (draft) {
@ -65,7 +65,7 @@ export async function openPublishDialog(draftKey = 'dialog', draft?: Draft, over
}
if (overwrite || !currentUserDrafts.value[draftKey])
currentUserDrafts.value[draftKey] = draft
currentUserDrafts.value[draftKey] = [draft]
}
isPublishDialogOpen.value = true

55
composables/masto/publish.ts
View file

@ -1,16 +1,19 @@
import { fileOpen } from 'browser-fs-access'
import type { Ref } from 'vue'
import type { mastodon } from 'masto'
import type { UseDraft } from './statusDrafts'
import type { Draft } from '~~/types'
import type { DraftItem } from '~~/types'
export function usePublish(options: {
draftState: UseDraft
draftItem: Ref<DraftItem>
expanded: Ref<boolean>
isUploading: Ref<boolean>
initialDraft: Ref<() => Draft>
isPartOfThread: boolean
initialDraft: () => DraftItem
}) {
const { draft, isEmpty } = options.draftState
const { draftItem } = options
const isEmpty = computed(() => isEmptyDraft([draftItem.value]))
const { client } = useMasto()
const settings = useUserSettings()
@ -22,18 +25,18 @@ export function usePublish(options: {
const publishSpoilerText = computed({
get() {
return draft.value.params.sensitive ? draft.value.params.spoilerText : ''
return draftItem.value.params.sensitive ? draftItem.value.params.spoilerText : ''
},
set(val) {
if (!draft.value.params.sensitive)
if (!draftItem.value.params.sensitive)
return
draft.value.params.spoilerText = val
draftItem.value.params.spoilerText = val
},
})
const shouldExpanded = computed(() => options.expanded.value || isExpanded.value || !isEmpty.value)
const isPublishDisabled = computed(() => {
const { params, attachments } = draft.value
const { params, attachments } = draftItem.value
const firstEmptyInputIndex = params.poll?.options.findIndex(option => option.trim().length === 0)
return isEmpty.value
|| options.isUploading.value
@ -54,7 +57,7 @@ export function usePublish(options: {
))
})
watch(draft, () => {
watch(draftItem, () => {
if (failedMessages.value.length > 0)
failedMessages.value.length = 0
}, { deep: true })
@ -63,14 +66,14 @@ export function usePublish(options: {
if (isPublishDisabled.value)
return
let content = htmlToText(draft.value.params.status || '')
if (draft.value.mentions?.length)
content = `${draft.value.mentions.map(i => `@${i}`).join(' ')} ${content}`
let content = htmlToText(draftItem.value.params.status || '')
if (draftItem.value.mentions?.length)
content = `${draftItem.value.mentions.map(i => `@${i}`).join(' ')} ${content}`
let poll
if (draft.value.params.poll) {
let options = draft.value.params.poll.options
if (draftItem.value.params.poll) {
let options = draftItem.value.params.poll.options
if (currentInstance.value?.configuration !== undefined
&& (
@ -80,15 +83,15 @@ export function usePublish(options: {
)
options = options.slice(0, options.length - 1)
poll = { ...draft.value.params.poll, options }
poll = { ...draftItem.value.params.poll, options }
}
const payload = {
...draft.value.params,
...draftItem.value.params,
spoilerText: publishSpoilerText.value,
status: content,
mediaIds: draft.value.attachments.map(a => a.id),
language: draft.value.params.language || preferredLanguage.value,
mediaIds: draftItem.value.attachments.map(a => a.id),
language: draftItem.value.params.language || preferredLanguage.value,
poll,
...(isGlitchEdition.value ? { 'content-type': 'text/markdown' } : {}),
} as mastodon.rest.v1.CreateStatusParams
@ -96,7 +99,7 @@ export function usePublish(options: {
if (import.meta.dev) {
// eslint-disable-next-line no-console
console.info({
raw: draft.value.params.status,
raw: draftItem.value.params.status,
...payload,
})
// eslint-disable-next-line no-alert
@ -109,23 +112,23 @@ export function usePublish(options: {
isSending.value = true
let status: mastodon.v1.Status
if (!draft.value.editingStatus) {
if (!draftItem.value.editingStatus) {
status = await client.value.v1.statuses.create(payload)
}
else {
status = await client.value.v1.statuses.$select(draft.value.editingStatus.id).update({
status = await client.value.v1.statuses.$select(draftItem.value.editingStatus.id).update({
...payload,
mediaAttributes: draft.value.attachments.map(media => ({
mediaAttributes: draftItem.value.attachments.map(media => ({
id: media.id,
description: media.description,
})),
})
}
if (draft.value.params.inReplyToId)
if (draftItem.value.params.inReplyToId && !options.isPartOfThread)
navigateToStatus({ status })
draft.value = options.initialDraft.value()
draftItem.value = options.initialDraft()
return status
}
@ -152,7 +155,7 @@ export function usePublish(options: {
export type MediaAttachmentUploadError = [filename: string, message: string]
export function useUploadMediaAttachment(draft: Ref<Draft>) {
export function useUploadMediaAttachment(draft: Ref<DraftItem>) {
const { client } = useMasto()
const { t } = useI18n()
const { formatFileSize } = useFileSizeFormatter()

77
composables/masto/statusDrafts.ts
View file

@ -1,7 +1,7 @@
import type { mastodon } from 'masto'
import type { ComputedRef, Ref } from 'vue'
import { STORAGE_KEY_DRAFTS } from '~/constants'
import type { Draft, DraftMap } from '~/types'
import type { DraftItem, DraftMap } from '~/types'
import type { Mutable } from '~/types/utils'
export const currentUserDrafts = (import.meta.server || process.test)
@ -25,7 +25,7 @@ function getDefaultVisibility(currentVisibility: mastodon.v1.StatusVisibility) {
: preferredVisibility
}
export function getDefaultDraft(options: Partial<Mutable<mastodon.rest.v1.CreateStatusParams> & Omit<Draft, 'params'>> = {}): Draft {
export function getDefaultDraftItem(options: Partial<Mutable<mastodon.rest.v1.CreateStatusParams> & Omit<DraftItem, 'params'>> = {}): DraftItem {
const {
attachments = [],
initialText = '',
@ -56,7 +56,7 @@ export function getDefaultDraft(options: Partial<Mutable<mastodon.rest.v1.Create
}
}
export async function getDraftFromStatus(status: mastodon.v1.Status): Promise<Draft> {
export async function getDraftFromStatus(status: mastodon.v1.Status): Promise<DraftItem> {
const info = {
status: await convertMastodonHTML(status.content),
visibility: status.visibility,
@ -67,7 +67,7 @@ export async function getDraftFromStatus(status: mastodon.v1.Status): Promise<Dr
inReplyToId: status.inReplyToId,
}
return getDefaultDraft((status.mediaAttachments !== undefined && status.mediaAttachments.length > 0)
return getDefaultDraftItem((status.mediaAttachments !== undefined && status.mediaAttachments.length > 0)
? { ...info, mediaIds: status.mediaAttachments.map(att => att.id) }
: {
...info,
@ -99,7 +99,7 @@ export function getReplyDraft(status: mastodon.v1.Status) {
return {
key: `reply-${status.id}`,
draft: () => {
return getDefaultDraft({
return getDefaultDraftItem({
initialText: '',
inReplyToId: status!.id,
sensitive: status.sensitive,
@ -112,40 +112,51 @@ export function getReplyDraft(status: mastodon.v1.Status) {
}
}
export function isEmptyDraft(draft: Draft | null | undefined) {
if (!draft)
export function isEmptyDraft(drafts: Array<DraftItem> | DraftItem | null | undefined) {
if (!drafts)
return true
const { params, attachments } = draft
const status = params.status || ''
const text = htmlToText(status).trim().replace(/^(@\S+\s?)+/, '').replaceAll(/```/g, '').trim()
return (text.length === 0)
&& attachments.length === 0
const draftsArray: Array<DraftItem> = Array.isArray(drafts) ? drafts : [drafts]
if (draftsArray.length === 0)
return true
const anyDraftHasContent = draftsArray.some((draft) => {
const { params, attachments } = draft
const status = params.status ?? ''
const text = htmlToText(status).trim().replace(/^(@\S+\s?)+/, '').replaceAll(/```/g, '').trim()
return (text.length > 0)
|| (attachments.length > 0)
})
return !anyDraftHasContent
}
export interface UseDraft {
draft: Ref<Draft>
isEmpty: ComputedRef<boolean>
draftItems: Ref<Array<DraftItem>>
isEmpty: ComputedRef<boolean> | Ref<boolean>
}
export function useDraft(
draftKey?: string,
initial: () => Draft = () => getDefaultDraft({}),
draftKey: string,
initial: () => DraftItem = () => getDefaultDraftItem({}),
): UseDraft {
const draft = draftKey
? computed({
get() {
if (!currentUserDrafts.value[draftKey])
currentUserDrafts.value[draftKey] = initial()
return currentUserDrafts.value[draftKey]
},
set(val) {
currentUserDrafts.value[draftKey] = val
},
})
: ref(initial())
const draftItems = computed({
get() {
if (!currentUserDrafts.value[draftKey])
currentUserDrafts.value[draftKey] = [initial()]
const drafts = currentUserDrafts.value[draftKey]
if (Array.isArray(drafts))
return drafts
return [drafts]
},
set(val) {
currentUserDrafts.value[draftKey] = val
},
})
const isEmpty = computed(() => isEmptyDraft(draft.value))
const isEmpty = computed(() => isEmptyDraft(draftItems.value))
onUnmounted(async () => {
// Remove draft if it's empty
@ -155,17 +166,17 @@ export function useDraft(
}
})
return { draft, isEmpty }
return { draftItems, isEmpty }
}
export function mentionUser(account: mastodon.v1.Account) {
openPublishDialog('dialog', getDefaultDraft({
openPublishDialog('dialog', getDefaultDraftItem({
status: `@${account.acct} `,
}))
}
export function directMessageUser(account: mastodon.v1.Account) {
openPublishDialog('dialog', getDefaultDraft({
openPublishDialog('dialog', getDefaultDraftItem({
status: `@${account.acct} `,
visibility: 'direct',
}))
@ -175,7 +186,7 @@ export function clearEmptyDrafts() {
for (const key in currentUserDrafts.value) {
if (builtinDraftKeys.includes(key) && !isEmptyDraft(currentUserDrafts.value[key]))
continue
if (!currentUserDrafts.value[key].params || isEmptyDraft(currentUserDrafts.value[key]))
if (isEmptyDraft(currentUserDrafts.value[key]))
delete currentUserDrafts.value[key]
}
}

94
composables/thread.ts Normal file
View file

@ -0,0 +1,94 @@
import type { mastodon } from 'masto'
import type { DraftItem } from '~/types'
const maxThreadLength = 99
export function useThreadComposer(draftKey: string, initial?: () => DraftItem) {
const { draftItems } = useDraft(draftKey, initial)
/**
* Whether the thread is active (has more than one item)
*/
const threadIsActive = computed<boolean>(() => draftItems.value.length > 1)
/**
* Add an item to the thread
*/
function addThreadItem() {
if (draftItems.value.length >= maxThreadLength) {
// TODO handle with error message that tells the user what's wrong
// For now just fail silently without breaking anything
return
}
const lastItem = draftItems.value[draftItems.value.length - 1]
draftItems.value.push(getDefaultDraftItem({
language: lastItem.params.language,
sensitive: lastItem.params.sensitive,
spoilerText: lastItem.params.spoilerText,
visibility: lastItem.params.visibility,
}))
}
/**
*
* @param index index of the draft to remove from the thread
*/
function removeThreadItem(index: number) {
draftItems.value.splice(index, 1)
}
/**
* Publish all items in the thread in order
*/
async function publishThread() {
const allFailedMessages: Array<string> = []
const isAReplyThread = Boolean(draftItems.value[0].params.inReplyToId)
let lastPublishedStatus: mastodon.v1.Status | null = null
let amountPublished = 0
for (const draftItem of draftItems.value) {
if (lastPublishedStatus)
draftItem.params.inReplyToId = lastPublishedStatus.id
const { publishDraft, failedMessages } = usePublish({
draftItem: ref(draftItem),
expanded: computed(() => true),
isUploading: ref(false),
initialDraft: () => draftItem,
isPartOfThread: true,
})
const status = await publishDraft()
if (status) {
lastPublishedStatus = status
amountPublished++
}
else {
allFailedMessages.push(...failedMessages.value)
// Stop publishing if one fails
break
}
}
// Remove all published items from the thread
draftItems.value.splice(0, amountPublished)
// If we have errors, return them
if (allFailedMessages.length > 0)
return allFailedMessages
// If the thread was a reply and all items were published, jump to it
if (isAReplyThread && lastPublishedStatus && draftItems.value.length === 0)
navigateToStatus({ status: lastPublishedStatus })
return lastPublishedStatus
}
return {
threadItems: draftItems,
threadIsActive,
addThreadItem,
removeThreadItem,
publishThread,
}
}