moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'soapbox/develop' into events

This commit is contained in:
marcin mikołajczak 2022-11-27 23:33:51 +01:00
parent 6465423ccb 429b40aa6d
commit 9ba56a3945
17 changed files with 257 additions and 272 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/soapbox/components/markup.css
View File

@ -63,9 +63,9 @@
@apply w-5 h-5; @apply w-5 h-5;
} }
/* Markdown images */ /* Hide Markdown images (Pleroma) */
[data-markup] img:not(.emojione):not([width][height]) { [data-markup] img:not(.emojione) {
@apply w-full h-72 object-contain rounded-lg overflow-hidden my-4 block; @apply hidden;
} }
/* User setting to underline links */ /* User setting to underline links */

2
app/soapbox/components/profile-hover-card.tsx
View File

@ -106,7 +106,7 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
onMouseEnter={handleMouseEnter(dispatch)} onMouseEnter={handleMouseEnter(dispatch)}
onMouseLeave={handleMouseLeave(dispatch)} onMouseLeave={handleMouseLeave(dispatch)}
> >
<Card variant='rounded' className='relative'> <Card variant='rounded' className='relative isolate'>
<CardBody> <CardBody>
<Stack space={2}> <Stack space={2}>
<BundleContainer fetchComponent={UserPanel}> <BundleContainer fetchComponent={UserPanel}>

2
app/soapbox/components/ui/card/card.tsx
View File

