From 8cfda4b38d4b41ca03f9e47eaa369d1f89b77cf6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= Date: Mon, 13 Oct 2025 14:33:27 +0200 Subject: [PATCH] pl-fe: improve empty column messages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: nicole mikołajczyk --- packages/pl-fe/src/columns/notifications.tsx | 2 +- .../pl-fe/src/components/empty-message.tsx | 24 +++++++++++ .../pl-fe/src/components/scrollable-list.tsx | 43 ++++++++----------- .../features/admin/tabs/awaiting-approval.tsx | 10 +---- .../pl-fe/src/features/admin/tabs/reports.tsx | 11 +---- .../tabs/manage-pending-participants.tsx | 2 +- .../components/conversations-list.tsx | 2 +- packages/pl-fe/src/locales/en.json | 4 -- packages/pl-fe/src/modals/birthdays-modal.tsx | 2 +- packages/pl-fe/src/modals/dislikes-modal.tsx | 2 +- .../src/modals/event-participants-modal.tsx | 2 +- .../src/modals/familiar-followers-modal.tsx | 2 +- .../pl-fe/src/modals/favourites-modal.tsx | 2 +- packages/pl-fe/src/modals/reactions-modal.tsx | 2 +- packages/pl-fe/src/modals/reblogs-modal.tsx | 2 +- .../pages/account-lists/follow-requests.tsx | 2 +- .../src/pages/account-lists/followers.tsx | 2 +- .../src/pages/account-lists/following.tsx | 2 +- .../outgoing-follow-requests.tsx | 2 +- .../src/pages/accounts/account-timeline.tsx | 2 +- .../src/pages/dashboard/announcements.tsx | 2 +- .../pl-fe/src/pages/dashboard/domains.tsx | 2 +- .../src/pages/dashboard/moderation-log.tsx | 5 +-- packages/pl-fe/src/pages/dashboard/relays.tsx | 2 +- packages/pl-fe/src/pages/dashboard/rules.tsx | 2 +- .../pl-fe/src/pages/dashboard/user-index.tsx | 6 +-- .../pages/groups/group-blocked-members.tsx | 3 +- .../groups/group-membership-requests.tsx | 2 +- packages/pl-fe/src/pages/groups/groups.tsx | 3 +- packages/pl-fe/src/pages/settings/aliases.tsx | 2 +- packages/pl-fe/src/pages/settings/blocks.tsx | 3 +- .../src/pages/settings/domain-blocks.tsx | 2 +- packages/pl-fe/src/pages/settings/filters.tsx | 2 +- packages/pl-fe/src/pages/settings/index.tsx | 2 +- packages/pl-fe/src/pages/settings/mutes.tsx | 3 +- .../src/pages/status-lists/bookmarks.tsx | 2 +- .../src/pages/status-lists/draft-statuses.tsx | 2 +- .../status-lists/favourited-statuses.tsx | 2 +- .../status-lists/interaction-requests.tsx | 2 +- .../pages/status-lists/pinned-statuses.tsx | 2 +- .../pl-fe/src/pages/status-lists/quotes.tsx | 2 +- .../pages/status-lists/scheduled-statuses.tsx | 2 +- .../src/pages/statuses/event-discussion.tsx | 2 +- .../src/pages/timelines/bubble-timeline.tsx | 3 +- .../src/pages/timelines/circle-timeline.tsx | 3 +- .../pages/timelines/community-timeline.tsx | 3 +- .../src/pages/timelines/group-timeline.tsx | 19 +------- .../src/pages/timelines/hashtag-timeline.tsx | 2 +- .../src/pages/timelines/home-timeline.tsx | 3 +- .../src/pages/timelines/landing-timeline.tsx | 3 +- .../src/pages/timelines/link-timeline.tsx | 3 +- .../src/pages/timelines/list-timeline.tsx | 3 +- .../src/pages/timelines/public-timeline.tsx | 3 +- .../src/pages/timelines/remote-timeline.tsx | 3 +- .../src/pages/timelines/test-timeline.tsx | 3 +- .../src/pages/timelines/wrenched-timeline.tsx | 3 +- .../pages/utils/federation-restrictions.tsx | 10 ++--- packages/pl-fe/src/styles/new/components.scss | 4 ++ 58 files changed, 119 insertions(+), 128 deletions(-) create mode 100644 packages/pl-fe/src/components/empty-message.tsx diff --git a/packages/pl-fe/src/columns/notifications.tsx b/packages/pl-fe/src/columns/notifications.tsx index e77ecf85d..095b7719c 100644 --- a/packages/pl-fe/src/columns/notifications.tsx +++ b/packages/pl-fe/src/columns/notifications.tsx @@ -249,7 +249,7 @@ const NotificationsColumn = () => { isLoading={isLoading} showLoading={isLoading && displayedNotifications.length === 0} hasMore={hasMore} - emptyMessage={emptyMessage} + emptyMessageText={emptyMessage} placeholderComponent={PlaceholderNotification} placeholderCount={20} onLoadMore={handleLoadOlder} diff --git a/packages/pl-fe/src/components/empty-message.tsx b/packages/pl-fe/src/components/empty-message.tsx new file mode 100644 index 000000000..fe25c0066 --- /dev/null +++ b/packages/pl-fe/src/components/empty-message.tsx @@ -0,0 +1,24 @@ +import React from 'react'; + +import Icon from './ui/icon'; +import Stack from './ui/stack'; +import Text from './ui/text'; + +interface IEmptyMessage { + text: React.ReactNode; + icon?: string; +} + +const EmptyMessage: React.FC = ({ text, icon = require('@phosphor-icons/core/regular/empty.svg') }) => ( + +
+ +
+ + + {text} + + +); + +export { EmptyMessage }; diff --git a/packages/pl-fe/src/components/scrollable-list.tsx b/packages/pl-fe/src/components/scrollable-list.tsx index ec46b5376..32815ba2b 100644 --- a/packages/pl-fe/src/components/scrollable-list.tsx +++ b/packages/pl-fe/src/components/scrollable-list.tsx @@ -4,10 +4,11 @@ import { useHistory } from 'react-router-dom'; import { Virtuoso, Components, VirtuosoProps, VirtuosoHandle, ListRange, IndexLocationWithAlign } from 'react-virtuoso'; import LoadMore from 'pl-fe/components/load-more'; -import Card from 'pl-fe/components/ui/card'; import Spinner from 'pl-fe/components/ui/spinner'; import { useSettings } from 'pl-fe/hooks/use-settings'; +import { EmptyMessage } from './empty-message'; + /** Custom Viruoso component context. */ type Context = { itemClassName?: string; @@ -48,12 +49,12 @@ interface IScrollableList extends VirtuosoProps { hasMore?: boolean; /** Additional element to display at the top of the list. */ prepend?: React.ReactNode; - /** Whether to display the prepended element. */ - alwaysPrepend?: boolean; /** Message to display when the list is loaded but empty. */ emptyMessage?: React.ReactNode; - /** Should the empty message be displayed in a Card */ - emptyMessageCard?: boolean; + /** Message to display when the list is loaded but empty. */ + emptyMessageText?: React.ReactNode; + /** Message to display next to the emptyMessage text. */ + emptyMessageIcon?: string; /** Scrollable content. */ children: Iterable; /** Callback when the list is scrolled to the top. */ @@ -83,11 +84,11 @@ interface IScrollableList extends VirtuosoProps { const ScrollableList = React.forwardRef(({ scrollKey, prepend = null, - alwaysPrepend, children, isLoading, emptyMessage, - emptyMessageCard = true, + emptyMessageText, + emptyMessageIcon, showLoading, onScroll, onScrollToTop, @@ -153,23 +154,13 @@ const ScrollableList = React.forwardRef(({ }, []); /* Render an empty state instead of the scrollable list. */ - const renderEmpty = (): JSX.Element => ( -
- {alwaysPrepend && prepend} - - {isLoading ? ( - - ) : ( - <> - {emptyMessageCard ? ( - - {emptyMessage} - - ) : emptyMessage} - - )} -
- ); + const renderEmpty = (): JSX.Element => { + return isLoading ? ( + + ) : emptyMessageText ? ( + + ) : <>{emptyMessage}; + }; /** Render a single item. */ const renderItem = (_i: number, element: JSX.Element): JSX.Element => { @@ -250,9 +241,9 @@ const ScrollableList = React.forwardRef(({ itemClassName, }} components={{ - Header: () => <>{prepend}, + Header: prepend ? () => <>{prepend} : undefined, ScrollSeekPlaceholder: Placeholder as any, - EmptyPlaceholder: () => renderEmpty(), + EmptyPlaceholder: renderEmpty, List, Item, Footer: loadMore, diff --git a/packages/pl-fe/src/features/admin/tabs/awaiting-approval.tsx b/packages/pl-fe/src/features/admin/tabs/awaiting-approval.tsx index 647bb2806..55ee6ef0f 100644 --- a/packages/pl-fe/src/features/admin/tabs/awaiting-approval.tsx +++ b/packages/pl-fe/src/features/admin/tabs/awaiting-approval.tsx @@ -1,18 +1,12 @@ import React, { useEffect, useState } from 'react'; -import { defineMessages, useIntl } from 'react-intl'; +import { FormattedMessage } from 'react-intl'; import ScrollableList from 'pl-fe/components/scrollable-list'; import { useAdminAccounts } from 'pl-fe/queries/admin/use-accounts'; import UnapprovedAccount from '../components/unapproved-account'; -const messages = defineMessages({ - heading: { id: 'column.admin.awaiting_approval', defaultMessage: 'Awaiting Approval' }, - emptyMessage: { id: 'admin.awaiting_approval.empty_message', defaultMessage: 'There is nobody waiting for approval. When a new user signs up, you can review them here.' }, -}); - const AwaitingApproval: React.FC = () => { - const intl = useIntl(); const { data, isPending, isFetching } = useAdminAccounts({ origin: 'local', status: 'pending', @@ -29,7 +23,7 @@ const AwaitingApproval: React.FC = () => { scrollKey='awaitingApproval' isLoading={isFetching} showLoading={isPending} - emptyMessage={intl.formatMessage(messages.emptyMessage)} + emptyMessageText={} listClassName='divide-y divide-solid divide-gray-200 dark:divide-gray-800' > {accountIds.map(id => ( diff --git a/packages/pl-fe/src/features/admin/tabs/reports.tsx b/packages/pl-fe/src/features/admin/tabs/reports.tsx index 37881443b..f21acac87 100644 --- a/packages/pl-fe/src/features/admin/tabs/reports.tsx +++ b/packages/pl-fe/src/features/admin/tabs/reports.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { defineMessages, FormattedList, FormattedMessage, useIntl } from 'react-intl'; +import { FormattedList, FormattedMessage } from 'react-intl'; import { useSearchParams } from 'react-router-dom-v5-compat'; import { useAccount } from 'pl-fe/api/hooks/accounts/use-account'; @@ -11,14 +11,7 @@ import { useReports } from 'pl-fe/queries/admin/use-reports'; import Report from '../components/report'; -const messages = defineMessages({ - heading: { id: 'column.admin.reports', defaultMessage: 'Reports' }, - modlog: { id: 'column.admin.reports.menu.moderation_log', defaultMessage: 'Moderation log' }, - emptyMessage: { id: 'admin.reports.empty_message', defaultMessage: 'There are no open reports. If a user gets reported, they will show up here.' }, -}); - const Reports: React.FC = () => { - const intl = useIntl(); const [params, setParams] = useSearchParams(); const resolved = params.get('resolved') as any as boolean || undefined; @@ -70,7 +63,7 @@ const Reports: React.FC = () => { scrollKey='adminReports' isLoading={isPending} showLoading={isPending} - emptyMessage={intl.formatMessage(messages.emptyMessage)} + emptyMessageText={} hasMore={hasNextPage} onLoadMore={fetchNextPage} itemClassName='pt-4' diff --git a/packages/pl-fe/src/features/compose-event/tabs/manage-pending-participants.tsx b/packages/pl-fe/src/features/compose-event/tabs/manage-pending-participants.tsx index 23e92f21c..1f246e4ac 100644 --- a/packages/pl-fe/src/features/compose-event/tabs/manage-pending-participants.tsx +++ b/packages/pl-fe/src/features/compose-event/tabs/manage-pending-participants.tsx @@ -61,7 +61,7 @@ const ManagePendingParticipants: React.FC = ({ statu } + emptyMessageText={} hasMore={hasNextPage} isLoading={typeof isLoading === 'boolean' ? isLoading : true} onLoadMore={() => fetchNextPage({ cancelRefetch: false })} diff --git a/packages/pl-fe/src/features/conversations/components/conversations-list.tsx b/packages/pl-fe/src/features/conversations/components/conversations-list.tsx index 6a767c586..17af7a428 100644 --- a/packages/pl-fe/src/features/conversations/components/conversations-list.tsx +++ b/packages/pl-fe/src/features/conversations/components/conversations-list.tsx @@ -45,7 +45,7 @@ const ConversationsList: React.FC = () => { id='direct-list' isLoading={isLoading} showLoading={isLoading && conversations.length === 0} - emptyMessage={} + emptyMessageText={} > {conversations.map((item: any) => ( { body = ( = ({ onClose, body = ( = ({ onCl body = ( = ({ onClos {reactions.length > 0 && renderFilterBar()} 0, })} diff --git a/packages/pl-fe/src/modals/reblogs-modal.tsx b/packages/pl-fe/src/modals/reblogs-modal.tsx index eaed08f3a..fbbfb0514 100644 --- a/packages/pl-fe/src/modals/reblogs-modal.tsx +++ b/packages/pl-fe/src/modals/reblogs-modal.tsx @@ -31,7 +31,7 @@ const ReblogsModal: React.FC = ({ onClose, s body = ( { hasMore={hasNextPage} isLoading={typeof isLoading === 'boolean' ? isLoading : true} onLoadMore={() => fetchNextPage({ cancelRefetch: false })} - emptyMessage={} + emptyMessageText={} > {accountIds.map(id => , diff --git a/packages/pl-fe/src/pages/account-lists/followers.tsx b/packages/pl-fe/src/pages/account-lists/followers.tsx index f56a174b4..eb81834b8 100644 --- a/packages/pl-fe/src/pages/account-lists/followers.tsx +++ b/packages/pl-fe/src/pages/account-lists/followers.tsx @@ -59,7 +59,7 @@ const FollowersPage: React.FC = ({ params }) => { scrollKey='followers' hasMore={hasNextPage} onLoadMore={fetchNextPage} - emptyMessage={} + emptyMessageText={} itemClassName='pb-4' isLoading={isFetching} > diff --git a/packages/pl-fe/src/pages/account-lists/following.tsx b/packages/pl-fe/src/pages/account-lists/following.tsx index 4ccebdb4a..6c29bf946 100644 --- a/packages/pl-fe/src/pages/account-lists/following.tsx +++ b/packages/pl-fe/src/pages/account-lists/following.tsx @@ -59,7 +59,7 @@ const FollowingPage: React.FC = ({ params }) => { scrollKey='following' hasMore={hasNextPage} onLoadMore={fetchNextPage} - emptyMessage={} + emptyMessageText={} itemClassName='pb-4' isLoading={isFetching} > diff --git a/packages/pl-fe/src/pages/account-lists/outgoing-follow-requests.tsx b/packages/pl-fe/src/pages/account-lists/outgoing-follow-requests.tsx index 5bd4a0611..9448f0f75 100644 --- a/packages/pl-fe/src/pages/account-lists/outgoing-follow-requests.tsx +++ b/packages/pl-fe/src/pages/account-lists/outgoing-follow-requests.tsx @@ -24,7 +24,7 @@ const OutgoingFollowRequestsPage: React.FC = () => { hasMore={hasNextPage} isLoading={typeof isLoading === 'boolean' ? isLoading : true} onLoadMore={() => fetchNextPage({ cancelRefetch: false })} - emptyMessage={} + emptyMessageText={} itemClassName='p-2.5' > {accountIds.map(id => diff --git a/packages/pl-fe/src/pages/accounts/account-timeline.tsx b/packages/pl-fe/src/pages/accounts/account-timeline.tsx index 5e0d1ff36..1e9ec9317 100644 --- a/packages/pl-fe/src/pages/accounts/account-timeline.tsx +++ b/packages/pl-fe/src/pages/accounts/account-timeline.tsx @@ -98,7 +98,7 @@ const AccountTimelinePage: React.FC = ({ params, withRepli isLoading={isLoading} hasMore={hasMore} onLoadMore={handleLoadMore} - emptyMessage={} + emptyMessageText={} /> ); }; diff --git a/packages/pl-fe/src/pages/dashboard/announcements.tsx b/packages/pl-fe/src/pages/dashboard/announcements.tsx index 9d9a8cfa5..988bc1450 100644 --- a/packages/pl-fe/src/pages/dashboard/announcements.tsx +++ b/packages/pl-fe/src/pages/dashboard/announcements.tsx @@ -118,7 +118,7 @@ const AdminAnnouncementsPage: React.FC = () => { { {domains && ( { @@ -36,7 +35,7 @@ const ModerationLogPage = () => { scrollKey='moderationLog' isLoading={isLoading} showLoading={showLoading} - emptyMessage={intl.formatMessage(messages.emptyMessage)} + emptyMessageText={} hasMore={hasNextPage} onLoadMore={handleLoadMore} listClassName='divide-y divide-solid divide-gray-200 dark:divide-gray-800' diff --git a/packages/pl-fe/src/pages/dashboard/relays.tsx b/packages/pl-fe/src/pages/dashboard/relays.tsx index f4a3dcba2..5751f8866 100644 --- a/packages/pl-fe/src/pages/dashboard/relays.tsx +++ b/packages/pl-fe/src/pages/dashboard/relays.tsx @@ -127,7 +127,7 @@ const RelaysPage: React.FC = () => { {relays && ( { { isLoading={isFetching} showLoading={isPending} onLoadMore={() => fetchNextPage({ cancelRefetch: false })} - emptyMessage={intl.formatMessage(messages.empty)} + emptyMessageText={} itemClassName='pb-4' > {(accountIds || []).map(id => diff --git a/packages/pl-fe/src/pages/groups/group-blocked-members.tsx b/packages/pl-fe/src/pages/groups/group-blocked-members.tsx index 9271911e1..2e9933a59 100644 --- a/packages/pl-fe/src/pages/groups/group-blocked-members.tsx +++ b/packages/pl-fe/src/pages/groups/group-blocked-members.tsx @@ -84,8 +84,7 @@ const GroupBlockedMembers: React.FC = ({ params }) => { {accountIds.map((accountId) => , diff --git a/packages/pl-fe/src/pages/groups/group-membership-requests.tsx b/packages/pl-fe/src/pages/groups/group-membership-requests.tsx index cc3eac5c2..8d52cdb9b 100644 --- a/packages/pl-fe/src/pages/groups/group-membership-requests.tsx +++ b/packages/pl-fe/src/pages/groups/group-membership-requests.tsx @@ -108,7 +108,7 @@ const GroupMembershipRequests: React.FC = ({ params }) } + emptyMessageText={} > {accounts.map((account) => ( { {
{aliases.map((alias, i) => ( diff --git a/packages/pl-fe/src/pages/settings/blocks.tsx b/packages/pl-fe/src/pages/settings/blocks.tsx index 3e7e2622f..0b300ca6b 100644 --- a/packages/pl-fe/src/pages/settings/blocks.tsx +++ b/packages/pl-fe/src/pages/settings/blocks.tsx @@ -39,8 +39,7 @@ const BlocksPage: React.FC = () => { scrollKey='blocks' onLoadMore={fetchNextPage} hasMore={hasNextPage} - emptyMessage={emptyMessage} - emptyMessageCard={false} + emptyMessageText={emptyMessage} itemClassName={clsx('pb-4', { 'last:pb-0': !hasNextPage })} isLoading={isFetching} > diff --git a/packages/pl-fe/src/pages/settings/domain-blocks.tsx b/packages/pl-fe/src/pages/settings/domain-blocks.tsx index a20560849..7b716211e 100644 --- a/packages/pl-fe/src/pages/settings/domain-blocks.tsx +++ b/packages/pl-fe/src/pages/settings/domain-blocks.tsx @@ -40,7 +40,7 @@ const DomainBlocksPage: React.FC = () => { scrollKey='domainBlocks' onLoadMore={handleLoadMore} hasMore={hasNextPage} - emptyMessage={emptyMessage} + emptyMessageText={emptyMessage} listClassName='divide-y divide-gray-200 dark:divide-gray-800' > {domains.map((domain) => diff --git a/packages/pl-fe/src/pages/settings/filters.tsx b/packages/pl-fe/src/pages/settings/filters.tsx index cd9668e26..7b1177a13 100644 --- a/packages/pl-fe/src/pages/settings/filters.tsx +++ b/packages/pl-fe/src/pages/settings/filters.tsx @@ -71,7 +71,7 @@ const FiltersPage = () => { {filters.map((filter) => ( diff --git a/packages/pl-fe/src/pages/settings/index.tsx b/packages/pl-fe/src/pages/settings/index.tsx index 8c28e8542..c07854117 100644 --- a/packages/pl-fe/src/pages/settings/index.tsx +++ b/packages/pl-fe/src/pages/settings/index.tsx @@ -22,7 +22,7 @@ const FollowedTagsPage = () => { { isLoading={isFetching} onLoadMore={fetchNextPage} hasMore={hasNextPage} - emptyMessage={ + emptyMessageText={ } - emptyMessageCard={false} > {data.map((accountId) => , diff --git a/packages/pl-fe/src/pages/status-lists/bookmarks.tsx b/packages/pl-fe/src/pages/status-lists/bookmarks.tsx index 2564ce180..15811a1c8 100644 --- a/packages/pl-fe/src/pages/status-lists/bookmarks.tsx +++ b/packages/pl-fe/src/pages/status-lists/bookmarks.tsx @@ -96,7 +96,7 @@ const BookmarksPage: React.FC = ({ params }) => { hasMore={hasNextPage} isLoading={isFetching} onLoadMore={() => fetchNextPage({ cancelRefetch: false })} - emptyMessage={emptyMessage} + emptyMessageText={emptyMessage} /> diff --git a/packages/pl-fe/src/pages/status-lists/draft-statuses.tsx b/packages/pl-fe/src/pages/status-lists/draft-statuses.tsx index 224e7b309..d6cd7c263 100644 --- a/packages/pl-fe/src/pages/status-lists/draft-statuses.tsx +++ b/packages/pl-fe/src/pages/status-lists/draft-statuses.tsx @@ -21,7 +21,7 @@ const DraftStatusesPage = () => { {drafts.toReversed().map((draft) => )} diff --git a/packages/pl-fe/src/pages/status-lists/favourited-statuses.tsx b/packages/pl-fe/src/pages/status-lists/favourited-statuses.tsx index a1b4f67d1..3091c1f01 100644 --- a/packages/pl-fe/src/pages/status-lists/favourited-statuses.tsx +++ b/packages/pl-fe/src/pages/status-lists/favourited-statuses.tsx @@ -58,7 +58,7 @@ const FavouritedStatusesPage: React.FC = ({ params }) => { hasMore={hasNextPage} isLoading={isFetching} onLoadMore={() => fetchNextPage({ cancelRefetch: false })} - emptyMessage={emptyMessage} + emptyMessageText={emptyMessage} /> ); diff --git a/packages/pl-fe/src/pages/status-lists/interaction-requests.tsx b/packages/pl-fe/src/pages/status-lists/interaction-requests.tsx index 59de06a71..ed87be837 100644 --- a/packages/pl-fe/src/pages/status-lists/interaction-requests.tsx +++ b/packages/pl-fe/src/pages/status-lists/interaction-requests.tsx @@ -244,7 +244,7 @@ const InteractionRequestsPage = () => { isLoading={isFetching} showLoading={isLoading} hasMore={hasNextPage} - emptyMessage={emptyMessage} + emptyMessageText={emptyMessage} onLoadMore={() => fetchNextPage()} listClassName={clsx('divide-y divide-solid divide-gray-200 black:divide-gray-800 dark:divide-primary-800', { 'animate-pulse': data?.length === 0, diff --git a/packages/pl-fe/src/pages/status-lists/pinned-statuses.tsx b/packages/pl-fe/src/pages/status-lists/pinned-statuses.tsx index 6d6120ebb..677d55189 100644 --- a/packages/pl-fe/src/pages/status-lists/pinned-statuses.tsx +++ b/packages/pl-fe/src/pages/status-lists/pinned-statuses.tsx @@ -33,7 +33,7 @@ const PinnedStatusesPage = () => { scrollKey='pinned_statuses' hasMore={hasMore} isLoading={isLoading} - emptyMessage={} + emptyMessageText={} /> ); diff --git a/packages/pl-fe/src/pages/status-lists/quotes.tsx b/packages/pl-fe/src/pages/status-lists/quotes.tsx index 225b53042..b6064d307 100644 --- a/packages/pl-fe/src/pages/status-lists/quotes.tsx +++ b/packages/pl-fe/src/pages/status-lists/quotes.tsx @@ -37,7 +37,7 @@ const QuotesPage: React.FC = () => { hasMore={hasNextPage} isLoading={typeof isLoading === 'boolean' ? isLoading : true} onLoadMore={handleLoadMore} - emptyMessage={emptyMessage} + emptyMessageText={emptyMessage} /> diff --git a/packages/pl-fe/src/pages/status-lists/scheduled-statuses.tsx b/packages/pl-fe/src/pages/status-lists/scheduled-statuses.tsx index 2d13aa98d..4d43015e6 100644 --- a/packages/pl-fe/src/pages/status-lists/scheduled-statuses.tsx +++ b/packages/pl-fe/src/pages/status-lists/scheduled-statuses.tsx @@ -24,7 +24,7 @@ const ScheduledStatusesPage = () => { hasMore={hasNextPage} isLoading={typeof isLoading === 'boolean' ? isLoading : true} onLoadMore={() => fetchNextPage({ cancelRefetch: false })} - emptyMessage={emptyMessage} + emptyMessageText={emptyMessage} listClassName='divide-y divide-solid divide-gray-200 dark:divide-gray-800' > {scheduledStatuses.map((status) => )} diff --git a/packages/pl-fe/src/pages/statuses/event-discussion.tsx b/packages/pl-fe/src/pages/statuses/event-discussion.tsx index 892eebddb..00be06399 100644 --- a/packages/pl-fe/src/pages/statuses/event-discussion.tsx +++ b/packages/pl-fe/src/pages/statuses/event-discussion.tsx @@ -141,7 +141,7 @@ const EventDiscussionPage: React.FC = ({ params: { statusId: s id='thread' placeholderComponent={() => } initialTopMostItemIndex={0} - emptyMessage={} + emptyMessageText={} > {children} diff --git a/packages/pl-fe/src/pages/timelines/bubble-timeline.tsx b/packages/pl-fe/src/pages/timelines/bubble-timeline.tsx index bbe536f90..3d9be98b5 100644 --- a/packages/pl-fe/src/pages/timelines/bubble-timeline.tsx +++ b/packages/pl-fe/src/pages/timelines/bubble-timeline.tsx @@ -45,7 +45,8 @@ const BubbleTimelinePage = () => { timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`} prefix='home' onLoadMore={handleLoadMore} - emptyMessage={} + emptyMessageText={} + emptyMessageIcon={require('@phosphor-icons/core/regular/chat-centered-text.svg')} /> diff --git a/packages/pl-fe/src/pages/timelines/circle-timeline.tsx b/packages/pl-fe/src/pages/timelines/circle-timeline.tsx index 71fe896bc..836c62d40 100644 --- a/packages/pl-fe/src/pages/timelines/circle-timeline.tsx +++ b/packages/pl-fe/src/pages/timelines/circle-timeline.tsx @@ -102,7 +102,8 @@ const CircleTimelinePage: React.FC = () => { scrollKey='circle_timeline' timelineId={`circle:${id}`} onLoadMore={handleLoadMore} - emptyMessage={emptyMessage} + emptyMessageText={emptyMessage} + emptyMessageIcon={require('@phosphor-icons/core/regular/chat-centered-text.svg')} /> ); diff --git a/packages/pl-fe/src/pages/timelines/community-timeline.tsx b/packages/pl-fe/src/pages/timelines/community-timeline.tsx index 653345d5f..b61010013 100644 --- a/packages/pl-fe/src/pages/timelines/community-timeline.tsx +++ b/packages/pl-fe/src/pages/timelines/community-timeline.tsx @@ -43,7 +43,8 @@ const CommunityTimelinePage = () => { timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`} prefix='home' onLoadMore={handleLoadMore} - emptyMessage={} + emptyMessageText={} + emptyMessageIcon={require('@phosphor-icons/core/regular/chat-centered-text.svg')} /> diff --git a/packages/pl-fe/src/pages/timelines/group-timeline.tsx b/packages/pl-fe/src/pages/timelines/group-timeline.tsx index 794124ed3..d021ef695 100644 --- a/packages/pl-fe/src/pages/timelines/group-timeline.tsx +++ b/packages/pl-fe/src/pages/timelines/group-timeline.tsx @@ -9,9 +9,7 @@ import { useGroup } from 'pl-fe/api/hooks/groups/use-group'; import { useGroupStream } from 'pl-fe/api/hooks/streaming/use-group-stream'; import Avatar from 'pl-fe/components/ui/avatar'; import HStack from 'pl-fe/components/ui/hstack'; -import Icon from 'pl-fe/components/ui/icon'; import Stack from 'pl-fe/components/ui/stack'; -import Text from 'pl-fe/components/ui/text'; import Timeline from 'pl-fe/features/ui/components/timeline'; import { ComposeForm } from 'pl-fe/features/ui/util/async-components'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; @@ -95,21 +93,8 @@ const GroupTimelinePage: React.FC = (props) => { scrollKey='group_timeline' timelineId={composeId} onLoadMore={handleLoadMore} - emptyMessage={ - -
- -
- - - - - - } - emptyMessageCard={false} + emptyMessageText={} + emptyMessageIcon={require('@phosphor-icons/core/regular/chat-centered-text.svg')} showGroup={false} featuredStatusIds={featuredStatusIds} /> diff --git a/packages/pl-fe/src/pages/timelines/hashtag-timeline.tsx b/packages/pl-fe/src/pages/timelines/hashtag-timeline.tsx index a9480f68d..5e384d3f2 100644 --- a/packages/pl-fe/src/pages/timelines/hashtag-timeline.tsx +++ b/packages/pl-fe/src/pages/timelines/hashtag-timeline.tsx @@ -69,7 +69,7 @@ const HashtagTimelinePage: React.FC = ({ params }) => { scrollKey='hashtag_timeline' timelineId={`hashtag:${tagId}`} onLoadMore={handleLoadMore} - emptyMessage={} + emptyMessageText={} /> ); diff --git a/packages/pl-fe/src/pages/timelines/home-timeline.tsx b/packages/pl-fe/src/pages/timelines/home-timeline.tsx index 01f42226c..b4aac733d 100644 --- a/packages/pl-fe/src/pages/timelines/home-timeline.tsx +++ b/packages/pl-fe/src/pages/timelines/home-timeline.tsx @@ -63,7 +63,7 @@ const HomeTimelinePage: React.FC = () => { scrollKey='home_timeline' onLoadMore={handleLoadMore} timelineId='home' - emptyMessage={ + emptyMessageText={ { )} } + emptyMessageIcon={require('@phosphor-icons/core/regular/chat-centered-text.svg')} /> diff --git a/packages/pl-fe/src/pages/timelines/landing-timeline.tsx b/packages/pl-fe/src/pages/timelines/landing-timeline.tsx index d7cfde14a..cde90c063 100644 --- a/packages/pl-fe/src/pages/timelines/landing-timeline.tsx +++ b/packages/pl-fe/src/pages/timelines/landing-timeline.tsx @@ -105,7 +105,8 @@ const LandingTimelinePage = () => { timelineId={timelineId} prefix='home' onLoadMore={handleLoadMore} - emptyMessage={} + emptyMessageText={} + emptyMessageIcon={require('@phosphor-icons/core/regular/chat-centered-text.svg')} /> ) : ( diff --git a/packages/pl-fe/src/pages/timelines/link-timeline.tsx b/packages/pl-fe/src/pages/timelines/link-timeline.tsx index 57e8a7414..2a6f3c000 100644 --- a/packages/pl-fe/src/pages/timelines/link-timeline.tsx +++ b/packages/pl-fe/src/pages/timelines/link-timeline.tsx @@ -40,7 +40,8 @@ const LinkTimelinePage: React.FC = ({ params }) => { scrollKey='link_timeline' timelineId={`link:${url}`} onLoadMore={handleLoadMore} - emptyMessage={} + emptyMessageText={} + emptyMessageIcon={require('@phosphor-icons/core/regular/chat-centered-text.svg')} /> ); diff --git a/packages/pl-fe/src/pages/timelines/list-timeline.tsx b/packages/pl-fe/src/pages/timelines/list-timeline.tsx index 8ef9f48cf..61a11720a 100644 --- a/packages/pl-fe/src/pages/timelines/list-timeline.tsx +++ b/packages/pl-fe/src/pages/timelines/list-timeline.tsx @@ -105,7 +105,8 @@ const ListTimelinePage: React.FC = () => { scrollKey='list_timeline' timelineId={`list:${id}`} onLoadMore={handleLoadMore} - emptyMessage={emptyMessage} + emptyMessageText={emptyMessage} + emptyMessageIcon={require('@phosphor-icons/core/regular/list-bullets.svg')} /> ); diff --git a/packages/pl-fe/src/pages/timelines/public-timeline.tsx b/packages/pl-fe/src/pages/timelines/public-timeline.tsx index 64467a25c..c170dad5f 100644 --- a/packages/pl-fe/src/pages/timelines/public-timeline.tsx +++ b/packages/pl-fe/src/pages/timelines/public-timeline.tsx @@ -90,7 +90,8 @@ const PublicTimelinePage = () => { timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`} prefix='home' onLoadMore={handleLoadMore} - emptyMessage={} + emptyMessageText={} + emptyMessageIcon={require('@phosphor-icons/core/regular/chat-centered-text.svg')} /> diff --git a/packages/pl-fe/src/pages/timelines/remote-timeline.tsx b/packages/pl-fe/src/pages/timelines/remote-timeline.tsx index ccbaadc3a..188475047 100644 --- a/packages/pl-fe/src/pages/timelines/remote-timeline.tsx +++ b/packages/pl-fe/src/pages/timelines/remote-timeline.tsx @@ -68,13 +68,14 @@ const RemoteTimelinePage: React.FC = ({ params }) => { scrollKey={`${timelineId}_${instance}_timeline`} timelineId={`${timelineId}${onlyMedia ? ':media' : ''}:${instance}`} onLoadMore={handleLoadMore} - emptyMessage={ + emptyMessageText={ } + emptyMessageIcon={require('@phosphor-icons/core/regular/chat-centered-text.svg')} /> ); diff --git a/packages/pl-fe/src/pages/timelines/test-timeline.tsx b/packages/pl-fe/src/pages/timelines/test-timeline.tsx index 5bd92feaf..63765196c 100644 --- a/packages/pl-fe/src/pages/timelines/test-timeline.tsx +++ b/packages/pl-fe/src/pages/timelines/test-timeline.tsx @@ -40,7 +40,8 @@ const TestTimelinePage: React.FC = () => { } + emptyMessageText={} + emptyMessageIcon={require('@phosphor-icons/core/regular/chat-centered-text.svg')} /> ); diff --git a/packages/pl-fe/src/pages/timelines/wrenched-timeline.tsx b/packages/pl-fe/src/pages/timelines/wrenched-timeline.tsx index 09d386cdc..7bfd1c92d 100644 --- a/packages/pl-fe/src/pages/timelines/wrenched-timeline.tsx +++ b/packages/pl-fe/src/pages/timelines/wrenched-timeline.tsx @@ -41,7 +41,8 @@ const WrenchedTimelinePage = () => { timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`} prefix='home' onLoadMore={handleLoadMore} - emptyMessage={} + emptyMessageText={} + emptyMessageIcon={require('@phosphor-icons/core/regular/wrench.svg')} /> diff --git a/packages/pl-fe/src/pages/utils/federation-restrictions.tsx b/packages/pl-fe/src/pages/utils/federation-restrictions.tsx index db95f153e..943d4d46b 100644 --- a/packages/pl-fe/src/pages/utils/federation-restrictions.tsx +++ b/packages/pl-fe/src/pages/utils/federation-restrictions.tsx @@ -1,5 +1,5 @@ import React, { useState, useCallback } from 'react'; -import { defineMessages, useIntl } from 'react-intl'; +import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import ScrollableList from 'pl-fe/components/scrollable-list'; import Accordion from 'pl-fe/components/ui/accordion'; @@ -14,8 +14,6 @@ const messages = defineMessages({ heading: { id: 'column.federation_restrictions', defaultMessage: 'Federation restrictions' }, boxTitle: { id: 'federation_restrictions.explanation_box.title', defaultMessage: 'Instance-specific policies' }, boxMessage: { id: 'federation_restrictions.explanation_box.message', defaultMessage: 'Normally servers on the Fediverse can communicate freely. {siteTitle} has imposed restrictions on the following servers.' }, - emptyMessage: { id: 'federation_restrictions.empty_message', defaultMessage: '{siteTitle} has not restricted any instances.' }, - notDisclosed: { id: 'federation_restrictions.not_disclosed_message', defaultMessage: '{siteTitle} does not disclose federation restrictions through the API.' }, }); const FederationRestrictionsPage = () => { @@ -33,7 +31,9 @@ const FederationRestrictionsPage = () => { setExplanationBoxExpanded(setting); }; - const emptyMessage = disclosed ? messages.emptyMessage : messages.notDisclosed; + const emptyMessage = disclosed + ? + : ; return ( @@ -46,7 +46,7 @@ const FederationRestrictionsPage = () => {
- + {hosts.map((host) => )}
diff --git a/packages/pl-fe/src/styles/new/components.scss b/packages/pl-fe/src/styles/new/components.scss index 210a87344..b8142e6eb 100644 --- a/packages/pl-fe/src/styles/new/components.scss +++ b/packages/pl-fe/src/styles/new/components.scss @@ -171,3 +171,7 @@ a.⁂-list-item, align-items: stretch; overflow: hidden; } + +div[data-viewport-type="window"]:has(.⁂-empty-message) { + position: initial!important; +}