matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

pl-fe: Support block auto-expiration on Pleroma

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-12-29 00:29:15 +01:00
parent b892674a3f
commit 664c7e91a7
15 changed files with 187 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/pl-fe/src/actions/reports.ts
View File

@@ -12,16 +12,17 @@ enum ReportableEntities {
}
type ReportedEntity = {
status?: Pick<Status, 'id' | 'reblog_id'>;
status?: Pick<Status, 'id'>;
statusId?: string;
}
const initReport = (entityType: ReportableEntities, account: Pick<Account, 'id'>, 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),
});
};

23
packages/pl-fe/src/components/status-action-bar.tsx
View File

@@ -1,6 +1,6 @@
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 { useHistory, useRouteMatch } from 'react-router-dom';
import { redactStatus } from 'pl-fe/actions/admin';
@@ -23,7 +23,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';
@@ -50,8 +50,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' },
@@ -578,7 +576,6 @@ const MenuButton: React.FC<IMenuButton> = ({
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);
@@ -682,23 +679,11 @@ const MenuButton: React.FC<IMenuButton> = ({
};
const handleMuteClick: React.EventHandler<React.MouseEvent> = (e) => {
openModal('MUTE', { accountId: status.account.id });
openModal('BLOCK_MUTE', { accountId: status.account.id, action: 'MUTE' });
};
const handleBlockClick: React.EventHandler<React.MouseEvent> = (e) => {
const account = status.account;
openModal('CONFIRM', {
heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.acct }} />,
message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong className='break-words'>@{account.acct}</strong> }} />,
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<React.MouseEvent> = (e) => {

18
packages/pl-fe/src/features/account/components/header.tsx
View File

@@ -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<IHeader> = ({ 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<IHeader> = ({ account }) => {
if (account.relationship?.blocking) {
unblockAccount();
} else {
openModal('CONFIRM', {
heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.acct }} />,
message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong className='break-words'>@{account.acct}</strong> }} />,
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<IHeader> = ({ account }) => {
if (account.relationship?.muting) {
unmuteAccount();
} else {
openModal('MUTE', { accountId: account.id });
openModal('BLOCK_MUTE', { accountId: account.id, action: 'MUTE' });
}
};

11
packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx
View File

@@ -11,7 +11,7 @@ import Text from 'pl-fe/components/ui/text';
import VerificationBadge from 'pl-fe/components/verification-badge';
import { 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 { useChat, useChatActions, useChats } from 'pl-fe/queries/chats';
import { useModalsActions } from 'pl-fe/stores/modals';
@@ -47,7 +47,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<HTMLTextAreaElement | null>(null);
@@ -57,11 +56,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',
});
};

11
packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx
View File

@@ -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',
});
};

18
packages/pl-fe/src/features/event/components/event-header.tsx
View File

