diff --git a/packages/pl-fe/src/components/status.tsx b/packages/pl-fe/src/components/status.tsx index d36659b1a..efe308168 100644 --- a/packages/pl-fe/src/components/status.tsx +++ b/packages/pl-fe/src/components/status.tsx @@ -9,6 +9,7 @@ import { openModal } from 'pl-fe/actions/modals'; import { toggleStatusMediaHidden, unfilterStatus } from 'pl-fe/actions/statuses'; import TranslateButton from 'pl-fe/components/translate-button'; import AccountContainer from 'pl-fe/containers/account-container'; +import StatusTypeIcon from 'pl-fe/features/status/components/status-type-icon'; import QuotedStatus from 'pl-fe/features/status/containers/quoted-status-container'; import { HotKeys } from 'pl-fe/features/ui/components/hotkeys'; import { useAppDispatch, useAppSelector, useSettings } from 'pl-fe/hooks'; @@ -408,7 +409,12 @@ const Status: React.FC = (props) => { withLinkToProfile={hoverable} approvalStatus={actualStatus.approval_status} avatarSize={avatarSize} - items={} + items={( + <> + + + + )} />
diff --git a/packages/pl-fe/src/components/ui/icon/icon.tsx b/packages/pl-fe/src/components/ui/icon/icon.tsx index e52c5a459..70038b6dc 100644 --- a/packages/pl-fe/src/components/ui/icon/icon.tsx +++ b/packages/pl-fe/src/components/ui/icon/icon.tsx @@ -22,13 +22,15 @@ interface IIcon extends Pick, 'strokeWidth'> { size?: number; /** Override the data-testid */ 'data-testid'?: string; + title?: string; } /** Renders and SVG icon with optional counter. */ -const Icon: React.FC = ({ src, alt, count, size, countMax, containerClassName, ...filteredProps }): JSX.Element => ( +const Icon: React.FC = ({ src, alt, count, size, countMax, containerClassName, title, ...filteredProps }): JSX.Element => (
{count ? ( diff --git a/packages/pl-fe/src/features/status/components/detailed-status.tsx b/packages/pl-fe/src/features/status/components/detailed-status.tsx index 27379d68f..2662278e3 100644 --- a/packages/pl-fe/src/features/status/components/detailed-status.tsx +++ b/packages/pl-fe/src/features/status/components/detailed-status.tsx @@ -14,6 +14,7 @@ import { HStack, Icon, Stack, Text } from 'pl-fe/components/ui'; import QuotedStatus from 'pl-fe/features/status/containers/quoted-status-container'; import StatusInteractionBar from './status-interaction-bar'; +import StatusTypeIcon from './status-type-icon'; import type { SelectedStatus } from 'pl-fe/selectors'; @@ -76,8 +77,6 @@ const DetailedStatus: React.FC = ({ const { account } = actualStatus; if (!account || typeof account !== 'object') return null; - let statusTypeIcon = null; - let quote; if (actualStatus.quote_id) { @@ -92,12 +91,6 @@ const DetailedStatus: React.FC = ({ } } - if (actualStatus.visibility === 'direct') { - statusTypeIcon = ; - } else if (actualStatus.visibility === 'private' || actualStatus.visibility === 'mutuals_only') { - statusTypeIcon = ; - } - return (
@@ -144,8 +137,6 @@ const DetailedStatus: React.FC = ({ - {statusTypeIcon} - @@ -170,6 +161,8 @@ const DetailedStatus: React.FC = ({ )} + + diff --git a/packages/pl-fe/src/features/status/components/status-type-icon.tsx b/packages/pl-fe/src/features/status/components/status-type-icon.tsx new file mode 100644 index 000000000..4d44bf92d --- /dev/null +++ b/packages/pl-fe/src/features/status/components/status-type-icon.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import { defineMessages, MessageDescriptor, useIntl } from 'react-intl'; + +import { Icon, Text } from 'pl-fe/components/ui'; + +import type { Status } from 'pl-fe/normalizers'; + +interface IStatusTypeIcon { + status: Pick; +} + +const messages: Record = defineMessages({ + direct: { id: 'status.visibility.direct', defaultMessage: 'The post is only visible to mentioned users' }, + private: { id: 'status.visibility.private', defaultMessage: 'The post is only visible to followers of the author' }, + mutuals_only: { id: 'status.visibility.mutuals_only', defaultMessage: 'The post is only visible to people who mutually follow the author' }, + local: { id: 'status.visibility.local', defaultMessage: 'The post is only visible to users on your instance' }, + list: { id: 'status.visibility.list', defaultMessage: 'The post is only visible to the members of a list' }, + list_named: { id: 'status.visibility.list.named', defaultMessage: 'The post is only visible to the members of a {name} list' }, +}); + +const STATUS_TYPE_ICONS: Record = { + direct: require('@tabler/icons/outline/mail.svg'), + private: require('@tabler/icons/outline/lock.svg'), + mutuals_only: require('@tabler/icons/outline/users-group.svg'), + local: require('@tabler/icons/outline/affiliate.svg'), + list: require('@tabler/icons/outline/list.svg'), +}; + +const StatusTypeIcon: React.FC = ({ status }) => { + const intl = useIntl(); + + const icon = STATUS_TYPE_ICONS[status.visibility]; + const message = messages[status.visibility]; + + if (!icon) return null; + + return ( + <> + · + + + + ); +}; + +export { StatusTypeIcon as default };