diff --git a/app/javascript/images/icons/icon_clock.svg b/app/javascript/images/icons/icon_clock.svg index 72557c82c5..cba7451c5b 100644 --- a/app/javascript/images/icons/icon_clock.svg +++ b/app/javascript/images/icons/icon_clock.svg @@ -1,3 +1,3 @@ - - + + diff --git a/app/javascript/mastodon/components/callout/styles.module.css b/app/javascript/mastodon/components/callout/styles.module.css index 95ca5e0b94..f7fbce491b 100644 --- a/app/javascript/mastodon/components/callout/styles.module.css +++ b/app/javascript/mastodon/components/callout/styles.module.css @@ -87,7 +87,7 @@ } .variantSubtle { - border: 1px solid var(--color-bg-brand-softest); + border: 1px solid var(--color-border-brand-soft); background-color: var(--color-bg-primary); .icon { diff --git a/app/javascript/mastodon/features/collections/detail/accounts_list.tsx b/app/javascript/mastodon/features/collections/detail/accounts_list.tsx index 1127bdad24..3a5547a946 100644 --- a/app/javascript/mastodon/features/collections/detail/accounts_list.tsx +++ b/app/javascript/mastodon/features/collections/detail/accounts_list.tsx @@ -2,8 +2,12 @@ import { useCallback, useMemo, useRef, useState } from 'react'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; +import { PendingBadge } from '@/mastodon/components/badge'; import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react'; -import type { ApiCollectionJSON } from 'mastodon/api_types/collections'; +import type { + ApiCollectionJSON, + CollectionAccountItem, +} from 'mastodon/api_types/collections'; import type { RenderButtonOptions } from 'mastodon/components/account_list_item'; import { AccountListItem, @@ -75,15 +79,22 @@ const SensitiveScreen: React.FC<{ ); }; -const getCollectionAccounts = createAppSelector( +type CollectionItemWithAccount = CollectionAccountItem & { + account?: Account | null; +}; + +const getCollectionItems = createAppSelector( [ (state) => state.accounts, (state, collectionId?: string) => state.collections.collections[collectionId ?? '']?.items, ], (accounts, collectionAccountItems) => - (collectionAccountItems ?? []).map(({ account_id }) => - account_id ? accounts.get(account_id) : null, + (collectionAccountItems ?? []).map( + (item): CollectionItemWithAccount => ({ + ...item, + account: item.account_id ? accounts.get(item.account_id) : null, + }), ), ); @@ -100,22 +111,22 @@ export const CollectionAccountsList: React.FC<{ const relationships = useAppSelector((state) => state.relationships); const collectionAccounts = useAppSelector((state) => - getCollectionAccounts(state, id), + getCollectionItems(state, id), ); const { visibleAccounts, hiddenAccounts } = useMemo(() => { - const visibleAccounts: Account[] = []; - const hiddenAccounts: Account[] = []; + const visibleAccounts: CollectionItemWithAccount[] = []; + const hiddenAccounts: CollectionItemWithAccount[] = []; collectionAccounts.forEach((item) => { - if (!item) { - // We currently simply hide unavailable accounts, this includes - // accounts that are pending inclusion; at least for the collection - // owner we should display an indication of pending users + const { account, account_id } = item; + + if (!isOwnCollection && !account) { + // Hide unavailable accounts unless you own this collection return; } - const relationship = relationships.get(item.id); + const relationship = account_id ? relationships.get(account_id) : null; if (relationship?.blocking || relationship?.muting) { hiddenAccounts.push(item); } else { @@ -124,7 +135,7 @@ export const CollectionAccountsList: React.FC<{ }); return { visibleAccounts, hiddenAccounts }; - }, [collectionAccounts, relationships]); + }, [collectionAccounts, isOwnCollection, relationships]); const renderAccountItemButton = useCallback( ({ relationship, accountId }: RenderButtonOptions) => { @@ -159,15 +170,16 @@ export const CollectionAccountsList: React.FC<{ index, totalListLength, isLastElement, - }: TruncatedListItemInfo) => ( + }: TruncatedListItemInfo) => (
: null} renderButton={renderAccountItemButton} />
diff --git a/app/javascript/mastodon/features/collections/detail/index.tsx b/app/javascript/mastodon/features/collections/detail/index.tsx index d3fbd4c2cb..d52f6eec1e 100644 --- a/app/javascript/mastodon/features/collections/detail/index.tsx +++ b/app/javascript/mastodon/features/collections/detail/index.tsx @@ -8,6 +8,7 @@ import { Link } from 'react-router-dom'; import { openModal } from '@/mastodon/actions/modal'; import { useAccountHandle } from '@/mastodon/components/display_name/default'; +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'; import type { ApiCollectionJSON } from 'mastodon/api_types/collections'; @@ -101,6 +102,26 @@ const RevokeControls: React.FC<{ ); }; +const PendingNote: React.FC = () => { + return ( + + } + > + + + ); +}; + const CollectionHeader: React.FC<{ collection: ApiCollectionJSON }> = ({ collection, }) => { @@ -136,6 +157,8 @@ const CollectionHeader: React.FC<{ collection: ApiCollectionJSON }> = ({ } }, [history, openShareModal, isNewCollection, location.pathname]); + const hasPendingAccounts = items.some((item) => item.state === 'pending'); + return (
@@ -160,6 +183,7 @@ const CollectionHeader: React.FC<{ collection: ApiCollectionJSON }> = ({
{description &&

{description}

} + {hasPendingAccounts && } {isCurrentUserInCollection && } ); diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json index b5f683ab0c..db68bb9b75 100644 --- a/app/javascript/mastodon/locales/en.json +++ b/app/javascript/mastodon/locales/en.json @@ -416,6 +416,8 @@ "collections.maximum_collection_count_reached": "You have created the maximum number of collections", "collections.name_length_hint": "40 characters limit", "collections.new_collection": "New collection", + "collections.pending_accounts.message": "Accounts may appear as pending when we’re awaiting a response from the user or their server. Only you can see pending accounts.", + "collections.pending_accounts.title": "Why am I seeing pending accounts?", "collections.remove_account": "Remove", "collections.report_collection": "Report this collection", "collections.revoke_collection_inclusion": "Remove myself from this collection",