@@ -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<IEventHeader> = ({ 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<IEventHeader> = ({ status }) => {
};
const handleMuteClick = () => {
openModal('MUTE', { accountId: account.id });
openModal('BLOCK_MUTE', { accountId: account.id, action: 'MUTE' });
};
const handleBlockClick = () => {
openModal('CONFIRM', {
heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.acct }} />,
message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.acct}</strong> }} />,
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 = () => {

4
packages/pl-fe/src/features/ui/components/action-button.tsx
View File

@@ -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<IActionButton> = ({ 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<IActionButton> = ({ account, actionType, small = tr
if (relationship?.blocking) {
unblockAccount();
} else {
blockAccount();
openModal('BLOCK_MUTE', { accountId: account.id, action: 'BLOCK' });
}
};

2
packages/pl-fe/src/features/ui/components/modal-root.tsx
View File

@@ -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')),

1
packages/pl-fe/src/locales/en.json
View File

@@ -283,6 +283,7 @@
"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?",
"bookmark_folders.add.fail": "Failed to create bookmark folder",
"bookmark_folders.add.success": "Bookmark folder created successfully",
"bookmark_folders.all_bookmarks": "All bookmarks",

159
packages/pl-fe/src/modals/block-mute-modal.tsx Normal file
View File

@@ -0,0 +1,159 @@
import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { initReport, ReportableEntities } from 'pl-fe/actions/reports';
import { useAccount } from 'pl-fe/api/hooks/accounts/use-account';
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 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 } from 'pl-fe/queries/accounts/use-relationship';
import type { BlockAccountParams, MuteAccountParams } from 'pl-api';
import type { BaseModalProps } from 'pl-fe/features/ui/components/modal-root';
interface BlockMuteModalProps {
action: 'BLOCK' | 'MUTE';
accountId: string;
statusId?: string;
}
const BlockMuteModal: React.FC<BlockMuteModalProps & BaseModalProps> = ({ accountId, statusId, onClose, action }) => {
const dispatch = useAppDispatch();
const { account } = useAccount(accountId || undefined);
const [notifications, setNotifications] = useState(true);
const [duration, setDuration] = useState(0);
const [isSubmitting, setIsSubmitting] = useState(false);
const { blocksDuration, mutesDuration } = useFeatures();
const canSetDuration = action === 'MUTE' ? mutesDuration : blocksDuration;
const { mutate: muteAccount } = useMuteAccountMutation(accountId);
const { mutate: blockAccount } = useBlockAccountMutation(accountId);
if (!account) return null;
const handleClick = () => {
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');
},
});
};
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 (
<Modal
title={action === 'MUTE' ? (
<FormattedMessage id='confirmations.mute.heading' defaultMessage='Mute @{name}' values={{ name: account.acct }} />
) : (
<FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.acct }} />
)}
onClose={handleCancel}
confirmationAction={handleClick}
confirmationText={action === 'MUTE' ? (
<FormattedMessage id='confirmations.mute.confirm' defaultMessage='Mute' />
) : (
<FormattedMessage id='confirmations.block.confirm' defaultMessage='Block' />
)}
confirmationDisabled={isSubmitting}
secondaryAction={action === 'BLOCK' ? handleBlockAndReport : undefined}
secondaryText={<FormattedMessage id='confirmations.block.block_and_report' defaultMessage='Block and report' />}
secondaryDisabled={isSubmitting}
cancelText={<FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />}
cancelAction={handleCancel}
>
<Stack space={4}>
<Text>
{action === 'MUTE' ? (
<FormattedMessage
id='confirmations.mute.message'
defaultMessage='Are you sure you want to mute {name}?'
values={{ name: <strong className='break-words'>@{account.acct}</strong> }}
/>
) : (
<FormattedMessage
id='confirmations.block.message'
defaultMessage='Are you sure you want to block {name}?'
values={{ name: <strong className='break-words'>@{account.acct}</strong> }}
/>
)}
</Text>
{action === 'MUTE' && (
<label>
<HStack alignItems='center' space={2}>
<Text tag='span' theme='muted'>
<FormattedMessage id='mute_modal.hide_notifications' defaultMessage='Hide notifications from this user?' />
</Text>
<Toggle
checked={notifications}
onChange={toggleNotifications}
/>
</HStack>
</label>
)}
{canSetDuration && (
<>
<label>
<HStack alignItems='center' space={2}>
<Text tag='span'>
{action === 'MUTE' ? (
<FormattedMessage id='mute_modal.auto_expire' defaultMessage='Automatically expire mute?' />
) : (
<FormattedMessage id='block_modal.auto_expire' defaultMessage='Automatically expire block?' />
)}
</Text>
<Toggle
checked={duration !== 0}
onChange={toggleAutoExpire}
/>
</HStack>
</label>
{duration !== 0 && (
<Stack space={2}>
<Text weight='medium'><FormattedMessage id='mute_modal.duration' defaultMessage='Duration' />: </Text>
<DurationSelector onDurationChange={handleChangeMuteDuration} value={duration} />
</Stack>
)}
</>
)}
</Stack>
</Modal>
);
};
export { BlockMuteModal as default, type BlockMuteModalProps };

122
packages/pl-fe/src/modals/mute-modal.tsx
View File