@ -33,7 +33,7 @@ const Card = React.forwardRef<HTMLDivElement, ICard>(({ children, variant = 'def
ref={ref} ref={ref}
{...filteredProps} {...filteredProps}
className={classNames({ className={classNames({
'bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none overflow-hidden isolate': variant === 'rounded', 'bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none overflow-hidden': variant === 'rounded',
[sizes[size]]: variant === 'rounded', [sizes[size]]: variant === 'rounded',
}, className)} }, className)}
> >

3
app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
View File

@ -47,8 +47,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({ emojis, onReact, visible = fa
return ( return (
<HStack <HStack
space={2} className={classNames('gap-2 bg-white dark:bg-gray-900 p-3 rounded-full shadow-md z-[999] w-max max-w-[100vw] flex-wrap')}
className={classNames('bg-white dark:bg-gray-900 p-3 rounded-full shadow-md z-[999] w-max')}
> >
{Array.from(emojis).map((emoji, i) => ( {Array.from(emojis).map((emoji, i) => (
<EmojiButton <EmojiButton

44
app/soapbox/features/chats/components/chat.tsx
View File

@ -35,29 +35,29 @@ const Chat: React.FC<IChat> = ({ chatId, onClick }) => {
<button className='floating-link' onClick={() => onClick(chat)} /> <button className='floating-link' onClick={() => onClick(chat)} />
<HStack key={account.id} space={3} className='relative overflow-hidden'> <HStack key={account.id} space={3} className='relative overflow-hidden'>
<Avatar className='flex-none' src={account.avatar} size={36} /> <Avatar className='flex-none' src={account.avatar} size={36} />
<Stack className='overflow-hidden'> <Stack className='overflow-hidden flex-1'>
<DisplayName account={account} withSuffix={false} /> <DisplayName account={account} withSuffix={false} />
{attachment && ( <HStack space={1} justifyContent='between'>
<Icon {content ? (
className='chat__attachment-icon' <Text
src={image ? require('@tabler/icons/photo.svg') : require('@tabler/icons/paperclip.svg')} theme='muted'
/> size='sm'
)} className='max-h-5'
{content ? ( dangerouslySetInnerHTML={{ __html: parsedContent }}
<Text truncate
theme='muted' />
size='sm' ) : attachment && (
className='chat__last-message' <Text theme='muted' size='sm' className='italic'>
dangerouslySetInnerHTML={{ __html: parsedContent }} {image ? <FormattedMessage id='chats.attachment_image' defaultMessage='Image' /> : <FormattedMessage id='chats.attachment' defaultMessage='Attachment' />}
truncate </Text>
/> )}
) : attachment && ( {attachment && (
<span <Icon
className='chat__last-message attachment' className='chat__attachment-icon'
> src={image ? require('@tabler/icons/photo.svg') : require('@tabler/icons/paperclip.svg')}
{image ? <FormattedMessage id='chats.attachment_image' defaultMessage='Image' /> : <FormattedMessage id='chats.attachment' defaultMessage='Attachment' />} />
</span> )}
)} </HStack>
{unreadCount > 0 && ( {unreadCount > 0 && (
<div className='absolute top-1 right-0'> <div className='absolute top-1 right-0'>
<Counter count={unreadCount} /> <Counter count={unreadCount} />

17
app/soapbox/features/direct-timeline/index.tsx
View File

@ -5,14 +5,13 @@ import { directComposeById } from 'soapbox/actions/compose';
import { connectDirectStream } from 'soapbox/actions/streaming'; import { connectDirectStream } from 'soapbox/actions/streaming';
import { expandDirectTimeline } from 'soapbox/actions/timelines'; import { expandDirectTimeline } from 'soapbox/actions/timelines';
import AccountSearch from 'soapbox/components/account-search'; import AccountSearch from 'soapbox/components/account-search';
import ColumnHeader from 'soapbox/components/column-header';
import { Column } from 'soapbox/components/ui'; import { Column } from 'soapbox/components/ui';
import { useAppDispatch, useAppSelector } from 'soapbox/hooks'; import { useAppDispatch } from 'soapbox/hooks';
import Timeline from '../ui/components/timeline'; import Timeline from '../ui/components/timeline';
const messages = defineMessages({ const messages = defineMessages({
title: { id: 'column.direct', defaultMessage: 'Direct messages' }, heading: { id: 'column.direct', defaultMessage: 'Direct messages' },
searchPlaceholder: { id: 'direct.search_placeholder', defaultMessage: 'Send a message to…' }, searchPlaceholder: { id: 'direct.search_placeholder', defaultMessage: 'Send a message to…' },
}); });
@ -20,8 +19,6 @@ const DirectTimeline = () => {
const intl = useIntl(); const intl = useIntl();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const hasUnread = useAppSelector((state) => (state.timelines.get('direct')?.unread || 0) > 0);
useEffect(() => { useEffect(() => {
dispatch(expandDirectTimeline()); dispatch(expandDirectTimeline());
const disconnect = dispatch(connectDirectStream()); const disconnect = dispatch(connectDirectStream());
@ -40,13 +37,7 @@ const DirectTimeline = () => {
}; };
return ( return (
<Column label={intl.formatMessage(messages.title)} transparent withHeader={false}> <Column label={intl.formatMessage(messages.heading)}>
<ColumnHeader
icon='envelope'
active={hasUnread}
title={intl.formatMessage(messages.title)}
/>
<AccountSearch <AccountSearch
placeholder={intl.formatMessage(messages.searchPlaceholder)} placeholder={intl.formatMessage(messages.searchPlaceholder)}
onSelected={handleSuggestion} onSelected={handleSuggestion}
@ -57,7 +48,7 @@ const DirectTimeline = () => {
timelineId='direct' timelineId='direct'
onLoadMore={handleLoadMore} onLoadMore={handleLoadMore}
emptyMessage={<FormattedMessage id='empty_column.direct' defaultMessage="You don't have any direct messages yet. When you send or receive one, it will show up here." />} emptyMessage={<FormattedMessage id='empty_column.direct' defaultMessage="You don't have any direct messages yet. When you send or receive one, it will show up here." />}
divideType='space' divideType='border'
/> />
</Column> </Column>
); );

73
app/soapbox/features/federation-restrictions/components/instance-restrictions.tsx
View File

@ -4,7 +4,7 @@ import React from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import Icon from 'soapbox/components/icon'; import Icon from 'soapbox/components/icon';
import { Text } from 'soapbox/components/ui'; import { HStack, Stack, Text } from 'soapbox/components/ui';
import { useAppSelector } from 'soapbox/hooks'; import { useAppSelector } from 'soapbox/hooks';
import type { Map as ImmutableMap } from 'immutable'; import type { Map as ImmutableMap } from 'immutable';
@ -16,6 +16,23 @@ const hasRestrictions = (remoteInstance: ImmutableMap<string, any>): boolean =>
.reduce((acc: boolean, value: boolean) => acc || value, false); .reduce((acc: boolean, value: boolean) => acc || value, false);
}; };
interface IRestriction {
icon: string,
children: React.ReactNode,
}
const Restriction: React.FC<IRestriction> = ({ icon, children }) => {
return (
<HStack space={3}>
<Icon className='flex-none w-5 h-5' src={icon} />
<Text theme='muted'>
{children}
</Text>
</HStack>
);
};
interface IInstanceRestrictions { interface IInstanceRestrictions {
remoteInstance: ImmutableMap<string, any>, remoteInstance: ImmutableMap<string, any>,
} }
@ -40,57 +57,52 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
if (followers_only) { if (followers_only) {
items.push(( items.push((
<Text key='followers_only' className='flex items-center gap-2' theme='muted'> <Restriction key='followersOnly' icon={require('@tabler/icons/lock.svg')}>
<Icon src={require('@tabler/icons/lock.svg')} />
<FormattedMessage <FormattedMessage
id='federation_restriction.followers_only' id='federation_restriction.followers_only'
defaultMessage='Hidden except to followers' defaultMessage='Hidden except to followers'
/> />
</Text> </Restriction>
)); ));
} else if (federated_timeline_removal) { } else if (federated_timeline_removal) {
items.push(( items.push((
<Text key='federated_timeline_removal' className='flex items-center gap-2' theme='muted'> <Restriction key='federatedTimelineRemoval' icon={require('@tabler/icons/lock-open.svg')}>
<Icon src={require('@tabler/icons/lock-open.svg')} />
<FormattedMessage <FormattedMessage
id='federation_restriction.federated_timeline_removal' id='federation_restriction.federated_timeline_removal'
defaultMessage='Fediverse timeline removal' defaultMessage='Fediverse timeline removal'
/> />
</Text> </Restriction>
)); ));
} }
if (fullMediaRemoval) { if (fullMediaRemoval) {
items.push(( items.push((
<Text key='full_media_removal' className='flex items-center gap-2' theme='muted'> <Restriction key='fullMediaRemoval' icon={require('@tabler/icons/photo-off.svg')}>
<Icon src={require('@tabler/icons/photo-off.svg')} />
<FormattedMessage <FormattedMessage
id='federation_restriction.full_media_removal' id='federation_restriction.full_media_removal'
defaultMessage='Full media removal' defaultMessage='Full media removal'
/> />
</Text> </Restriction>
)); ));
} else if (partialMediaRemoval) { } else if (partialMediaRemoval) {
items.push(( items.push((
<Text key='partial_media_removal' className='flex items-center gap-2' theme='muted'> <Restriction key='partialMediaRemoval' icon={require('@tabler/icons/photo-off.svg')}>
<Icon src={require('@tabler/icons/photo-off.svg')} />
<FormattedMessage <FormattedMessage
id='federation_restriction.partial_media_removal' id='federation_restriction.partial_media_removal'
defaultMessage='Partial media removal' defaultMessage='Partial media removal'
/> />
</Text> </Restriction>
)); ));
} }
if (!fullMediaRemoval && media_nsfw) { if (!fullMediaRemoval && media_nsfw) {
items.push(( items.push((
<Text key='media_nsfw' className='flex items-center gap-2' theme='muted'> <Restriction key='mediaNsfw' icon={require('@tabler/icons/eye-off.svg')}>
<Icon src={require('@tabler/icons/eye-off.svg')} />
<FormattedMessage <FormattedMessage
id='federation_restriction.media_nsfw' id='federation_restriction.media_nsfw'
defaultMessage='Attachments marked NSFW' defaultMessage='Attachments marked NSFW'
/> />
</Text> </Restriction>
)); ));
} }
@ -105,46 +117,45 @@ const InstanceRestrictions: React.FC<IInstanceRestrictions> = ({ remoteInstance
if (remoteInstance.getIn(['federation', 'reject']) === true) { if (remoteInstance.getIn(['federation', 'reject']) === true) {
return ( return (
<Text className='flex items-center gap-2' theme='muted'> <Restriction icon={require('@tabler/icons/shield-x.svg')}>
<Icon src={require('@tabler/icons/x.svg')} />
<FormattedMessage <FormattedMessage
id='remote_instance.federation_panel.restricted_message' id='remote_instance.federation_panel.restricted_message'
defaultMessage='{siteTitle} blocks all activities from {host}.' defaultMessage='{siteTitle} blocks all activities from {host}.'
values={{ host, siteTitle }} values={{ host, siteTitle }}
/> />
</Text> </Restriction>
); );
} else if (hasRestrictions(remoteInstance)) { } else if (hasRestrictions(remoteInstance)) {
return [ return (
( <>
<Text theme='muted'> <Restriction icon={require('@tabler/icons/shield-lock.svg')}>
<FormattedMessage <FormattedMessage
id='remote_instance.federation_panel.some_restrictions_message' id='remote_instance.federation_panel.some_restrictions_message'
defaultMessage='{siteTitle} has placed some restrictions on {host}.' defaultMessage='{siteTitle} has placed some restrictions on {host}.'
values={{ host, siteTitle }} values={{ host, siteTitle }}
/> />
</Text> </Restriction>
),
renderRestrictions(), {renderRestrictions()}
]; </>
);
} else { } else {
return ( return (
<Text className='flex items-center gap-2' theme='muted'> <Restriction icon={require('@tabler/icons/shield-check.svg')}>
<Icon src={require('@tabler/icons/check.svg')} />
<FormattedMessage <FormattedMessage
id='remote_instance.federation_panel.no_restrictions_message' id='remote_instance.federation_panel.no_restrictions_message'
defaultMessage='{siteTitle} has placed no restrictions on {host}.' defaultMessage='{siteTitle} has placed no restrictions on {host}.'
values={{ host, siteTitle }} values={{ host, siteTitle }}
/> />
</Text> </Restriction>
); );
} }
}; };
return ( return (
<div className='py-1 pl-4 mb-4 border-solid border-l-[3px] border-gray-300 dark:border-gray-500'> <Stack space={3}>
{renderContent()} {renderContent()}
</div> </Stack>
); );
}; };

26
app/soapbox/features/placeholder/components/placeholder-chat.tsx
View File

@ -1,5 +1,7 @@
import React from 'react'; import React from 'react';
import { HStack, Stack } from 'soapbox/components/ui';
import { randomIntFromInterval, generateText } from '../utils'; import { randomIntFromInterval, generateText } from '../utils';
import PlaceholderAvatar from './placeholder-avatar'; import PlaceholderAvatar from './placeholder-avatar';
@ -10,20 +12,16 @@ const PlaceholderChat: React.FC = () => {
const messageLength = randomIntFromInterval(5, 75); const messageLength = randomIntFromInterval(5, 75);
return ( return (
<div className='chat-list-item chat-list-item--placeholder'> <div className='account chat-list-item--placeholder'>
<div className='account'> <HStack space={3}>
<div className='account__wrapper'> <PlaceholderAvatar size={36} />
<div className='account__display-name'> <Stack className='overflow-hidden'>
<div className='account__avatar-wrapper'> <PlaceholderDisplayName minLength={3} maxLength={25} withSuffix={false} />
<PlaceholderAvatar size={36} /> <span className='overflow-hidden text-ellipsis whitespace-nowrap text-primary-50 dark:text-primary-800'>
</div> {generateText(messageLength)}
<PlaceholderDisplayName minLength={3} maxLength={25} /> </span>
<span className='chat__last-message'> </Stack>
{generateText(messageLength)} </HStack>
</span>
</div>
</div>
</div>
</div> </div>
); );
}; };

5
app/soapbox/features/placeholder/components/placeholder-display-name.tsx
View File

@ -5,17 +5,18 @@ import { randomIntFromInterval, generateText } from '../utils';
interface IPlaceholderDisplayName { interface IPlaceholderDisplayName {
maxLength: number, maxLength: number,
minLength: number, minLength: number,
withSuffix?: boolean,
} }
/** Fake display name to show when data is loading. */ /** Fake display name to show when data is loading. */
const PlaceholderDisplayName: React.FC<IPlaceholderDisplayName> = ({ minLength, maxLength }) => { const PlaceholderDisplayName: React.FC<IPlaceholderDisplayName> = ({ minLength, maxLength, withSuffix = true }) => {
const length = randomIntFromInterval(maxLength, minLength); const length = randomIntFromInterval(maxLength, minLength);
const acctLength = randomIntFromInterval(maxLength, minLength); const acctLength = randomIntFromInterval(maxLength, minLength);
return ( return (
<div className='flex flex-col text-primary-50 dark:text-primary-800'> <div className='flex flex-col text-primary-50 dark:text-primary-800'>
<p>{generateText(length)}</p> <p>{generateText(length)}</p>
<p>{generateText(acctLength)}</p> {withSuffix && <p>{generateText(acctLength)}</p>}
</div> </div>
); );
}; };

38
app/soapbox/features/remote-timeline/index.tsx
View File

@ -5,8 +5,8 @@ import { useHistory } from 'react-router-dom';
import { connectRemoteStream } from 'soapbox/actions/streaming'; import { connectRemoteStream } from 'soapbox/actions/streaming';
import { expandRemoteTimeline } from 'soapbox/actions/timelines'; import { expandRemoteTimeline } from 'soapbox/actions/timelines';
import IconButton from 'soapbox/components/icon-button'; import IconButton from 'soapbox/components/icon-button';
import { HStack, Text } from 'soapbox/components/ui'; import SubNavigation from 'soapbox/components/sub-navigation';
import Column from 'soapbox/features/ui/components/column'; import { Column, HStack, Text } from 'soapbox/components/ui';
import { useAppDispatch, useSettings } from 'soapbox/hooks'; import { useAppDispatch, useSettings } from 'soapbox/hooks';
import Timeline from '../ui/components/timeline'; import Timeline from '../ui/components/timeline';
@ -14,7 +14,7 @@ import Timeline from '../ui/components/timeline';
import PinnedHostsPicker from './components/pinned-hosts-picker'; import PinnedHostsPicker from './components/pinned-hosts-picker';
const messages = defineMessages({ const messages = defineMessages({
title: { id: 'column.remote', defaultMessage: 'Federated timeline' }, heading: { id: 'column.remote', defaultMessage: 'Federated timeline' },
}); });
interface IRemoteTimeline { interface IRemoteTimeline {
@ -65,18 +65,26 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
}, [onlyMedia]); }, [onlyMedia]);
return ( return (
<Column label={intl.formatMessage(messages.title)} heading={instance} transparent withHeader={false}> <Column label={intl.formatMessage(messages.heading)} transparent withHeader={false}>
{instance && <PinnedHostsPicker host={instance} />} <div className='px-4 pt-4 sm:p-0'>
{!pinned && <HStack className='mb-4 px-2' space={2}> <SubNavigation message={instance} />
<IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/x.svg')} onClick={handleCloseClick} />
<Text> {instance && <PinnedHostsPicker host={instance} />}
<FormattedMessage
id='remote_timeline.filter_message' {!pinned && (
defaultMessage='You are viewing the timeline of {instance}.' <HStack className='mb-4 px-2' space={2}>
values={{ instance }} <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/x.svg')} onClick={handleCloseClick} />
/> <Text>
</Text> <FormattedMessage
</HStack>} id='remote_timeline.filter_message'
defaultMessage='You are viewing the timeline of {instance}.'
values={{ instance }}
/>
</Text>
</HStack>
)}
</div>
<Timeline <Timeline
scrollKey={`${timelineId}_${instance}_timeline`} scrollKey={`${timelineId}_${instance}_timeline`}
timelineId={`${timelineId}${onlyMedia ? ':media' : ''}:${instance}`} timelineId={`${timelineId}${onlyMedia ? ':media' : ''}:${instance}`}

119
app/soapbox/features/ui/components/modals/edit-federation-modal.tsx
View File

@ -1,17 +1,15 @@
import { Map as ImmutableMap } from 'immutable'; import { Map as ImmutableMap } from 'immutable';
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect, useCallback } from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import Toggle from 'react-toggle'; import Toggle from 'react-toggle';
import { updateMrf } from 'soapbox/actions/mrf'; import { updateMrf } from 'soapbox/actions/mrf';
import snackbar from 'soapbox/actions/snackbar'; import snackbar from 'soapbox/actions/snackbar';
import { HStack, Modal, Stack, Text } from 'soapbox/components/ui'; import List, { ListItem } from 'soapbox/components/list';
import { SimpleForm } from 'soapbox/features/forms'; import { Modal } from 'soapbox/components/ui';
import { useAppSelector, useAppDispatch } from 'soapbox/hooks'; import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
import { makeGetRemoteInstance } from 'soapbox/selectors'; import { makeGetRemoteInstance } from 'soapbox/selectors';
const getRemoteInstance = makeGetRemoteInstance();
const messages = defineMessages({ const messages = defineMessages({
mediaRemoval: { id: 'edit_federation.media_removal', defaultMessage: 'Strip media' }, mediaRemoval: { id: 'edit_federation.media_removal', defaultMessage: 'Strip media' },
forceNsfw: { id: 'edit_federation.force_nsfw', defaultMessage: 'Force attachments to be marked sensitive' }, forceNsfw: { id: 'edit_federation.force_nsfw', defaultMessage: 'Force attachments to be marked sensitive' },
@ -31,6 +29,7 @@ const EditFederationModal: React.FC<IEditFederationModal> = ({ host, onClose })
const intl = useIntl(); const intl = useIntl();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const getRemoteInstance = useCallback(makeGetRemoteInstance(), []);
const remoteInstance = useAppSelector(state => getRemoteInstance(state, host)); const remoteInstance = useAppSelector(state => getRemoteInstance(state, host));
const [data, setData] = useState(ImmutableMap<string, any>()); const [data, setData] = useState(ImmutableMap<string, any>());
@ -82,74 +81,56 @@ const EditFederationModal: React.FC<IEditFederationModal> = ({ host, onClose })
confirmationAction={handleSubmit} confirmationAction={handleSubmit}
confirmationText={intl.formatMessage(messages.save)} confirmationText={intl.formatMessage(messages.save)}
> >
<SimpleForm onSubmit={handleSubmit}> <List>
<Stack space={2}> <ListItem label={<FormattedMessage id='edit_federation.reject' defaultMessage='Reject all activities' />}>
<HStack space={2} alignItems='center'> <Toggle
<Toggle checked={reject}
checked={reject} onChange={handleDataChange('reject')}
onChange={handleDataChange('reject')} icons={false}
icons={false} id='reject'
id='reject' />
/> </ListItem>
<Text theme='muted' tag='label' size='sm' htmlFor='reject'> <ListItem label={<FormattedMessage id='edit_federation.media_removal' defaultMessage='Strip media' />}>
<FormattedMessage id='edit_federation.reject' defaultMessage='Reject all activities' /> <Toggle
</Text> checked={fullMediaRemoval}
</HStack> onChange={handleMediaRemoval}
<HStack space={2} alignItems='center'> icons={false}
<Toggle id='media_removal'
checked={fullMediaRemoval} disabled={reject}
onChange={handleMediaRemoval} />
icons={false} </ListItem>
id='media_removal'
disabled={reject}
/>
<Text theme='muted' tag='label' size='sm' htmlFor='media_removal'> <ListItem label={<FormattedMessage id='edit_federation.force_nsfw' defaultMessage='Force attachments to be marked sensitive' />}>
<FormattedMessage id='edit_federation.media_removal' defaultMessage='Strip media' /> <Toggle
</Text> checked={media_nsfw}
</HStack> onChange={handleDataChange('media_nsfw')}
<HStack space={2} alignItems='center'> icons={false}
<Toggle id='media_nsfw'
checked={media_nsfw} disabled={reject || media_removal}
onChange={handleDataChange('media_nsfw')} />
icons={false} </ListItem>
id='media_nsfw'
disabled={reject || media_removal}
/>
<Text theme='muted' tag='label' size='sm' htmlFor='media_nsfw'> <ListItem label={<FormattedMessage id='edit_federation.followers_only' defaultMessage='Hide posts except to followers' />}>
<FormattedMessage id='edit_federation.force_nsfw' defaultMessage='Force attachments to be marked sensitive' /> <Toggle
</Text> checked={followers_only}
</HStack> onChange={handleDataChange('followers_only')}
<HStack space={2} alignItems='center'> icons={false}
<Toggle id='followers_only'
checked={followers_only} disabled={reject}
onChange={handleDataChange('followers_only')} />
icons={false} </ListItem>
id='followers_only'
disabled={reject}
/>
<Text theme='muted' tag='label' size='sm' htmlFor='followers_only'> <ListItem label={<FormattedMessage id='edit_federation.unlisted' defaultMessage='Force posts unlisted' />}>
<FormattedMessage id='edit_federation.followers_only' defaultMessage='Hide posts except to followers' /> <Toggle
</Text> checked={federated_timeline_removal}
</HStack> onChange={handleDataChange('federated_timeline_removal')}
<HStack space={2} alignItems='center'> icons={false}
<Toggle id='federated_timeline_removal'
checked={federated_timeline_removal} disabled={reject || followers_only}
onChange={handleDataChange('federated_timeline_removal')} />
icons={false} </ListItem>
id='federated_timeline_removal' </List>
disabled={reject || followers_only}
/>
<Text theme='muted' tag='label' size='sm' htmlFor='federated_timeline_removal'>
<FormattedMessage id='edit_federation.unlisted' defaultMessage='Force posts unlisted' />
</Text>
</HStack>
</Stack>
</SimpleForm>
</Modal> </Modal>
); );
}; };

73
app/soapbox/features/ui/components/profile-field.tsx Normal file
View File

@ -0,0 +1,73 @@
import classNames from 'clsx';
import React from 'react';
import { defineMessages, useIntl, FormatDateOptions } from 'react-intl';
import Markup from 'soapbox/components/markup';
import { HStack, Icon } from 'soapbox/components/ui';
import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
import { CryptoAddress } from 'soapbox/features/ui/util/async-components';
import type { Field } from 'soapbox/types/entities';
const getTicker = (value: string): string => (value.match(/\$([a-zA-Z]*)/i) || [])[1];
const isTicker = (value: string): boolean => Boolean(getTicker(value));
const messages = defineMessages({
linkVerifiedOn: { id: 'account.link_verified_on', defaultMessage: 'Ownership of this link was checked on {date}' },
});
const dateFormatOptions: FormatDateOptions = {
month: 'short',
day: 'numeric',
year: 'numeric',
hour12: true,
hour: 'numeric',
minute: '2-digit',
};
interface IProfileField {
field: Field,
}
/** Renders a single profile field. */
const ProfileField: React.FC<IProfileField> = ({ field }) => {
const intl = useIntl();
if (isTicker(field.name)) {
return (
<BundleContainer fetchComponent={CryptoAddress}>
{Component => (
<Component
ticker={getTicker(field.name).toLowerCase()}
address={field.value_plain}
/>
)}
</BundleContainer>
);
}
return (
<dl>
<dt title={field.name}>
<Markup weight='bold' tag='span' dangerouslySetInnerHTML={{ __html: field.name_emojified }} />
</dt>
<dd
className={classNames({ 'text-success-500': field.verified_at })}
title={field.value_plain}
>
<HStack space={2} alignItems='center'>
{field.verified_at && (
<span className='flex-none' title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(field.verified_at, dateFormatOptions) })}>
<Icon src={require('@tabler/icons/check.svg')} />
</span>
)}
<Markup className='break-words overflow-hidden' tag='span' dangerouslySetInnerHTML={{ __html: field.value_emojified }} />
</HStack>
</dd>
</dl>
);
};
export default ProfileField;

74
app/soapbox/features/ui/components/profile-fields-panel.tsx
View File

@ -1,77 +1,11 @@
import classNames from 'clsx';
import React from 'react'; import React from 'react';
import { defineMessages, useIntl, FormattedMessage, FormatDateOptions } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import Markup from 'soapbox/components/markup'; import { Widget, Stack } from 'soapbox/components/ui';
import { Widget, Stack, HStack, Icon } from 'soapbox/components/ui';
import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
import { CryptoAddress } from 'soapbox/features/ui/util/async-components';
import type { Account, Field } from 'soapbox/types/entities'; import ProfileField from './profile-field';
const getTicker = (value: string): string => (value.match(/\$([a-zA-Z]*)/i) || [])[1]; import type { Account } from 'soapbox/types/entities';
const isTicker = (value: string): boolean => Boolean(getTicker(value));
const messages = defineMessages({
linkVerifiedOn: { id: 'account.link_verified_on', defaultMessage: 'Ownership of this link was checked on {date}' },
account_locked: { id: 'account.locked_info', defaultMessage: 'This account privacy status is set to locked. The owner manually reviews who can follow them.' },
deactivated: { id: 'account.deactivated', defaultMessage: 'Deactivated' },
bot: { id: 'account.badges.bot', defaultMessage: 'Bot' },
});
const dateFormatOptions: FormatDateOptions = {
month: 'short',
day: 'numeric',
year: 'numeric',
hour12: true,
hour: 'numeric',
minute: '2-digit',
};
interface IProfileField {
field: Field,
}
/** Renders a single profile field. */
const ProfileField: React.FC<IProfileField> = ({ field }) => {
const intl = useIntl();
if (isTicker(field.name)) {
return (
<BundleContainer fetchComponent={CryptoAddress}>
{Component => (
<Component
ticker={getTicker(field.name).toLowerCase()}
address={field.value_plain}
/>
)}
</BundleContainer>
);
}
return (
<dl>
<dt title={field.name}>
<Markup weight='bold' tag='span' dangerouslySetInnerHTML={{ __html: field.name_emojified }} />
</dt>
<dd
className={classNames({ 'text-success-500': field.verified_at })}
title={field.value_plain}
>
<HStack space={2} alignItems='center'>
{field.verified_at && (
<span className='flex-none' title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(field.verified_at, dateFormatOptions) })}>
<Icon src={require('@tabler/icons/check.svg')} />
</span>
)}
<Markup className='break-words overflow-hidden' tag='span' dangerouslySetInnerHTML={{ __html: field.value_emojified }} />
</HStack>
</dd>
</dl>
);
};
interface IProfileFieldsPanel { interface IProfileFieldsPanel {
account: Account, account: Account,

9
app/soapbox/features/ui/components/profile-info-panel.tsx
View File

@ -13,6 +13,7 @@ import { badgeToTag, getBadges as getAccountBadges } from 'soapbox/utils/badges'
import { capitalize } from 'soapbox/utils/strings'; import { capitalize } from 'soapbox/utils/strings';
import ProfileFamiliarFollowers from './profile-familiar-followers'; import ProfileFamiliarFollowers from './profile-familiar-followers';
import ProfileField from './profile-field';
import ProfileStats from './profile-stats'; import ProfileStats from './profile-stats';
import type { Account } from 'soapbox/types/entities'; import type { Account } from 'soapbox/types/entities';
@ -231,6 +232,14 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
<ProfileFamiliarFollowers account={account} /> <ProfileFamiliarFollowers account={account} />
</Stack> </Stack>
{account.fields.size > 0 && (
<Stack space={2} className='mt-4 xl:hidden'>
{account.fields.map((field, i) => (
<ProfileField field={field} key={i} />
))}
</Stack>
)}
</div> </div>
); );
}; };

3
app/soapbox/reducers/compose.ts
View File

@ -326,10 +326,11 @@ export default function compose(state = initialState, action: AnyAction) {
})); }));
case COMPOSE_QUOTE: case COMPOSE_QUOTE:
return updateCompose(state, 'compose-modal', compose => compose.withMutations(map => { return updateCompose(state, 'compose-modal', compose => compose.withMutations(map => {
const author = action.status.getIn(['account', 'acct']);
const defaultCompose = state.get('default')!; const defaultCompose = state.get('default')!;
map.set('quote', action.status.get('id')); map.set('quote', action.status.get('id'));
map.set('to', ImmutableOrderedSet()); map.set('to', ImmutableOrderedSet([author]));
map.set('text', ''); map.set('text', '');
map.set('privacy', privacyPreference(action.status.visibility, defaultCompose.privacy)); map.set('privacy', privacyPreference(action.status.visibility, defaultCompose.privacy));
map.set('focusDate', new Date()); map.set('focusDate', new Date());

13
app/soapbox/utils/features.ts
View File

@ -49,7 +49,8 @@ export const TRUTHSOCIAL = 'TruthSocial';
* Rebased, the recommended backend for Soapbox. * Rebased, the recommended backend for Soapbox.
* @see {@link https://gitlab.com/soapbox-pub/rebased} * @see {@link https://gitlab.com/soapbox-pub/rebased}
*/ */
export const SOAPBOX = 'soapbox'; // NOTE: Rebased is named 'soapbox' for legacy reasons.
export const REBASED = 'soapbox';
/** /**
* glitch-soc, fork of Mastodon with a number of experimental features. * glitch-soc, fork of Mastodon with a number of experimental features.
@ -105,7 +106,7 @@ const getInstanceFeatures = (instance: Instance) => {
* @see PATCH /api/v1/accounts/update_credentials * @see PATCH /api/v1/accounts/update_credentials
*/ */
accountLocation: any([ accountLocation: any([
v.software === PLEROMA && v.build === SOAPBOX && gte(v.version, '2.4.50'), v.software === PLEROMA && v.build === REBASED && gte(v.version, '2.4.50'),
v.software === TRUTHSOCIAL, v.software === TRUTHSOCIAL,
]), ]),
@ -179,7 +180,7 @@ const getInstanceFeatures = (instance: Instance) => {
* @see POST /api/v1/accounts * @see POST /api/v1/accounts
* @see PATCH /api/v1/accounts/update_credentials * @see PATCH /api/v1/accounts/update_credentials
*/ */
birthdays: v.software === PLEROMA && v.build === SOAPBOX && gte(v.version, '2.4.50'), birthdays: v.software === PLEROMA && v.build === REBASED && gte(v.version, '2.4.50'),
/** Whether people who blocked you are visible through the API. */ /** Whether people who blocked you are visible through the API. */
blockersVisible: features.includes('blockers_visible'), blockersVisible: features.includes('blockers_visible'),
@ -382,7 +383,7 @@ const getInstanceFeatures = (instance: Instance) => {
*/ */
mastodonAdmin: any([ mastodonAdmin: any([
v.software === MASTODON && gte(v.compatVersion, '2.9.1'), v.software === MASTODON && gte(v.compatVersion, '2.9.1'),
v.software === PLEROMA && v.build === SOAPBOX && gte(v.version, '2.4.50'), v.software === PLEROMA && v.build === REBASED && gte(v.version, '2.4.50'),
]), ]),
/** /**
@ -506,7 +507,7 @@ const getInstanceFeatures = (instance: Instance) => {
* @see POST /api/v1/statuses * @see POST /api/v1/statuses
*/ */
quotePosts: any([ quotePosts: any([
v.software === PLEROMA && [SOAPBOX, AKKOMA].includes(v.build!) && gte(v.version, '2.4.50'), v.software === PLEROMA && [REBASED, AKKOMA].includes(v.build!) && gte(v.version, '2.4.50'),
instance.feature_quote === true, instance.feature_quote === true,
]), ]),
@ -522,7 +523,7 @@ const getInstanceFeatures = (instance: Instance) => {
*/ */
removeFromFollowers: any([ removeFromFollowers: any([
v.software === MASTODON && gte(v.compatVersion, '3.5.0'), v.software === MASTODON && gte(v.compatVersion, '3.5.0'),
v.software === PLEROMA && v.build === SOAPBOX && gte(v.version, '2.4.50'), v.software === PLEROMA && v.build === REBASED && gte(v.version, '2.4.50'),
]), ]),
reportMultipleStatuses: any([ reportMultipleStatuses: any([

22
app/styles/chats.scss
View File

@ -306,28 +306,6 @@
} }
} }
.chat {
&__attachment-icon {
float: right;
}
&__last-message {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-height: 19px;
a {
color: var(--highlight-text-color);
}
&.attachment {
font-style: italic;
}
}
}
.chat-message__media { .chat-message__media {
height: 120px; height: 120px;
} }