diff --git a/components/publish/PublishButton.vue b/components/publish/PublishButton.vue index 8e2eebf0..e0e1e7b6 100644 --- a/components/publish/PublishButton.vue +++ b/components/publish/PublishButton.vue @@ -1,5 +1,13 @@ +<script setup lang="ts"> +function openDialog() { + if (dialogDraft.draft.value.editingStatus) + openPublishDialog(getDefaultDraft()) + else openPublishDialog() +} +</script> + <template> - <button btn-outline rounded-full font-bold py4 flex="~ gap2 center" @click="openPublishDialog"> + <button btn-outline rounded-full font-bold py4 flex="~ gap2 center" @click="openDialog"> <div i-ri:quill-pen-line /> Compose </button> diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue index f8a8933a..3b5ff869 100644 --- a/components/publish/PublishWidget.vue +++ b/components/publish/PublishWidget.vue @@ -85,10 +85,7 @@ async function publish() { await masto.statuses.create(status) else await masto.statuses.update(draft.editingStatus.id, status) - draft = { - params: getDefaultStatus(inReplyToId), - attachments: [], - } + draft = getDefaultDraft(inReplyToId) isPublishDialogOpen.value = false } finally { @@ -106,7 +103,7 @@ onUnmounted(() => { </script> <template> - <div v-if="currentUser" flex="~ col"> + <div v-if="currentUser" flex="~ col gap-1"> <template v-if="draft.editingStatus"> <div flex="~ col gap-1"> <div text-gray self-center> @@ -116,6 +113,7 @@ onUnmounted(() => { </div> <div border="b dashed gray/40" /> </template> + <div p4 flex gap-4> <AccountAvatar :account="currentUser.account" w-12 h-12 /> <div diff --git a/components/status/StatusActions.vue b/components/status/StatusActions.vue index 00d35af2..531df711 100644 --- a/components/status/StatusActions.vue +++ b/components/status/StatusActions.vue @@ -84,23 +84,31 @@ const deleteAndRedraft = async () => { // TODO confirm to overwrite } - dialogDraft.draft.value = { + openPublishDialog({ params: { ...getParamsFromStatus(status), status: text! }, attachments: [], - } - openPublishDialog() + }) } function editStatus() { if (!dialogDraft.isEmpty) { // TODO confirm to overwrite } - dialogDraft.draft.value = { + openPublishDialog({ editingStatus: status, params: getParamsFromStatus(status), attachments: [], - } - openPublishDialog() + }) +} + +function mention() { + openPublishDialog({ + params: { + ...getParamsFromStatus(status), + status: `@${status.account.acct} `, + }, + attachments: [], + }) } </script> @@ -172,32 +180,40 @@ function editStatus() { </CommonDropdownItem> <template v-if="isAuthor"> - <!-- TODO --> <CommonDropdownItem - v-if="isAuthor" icon="i-ri:pushpin-line" + icon="i-ri:pushpin-line" @click="togglePin" > {{ status.pinned ? 'Unpin on profile' : 'Pin on profile' }} </CommonDropdownItem> - <CommonDropdownItem v-if="isAuthor" icon="i-ri:edit-line" @click="editStatus"> + <CommonDropdownItem icon="i-ri:edit-line" @click="editStatus"> Edit </CommonDropdownItem> <CommonDropdownItem - v-if="isAuthor" icon="i-ri:delete-bin-line" text-red-600 + icon="i-ri:delete-bin-line" text-red-600 @click="deleteStatus" > Delete </CommonDropdownItem> <CommonDropdownItem - v-if="isAuthor" icon="i-ri:eraser-line" text-red-600 + icon="i-ri:eraser-line" text-red-600 @click="deleteAndRedraft" > Delete & re-draft </CommonDropdownItem> </template> + <!-- TODO not available when not the same server --> + <template v-else> + <CommonDropdownItem + icon="i-ri:at-line" + @click="mention" + > + Mention @{{ status.account.acct }} + </CommonDropdownItem> + </template> </div> </template> </CommonDropdown> diff --git a/composables/dialog.ts b/composables/dialog.ts index fd375fe9..429af5db 100644 --- a/composables/dialog.ts +++ b/composables/dialog.ts @@ -1,3 +1,4 @@ +import type { Draft } from './statusDrafts' import { STORAGE_KEY_FIRST_VISIT, STORAGE_KEY_ZEN_MODE } from '~/constants' export const isFirstVisit = useLocalStorage(STORAGE_KEY_FIRST_VISIT, true) @@ -22,7 +23,9 @@ export function openPreviewHelp() { isPreviewHelpOpen.value = true } -export function openPublishDialog() { +export function openPublishDialog(draft?: Draft) { + if (draft) + dialogDraft.draft.value = draft isPublishDialogOpen.value = true } diff --git a/composables/statusDrafts.ts b/composables/statusDrafts.ts index efe9f7c3..c804a923 100644 --- a/composables/statusDrafts.ts +++ b/composables/statusDrafts.ts @@ -1,12 +1,15 @@ -import type { Attachment, CreateStatusParams, CreateStatusParamsWithStatus, Status } from 'masto' +import type { Attachment, CreateStatusParams, Status } from 'masto' import { STORAGE_KEY_DRAFTS } from '~/constants' import type { Mutable } from '~/types/utils' -export type DraftMap = Record<string, { +export interface Draft { editingStatus?: Status - params: Omit<Mutable<CreateStatusParams>, 'status'> & { status?: Exclude<CreateStatusParams['status'], null> } + params: Omit<Mutable<CreateStatusParams>, 'status'> & { + status?: Exclude<CreateStatusParams['status'], null> + } attachments: Attachment[] -}> +} +export type DraftMap = Record<string, Draft> const allDrafts = useLocalStorage<Record<string, DraftMap>>(STORAGE_KEY_DRAFTS, {}) @@ -19,11 +22,14 @@ export const currentUserDrafts = computed(() => { return allDrafts.value[id] }) -export function getDefaultStatus(inReplyToId?: string): CreateStatusParamsWithStatus { +export function getDefaultDraft(inReplyToId?: string): Draft { return { - status: '', - inReplyToId, - visibility: 'public', + params: { + status: '', + inReplyToId, + visibility: 'public', + }, + attachments: [], } } @@ -38,12 +44,9 @@ export function getParamsFromStatus(status: Status) { export function useDraft(draftKey: string, inReplyToId?: string) { const draft = computed({ get() { - if (!currentUserDrafts.value[draftKey]) { - currentUserDrafts.value[draftKey] = { - params: getDefaultStatus(inReplyToId), - attachments: [], - } - } + if (!currentUserDrafts.value[draftKey]) + currentUserDrafts.value[draftKey] = getDefaultDraft(inReplyToId) + return currentUserDrafts.value[draftKey] }, set(val) {