@@ -1,122 +0,0 @@
import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { useAccount } from 'pl-fe/api/hooks/accounts/use-account';
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 Toggle from 'pl-fe/components/ui/toggle';
import DurationSelector from 'pl-fe/features/compose/components/polls/duration-selector';
import { useFeatures } from 'pl-fe/hooks/use-features';
import { useMuteAccountMutation } from 'pl-fe/queries/accounts/use-relationship';
import type { BaseModalProps } from 'pl-fe/features/ui/components/modal-root';
interface MuteModalProps {
accountId: string;
}
const MuteModal: React.FC<MuteModalProps & BaseModalProps> = ({ accountId, onClose }) => {
const { account } = useAccount(accountId || undefined);
const [notifications, setNotifications] = useState(true);
const [duration, setDuration] = useState(0);
const [isSubmitting, setIsSubmitting] = useState(false);
const mutesDuration = useFeatures().mutesDuration;
const { mutate: muteAccount } = useMuteAccountMutation(accountId);
if (!account) return null;
const handleClick = () => {
setIsSubmitting(true);
muteAccount({ notifications, duration }, {
onSuccess: () => {
setIsSubmitting(false);
onClose('MUTE');
},
});
};
const handleCancel = () => {
onClose('MUTE');
};
const toggleNotifications = () => {
setNotifications(notifications => !notifications);
};
const handleChangeMuteDuration = (expiresIn: number): void => {
setDuration(expiresIn);
};
const toggleAutoExpire = () => setDuration(duration ? 0 : 2 * 60 * 60 * 24);
return (
<Modal
title={
<FormattedMessage
id='confirmations.mute.heading'
defaultMessage='Mute @{name}'
values={{ name: account.acct }}
/>
}
onClose={handleCancel}
confirmationAction={handleClick}
confirmationText={<FormattedMessage id='confirmations.mute.confirm' defaultMessage='Mute' />}
confirmationDisabled={isSubmitting}
cancelText={<FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />}
cancelAction={handleCancel}
>
<Stack space={4}>
<Text>
<FormattedMessage
id='confirmations.mute.message'
defaultMessage='Are you sure you want to mute {name}?'
values={{ name: <strong className='break-words'>@{account.acct}</strong> }}
/>
</Text>
<label>
<HStack alignItems='center' space={2}>
<Text tag='span' theme='muted'>
<FormattedMessage id='mute_modal.hide_notifications' defaultMessage='Hide notifications from this user?' />
</Text>
<Toggle
checked={notifications}
onChange={toggleNotifications}
/>
</HStack>
</label>
{mutesDuration && (
<>
<label>
<HStack alignItems='center' space={2}>
<Text tag='span'>
<FormattedMessage id='mute_modal.auto_expire' defaultMessage='Automatically expire mute?' />
</Text>
<Toggle
checked={duration !== 0}
onChange={toggleAutoExpire}
/>
</HStack>
</label>
{duration !== 0 && (
<Stack space={2}>
<Text weight='medium'><FormattedMessage id='mute_modal.duration' defaultMessage='Duration' />: </Text>
<DurationSelector onDurationChange={handleChangeMuteDuration} value={duration} />
</Stack>
)}
</>
)}
</Stack>
</Modal>
);
};
export { MuteModal as default, type MuteModalProps };

2
packages/pl-fe/src/modals/report-modal/index.tsx
View File

@@ -111,7 +111,7 @@ const ReportModal: React.FC<BaseModalProps & ReportModalProps> = ({ onClose, acc
});
if (block && account) {
blockAccount();
blockAccount(undefined);
}
};

2
packages/pl-fe/src/pages/statuses/status.tsx
View File

