diff --git a/README.md b/README.md index 13335b1c3..8b00eb8e0 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,8 @@ [![Codeberg Repo stars](https://img.shields.io/gitea/stars/mkljczk/pl-fe?gitea_url=https%3A%2F%2Fcodeberg.org&logo=Codeberg)](https://codeberg.org/mkljczk/pl-fe) [![GitHub Repo stars](https://img.shields.io/github/stars/mkljczk/pl-fe)](https://github.com/mkljczk/pl-fe) [![GitHub License](https://img.shields.io/github/license/mkljczk/pl-fe)](https://github.com/mkljczk/pl-fe?tab=AGPL-3.0-1-ov-file#readme) -[![Weblate project translated](https://img.shields.io/weblate/progress/pl-fe)](https://hosted.weblate.org/engage/pl-fe/) 🏳️‍⚧️ +[![Weblate project translated](https://img.shields.io/weblate/progress/pl-fe)](https://hosted.weblate.org/engage/pl-fe/) +![trans rights btw](https://img.shields.io/badge/-rights_btw-wtf?style=flat&label=trans&labelColor=5BCEFA&color=F5A9B8) `pl-fe` is a social networking client app. It works with any Mastodon API-compatible software, but it's focused on supporting alternative backends, like Pleroma or GoToSocial. diff --git a/packages/pl-api/lib/client.ts b/packages/pl-api/lib/client.ts index 1f09eec75..47b40adbf 100644 --- a/packages/pl-api/lib/client.ts +++ b/packages/pl-api/lib/client.ts @@ -28,6 +28,7 @@ import { asyncRefreshSchema, authorizationServerMetadataSchema, backupSchema, + blockedAccountSchema, bookmarkFolderSchema, chatMessageSchema, chatSchema, @@ -2126,7 +2127,7 @@ class PlApiClient { * @see {@link https://docs.joinmastodon.org/methods/blocks/#get} */ getBlocks: async (params?: GetBlocksParams) => - this.#paginatedGet('/api/v1/blocks', { params }, accountSchema), + this.#paginatedGet('/api/v1/blocks', { params }, blockedAccountSchema), /** * Get domain blocks diff --git a/packages/pl-api/lib/entities/account.ts b/packages/pl-api/lib/entities/account.ts index 3680c77dc..3be5bc522 100644 --- a/packages/pl-api/lib/entities/account.ts +++ b/packages/pl-api/lib/entities/account.ts @@ -265,6 +265,21 @@ type CredentialAccount = v.InferOutput & */ const credentialAccountSchema: v.BaseSchema> = untypedCredentialAccountSchema as any; +const untypedBlockedAccountSchema = v.pipe(v.any(), preprocessAccount, v.object({ + ...accountWithMovedAccountSchema.entries, + block_expires_at: v.fallback(v.nullable(datetimeSchema), null), +})); + +/** + * @category Entity types + */ +type BlockedAccount = v.InferOutput & WithMoved; + +/** + * @category Schemas + */ +const blockedAccountSchema: v.BaseSchema> = untypedBlockedAccountSchema as any; + const untypedMutedAccountSchema = v.pipe(v.any(), preprocessAccount, v.object({ ...accountWithMovedAccountSchema.entries, mute_expires_at: v.fallback(v.nullable(datetimeSchema), null), @@ -283,8 +298,10 @@ const mutedAccountSchema: v.BaseSchema> export { accountSchema, credentialAccountSchema, + blockedAccountSchema, mutedAccountSchema, type Account, type CredentialAccount, + type BlockedAccount, type MutedAccount, }; diff --git a/packages/pl-fe/src/actions/reports.ts b/packages/pl-fe/src/actions/reports.ts index a6391b729..3b605a65b 100644 --- a/packages/pl-fe/src/actions/reports.ts +++ b/packages/pl-fe/src/actions/reports.ts @@ -12,16 +12,17 @@ enum ReportableEntities { } type ReportedEntity = { - status?: Pick; + status?: Pick; + statusId?: string; } const initReport = (entityType: ReportableEntities, account: Pick, entities?: ReportedEntity) => (dispatch: AppDispatch) => { - const { status } = entities || {}; + const { status, statusId } = entities || {}; return useModalsStore.getState().actions.openModal('REPORT', { accountId: account.id, entityType, - statusIds: status ? [status.id] : [], + statusIds: [status?.id, statusId].filter((id): id is string => !!id), }); }; diff --git a/packages/pl-fe/src/components/account.tsx b/packages/pl-fe/src/components/account.tsx index 0738eb768..6f3307723 100644 --- a/packages/pl-fe/src/components/account.tsx +++ b/packages/pl-fe/src/components/account.tsx @@ -110,6 +110,7 @@ interface IAccount { items?: React.ReactNode; disabled?: boolean; muteExpiresAt?: string | null; + blockExpiresAt?: string | null; } const Account = ({ @@ -138,6 +139,7 @@ const Account = ({ items, disabled, muteExpiresAt, + blockExpiresAt, }: IAccount) => { const overflowRef = useRef(null); const actionRef = useRef(null); @@ -376,6 +378,14 @@ const Account = ({ )} + {actionType === 'blocking' && blockExpiresAt ? ( + <> + + + + + ) : null} + {actionType === 'muting' && muteExpiresAt ? ( <> diff --git a/packages/pl-fe/src/components/status-action-bar.tsx b/packages/pl-fe/src/components/status-action-bar.tsx index 09f824123..0995d310b 100644 --- a/packages/pl-fe/src/components/status-action-bar.tsx +++ b/packages/pl-fe/src/components/status-action-bar.tsx @@ -1,7 +1,7 @@ import { useMatch, useNavigate } from '@tanstack/react-router'; import { type Account, type CustomEmoji, type Group, GroupRoles } from 'pl-api'; import React, { useCallback, useMemo } from 'react'; -import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; +import { defineMessages, useIntl } from 'react-intl'; import { redactStatus } from 'pl-fe/actions/admin'; import { directCompose, mentionCompose, quoteCompose, replyCompose } from 'pl-fe/actions/compose'; @@ -24,7 +24,7 @@ import { useClient } from 'pl-fe/hooks/use-client'; import { useFeatures } from 'pl-fe/hooks/use-features'; import { useInstance } from 'pl-fe/hooks/use-instance'; import { useOwnAccount } from 'pl-fe/hooks/use-own-account'; -import { useBlockAccountMutation, useUnblockAccountMutation } from 'pl-fe/queries/accounts/use-relationship'; +import { useUnblockAccountMutation } from 'pl-fe/queries/accounts/use-relationship'; import { useChats } from 'pl-fe/queries/chats'; import { useBlockGroupUserMutation } from 'pl-fe/queries/groups/use-group-blocks'; import { useCustomEmojis } from 'pl-fe/queries/instance/use-custom-emojis'; @@ -51,8 +51,6 @@ const messages = defineMessages({ block: { id: 'account.block', defaultMessage: 'Block @{name}' }, unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' }, blocked: { id: 'group.group_mod_block.success', defaultMessage: '@{name} is banned' }, - blockAndReport: { id: 'confirmations.block.block_and_report', defaultMessage: 'Block and report' }, - blockConfirm: { id: 'confirmations.block.confirm', defaultMessage: 'Block' }, bookmark: { id: 'status.bookmark', defaultMessage: 'Bookmark' }, bookmarkSetFolder: { id: 'status.bookmark_folder', defaultMessage: 'Set bookmark folder' }, bookmarkChangeFolder: { id: 'status.bookmark_folder_change', defaultMessage: 'Change bookmark folder' }, @@ -579,7 +577,6 @@ const MenuButton: React.FC = ({ const { mutate: unbookmarkStatus } = useUnbookmarkStatus(status.id); const { mutate: pinStatus } = usePinStatus(status?.id!); const { mutate: unpinStatus } = useUnpinStatus(status?.id!); - const { mutate: blockAccount } = useBlockAccountMutation(status.account_id); const { mutate: unblockAccount } = useUnblockAccountMutation(status.account_id); const { groupRelationship } = useGroupRelationship(status.group_id || undefined); @@ -683,23 +680,11 @@ const MenuButton: React.FC = ({ }; const handleMuteClick: React.EventHandler = (e) => { - openModal('MUTE', { accountId: status.account.id }); + openModal('BLOCK_MUTE', { accountId: status.account.id, action: 'MUTE' }); }; const handleBlockClick: React.EventHandler = (e) => { - const account = status.account; - - openModal('CONFIRM', { - heading: , - message: @{account.acct} }} />, - confirm: intl.formatMessage(messages.blockConfirm), - onConfirm: () => blockAccount(), - secondary: intl.formatMessage(messages.blockAndReport), - onSecondary: () => { - blockAccount(); - dispatch(initReport(ReportableEntities.STATUS, account, { status })); - }, - }); + openModal('BLOCK_MUTE', { accountId: status.account.id, statusId: status.id, action: 'BLOCK' }); }; const handleUnblockClick: React.EventHandler = (e) => { diff --git a/packages/pl-fe/src/components/ui/modal.tsx b/packages/pl-fe/src/components/ui/modal.tsx index 867319737..fabe650c0 100644 --- a/packages/pl-fe/src/components/ui/modal.tsx +++ b/packages/pl-fe/src/components/ui/modal.tsx @@ -2,6 +2,8 @@ import clsx from 'clsx'; import React from 'react'; import { FormattedMessage, defineMessages, useIntl } from 'react-intl'; +import { useOwnAccount } from 'pl-fe/hooks/use-own-account'; + import Button from './button'; import { ButtonThemes } from './button/useButtonStyles'; import IconButton from './icon-button'; @@ -12,6 +14,16 @@ const messages = defineMessages({ confirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' }, }); +const useDefaultCloseIcon = (): string => { + const { account } = useOwnAccount(); + + if (account?.url === 'https://donotsta.re/users/pmysl' || account?.url === 'https://to.juz.sie.federu.je/@pmysl') { + return require('@phosphor-icons/core/regular/twitter-logo.svg'); + } + + return require('@phosphor-icons/core/regular/x.svg'); +}; + interface IModal { /** Callback when the modal is cancelled. */ cancelAction?: () => void; @@ -50,7 +62,7 @@ const Modal = React.forwardRef(({ cancelAction, cancelText, children, - closeIcon = require('@phosphor-icons/core/regular/x.svg'), + closeIcon, closePosition = 'right', confirmationAction, confirmationDisabled, @@ -69,6 +81,10 @@ const Modal = React.forwardRef(({ const buttonRef = React.useRef(null); const [firstRender, setFirstRender] = React.useState(true); + const defaultCloseIcon = useDefaultCloseIcon(); + + closeIcon = closeIcon || defaultCloseIcon; + React.useEffect(() => { setFirstRender(false); }, []); diff --git a/packages/pl-fe/src/features/account/components/header.tsx b/packages/pl-fe/src/features/account/components/header.tsx index 95ad7fc40..716b750c5 100644 --- a/packages/pl-fe/src/features/account/components/header.tsx +++ b/packages/pl-fe/src/features/account/components/header.tsx @@ -29,7 +29,6 @@ import { useClient } from 'pl-fe/hooks/use-client'; import { useFeatures } from 'pl-fe/hooks/use-features'; import { useOwnAccount } from 'pl-fe/hooks/use-own-account'; import { - useBlockAccountMutation, useFollowAccountMutation, usePinAccountMutation, useRemoveAccountFromFollowersMutation, @@ -82,9 +81,7 @@ const messages = defineMessages({ search: { id: 'account.search', defaultMessage: 'Search from @{name}' }, searchSelf: { id: 'account.search_self', defaultMessage: 'Search your posts' }, unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' }, - blockConfirm: { id: 'confirmations.block.confirm', defaultMessage: 'Block' }, blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Hide entire domain' }, - blockAndReport: { id: 'confirmations.block.block_and_report', defaultMessage: 'Block and report' }, removeFromFollowersConfirm: { id: 'confirmations.remove_from_followers.confirm', defaultMessage: 'Remove' }, userEndorsed: { id: 'account.endorse.success', defaultMessage: 'You are now featuring @{acct} on your profile' }, userUnendorsed: { id: 'account.unendorse.success', defaultMessage: 'You are no longer featuring @{acct}' }, @@ -146,7 +143,6 @@ const Header: React.FC = ({ account }) => { const features = useFeatures(); const { account: ownAccount } = useOwnAccount(); const { mutate: followAccount } = useFollowAccountMutation(account?.id!); - const { mutate: blockAccount } = useBlockAccountMutation(account?.id!); const { mutate: unblockAccount } = useUnblockAccountMutation(account?.id!); const { mutate: unmuteAccount } = useUnmuteAccountMutation(account?.id!); const { mutate: pinAccount } = usePinAccountMutation(account?.id!); @@ -201,17 +197,7 @@ const Header: React.FC = ({ account }) => { if (account.relationship?.blocking) { unblockAccount(); } else { - openModal('CONFIRM', { - heading: , - message: @{account.acct} }} />, - confirm: intl.formatMessage(messages.blockConfirm), - onConfirm: () => blockAccount(), - secondary: intl.formatMessage(messages.blockAndReport), - onSecondary: () => { - blockAccount(); - dispatch(initReport(ReportableEntities.ACCOUNT, account)); - }, - }); + openModal('BLOCK_MUTE', { accountId: account.id, action: 'BLOCK' }); } }; @@ -276,7 +262,7 @@ const Header: React.FC = ({ account }) => { if (account.relationship?.muting) { unmuteAccount(); } else { - openModal('MUTE', { accountId: account.id }); + openModal('BLOCK_MUTE', { accountId: account.id, action: 'MUTE' }); } }; diff --git a/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx b/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx index 6dac7d0bc..babe9abbf 100644 --- a/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx +++ b/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx @@ -12,7 +12,7 @@ import VerificationBadge from 'pl-fe/components/verification-badge'; import { useChatContext } from 'pl-fe/contexts/chat-context'; import { chatRoute } from 'pl-fe/features/ui/router'; import { useFeatures } from 'pl-fe/hooks/use-features'; -import { useBlockAccountMutation, useUnblockAccountMutation, useRelationshipQuery } from 'pl-fe/queries/accounts/use-relationship'; +import { useUnblockAccountMutation, useRelationshipQuery } from 'pl-fe/queries/accounts/use-relationship'; import { useChat, useChatActions, useChats } from 'pl-fe/queries/chats'; import { useModalsActions } from 'pl-fe/stores/modals'; @@ -48,7 +48,6 @@ const ChatPageMain = () => { const { currentChatId } = useChatContext(); const { chatsQuery: { data: chats, isLoading } } = useChats(); - const { mutate: blockAccount } = useBlockAccountMutation(chat?.account.id!); const { mutate: unblockAccount } = useUnblockAccountMutation(chat?.account.id!); const inputRef = useRef(null); @@ -58,11 +57,9 @@ const ChatPageMain = () => { const isBlocked = !!useRelationshipQuery(chat?.account.id).data?.blocked_by; const handleBlockUser = () => { - openModal('CONFIRM', { - heading: intl.formatMessage(messages.blockHeading, { acct: chat?.account.acct }), - message: intl.formatMessage(messages.blockMessage), - confirm: intl.formatMessage(messages.blockConfirm), - onConfirm: () => blockAccount(), + openModal('BLOCK_MUTE', { + accountId: chat!.account.id, + action: 'BLOCK', }); }; diff --git a/packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx b/packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx index fbe3080ad..6fa6215e1 100644 --- a/packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx +++ b/packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx @@ -8,7 +8,7 @@ import Stack from 'pl-fe/components/ui/stack'; import Text from 'pl-fe/components/ui/text'; import { ChatWidgetScreens, useChatContext } from 'pl-fe/contexts/chat-context'; import { useFeatures } from 'pl-fe/hooks/use-features'; -import { useBlockAccountMutation, useUnblockAccountMutation, useRelationshipQuery } from 'pl-fe/queries/accounts/use-relationship'; +import { useUnblockAccountMutation, useRelationshipQuery } from 'pl-fe/queries/accounts/use-relationship'; import { useChatActions } from 'pl-fe/queries/chats'; import { useModalsActions } from 'pl-fe/stores/modals'; @@ -38,7 +38,6 @@ const ChatSettings = () => { const { chat, changeScreen, toggleChatPane } = useChatContext(); const { deleteChat } = useChatActions(chat?.id as string); - const { mutate: blockAccount } = useBlockAccountMutation(chat?.account.id!); const { mutate: unblockAccount } = useUnblockAccountMutation(chat?.account.id!); const isBlocked = !!useRelationshipQuery(chat?.account.id).data?.blocked_by; @@ -53,11 +52,9 @@ const ChatSettings = () => { }; const handleBlockUser = () => { - openModal('CONFIRM', { - heading: intl.formatMessage(messages.blockHeading, { acct: chat?.account.acct }), - message: intl.formatMessage(messages.blockMessage), - confirm: intl.formatMessage(messages.blockConfirm), - onConfirm: () => blockAccount(), + openModal('BLOCK_MUTE', { + accountId: chat?.account.id!, + action: 'BLOCK', }); }; diff --git a/packages/pl-fe/src/features/event/components/event-header.tsx b/packages/pl-fe/src/features/event/components/event-header.tsx index 429ff2e51..039acf712 100644 --- a/packages/pl-fe/src/features/event/components/event-header.tsx +++ b/packages/pl-fe/src/features/event/components/event-header.tsx @@ -20,7 +20,6 @@ import Emojify from 'pl-fe/features/emoji/emojify'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useFeatures } from 'pl-fe/hooks/use-features'; import { useOwnAccount } from 'pl-fe/hooks/use-own-account'; -import { useBlockAccountMutation } from 'pl-fe/queries/accounts/use-relationship'; import { useChats } from 'pl-fe/queries/chats'; import { useBookmarkStatus, usePinStatus, useReblogStatus, useUnbookmarkStatus, useUnpinStatus, useUnreblogStatus } from 'pl-fe/queries/statuses/use-status-interactions'; import { useModalsActions } from 'pl-fe/stores/modals'; @@ -64,8 +63,6 @@ const messages = defineMessages({ markStatusSensitive: { id: 'admin.statuses.actions.mark_status_sensitive', defaultMessage: 'Mark post sensitive' }, markStatusNotSensitive: { id: 'admin.statuses.actions.mark_status_not_sensitive', defaultMessage: 'Mark post not sensitive' }, deleteStatus: { id: 'admin.statuses.actions.delete_status', defaultMessage: 'Delete post' }, - blockConfirm: { id: 'confirmations.block.confirm', defaultMessage: 'Block' }, - blockAndReport: { id: 'confirmations.block.block_and_report', defaultMessage: 'Block and report' }, deleteConfirm: { id: 'confirmations.delete_event.confirm', defaultMessage: 'Delete' }, deleteHeading: { id: 'confirmations.delete_event.heading', defaultMessage: 'Delete event' }, deleteMessage: { id: 'confirmations.delete_event.message', defaultMessage: 'Are you sure you want to delete this event?' }, @@ -95,7 +92,6 @@ const EventHeader: React.FC = ({ status }) => { const { mutate: unbookmarkStatus } = useUnbookmarkStatus(status?.id!); const { mutate: pinStatus } = usePinStatus(status?.id!); const { mutate: unpinStatus } = useUnpinStatus(status?.id!); - const { mutate: blockAccount } = useBlockAccountMutation(status?.account.id!); if (!status || !status.event) { return ( @@ -184,21 +180,11 @@ const EventHeader: React.FC = ({ status }) => { }; const handleMuteClick = () => { - openModal('MUTE', { accountId: account.id }); + openModal('BLOCK_MUTE', { accountId: account.id, action: 'MUTE' }); }; const handleBlockClick = () => { - openModal('CONFIRM', { - heading: , - message: @{account.acct} }} />, - confirm: intl.formatMessage(messages.blockConfirm), - onConfirm: () => blockAccount(), - secondary: intl.formatMessage(messages.blockAndReport), - onSecondary: () => { - blockAccount(); - dispatch(initReport(ReportableEntities.STATUS, account, { status })); - }, - }); + openModal('BLOCK_MUTE', { accountId: account.id, action: 'BLOCK' }); }; const handleReport = () => { diff --git a/packages/pl-fe/src/features/ui/components/action-button.tsx b/packages/pl-fe/src/features/ui/components/action-button.tsx index 813a68840..18a6e7810 100644 --- a/packages/pl-fe/src/features/ui/components/action-button.tsx +++ b/packages/pl-fe/src/features/ui/components/action-button.tsx @@ -10,7 +10,6 @@ import { useLoggedIn } from 'pl-fe/hooks/use-logged-in'; import { useAcceptFollowRequestMutation, useRejectFollowRequestMutation } from 'pl-fe/queries/accounts/use-follow-requests'; import { useRelationshipQuery, - useBlockAccountMutation, useUnblockAccountMutation, useMuteAccountMutation, useUnmuteAccountMutation, @@ -65,7 +64,6 @@ const ActionButton: React.FC = ({ account, actionType, small = tr const { mutate: followAccount, isPending: isPendingFollow } = useFollowAccountMutation(account.id); const { mutate: unfollowAccount, isPending: isPendingUnfollow } = useUnfollowAccountMutation(account.id); - const { mutate: blockAccount } = useBlockAccountMutation(account.id); const { mutate: unblockAccount } = useUnblockAccountMutation(account.id); const { mutate: muteAccount } = useMuteAccountMutation(account.id); const { mutate: unmuteAccount } = useUnmuteAccountMutation(account.id); @@ -87,7 +85,7 @@ const ActionButton: React.FC = ({ account, actionType, small = tr if (relationship?.blocking) { unblockAccount(); } else { - blockAccount(); + openModal('BLOCK_MUTE', { accountId: account.id, action: 'BLOCK' }); } }; diff --git a/packages/pl-fe/src/features/ui/components/modal-root.tsx b/packages/pl-fe/src/features/ui/components/modal-root.tsx index 863e8cd27..e24076497 100644 --- a/packages/pl-fe/src/features/ui/components/modal-root.tsx +++ b/packages/pl-fe/src/features/ui/components/modal-root.tsx @@ -11,6 +11,7 @@ import ModalLoading from './modal-loading'; const MODAL_COMPONENTS = { ALT_TEXT: lazy(() => import('pl-fe/modals/alt-text-modal')), BIRTHDAYS: lazy(() => import('pl-fe/modals/birthdays-modal')), + BLOCK_MUTE: lazy(() => import('pl-fe/modals/block-mute-modal')), BOOST: lazy(() => import('pl-fe/modals/boost-modal')), CIRCLE_EDITOR: lazy(() => import('pl-fe/modals/circle-editor-modal')), COMPARE_HISTORY: lazy(() => import('pl-fe/modals/compare-history-modal')), @@ -39,7 +40,6 @@ const MODAL_COMPONENTS = { MEDIA: lazy(() => import('pl-fe/modals/media-modal')), MENTIONS: lazy(() => import('pl-fe/modals/mentions-modal')), MISSING_DESCRIPTION: lazy(() => import('pl-fe/modals/missing-description-modal')), - MUTE: lazy(() => import('pl-fe/modals/mute-modal')), REACTIONS: lazy(() => import('pl-fe/modals/reactions-modal')), REBLOGS: lazy(() => import('pl-fe/modals/reblogs-modal')), REPLY_MENTIONS: lazy(() => import('pl-fe/modals/reply-mentions-modal')), diff --git a/packages/pl-fe/src/locales/en.json b/packages/pl-fe/src/locales/en.json index 3df5ab76b..71cbd01df 100644 --- a/packages/pl-fe/src/locales/en.json +++ b/packages/pl-fe/src/locales/en.json @@ -283,6 +283,8 @@ "badge_input.placeholder": "Enter a badge…", "birthday_panel.title": "Birthdays", "birthdays_modal.empty": "None of your friends have birthday today.", + "block_modal.auto_expire": "Automatically expire block?", + "block_modal.note.hint": "You can leave an optional note to remember why you blocked this account. This note is only visible to you.", "bookmark_folders.add.fail": "Failed to create bookmark folder", "bookmark_folders.add.success": "Bookmark folder created successfully", "bookmark_folders.all_bookmarks": "All bookmarks", @@ -1272,6 +1274,9 @@ "mute_modal.auto_expire": "Automatically expire mute?", "mute_modal.duration": "Duration", "mute_modal.hide_notifications": "Hide notifications from this user?", + "mute_modal.note.hint": "You can leave an optional note to remember why you muted this account. This note is only visible to you.", + "mute_modal.note.label.add": "Add account note", + "mute_modal.note.label.edit": "Edit account note", "my_groups_panel.title": "My groups", "navigation.chats": "Chats", "navigation.compose": "Compose", diff --git a/packages/pl-fe/src/main.tsx b/packages/pl-fe/src/main.tsx index f380feae7..709e45090 100644 --- a/packages/pl-fe/src/main.tsx +++ b/packages/pl-fe/src/main.tsx @@ -1,5 +1,5 @@ /// -(window as any).__PL_API_FALLBACK_ACCOUNT = { id: '', acct: 'undefined', url: location.host }; +(window as any).__PL_API_FALLBACK_ACCOUNT = { id: '', acct: 'undefined', url: location.origin }; import './polyfills'; diff --git a/packages/pl-fe/src/modals/block-mute-modal.tsx b/packages/pl-fe/src/modals/block-mute-modal.tsx new file mode 100644 index 000000000..dde1b4023 --- /dev/null +++ b/packages/pl-fe/src/modals/block-mute-modal.tsx @@ -0,0 +1,210 @@ +import React, { useState } from 'react'; +import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; + +import { initReport, ReportableEntities } from 'pl-fe/actions/reports'; +import { useAccount } from 'pl-fe/api/hooks/accounts/use-account'; +import FormGroup from 'pl-fe/components/ui/form-group'; +import HStack from 'pl-fe/components/ui/hstack'; +import Modal from 'pl-fe/components/ui/modal'; +import Stack from 'pl-fe/components/ui/stack'; +import Text from 'pl-fe/components/ui/text'; +import Textarea from 'pl-fe/components/ui/textarea'; +import Toggle from 'pl-fe/components/ui/toggle'; +import DurationSelector from 'pl-fe/features/compose/components/polls/duration-selector'; +import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; +import { useFeatures } from 'pl-fe/hooks/use-features'; +import { useBlockAccountMutation, useMuteAccountMutation, useUpdateAccountNoteMutation } from 'pl-fe/queries/accounts/use-relationship'; +import toast from 'pl-fe/toast'; + +import type { BlockAccountParams, MuteAccountParams } from 'pl-api'; +import type { BaseModalProps } from 'pl-fe/features/ui/components/modal-root'; + +const messages = defineMessages({ + notePlaceholder: { id: 'account_note.placeholder', defaultMessage: 'Add a note' }, + noteSaveFailed: { id: 'account_note.fail', defaultMessage: 'Failed to save note' }, +}); + +interface BlockMuteModalProps { + action: 'BLOCK' | 'MUTE'; + accountId: string; + statusId?: string; +} + +const BlockMuteModal: React.FC = ({ accountId, statusId, onClose, action }) => { + const dispatch = useAppDispatch(); + const intl = useIntl(); + + const { account } = useAccount(accountId || undefined, { withRelationship: true }); + const [notifications, setNotifications] = useState(true); + const [duration, setDuration] = useState(0); + const [isSubmitting, setIsSubmitting] = useState(false); + const [note, setNote] = useState(undefined); + const { notes, blocksDuration, mutesDuration } = useFeatures(); + const canSetDuration = action === 'MUTE' ? mutesDuration : blocksDuration; + + const currentNote = account?.relationship?.note; + + const { mutate: muteAccount } = useMuteAccountMutation(accountId); + const { mutate: blockAccount } = useBlockAccountMutation(accountId); + const { mutate: updateAccountNote } = useUpdateAccountNoteMutation(accountId); + + if (!account) return null; + + const handleClick = (callback?: () => void) => { + setIsSubmitting(true); + const params: MuteAccountParams | BlockAccountParams = { duration: duration || undefined }; + if (action === 'MUTE') { + (params as MuteAccountParams).notifications = notifications; + } + (action === 'MUTE' ? muteAccount : blockAccount)(params, { + onSuccess: () => { + setIsSubmitting(false); + onClose('BLOCK_MUTE'); + if (callback) callback(); + }, + }); + if (notes && note !== undefined && note !== currentNote) { + updateAccountNote(note, { + onError: () => toast.error(messages.noteSaveFailed), + }); + } + }; + + const handleBlockAndReport = () => { + handleClick(() => dispatch(initReport(ReportableEntities.STATUS, account, { statusId }))); + }; + + const handleCancel = () => { + onClose('BLOCK_MUTE'); + }; + + const toggleNotifications = () => { + setNotifications(notifications => !notifications); + }; + + const handleChangeMuteDuration = (expiresIn: number): void => { + setDuration(expiresIn); + }; + + const toggleAutoExpire = () => setDuration(duration ? 0 : 2 * 60 * 60 * 24); + + return ( + + ) : ( + + )} + onClose={handleCancel} + confirmationAction={() => handleClick()} + confirmationText={action === 'MUTE' ? ( + + ) : ( + + )} + confirmationDisabled={isSubmitting} + secondaryAction={action === 'BLOCK' ? handleBlockAndReport : undefined} + secondaryText={} + secondaryDisabled={isSubmitting} + cancelText={} + cancelAction={handleCancel} + > + + + {action === 'MUTE' ? ( + @{account.acct} }} + /> + ) : ( + @{account.acct} }} + /> + )} + + + {action === 'MUTE' && ( + + )} + + {notes && ( + + ) : ( + + ) + )} + hintText={ + action === 'MUTE' ? ( + + ) : ( + + ) + } + > +