tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #3498 from glitch-soc/glitch-soc/merge-upstream

Browse Source 
Merge upstream changes up to b2aa476abbe82e2b49d84c9fb8ef654f95391fd3
This commit is contained in:
Claire 2026-05-07 20:14:07 +02:00 committed by GitHub
commit ccb7bd118f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
177 changed files with 1827 additions and 1294 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/actions/setup-javascript/action.yml vendored
View File

@ -16,7 +16,7 @@ runs:
# The following is needed because we can not use `cache: true` for `setup-node`, as it does not support Corepack yet and mess up with the cache location if ran after Node is installed
- name: Enable corepack
shell: bash
run: corepack enable
run: npm i -g corepack
- name: Get yarn cache directory path
id: yarn-cache-dir-path

2
Dockerfile
View File

@ -342,7 +342,7 @@ COPY --from=node /usr/local/lib /usr/local/lib
RUN \
# Configure Corepack
rm /usr/local/bin/yarn*; \
corepack enable; \
npm i -g corepack; \
corepack prepare --activate;
# hadolint ignore=DL3008

1
Gemfile
View File

@ -58,6 +58,7 @@ gem 'httplog', '~> 1.8.0', require: false
gem 'i18n'
gem 'idn-ruby', require: 'idn'
gem 'inline_svg'
gem 'ipaddr', '~> 1.2'
gem 'irb', '~> 1.8'
gem 'kaminari', '~> 1.2'
gem 'link_header', '~> 0.0'

2
Gemfile.lock
View File

@ -343,6 +343,7 @@ GEM
activesupport (>= 3.0)
nokogiri (>= 1.6)
io-console (0.8.2)
ipaddr (1.2.9)
irb (1.18.0)
pp (>= 0.6.0)
prism (>= 1.3.0)
@ -992,6 +993,7 @@ DEPENDENCIES
i18n-tasks (~> 1.0)
idn-ruby
inline_svg
ipaddr (~> 1.2)
irb (~> 1.8)
jd-paperclip-azure (~> 3.0)
json

2
Vagrantfile vendored
View File

@ -115,7 +115,7 @@ gem install bundler foreman
bundle install
# Install node modules
sudo corepack enable
sudo npm i -g corepack
corepack prepare
yarn install

10
app/controllers/redirect/collections_controller.rb Normal file
View File

@ -0,0 +1,10 @@
# frozen_string_literal: true
class Redirect::CollectionsController < Redirect::BaseController
private
def set_resource
@resource = Collection.find(params[:id])
not_found if @resource.local? || @resource&.account&.suspended?
end
end

6
app/helpers/context_helper.rb
View File

@ -49,9 +49,9 @@ module ContextHelper
},
quote_authorizations: {
'gts' => 'https://gotosocial.org/ns#',
'quoteAuthorization' => { '@id' => 'https://w3id.org/fep/044f#quoteAuthorization', '@type' => '@id' },
'interactingObject' => { '@id' => 'gts:interactingObject' },
'interactionTarget' => { '@id' => 'gts:interactionTarget' },
'QuoteAuthorization' => 'https://w3id.org/fep/044f#QuoteAuthorization',
'interactingObject' => { '@id' => 'gts:interactingObject', '@type' => '@id' },
'interactionTarget' => { '@id' => 'gts:interactionTarget', '@type' => '@id' },
},
}.freeze

7
app/javascript/flavours/glitch/components/account_header/buttons.tsx
View File