@@ -25,13 +25,11 @@ const messages = defineMessages({
redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' },
redraftHeading: { id: 'confirmations.redraft.heading', defaultMessage: 'Delete & redraft' },
redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this post and re-draft it? Favorites and reposts will be lost, and replies to the original post will be orphaned.' },
blockConfirm: { id: 'confirmations.block.confirm', defaultMessage: 'Block' },
revealAll: { id: 'status.show_more_all', defaultMessage: 'Show more for all' },
hideAll: { id: 'status.show_less_all', defaultMessage: 'Show less for all' },
detailedStatus: { id: 'status.detailed_status', defaultMessage: 'Detailed conversation view' },
replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
blockAndReport: { id: 'confirmations.block.block_and_report', defaultMessage: 'Block and report' },
treeView: { id: 'status.thread.tree_view', defaultMessage: 'Tree view' },
linearView: { id: 'status.thread.linear_view', defaultMessage: 'Linear view' },
expandAll: { id: 'status.thread.expand_all', defaultMessage: 'Expand all posts' },

4
packages/pl-fe/src/queries/accounts/use-relationship.ts
View File

@@ -7,7 +7,7 @@ import { useClient } from 'pl-fe/hooks/use-client';
import { useLoggedIn } from 'pl-fe/hooks/use-logged-in';
import type { MinifiedSuggestion } from '../trends/use-suggested-accounts';
import type { FollowAccountParams, MuteAccountParams, Relationship } from 'pl-api';
import type { BlockAccountParams, FollowAccountParams, MuteAccountParams, Relationship } from 'pl-api';
const updateRelationship = (accountId: string, changes: Partial<Relationship> | ((relationship: Relationship) => Relationship), queryClient: ReturnType<typeof useQueryClient>) => {
const previousRelationship = queryClient.getQueryData<Relationship>(['accountRelationships', accountId]);
@@ -89,7 +89,7 @@ const useBlockAccountMutation = (accountId: string) => {
return useMutation({
mutationKey: ['accountRelationships', accountId],
mutationFn: () => client.filtering.blockAccount(accountId),
mutationFn: (params?: BlockAccountParams) => client.filtering.blockAccount(accountId, params),
onMutate: () => updateRelationship(accountId, {
blocking: true,
followed_by: false,

4
packages/pl-fe/src/stores/modals.ts
View File

@@ -4,6 +4,7 @@ import { mutative } from 'zustand-mutative';
import type { ICryptoAddress } from 'pl-fe/features/crypto-donate/components/crypto-address';
import type { ModalType } from 'pl-fe/features/ui/components/modal-root';
import type { AltTextModalProps } from 'pl-fe/modals/alt-text-modal';
import type { BlockMuteModalProps } from 'pl-fe/modals/block-mute-modal';
import type { BoostModalProps } from 'pl-fe/modals/boost-modal';
import type { CircleEditorModalProps } from 'pl-fe/modals/circle-editor-modal';
import type { CompareHistoryModalProps } from 'pl-fe/modals/compare-history-modal';
@@ -29,7 +30,6 @@ import type { ListEditorModalProps } from 'pl-fe/modals/list-editor-modal';
import type { MediaModalProps } from 'pl-fe/modals/media-modal';
import type { MentionsModalProps } from 'pl-fe/modals/mentions-modal';
import type { MissingDescriptionModalProps } from 'pl-fe/modals/missing-description-modal';
import type { MuteModalProps } from 'pl-fe/modals/mute-modal';
import type { ReactionsModalProps } from 'pl-fe/modals/reactions-modal';
import type { ReblogsModalProps } from 'pl-fe/modals/reblogs-modal';
import type { ReplyMentionsModalProps } from 'pl-fe/modals/reply-mentions-modal';
@@ -68,7 +68,7 @@ type OpenModalProps =
| [type: 'MEDIA', props: MediaModalProps]
| [type: 'MENTIONS', props: MentionsModalProps]
| [type: 'MISSING_DESCRIPTION', props: MissingDescriptionModalProps]
| [type: 'MUTE', props: MuteModalProps]
| [type: 'BLOCK_MUTE', props: BlockMuteModalProps]
| [type: 'REACTIONS', props: ReactionsModalProps]
| [type: 'REBLOGS', props: ReblogsModalProps]
| [type: 'REPLY_MENTIONS', props: ReplyMentionsModalProps]