@ -3,8 +3,6 @@ import type { FC } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import classNames from 'classnames';
import { followAccount } from '@/flavours/glitch/actions/accounts';
import { useAccount } from '@/flavours/glitch/hooks/useAccount';
import { getAccountHidden } from '@/flavours/glitch/selectors/accounts';
@ -18,6 +16,7 @@ import { FollowButton } from '../follow_button';
import { IconButton } from '../icon_button';
import { AccountMenu } from './menu';
import classes from './styles.module.scss';
const messages = defineMessages({
enableNotifications: {
@ -49,7 +48,7 @@ export const AccountButtons: FC<AccountButtonsProps> = ({
const me = useAppSelector((state) => state.meta.get('me') as string);
return (
<div className={classNames('account__header__buttons', className)}>
<div className={className}>
{!hidden && (
<AccountButtonsOther accountId={accountId} noShare={noShare} />
)}
@ -94,7 +93,7 @@ const AccountButtonsOther: FC<
{!isMovedAndUnfollowedAccount && (
<FollowButton
accountId={accountId}
className='account__header__follow-button'
className={classes.followButton}
labelLength='long'
/>
)}

13
app/javascript/flavours/glitch/components/account_header/fields.tsx
View File

@ -108,11 +108,9 @@ const FieldCard: FC<{
}> = ({ htmlHandlers, field }) => {
const intl = useIntl();
const {
name,
name_emojified,
nameHasEmojis,
value_emojified,
value_plain,
valueHasEmojis,
verified_at,
} = field;
@ -138,8 +136,7 @@ const FieldCard: FC<{
)}
label={
<FieldHTML
text={name}
textEmojified={name_emojified}
text={name_emojified}
textHasCustomEmoji={nameHasEmojis}
className='translate'
isOverflowing={isLabelOverflowing}
@ -149,8 +146,7 @@ const FieldCard: FC<{
}
value={
<FieldHTML
text={value_plain}
textEmojified={value_emojified}
text={value_emojified}
textHasCustomEmoji={valueHasEmojis}
isOverflowing={isValueOverflowing}
onOverflowClick={handleOverflowClick}
@ -175,7 +171,6 @@ const FieldCard: FC<{
type FieldHTMLProps = {
text: string;
textEmojified: string;
textHasCustomEmoji: boolean;
isOverflowing?: boolean;
onOverflowClick?: () => void;
@ -183,9 +178,7 @@ type FieldHTMLProps = {
const FieldHTML: FC<FieldHTMLProps> = ({
className,
extraEmojis,
text,
textEmojified,
textHasCustomEmoji,
isOverflowing,
onOverflowClick,
@ -198,7 +191,7 @@ const FieldHTML: FC<FieldHTMLProps> = ({
const html = (
<EmojiHTML
as='span'
htmlString={textEmojified}
htmlString={text}
className={className}
onElement={handleElement}
data-contents

52
app/javascript/flavours/glitch/components/account_header/index.tsx
View File

@ -1,7 +1,8 @@
import { useCallback } from 'react';
import classNames from 'classnames';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import { openModal } from '@/flavours/glitch/actions/modal';
import FollowRequestNoteContainer from '@/flavours/glitch/features/account/containers/follow_request_note_container';
@ -96,22 +97,20 @@ export const AccountHeader: React.FC<{
const isMe = me && account.id === me;
return (
<div className='account-timeline__header'>
<div>
{!hidden && account.memorial && <MemorialNote />}
{!hidden && account.moved && (
<MovedNote accountId={account.id} targetAccountId={account.moved} />
)}
<AnimateEmojiProvider
className={classNames('account__header', {
inactive: !!account.moved,
})}
className={classNames(!!account.moved && classes.moved)}
>
{!suspendedOrHidden && !account.moved && relationship?.requested_by && (
<FollowRequestNoteContainer account={account} />
)}
<div className={classNames('account__header__image', classes.header)}>
<div className={classes.header}>
{!suspendedOrHidden && (
<img
src={autoPlayGif ? account.header : account.header_static}
@ -121,21 +120,16 @@ export const AccountHeader: React.FC<{
)}
</div>
<div className={classNames('account__header__bar', classes.barWrapper)}>
<div
className={classNames(
'account__header__tabs',
classes.avatarWrapper,
)}
>
<div className={classes.barWrapper}>
<div className={classes.avatarWrapper}>
<a
className='avatar'
href={account.avatar}
rel='noopener'
target='_blank'
onClick={handleOpenAvatar}
>
<Avatar
className={classes.avatar}
account={suspendedOrHidden ? undefined : account}
alt={account.avatar_description}
size={80}
@ -143,12 +137,7 @@ export const AccountHeader: React.FC<{
</a>
</div>
<div
className={classNames(
'account__header__tabs__name',
classes.displayNameWrapper,
)}
>
<div className={classes.displayNameWrapper}>
<AccountName accountId={accountId} />
<AccountButtons
accountId={accountId}
@ -168,23 +157,16 @@ export const AccountHeader: React.FC<{
)}
{!suspendedOrHidden && (
<div className='account__header__extra'>
<div className='account__header__bio'>
{me && account.id !== me && (
<AccountNote accountId={accountId} />
)}
<div className={classes.bioButtonsWrapper}>
{me && account.id !== me && <AccountNote accountId={accountId} />}
<AccountBio
showDropdown
accountId={accountId}
className={classNames(
'account__header__content',
classes.bio,
)}
/>
<AccountBio
showDropdown
accountId={accountId}
className={classes.bio}
/>
<AccountHeaderFields accountId={accountId} />
</div>
<AccountHeaderFields accountId={accountId} />
{!me && account.email_subscriptions && (
<AccountSubscriptionForm accountId={accountId} />

120
app/javascript/flavours/glitch/components/account_header/styles.module.scss
View File

@ -1,26 +1,79 @@
.moved {
opacity: 0.5;
}
// Account header
.header {
height: 120px;
overflow: hidden;
background: var(--color-bg-secondary);
border-bottom: 1px solid var(--color-border-primary);
img {
object-fit: cover;
display: block;
width: 100%;
height: 100%;
margin: 0;
}
@container (width >= 500px) {
height: 160px;
}
:global(.inactive) & {
filter: grayscale(100%);
}
}
// Wraps everything except the header image.
.barWrapper {
border-bottom: none;
padding-inline: 16px;
}
// Avatar
.avatarWrapper {
margin-top: -64px;
padding-top: 0;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
overflow: hidden;
margin-inline-start: -2px; // aligns the pfp with content below
}
.avatar {
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--avatar-border-radius);
.moved & {
filter: grayscale(100%);
}
}
.displayNameWrapper {
display: flex;
align-items: start;
gap: 16px;
margin-top: 16px;
margin-bottom: 16px;
h1 {
font-size: 17px;
line-height: 22px;
color: var(--color-text-primary);
font-weight: 600;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
:global(.emojione) {
width: 22px;
height: 22px;
}
}
.nameWrapper {
@ -112,21 +165,6 @@
}
}
$button-breakpoint: 420px;
$button-fallback-breakpoint: $button-breakpoint + 55px;
.buttonsDesktop {
@container (width < #{$button-breakpoint}) {
display: none;
}
@supports (not (container-type: inline-size)) {
@media (max-width: #{$button-fallback-breakpoint}) {
display: none;
}
}
}
.handleCopy {
border: 1px solid var(--color-border-primary);
border-radius: 8px;
@ -147,6 +185,45 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;
}
}
$button-breakpoint: 420px;
$button-fallback-breakpoint: $button-breakpoint + 55px;
.buttonsDesktop,
.buttonsMobile {
display: flex;
align-items: center;
gap: 8px;
:global(.button) {
flex-shrink: 1;
white-space: nowrap;
min-width: 80px;
}
:global(.icon-button) {
border: 1px solid var(--color-border-primary);
border-radius: 4px;
box-sizing: content-box;
padding: 5px;
&:global(.copied) {
border-color: var(--color-text-success);
}
}
}
.buttonsDesktop {
@container (width < #{$button-breakpoint}) {
display: none;
}
@supports (not (container-type: inline-size)) {
@media (max-width: #{$button-fallback-breakpoint}) {
display: none;
}
}
}
.buttonsMobile {
position: sticky;
bottom: var(--mobile-bottom-nav-height);
@ -188,6 +265,7 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;
.bio {
font-size: 15px;
color: var(--color-text-primary);
}
.familiarFollowers {
@ -420,3 +498,13 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;
background: var(--color-bg-primary);
}
}
// Buttons
.followButton {
flex-grow: 1;
}
.bioButtonsWrapper {
margin-top: 16px;
}

2
app/javascript/flavours/glitch/components/error_boundary.jsx
View File

@ -3,7 +3,7 @@ import { PureComponent } from 'react';
import { FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import StackTrace from 'stacktrace-js';

24
app/javascript/flavours/glitch/components/hover_card_account.tsx
View File

@ -158,17 +158,19 @@ export const HoverCardAccount = forwardRef<
{(isMutual || isFollower) && (
<>
&middot;
{isMutual ? (
<FormattedMessage
id='account.mutual'
defaultMessage='You follow each other'
/>
) : (
<FormattedMessage
id='account.follows_you'
defaultMessage='Follows you'
/>
)}
<span>
{isMutual ? (
<FormattedMessage
id='account.mutual'
defaultMessage='You follow each other'
/>
) : (
<FormattedMessage
id='account.follows_you'
defaultMessage='Follows you'
/>
)}
</span>
</>
)}
</div>

2
app/javascript/flavours/glitch/containers/mastodon.jsx
View File

@ -1,6 +1,6 @@
import { PureComponent } from 'react';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import { Route } from 'react-router-dom';
import { Provider as ReduxProvider } from 'react-redux';

2
app/javascript/flavours/glitch/features/about/index.jsx
View File

@ -3,7 +3,7 @@ import { PureComponent } from 'react';
import { defineMessages, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux';

3
app/javascript/flavours/glitch/features/account_edit/components/column.tsx
View File

@ -2,9 +2,10 @@ import type { FC } from 'react';
import { FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Link } from 'react-router-dom';
import { Helmet } from '@unhead/react/helmet';
import { Column } from '@/flavours/glitch/components/column';
import { ColumnHeader } from '@/flavours/glitch/components/column_header';
import { LoadingIndicator } from '@/flavours/glitch/components/loading_indicator';

15
app/javascript/flavours/glitch/features/account_featured/index.tsx
View File

@ -24,6 +24,7 @@ import Column from '@/flavours/glitch/features/ui/components/column';
import { useAccount } from '@/flavours/glitch/hooks/useAccount';
import { useAccountId } from '@/flavours/glitch/hooks/useAccountId';
import { useAccountVisibility } from '@/flavours/glitch/hooks/useAccountVisibility';
import { me } from '@/flavours/glitch/initial_state';
import { useAppDispatch, useAppSelector } from '@/flavours/glitch/store';
import AddIcon from '@/material-icons/400-24px/add.svg?react';
@ -173,12 +174,14 @@ const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({
defaultMessage='Collections'
/>
</h2>
<SubheadingLink to='/collections/new' icon={AddIcon}>
<FormattedMessage
id='account.featured.new_collection'
defaultMessage='New collection'
/>
</SubheadingLink>
{accountId === me && (
<SubheadingLink to='/collections/new' icon={AddIcon}>
<FormattedMessage
id='account.featured.new_collection'
defaultMessage='New collection'
/>
</SubheadingLink>
)}
</Subheading>
{hasCollections ? (
<ItemList>

2
app/javascript/flavours/glitch/features/bookmarked_statuses/index.tsx
View File

@ -2,7 +2,7 @@ import { useEffect, useRef, useCallback } from 'react';
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import BookmarksIcon from '@/material-icons/400-24px/bookmarks-fill.svg?react';
import {

5
app/javascript/flavours/glitch/features/collections/components/collection_menu.tsx
View File

@ -131,7 +131,7 @@ export const CollectionMenu: React.FC<{
{
text: intl.formatMessage(messages.copyLink),
action: () => {
void navigator.clipboard.writeText(getCollectionPath(id));
void navigator.clipboard.writeText(collection.url);
dispatch(showAlert({ message: messages.copyLinkConfirmation }));
},
},
@ -196,13 +196,14 @@ export const CollectionMenu: React.FC<{
id,
openShareModal,
isOwnCollection,
collection.url,
dispatch,
openDeleteConfirmation,
context,
currentAccountInCollection,
openReportModal,
openBlockModal,
openRevokeConfirmation,
openBlockModal,
]);
return (

2
app/javascript/flavours/glitch/features/collections/components/share_modal.tsx
View File

@ -42,7 +42,7 @@ export const CollectionShareModal: React.FC<{
const isNew = !!location.state?.newCollection;
const isOwnCollection = collection.account_id === me;
const collectionLink = `${window.location.origin}/collections/${collection.id}`;
const collectionLink = collection.url;
const handleShareOnDevice = useCallback(() => {
void navigator.share({

10
app/javascript/flavours/glitch/features/collections/detail/accounts_list.tsx
View File

@ -138,12 +138,16 @@ export const CollectionAccountsList: React.FC<{
const renderAccountItemButton = useCallback(
({ relationship, accountId }: RenderButtonOptions) => {
if (!me || !relationship) {
// Show follow button when logged out (it will trigger the remote interaction modal)
return <AccountListItemFollowButton accountId={accountId} />;
}
// When viewing your own collection, only show the Follow button
// for accounts you're not following anymore.
const withoutButton =
!relationship ||
(collectionOwnerId === me &&
(relationship.following || relationship.requested));
collectionOwnerId === me &&
(relationship.following || relationship.requested);
if (withoutButton) return null;

3
app/javascript/flavours/glitch/features/collections/detail/index.tsx
View File

@ -2,10 +2,11 @@ import { useCallback, useEffect } from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { Helmet } from 'react-helmet';
import { useHistory, useLocation, useParams } from 'react-router';
import { Link } from 'react-router-dom';
import { Helmet } from '@unhead/react/helmet';
import HelpIcon from '@/material-icons/400-24px/help.svg?react';
import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
import ShareIcon from '@/material-icons/400-24px/share.svg?react';

3
app/javascript/flavours/glitch/features/collections/editor/index.tsx
View File

@ -2,7 +2,6 @@ import { useEffect } from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { Helmet } from 'react-helmet';
import {
Switch,
Route,
@ -12,6 +11,8 @@ import {
useLocation,
} from 'react-router-dom';
import { Helmet } from '@unhead/react/helmet';
import { Callout } from '@/flavours/glitch/components/callout';
import { useCurrentAccountId } from '@/flavours/glitch/hooks/useAccountId';
import { initialState } from '@/flavours/glitch/initial_state';

3
app/javascript/flavours/glitch/features/collections/index.tsx
View File

@ -1,8 +1,9 @@
import { defineMessages, useIntl } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Route, Switch, useRouteMatch } from 'react-router-dom';
import { Helmet } from '@unhead/react/helmet';
import { TabLink, TabList } from '@/flavours/glitch/components/tab_list';
import { Column } from 'flavours/glitch/components/column';
import { ColumnHeader } from 'flavours/glitch/components/column_header';

2
app/javascript/flavours/glitch/features/community_timeline/index.jsx
View File

@ -3,7 +3,7 @@ import { PureComponent } from 'react';
import { defineMessages, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import { connect } from 'react-redux';

3
app/javascript/flavours/glitch/features/compose/index.tsx
View File

@ -2,11 +2,12 @@ import { useEffect, useCallback, useState } from 'react';
import { useIntl, defineMessages } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Link } from 'react-router-dom';
import type { Map as ImmutableMap, List as ImmutableList } from 'immutable';
import { Helmet } from '@unhead/react/helmet';
import elephantUIPlane from '@/images/elephant_ui_plane.svg';
import EditIcon from '@/material-icons/400-24px/edit_square.svg?react';
import PeopleIcon from '@/material-icons/400-24px/group.svg?react';

2
app/javascript/flavours/glitch/features/direct_timeline/index.jsx
View File

@ -3,7 +3,7 @@ import { useRef, useCallback, useEffect } from 'react';
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import { useDispatch, useSelector } from 'react-redux';

4
app/javascript/flavours/glitch/features/directory/index.tsx
View File

@ -3,10 +3,10 @@ import { useCallback, useEffect, useRef } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { Helmet } from 'react-helmet';
import { List as ImmutableList } from 'immutable';
import { Helmet } from '@unhead/react/helmet';
import PeopleIcon from '@/material-icons/400-24px/group.svg?react';
import {
addColumn,

2
app/javascript/flavours/glitch/features/domain_blocks/index.tsx
View File

@ -2,7 +2,7 @@ import { useEffect, useRef, useCallback, useState } from 'react';
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import BlockIcon from '@/material-icons/400-24px/block-fill.svg?react';
import { apiGetDomainBlocks } from 'flavours/glitch/api/domain_blocks';

3
app/javascript/flavours/glitch/features/explore/index.tsx
View File

@ -2,9 +2,10 @@ import { useCallback, useRef } from 'react';
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { NavLink, Switch, Route } from 'react-router-dom';
import { Helmet } from '@unhead/react/helmet';
import TrendingUpIcon from '@/material-icons/400-24px/trending_up.svg?react';
import { Column } from 'flavours/glitch/components/column';
import type { ColumnRef } from 'flavours/glitch/components/column';

2
app/javascript/flavours/glitch/features/favourited_statuses/index.tsx
View File

@ -2,7 +2,7 @@ import { useEffect, useRef, useCallback } from 'react';
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
import {

2
app/javascript/flavours/glitch/features/favourites/index.jsx
View File

@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
import { defineMessages, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';

2
app/javascript/flavours/glitch/features/firehose/index.jsx
View File

@ -3,7 +3,7 @@ import { useRef, useCallback, useEffect } from 'react';
import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import { NavLink } from 'react-router-dom';
import { useIdentity } from '@/flavours/glitch/identity_context';

8
app/javascript/flavours/glitch/features/follow_requests/components/account_authorize.jsx
View File

@ -8,11 +8,11 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import CheckIcon from '@/material-icons/400-24px/check.svg?react';
import CloseIcon from '@/material-icons/400-24px/close.svg?react';
import { AccountBio } from '@/flavours/glitch/components/account_bio';
import { Avatar } from '@/flavours/glitch/components/avatar';
import { DisplayName } from '@/flavours/glitch/components/display_name';
import { IconButton } from '@/flavours/glitch/components/icon_button';
import { injectIntl } from '@/flavours/glitch/components/intl';
import { EmojiHTML } from '@/flavours/glitch/components/emoji/html';
import { Permalink } from '@/flavours/glitch/components/permalink';
const messages = defineMessages({
@ -40,11 +40,7 @@ class AccountAuthorize extends ImmutablePureComponent {
<DisplayName account={account} />
</Permalink>
<EmojiHTML
className='account__header__content translate'
htmlString={account.get('note_emojified')}
extraEmojis={account.get('emojis')}
/>
<AccountBio accountId={account.id} />
</div>
<div className='account--panel'>

2
app/javascript/flavours/glitch/features/follow_requests/index.jsx
View File

@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
import { defineMessages, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';

4
app/javascript/flavours/glitch/features/followed_tags/index.tsx
View File

@ -2,10 +2,10 @@ import { useEffect, useCallback, useRef } from 'react';
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { isFulfilled } from '@reduxjs/toolkit';
import { Helmet } from '@unhead/react/helmet';
import TagIcon from '@/material-icons/400-24px/tag.svg?react';
import {
fetchFollowedHashtags,

6
app/javascript/flavours/glitch/features/followers/components/list.tsx
View File

@ -30,6 +30,7 @@ interface AccountListProps {
list?: AccountList | null;
loadMore: () => void;
prependAccountId?: string | null;
withoutFollowsYouBadge?: boolean;
scrollKey: string;
}
@ -42,6 +43,7 @@ export const AccountList: FC<AccountListProps> = ({
list,
loadMore,
prependAccountId,
withoutFollowsYouBadge,
scrollKey,
}) => {
const account = useAccount(accountId);
@ -59,6 +61,7 @@ export const AccountList: FC<AccountListProps> = ({
key={followerId}
accountId={followerId}
withBio={false}
badge={withoutFollowsYouBadge ? false : null}
/>
)) ?? [];
@ -68,11 +71,12 @@ export const AccountList: FC<AccountListProps> = ({
key={prependAccountId}
accountId={prependAccountId}
withBio={false}
badge={withoutFollowsYouBadge ? false : null}
/>,
);
}
return children;
}, [prependAccountId, list, forceEmptyState]);
}, [prependAccountId, list, forceEmptyState, withoutFollowsYouBadge]);
const columnRef = useRef<ColumnRef>(null);
const handleHeaderClick = useCallback(() => {

2
app/javascript/flavours/glitch/features/followers/index.tsx
View File

@ -12,6 +12,7 @@ import {
import { useAccount } from '@/flavours/glitch/hooks/useAccount';
import { useAccountId } from '@/flavours/glitch/hooks/useAccountId';
import { useRelationship } from '@/flavours/glitch/hooks/useRelationship';
import { me } from '@/flavours/glitch/initial_state';
import { selectUserListWithoutMe } from '@/flavours/glitch/selectors/user_lists';
import { useAppDispatch, useAppSelector } from '@/flavours/glitch/store';
@ -88,6 +89,7 @@ const Followers: FC = () => {
list={followerList}
loadMore={loadMore}
prependAccountId={followerId}
withoutFollowsYouBadge={accountId === me}
scrollKey='followers'
/>
);

2
app/javascript/flavours/glitch/features/getting_started/index.tsx
View File

@ -1,6 +1,6 @@
import { useIntl } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import { Column } from 'flavours/glitch/components/column';

2
app/javascript/flavours/glitch/features/hashtag_timeline/index.jsx
View File

@ -3,7 +3,7 @@ import { PureComponent } from 'react';
import { FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import { connect } from 'react-redux';

2
app/javascript/flavours/glitch/features/home_timeline/index.jsx
View File

@ -4,7 +4,7 @@ import { PureComponent } from 'react';
import { defineMessages, FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import { connect } from 'react-redux';

18
app/javascript/flavours/glitch/features/interaction_modal/index.tsx
View File

@ -483,11 +483,19 @@ const InteractionModal: React.FC<{
/>
</h3>
<p>
<FormattedMessage
id='interaction_modal.action'
defaultMessage="To interact with {name}'s post, you need to sign into your account on whatever Mastodon server you use."
values={{ name }}
/>
{intent === 'follow' ? (
<FormattedMessage
id='interaction_modal.action_follow'
defaultMessage='To follow {name}, you need to sign into your account on whatever Mastodon server you use.'
values={{ name }}
/>
) : (
<FormattedMessage
id='interaction_modal.action'
defaultMessage="To interact with {name}'s post, you need to sign into your account on whatever Mastodon server you use."
values={{ name }}
/>
)}
</p>
</div>

2
app/javascript/flavours/glitch/features/keyboard_shortcuts/index.jsx
View File

@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
import { defineMessages, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import ImmutablePureComponent from 'react-immutable-pure-component';

3
app/javascript/flavours/glitch/features/link_timeline/index.tsx
View File

@ -1,8 +1,9 @@
import { useRef, useEffect, useCallback } from 'react';
import { Helmet } from 'react-helmet';
import { useParams } from 'react-router-dom';
import { Helmet } from '@unhead/react/helmet';
import TrendingUpIcon from '@/material-icons/400-24px/trending_up.svg?react';
import { expandLinkTimeline } from 'flavours/glitch/actions/timelines';
import { Column } from 'flavours/glitch/components/column';

2
app/javascript/flavours/glitch/features/list_timeline/index.jsx
View File

@ -3,7 +3,7 @@ import { PureComponent } from 'react';
import { FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import { Link, withRouter } from 'react-router-dom';
import ImmutablePropTypes from 'react-immutable-proptypes';

3
app/javascript/flavours/glitch/features/lists/index.tsx
View File

@ -2,9 +2,10 @@ import { useEffect, useMemo, useCallback } from 'react';
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Link } from 'react-router-dom';
import { Helmet } from '@unhead/react/helmet';
import AddIcon from '@/material-icons/400-24px/add.svg?react';
import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';

3
app/javascript/flavours/glitch/features/lists/members.tsx
View File

@ -2,9 +2,10 @@ import { useCallback, useState, useEffect } from 'react';
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { useParams, Link } from 'react-router-dom';
import { Helmet } from '@unhead/react/helmet';
import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
import SquigglyArrow from '@/svg-icons/squiggly_arrow.svg?react';
import { fetchRelationships } from 'flavours/glitch/actions/accounts';

3
app/javascript/flavours/glitch/features/lists/new.tsx
View File

@ -2,11 +2,12 @@ import { useCallback, useState, useEffect } from 'react';
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { useParams, useHistory, Link } from 'react-router-dom';
import { isFulfilled } from '@reduxjs/toolkit';
import { Helmet } from '@unhead/react/helmet';
import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
import { fetchList } from 'flavours/glitch/actions/lists';

2
app/javascript/flavours/glitch/features/mutes/index.jsx
View File

@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
import { defineMessages, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';

2
app/javascript/flavours/glitch/features/notifications/request.jsx
View File

@ -3,7 +3,7 @@ import { useRef, useCallback, useEffect } from 'react';
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import { useSelector, useDispatch } from 'react-redux';

2
app/javascript/flavours/glitch/features/notifications/requests.jsx
View File

@ -3,7 +3,7 @@ import { useRef, useCallback, useEffect, useState } from 'react';
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import { useSelector, useDispatch } from 'react-redux';

3
app/javascript/flavours/glitch/features/notifications_v2/index.tsx
View File

@ -2,8 +2,7 @@ import { useCallback, useEffect, useMemo, useRef } from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import { isEqual } from 'lodash';
import { useDebouncedCallback } from 'use-debounce';

2
app/javascript/flavours/glitch/features/onboarding/follows.tsx
View File

@ -2,9 +2,9 @@ import { useEffect, useState, useCallback, useRef } from 'react';
import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Link } from 'react-router-dom';
import { Helmet } from '@unhead/react/helmet';
import { useDebouncedCallback } from 'use-debounce';
import PersonIcon from '@/material-icons/400-24px/person.svg?react';

3
app/javascript/flavours/glitch/features/onboarding/profile.tsx
View File

@ -3,9 +3,10 @@ import { useState, useMemo, useCallback, createRef } from 'react';
import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import { Helmet } from 'react-helmet';
import { useHistory } from 'react-router-dom';
import { Helmet } from '@unhead/react/helmet';
import AddPhotoAlternateIcon from '@/material-icons/400-24px/add_photo_alternate.svg?react';
import EditIcon from '@/material-icons/400-24px/edit.svg?react';
import PersonIcon from '@/material-icons/400-24px/person.svg?react';

2
app/javascript/flavours/glitch/features/pinned_statuses/index.jsx
View File

@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
import { defineMessages } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';

2
app/javascript/flavours/glitch/features/privacy_policy/index.tsx
View File

@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import { apiGetPrivacyPolicy } from 'flavours/glitch/api/instance';
import type { ApiPrivacyPolicyJSON } from 'flavours/glitch/api_types/instance';

2
app/javascript/flavours/glitch/features/public_timeline/index.jsx
View File

@ -3,7 +3,7 @@ import { PureComponent } from 'react';
import { defineMessages, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import { connect } from 'react-redux';

4
app/javascript/flavours/glitch/features/quotes/index.tsx
View File

@ -2,10 +2,10 @@ import { useCallback, useEffect } from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { Helmet } from 'react-helmet';
import { List as ImmutableList } from 'immutable';
import { Helmet } from '@unhead/react/helmet';
import RefreshIcon from '@/material-icons/400-24px/refresh.svg?react';
import { fetchQuotes } from 'flavours/glitch/actions/interactions_typed';
import { ColumnHeader } from 'flavours/glitch/components/column_header';

2
app/javascript/flavours/glitch/features/reblogs/index.jsx
View File

@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
import { defineMessages, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';

2
app/javascript/flavours/glitch/features/search/index.tsx
View File

@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef } from 'react';
import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import FindInPageIcon from '@/material-icons/400-24px/find_in_page.svg?react';
import PeopleIcon from '@/material-icons/400-24px/group.svg?react';

2
app/javascript/flavours/glitch/features/status/index.jsx
View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { defineMessages } from 'react-intl';
import classNames from 'classnames';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import { withRouter } from 'react-router-dom';
import { difference } from 'lodash';

3
app/javascript/flavours/glitch/features/terms_of_service/index.tsx
View File

@ -7,9 +7,10 @@ import {
defineMessages,
} from 'react-intl';
import { Helmet } from 'react-helmet';
import { Link, useParams } from 'react-router-dom';
import { Helmet } from '@unhead/react/helmet';
import { apiGetTermsOfService } from 'flavours/glitch/api/instance';
import type { ApiTermsOfServiceJSON } from 'flavours/glitch/api_types/instance';
import { Column } from 'flavours/glitch/components/column';

2
app/javascript/flavours/glitch/features/ui/components/bundle_column_error.jsx
View File

@ -4,7 +4,7 @@ import { PureComponent } from 'react';
import { FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import { Link } from 'react-router-dom';
import { Button } from 'flavours/glitch/components/button';

2
app/javascript/flavours/glitch/features/ui/components/modal_root.jsx
View File

@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import Base from 'flavours/glitch/components/modal_root';
import { AltTextModal } from 'flavours/glitch/features/alt_text_modal';

2
app/javascript/flavours/glitch/features/ui/util/intersection_observer_wrapper.js
View File

@ -25,7 +25,7 @@ class IntersectionObserverWrapper {
this.observerBacklog.forEach(([ id, node, callback ]) => {
this.observe(id, node, callback);
});
this.observerBacklog = null;
this.observerBacklog = [];
}
observe (id, node, callback) {

7
app/javascript/flavours/glitch/main.tsx
View File

@ -1,3 +1,4 @@
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { Globals } from '@react-spring/web';
@ -33,7 +34,11 @@ function main() {
await initializeEmoji();
const root = createRoot(mountNode);
root.render(<Mastodon {...props} />);
root.render(
<StrictMode>
<Mastodon {...props} />
</StrictMode>,
);
store.dispatch(setupBrowserNotifications());
if (isProduction() && me && 'serviceWorker' in navigator) {

69
app/javascript/flavours/glitch/styles/mastodon/accounts.scss
View File

@ -238,75 +238,6 @@
border-color: var(--color-border-on-bg-warning-softer);
}
.account__header__fields {
max-width: 100vw;
padding: 0;
margin: 15px -15px -15px;
border: 0 none;
border-top: 1px solid var(--color-border-primary);
border-bottom: 1px solid var(--color-border-primary);
font-size: 14px;
line-height: 20px;
dl {
display: flex;
border-bottom: 1px solid var(--color-border-primary);
}
dt,
dd {
box-sizing: border-box;
padding: 14px;
text-align: center;
max-height: 48px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
dt {
font-weight: 500;
width: 120px;
flex: 0 0 auto;
color: var(--color-text-primary);
background: var(--color-bg-secondary);
}
dd {
flex: 1 1 auto;
color: var(--color-text-secondary);
}
a {
color: var(--color-text-brand);
text-decoration: none;
&:hover,
&:focus,
&:active {
text-decoration: underline;
}
}
.verified {
border: 1px solid var(--color-border-success-soft);
background: var(--color-bg-success-softest);
a {
color: var(--color-text-success);
font-weight: 500;
}
&__mark {
color: var(--color-text-success);
}
}
dl:last-child {
border-bottom: 0;
}
}
.directory__tag .trends__item__current {
width: auto;
}

106
app/javascript/flavours/glitch/styles/mastodon/admin.scss
View File

@ -1050,35 +1050,121 @@ a.name-tag,
max-width: 100%;
}
.account__header__fields,
.account__header__content {
&__fields,
&__content {
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: 4px;
height: 100%;
}
.account__header__fields {
margin: 0;
&__fields {
border: 1px solid var(--color-border-primary);
font-size: 14px;
line-height: 20px;
display: grid;
grid-template-columns: 120px auto;
grid-auto-flow: row;
dl {
display: flex;
}
dt,
dd {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 14px;
text-align: center;
border-bottom: 1px solid var(--color-border-primary);
&:last-of-type:not(.verified) {
border-bottom: none;
}
}
dt {
font-weight: 500;
width: 120px;
flex: 0 0 auto;
color: var(--color-text-primary);
background: var(--color-bg-secondary);
}
dd {
flex: 1 1 auto;
color: var(--color-text-secondary);
&:first-of-type.verified {
border-top-right-radius: 4px;
}
&:last-of-type.verified {
border-bottom-right-radius: 4px;
}
}
a {
color: var(--color-text-brand);
text-decoration: none;
&:hover,
&:focus,
&:active {
text-decoration: underline;
}
}
dl:first-child .verified {
border-radius: 0 4px 0 0;
}
.verified {
border: 1px solid var(--color-border-success-soft);
background: var(--color-bg-success-softest);
.verified a {
color: var(--color-text-success);
a {
color: var(--color-text-success);
font-weight: 500;
}
&__mark {
color: var(--color-text-success);
> svg {
vertical-align: middle;
}
}
}
}
.account__header__content {
&__content {
box-sizing: border-box;
padding: 20px;
color: var(--color-text-primary);
font-size: 14px;
font-weight: 400;
overflow: hidden;
word-break: normal;
overflow-wrap: break-word;
p {
margin-bottom: 20px;
unicode-bidi: plaintext;
&:last-child {
margin-bottom: 0;
}
}
a {
color: var(--color-text-brand);
text-decoration: none;
&:hover,
&:focus,
&:active {
text-decoration: underline;
}
}
}
}

366
app/javascript/flavours/glitch/styles/mastodon/components.scss
View File

@ -8654,372 +8654,6 @@ noscript {
}
}
.account__header__content {
color: var(--color-text-secondary);
font-size: 14px;
font-weight: 400;
overflow: hidden;
word-break: normal;
overflow-wrap: break-word;
p {
margin-bottom: 20px;
unicode-bidi: plaintext;
&:last-child {
margin-bottom: 0;
}
}
a {
color: inherit;
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
}
.account__header {
container: account-header / inline-size;
&.inactive {
opacity: 0.5;
.account__header__image,
.account__avatar {
filter: grayscale(100%);
}
}
&__info {
position: absolute;
top: 20px;
inset-inline-end: 20px;
display: flex;
flex-wrap: wrap;
gap: 2px;
}
&__image {
overflow: hidden;
height: 145px;
position: relative;
background: var(--color-bg-tertiary);
border-bottom: 1px solid var(--color-border-primary);
img {
object-fit: cover;
display: block;
width: 100%;
height: 100%;
margin: 0;
}
}
&__bar {
position: relative;
padding: 0 20px;
border-bottom: 1px solid var(--color-border-primary);
.avatar {
display: block;
flex: 0 0 auto;
.account__avatar {
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--avatar-border-radius);
}
}
}
&__tabs {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-top: -55px;
padding-top: 10px;
gap: 8px;
overflow: hidden;
margin-inline-start: -2px; // aligns the pfp with content below
&__name {
margin-top: 16px;
margin-bottom: 16px;
.emojione {
width: 22px;
height: 22px;
}
h1 {
font-size: 17px;
line-height: 22px;
color: var(--color-text-primary);
font-weight: 600;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
small {
display: flex;
align-items: center;
gap: 4px;
font-size: 14px;
line-height: 20px;
color: var(--color-text-secondary);
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
span {
overflow: hidden;
text-overflow: ellipsis;
user-select: all;
}
.icon-lock {
height: 18px;
width: 18px;
}
}
}
}
.spacer {
flex: 1 1 auto;
}
}
&__follow-button {
flex-grow: 1;
}
&__buttons {
display: flex;
align-items: center;
gap: 8px;
$button-breakpoint: 420px;
$button-fallback-breakpoint: $button-breakpoint + 55px;
&--desktop {
margin-top: 55px;
@container (width < #{$button-breakpoint}) {
display: none;
}
@supports (not (container-type: inline-size)) {
@media (max-width: #{$button-fallback-breakpoint}) {
display: none;
}
}
}
&--mobile {
margin-block: 16px;
@container (width >= #{$button-breakpoint}) {
display: none;
}
@supports (not (container-type: inline-size)) {
@media (min-width: ($button-fallback-breakpoint + 1px)) {
display: none;
}
}
}
.button {
flex-shrink: 1;
white-space: nowrap;
min-width: 80px;
}
.icon-button {
border: 1px solid var(--color-border-primary);
border-radius: 4px;
box-sizing: content-box;
padding: 5px;
.icon {
width: 24px;
height: 24px;
}
&.copied {
border-color: var(--color-text-success);
}
}
}
&__bio {
.account__header__content {
color: var(--color-text-primary);
}
.account__header__fields {
margin: 0;
margin-top: 16px;
border-radius: 4px;
border: 1px solid var(--color-border-primary);
dl {
display: block;
padding: 8px 16px; // glitch-soc: padding purposefuly reduced
border-bottom-color: var(--color-border-primary);
}
dd,
dt {
font-size: 13px;
line-height: 18px;
padding: 0;
text-align: initial;
}
dt {
width: auto;
background: transparent;
text-transform: uppercase;
color: var(--color-text-tertiary);
}
dd {
color: var(--color-text-secondary);
}
a {
color: var(--color-text-brand);
}
.icon {
width: 18px;
height: 18px;
}
.verified {
border: 1px solid var(--color-text-success);
margin-top: -1px;
margin-inline: -1px;
&:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
&:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
margin-bottom: -1px;
}
dt,
dd {
color: var(--color-text-success);
}
dd {
display: flex;
align-items: center;
gap: 4px;
span {
display: flex;
}
}
a {
color: var(--color-text-success);
}
}
}
}
&__extra {
margin-top: 16px;
&__links {
font-size: 14px;
color: var(--color-text-secondary);
margin: 0 -10px;
padding-top: 16px;
padding-bottom: 10px;
a {
display: inline-block;
color: var(--color-text-secondary);
text-decoration: none;
padding: 5px 10px;
font-weight: 500;
strong {
font-weight: 700;
color: var(--color-text-primary);
}
}
}
}
&__account-note {
color: var(--color-text-primary);
font-size: 14px;
font-weight: 400;
margin-bottom: 10px;
&__loading-indicator-wrapper {
position: relative;
height: 37px;
.loading-indicator {
left: 10px;
}
.circular-progress {
width: 14px;
height: 14px;
}
}
label {
display: block;
font-size: 12px;
font-weight: 500;
color: var(--color-text-secondary);
text-transform: uppercase;
margin-bottom: 5px;
}
textarea {
display: block;
box-sizing: border-box;
width: calc(100% + 20px);
color: var(--color-text-primary);
background: transparent;
padding: 10px;
margin: 0 -10px;
font-family: inherit;
font-size: 14px;
resize: none;
border: 0;
outline: 0;
border-radius: 4px;
&::placeholder {
color: var(--color-text-tertiary);
opacity: 1;
}
&:focus {
background: var(--color-bg-brand-softest);
}
}
}
}
.account__contents {
overflow: hidden;
}

7
app/javascript/mastodon/components/account_header/buttons.tsx
View File

@ -3,8 +3,6 @@ import type { FC } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import classNames from 'classnames';
import { followAccount } from '@/mastodon/actions/accounts';
import { useAccount } from '@/mastodon/hooks/useAccount';
import { getAccountHidden } from '@/mastodon/selectors/accounts';
@ -18,6 +16,7 @@ import { FollowButton } from '../follow_button';
import { IconButton } from '../icon_button';
import { AccountMenu } from './menu';
import classes from './styles.module.scss';
const messages = defineMessages({
enableNotifications: {
@ -49,7 +48,7 @@ export const AccountButtons: FC<AccountButtonsProps> = ({
const me = useAppSelector((state) => state.meta.get('me') as string);
return (
<div className={classNames('account__header__buttons', className)}>
<div className={className}>
{!hidden && (
<AccountButtonsOther accountId={accountId} noShare={noShare} />
)}
@ -94,7 +93,7 @@ const AccountButtonsOther: FC<
{!isMovedAndUnfollowedAccount && (
<FollowButton
accountId={accountId}
className='account__header__follow-button'
className={classes.followButton}
labelLength='long'
/>
)}

13
app/javascript/mastodon/components/account_header/fields.tsx
View File

@ -108,11 +108,9 @@ const FieldCard: FC<{
}> = ({ htmlHandlers, field }) => {
const intl = useIntl();
const {
name,
name_emojified,
nameHasEmojis,
value_emojified,
value_plain,
valueHasEmojis,
verified_at,
} = field;
@ -138,8 +136,7 @@ const FieldCard: FC<{
)}
label={
<FieldHTML
text={name}
textEmojified={name_emojified}
text={name_emojified}
textHasCustomEmoji={nameHasEmojis}
className='translate'
isOverflowing={isLabelOverflowing}
@ -149,8 +146,7 @@ const FieldCard: FC<{
}
value={
<FieldHTML
text={value_plain}
textEmojified={value_emojified}
text={value_emojified}
textHasCustomEmoji={valueHasEmojis}
isOverflowing={isValueOverflowing}
onOverflowClick={handleOverflowClick}
@ -175,7 +171,6 @@ const FieldCard: FC<{
type FieldHTMLProps = {
text: string;
textEmojified: string;
textHasCustomEmoji: boolean;
isOverflowing?: boolean;
onOverflowClick?: () => void;
@ -183,9 +178,7 @@ type FieldHTMLProps = {
const FieldHTML: FC<FieldHTMLProps> = ({
className,
extraEmojis,
text,
textEmojified,
textHasCustomEmoji,
isOverflowing,
onOverflowClick,
@ -198,7 +191,7 @@ const FieldHTML: FC<FieldHTMLProps> = ({
const html = (
<EmojiHTML
as='span'
htmlString={textEmojified}
htmlString={text}
className={className}
onElement={handleElement}
data-contents

52
app/javascript/mastodon/components/account_header/index.tsx
View File

@ -1,7 +1,8 @@
import { useCallback } from 'react';
import classNames from 'classnames';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import { openModal } from '@/mastodon/actions/modal';
import FollowRequestNoteContainer from '@/mastodon/features/account/containers/follow_request_note_container';
@ -96,22 +97,20 @@ export const AccountHeader: React.FC<{
const isMe = me && account.id === me;
return (
<div className='account-timeline__header'>
<div>
{!hidden && account.memorial && <MemorialNote />}
{!hidden && account.moved && (
<MovedNote accountId={account.id} targetAccountId={account.moved} />
)}
<AnimateEmojiProvider
className={classNames('account__header', {
inactive: !!account.moved,
})}
className={classNames(!!account.moved && classes.moved)}
>
{!suspendedOrHidden && !account.moved && relationship?.requested_by && (
<FollowRequestNoteContainer account={account} />
)}
<div className={classNames('account__header__image', classes.header)}>
<div className={classes.header}>
{!suspendedOrHidden && (
<img
src={autoPlayGif ? account.header : account.header_static}
@ -121,21 +120,16 @@ export const AccountHeader: React.FC<{
)}
</div>
<div className={classNames('account__header__bar', classes.barWrapper)}>
<div
className={classNames(
'account__header__tabs',
classes.avatarWrapper,
)}
>
<div className={classes.barWrapper}>
<div className={classes.avatarWrapper}>
<a
className='avatar'
href={account.avatar}
rel='noopener'
target='_blank'
onClick={handleOpenAvatar}
>
<Avatar
className={classes.avatar}
account={suspendedOrHidden ? undefined : account}
alt={account.avatar_description}
size={80}
@ -143,12 +137,7 @@ export const AccountHeader: React.FC<{
</a>
</div>
<div
className={classNames(
'account__header__tabs__name',
classes.displayNameWrapper,
)}
>
<div className={classes.displayNameWrapper}>
<AccountName accountId={accountId} />
<AccountButtons
accountId={accountId}
@ -168,23 +157,16 @@ export const AccountHeader: React.FC<{
)}
{!suspendedOrHidden && (
<div className='account__header__extra'>
<div className='account__header__bio'>
{me && account.id !== me && (
<AccountNote accountId={accountId} />
)}
<div className={classes.bioButtonsWrapper}>
{me && account.id !== me && <AccountNote accountId={accountId} />}
<AccountBio
showDropdown
accountId={accountId}
className={classNames(
'account__header__content',
classes.bio,
)}
/>
<AccountBio
showDropdown
accountId={accountId}
className={classes.bio}
/>
<AccountHeaderFields accountId={accountId} />
</div>
<AccountHeaderFields accountId={accountId} />
{!me && account.email_subscriptions && (
<AccountSubscriptionForm accountId={accountId} />

120
app/javascript/mastodon/components/account_header/styles.module.scss
View File

@ -1,26 +1,79 @@
.moved {
opacity: 0.5;
}
// Account header
.header {
height: 120px;
overflow: hidden;
background: var(--color-bg-secondary);
border-bottom: 1px solid var(--color-border-primary);
img {
object-fit: cover;
display: block;
width: 100%;
height: 100%;
margin: 0;
}
@container (width >= 500px) {
height: 160px;
}
:global(.inactive) & {
filter: grayscale(100%);
}
}
// Wraps everything except the header image.
.barWrapper {
border-bottom: none;
padding-inline: 16px;
}
// Avatar
.avatarWrapper {
margin-top: -64px;
padding-top: 0;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
overflow: hidden;
margin-inline-start: -2px; // aligns the pfp with content below
}
.avatar {
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: var(--avatar-border-radius);
.moved & {
filter: grayscale(100%);
}
}
.displayNameWrapper {
display: flex;
align-items: start;
gap: 16px;
margin-top: 16px;
margin-bottom: 16px;
h1 {
font-size: 17px;
line-height: 22px;
color: var(--color-text-primary);
font-weight: 600;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
:global(.emojione) {
width: 22px;
height: 22px;
}
}
.nameWrapper {
@ -112,21 +165,6 @@
}
}
$button-breakpoint: 420px;
$button-fallback-breakpoint: $button-breakpoint + 55px;
.buttonsDesktop {
@container (width < #{$button-breakpoint}) {
display: none;
}
@supports (not (container-type: inline-size)) {
@media (max-width: #{$button-fallback-breakpoint}) {
display: none;
}
}
}
.handleCopy {
border: 1px solid var(--color-border-primary);
border-radius: 8px;
@ -147,6 +185,45 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;
}
}
$button-breakpoint: 420px;
$button-fallback-breakpoint: $button-breakpoint + 55px;
.buttonsDesktop,
.buttonsMobile {
display: flex;
align-items: center;
gap: 8px;
:global(.button) {
flex-shrink: 1;
white-space: nowrap;
min-width: 80px;
}
:global(.icon-button) {
border: 1px solid var(--color-border-primary);
border-radius: 4px;
box-sizing: content-box;
padding: 5px;
&:global(.copied) {
border-color: var(--color-text-success);
}
}
}
.buttonsDesktop {
@container (width < #{$button-breakpoint}) {
display: none;
}
@supports (not (container-type: inline-size)) {
@media (max-width: #{$button-fallback-breakpoint}) {
display: none;
}
}
}
.buttonsMobile {
position: sticky;
bottom: var(--mobile-bottom-nav-height);
@ -188,6 +265,7 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;
.bio {
font-size: 15px;
color: var(--color-text-primary);
}
.familiarFollowers {
@ -420,3 +498,13 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;
background: var(--color-bg-primary);
}
}
// Buttons
.followButton {
flex-grow: 1;
}
.bioButtonsWrapper {
margin-top: 16px;
}

2
app/javascript/mastodon/components/error_boundary.jsx
View File

@ -3,7 +3,7 @@ import { PureComponent } from 'react';
import { FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import StackTrace from 'stacktrace-js';

24
app/javascript/mastodon/components/hover_card_account.tsx
View File

@ -154,17 +154,19 @@ export const HoverCardAccount = forwardRef<
{(isMutual || isFollower) && (
<>
&middot;
{isMutual ? (
<FormattedMessage
id='account.mutual'
defaultMessage='You follow each other'
/>
) : (
<FormattedMessage
id='account.follows_you'
defaultMessage='Follows you'
/>
)}
<span>
{isMutual ? (
<FormattedMessage
id='account.mutual'
defaultMessage='You follow each other'
/>
) : (
<FormattedMessage
id='account.follows_you'
defaultMessage='Follows you'
/>
)}
</span>
</>
)}
</div>

2
app/javascript/mastodon/containers/mastodon.jsx
View File

@ -1,6 +1,6 @@
import { PureComponent } from 'react';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import { Route } from 'react-router-dom';
import { Provider as ReduxProvider } from 'react-redux';

2
app/javascript/mastodon/features/about/index.jsx
View File

@ -3,7 +3,7 @@ import { PureComponent } from 'react';
import { defineMessages, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux';

3
app/javascript/mastodon/features/account_edit/components/column.tsx
View File

@ -2,9 +2,10 @@ import type { FC } from 'react';
import { FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Link } from 'react-router-dom';
import { Helmet } from '@unhead/react/helmet';
import { Column } from '@/mastodon/components/column';
import { ColumnHeader } from '@/mastodon/components/column_header';
import { LoadingIndicator } from '@/mastodon/components/loading_indicator';

15
app/javascript/mastodon/features/account_featured/index.tsx
View File

@ -24,6 +24,7 @@ import Column from '@/mastodon/features/ui/components/column';
import { useAccount } from '@/mastodon/hooks/useAccount';
import { useAccountId } from '@/mastodon/hooks/useAccountId';
import { useAccountVisibility } from '@/mastodon/hooks/useAccountVisibility';
import { me } from '@/mastodon/initial_state';
import { useAppDispatch, useAppSelector } from '@/mastodon/store';
import AddIcon from '@/material-icons/400-24px/add.svg?react';
@ -173,12 +174,14 @@ const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({
defaultMessage='Collections'
/>
</h2>
<SubheadingLink to='/collections/new' icon={AddIcon}>
<FormattedMessage
id='account.featured.new_collection'
defaultMessage='New collection'
/>
</SubheadingLink>
{accountId === me && (
<SubheadingLink to='/collections/new' icon={AddIcon}>
<FormattedMessage
id='account.featured.new_collection'
defaultMessage='New collection'
/>
</SubheadingLink>
)}
</Subheading>
{hasCollections ? (
<ItemList>

2
app/javascript/mastodon/features/bookmarked_statuses/index.tsx
View File

@ -2,7 +2,7 @@ import { useEffect, useRef, useCallback } from 'react';
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import BookmarksIcon from '@/material-icons/400-24px/bookmarks-fill.svg?react';
import {

5
app/javascript/mastodon/features/collections/components/collection_menu.tsx
View File

@ -131,7 +131,7 @@ export const CollectionMenu: React.FC<{
{
text: intl.formatMessage(messages.copyLink),
action: () => {
void navigator.clipboard.writeText(getCollectionPath(id));
void navigator.clipboard.writeText(collection.url);
dispatch(showAlert({ message: messages.copyLinkConfirmation }));
},
},
@ -196,13 +196,14 @@ export const CollectionMenu: React.FC<{
id,
openShareModal,
isOwnCollection,
collection.url,
dispatch,
openDeleteConfirmation,
context,
currentAccountInCollection,
openReportModal,
openBlockModal,
openRevokeConfirmation,
openBlockModal,
]);
return (

2
app/javascript/mastodon/features/collections/components/share_modal.tsx
View File

@ -42,7 +42,7 @@ export const CollectionShareModal: React.FC<{
const isNew = !!location.state?.newCollection;
const isOwnCollection = collection.account_id === me;
const collectionLink = `${window.location.origin}/collections/${collection.id}`;
const collectionLink = collection.url;
const handleShareOnDevice = useCallback(() => {
void navigator.share({

10
app/javascript/mastodon/features/collections/detail/accounts_list.tsx
View File

@ -138,12 +138,16 @@ export const CollectionAccountsList: React.FC<{
const renderAccountItemButton = useCallback(
({ relationship, accountId }: RenderButtonOptions) => {
if (!me || !relationship) {
// Show follow button when logged out (it will trigger the remote interaction modal)
return <AccountListItemFollowButton accountId={accountId} />;
}
// When viewing your own collection, only show the Follow button
// for accounts you're not following anymore.
const withoutButton =
!relationship ||
(collectionOwnerId === me &&
(relationship.following || relationship.requested));
collectionOwnerId === me &&
(relationship.following || relationship.requested);
if (withoutButton) return null;

3
app/javascript/mastodon/features/collections/detail/index.tsx
View File

@ -2,10 +2,11 @@ import { useCallback, useEffect } from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { Helmet } from 'react-helmet';
import { useHistory, useLocation, useParams } from 'react-router';
import { Link } from 'react-router-dom';
import { Helmet } from '@unhead/react/helmet';
import HelpIcon from '@/material-icons/400-24px/help.svg?react';
import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
import ShareIcon from '@/material-icons/400-24px/share.svg?react';

3
app/javascript/mastodon/features/collections/editor/index.tsx
View File

@ -2,7 +2,6 @@ import { useEffect } from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { Helmet } from 'react-helmet';
import {
Switch,
Route,
@ -12,6 +11,8 @@ import {
useLocation,
} from 'react-router-dom';
import { Helmet } from '@unhead/react/helmet';
import { Callout } from '@/mastodon/components/callout';
import { useCurrentAccountId } from '@/mastodon/hooks/useAccountId';
import { initialState } from '@/mastodon/initial_state';

3
app/javascript/mastodon/features/collections/index.tsx
View File

@ -1,8 +1,9 @@
import { defineMessages, useIntl } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Route, Switch, useRouteMatch } from 'react-router-dom';
import { Helmet } from '@unhead/react/helmet';
import { TabLink, TabList } from '@/mastodon/components/tab_list';
import { Column } from 'mastodon/components/column';
import { ColumnHeader } from 'mastodon/components/column_header';

2
app/javascript/mastodon/features/community_timeline/index.jsx
View File

@ -3,7 +3,7 @@ import { PureComponent } from 'react';
import { defineMessages, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import { connect } from 'react-redux';

3
app/javascript/mastodon/features/compose/index.tsx
View File

@ -2,11 +2,12 @@ import { useEffect, useCallback } from 'react';
import { useIntl, defineMessages } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Link } from 'react-router-dom';
import type { Map as ImmutableMap, List as ImmutableList } from 'immutable';
import { Helmet } from '@unhead/react/helmet';
import elephantUIPlane from '@/images/elephant_ui_plane.svg';
import EditIcon from '@/material-icons/400-24px/edit_square.svg?react';
import PeopleIcon from '@/material-icons/400-24px/group.svg?react';

2
app/javascript/mastodon/features/direct_timeline/index.jsx
View File

@ -3,7 +3,7 @@ import { useRef, useCallback, useEffect } from 'react';
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import { useDispatch } from 'react-redux';

4
app/javascript/mastodon/features/directory/index.tsx
View File

@ -3,10 +3,10 @@ import { useCallback, useEffect, useRef } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { Helmet } from 'react-helmet';
import { List as ImmutableList } from 'immutable';
import { Helmet } from '@unhead/react/helmet';
import PeopleIcon from '@/material-icons/400-24px/group.svg?react';
import {
addColumn,

2
app/javascript/mastodon/features/domain_blocks/index.tsx
View File

@ -2,7 +2,7 @@ import { useEffect, useRef, useCallback, useState } from 'react';
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import BlockIcon from '@/material-icons/400-24px/block-fill.svg?react';
import { apiGetDomainBlocks } from 'mastodon/api/domain_blocks';

3
app/javascript/mastodon/features/explore/index.tsx
View File

@ -2,9 +2,10 @@ import { useCallback, useRef } from 'react';
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { NavLink, Switch, Route } from 'react-router-dom';
import { Helmet } from '@unhead/react/helmet';
import TrendingUpIcon from '@/material-icons/400-24px/trending_up.svg?react';
import { Column } from 'mastodon/components/column';
import type { ColumnRef } from 'mastodon/components/column';

2
app/javascript/mastodon/features/favourited_statuses/index.tsx
View File

@ -2,7 +2,7 @@ import { useEffect, useRef, useCallback } from 'react';
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns';

2
app/javascript/mastodon/features/favourites/index.jsx
View File

@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
import { defineMessages, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';

2
app/javascript/mastodon/features/firehose/index.jsx
View File

@ -3,7 +3,7 @@ import { useRef, useCallback, useEffect } from 'react';
import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import { NavLink } from 'react-router-dom';
import { useIdentity } from '@/mastodon/identity_context';

8
app/javascript/mastodon/features/follow_requests/components/account_authorize.jsx
View File

@ -10,11 +10,11 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import CheckIcon from '@/material-icons/400-24px/check.svg?react';
import CloseIcon from '@/material-icons/400-24px/close.svg?react';
import { AccountBio } from '@/mastodon/components/account_bio';
import { Avatar } from '@/mastodon/components/avatar';
import { DisplayName } from '@/mastodon/components/display_name';
import { IconButton } from '@/mastodon/components/icon_button';
import { injectIntl } from '@/mastodon/components/intl';
import { EmojiHTML } from '@/mastodon/components/emoji/html';
const messages = defineMessages({
authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' },
@ -41,11 +41,7 @@ class AccountAuthorize extends ImmutablePureComponent {
<DisplayName account={account} />
</Link>
<EmojiHTML
className='account__header__content translate'
htmlString={account.get('note_emojified')}
extraEmojis={account.get('emojis')}
/>
<AccountBio accountId={account.id} />
</div>
<div className='account--panel'>

2
app/javascript/mastodon/features/follow_requests/index.jsx
View File

@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
import { defineMessages, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { Helmet } from '@unhead/react/helmet';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';

4
app/javascript/mastodon/features/followed_tags/index.tsx
View File

@ -2,10 +2,10 @@ import { useEffect, useCallback, useRef } from 'react';
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { isFulfilled } from '@reduxjs/toolkit';
import { Helmet } from '@unhead/react/helmet';
import TagIcon from '@/material-icons/400-24px/tag.svg?react';
import {
fetchFollowedHashtags,

6
app/javascript/mastodon/features/followers/components/list.tsx
View File

@ -28,6 +28,7 @@ interface AccountListProps {
list?: AccountList | null;
loadMore: () => void;
prependAccountId?: string | null;
withoutFollowsYouBadge?: boolean;
scrollKey: string;
}
@ -40,6 +41,7 @@ export const AccountList: FC<AccountListProps> = ({
list,
loadMore,
prependAccountId,
withoutFollowsYouBadge,
scrollKey,
}) => {
const account = useAccount(accountId);
@ -57,6 +59,7 @@ export const AccountList: FC<AccountListProps> = ({
key={followerId}
accountId={followerId}
withBio={false}
badge={withoutFollowsYouBadge ? false : null}
/>
)) ?? [];
@ -66,11 +69,12 @@ export const AccountList: FC<AccountListProps> = ({
key={prependAccountId}
accountId={prependAccountId}
withBio={false}
badge={withoutFollowsYouBadge ? false : null}
/>,
);
}
return children;
}, [prependAccountId, list, forceEmptyState]);
}, [prependAccountId, list, forceEmptyState, withoutFollowsYouBadge]);
const { multiColumn } = useLayout();

2
app/javascript/mastodon/features/followers/index.tsx
View File

@ -9,6 +9,7 @@ import { expandFollowers, fetchFollowers } from '@/mastodon/actions/accounts';
import { useAccount } from '@/mastodon/hooks/useAccount';
import { useAccountId } from '@/mastodon/hooks/useAccountId';
import { useRelationship } from '@/mastodon/hooks/useRelationship';
import { me } from '@/mastodon/initial_state';
import { selectUserListWithoutMe } from '@/mastodon/selectors/user_lists';
import { useAppDispatch, useAppSelector } from '@/mastodon/store';
@ -85,6 +86,7 @@ const Followers: FC = () => {
list={followerList}
loadMore={loadMore}
prependAccountId={followerId}
withoutFollowsYouBadge={accountId === me}
scrollKey='followers'
/>
);

Some files were not shown because too many files have changed in this diff Show More