Remove `=== 'black'` conditionals

This commit is contained in:
Alex Gleason 2025-01-24 15:51:42 -06:00
parent f952499a33
commit a4b041723a
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
23 changed files with 18 additions and 96 deletions

View File

@ -36,8 +36,6 @@ interface IPureStatusList extends Omit<IScrollableList, 'onLoadMore' | 'children
emptyMessage: React.ReactNode;
/** ID of the timeline in Redux. */
timelineId?: string;
/** Whether to display a gap or border between statuses in the list. */
divideType?: 'space' | 'border';
/** Whether to display ads. */
showAds?: boolean;
/** Whether to show group information. */
@ -51,7 +49,6 @@ const PureStatusList: React.FC<IPureStatusList> = ({
statuses,
lastStatusId,
featuredStatuses,
divideType = 'border',
onLoadMore,
timelineId,
isLoading,
@ -133,7 +130,6 @@ const PureStatusList: React.FC<IPureStatusList> = ({
onMoveUp={handleMoveUp}
onMoveDown={handleMoveDown}
showGroup={showGroup}
variant={divideType === 'border' ? 'slim' : 'rounded'}
/>
);
};
@ -161,7 +157,6 @@ const PureStatusList: React.FC<IPureStatusList> = ({
onMoveUp={handleMoveUp}
onMoveDown={handleMoveDown}
showGroup={showGroup}
variant={divideType === 'border' ? 'slim' : 'default'} // shouldn't "default" be changed to "rounded" ?
/>
));
};
@ -236,15 +231,10 @@ const PureStatusList: React.FC<IPureStatusList> = ({
isLoading={isLoading}
showLoading={isLoading && statuses.length === 0}
onLoadMore={handleLoadOlder}
placeholderComponent={() => <PlaceholderStatus variant={divideType === 'border' ? 'slim' : 'rounded'} />}
placeholderComponent={() => <PlaceholderStatus />}
placeholderCount={20}
ref={node}
listClassName={clsx('divide-y divide-solid divide-gray-200 dark:divide-gray-800', {
'divide-none': divideType !== 'border',
}, className)}
itemClassName={clsx({
'pb-3': divideType !== 'border',
})}
listClassName={clsx('divide-y divide-solid divide-gray-200 dark:divide-gray-800', className)}
{...other}
>
{renderScrollableContent()}

View File

@ -57,7 +57,6 @@ export interface IPureStatus {
featured?: boolean;
hideActionBar?: boolean;
hoverable?: boolean;
variant?: 'default' | 'rounded' | 'slim';
showGroup?: boolean;
accountAction?: React.ReactElement;
}
@ -80,7 +79,6 @@ const PureStatus: React.FC<IPureStatus> = (props) => {
featured,
unread,
hideActionBar,
variant = 'rounded',
showGroup = true,
} = props;
@ -420,9 +418,10 @@ const PureStatus: React.FC<IPureStatus> = (props) => {
role='link'
>
<Card
variant={variant}
variant='slim'
className={clsx('status--wrapper space-y-4', {
'py-6 sm:p-5': variant === 'rounded', muted, read: unread === false,
muted,
read: unread === false,
})}
data-id={status.id}
>

View File

@ -36,8 +36,6 @@ interface IStatusList extends Omit<IScrollableList, 'onLoadMore' | 'children'> {
emptyMessage: React.ReactNode;
/** ID of the timeline in Redux. */
timelineId?: string;
/** Whether to display a gap or border between statuses in the list. */
divideType?: 'space' | 'border';
/** Whether to display ads. */
showAds?: boolean;
/** Whether to show group information. */
@ -52,7 +50,6 @@ const StatusList: React.FC<IStatusList> = ({
statusIds,
lastStatusId,
featuredStatusIds,
divideType = 'border',
onLoadMore,
timelineId,
isLoading,
@ -131,7 +128,6 @@ const StatusList: React.FC<IStatusList> = ({
onMoveDown={handleMoveDown}
contextType={timelineId}
showGroup={showGroup}
variant={divideType === 'border' ? 'slim' : 'rounded'}
/>
);
};
@ -159,7 +155,6 @@ const StatusList: React.FC<IStatusList> = ({
onMoveDown={handleMoveDown}
contextType={timelineId}
showGroup={showGroup}
variant={divideType === 'border' ? 'slim' : 'default'}
/>
));
};
@ -234,15 +229,10 @@ const StatusList: React.FC<IStatusList> = ({
isLoading={isLoading}
showLoading={isLoading && statusIds.size === 0}
onLoadMore={handleLoadOlder}
placeholderComponent={() => <PlaceholderStatus variant={divideType === 'border' ? 'slim' : 'rounded'} />}
placeholderComponent={() => <PlaceholderStatus />}
placeholderCount={20}
ref={node}
listClassName={clsx('divide-y divide-solid divide-gray-200 dark:divide-gray-800', {
'divide-none': divideType !== 'border',
}, className)}
itemClassName={clsx({
'pb-3': divideType !== 'border',
})}
listClassName={clsx('divide-y divide-solid divide-gray-200 dark:divide-gray-800', className)}
{...other}
>
{renderScrollableContent()}

View File

@ -57,7 +57,7 @@ export interface IStatus {
featured?: boolean;
hideActionBar?: boolean;
hoverable?: boolean;
variant?: 'default' | 'rounded' | 'slim';
variant?: 'default' | 'slim';
showGroup?: boolean;
accountAction?: React.ReactElement;
}
@ -81,7 +81,7 @@ const Status: React.FC<IStatus> = (props) => {
featured,
unread,
hideActionBar,
variant = 'rounded',
variant = 'slim',
showGroup = true,
} = props;
@ -419,7 +419,8 @@ const Status: React.FC<IStatus> = (props) => {
<Card
variant={variant}
className={clsx('status--wrapper space-y-4', {
'py-6 sm:p-5': variant === 'rounded', muted, read: unread === false,
muted,
read: unread === false,
})}
data-id={status.id}
>

View File

@ -5,8 +5,6 @@ import { useBookmarks } from 'soapbox/api/hooks/index.ts';
import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
import PureStatusList from 'soapbox/components/pure-status-list.tsx';
import { Column } from 'soapbox/components/ui/column.tsx';
import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
import { useTheme } from 'soapbox/hooks/useTheme.ts';
const messages = defineMessages({
heading: { id: 'column.bookmarks', defaultMessage: 'Bookmarks' },
@ -15,9 +13,6 @@ const messages = defineMessages({
const Bookmarks: React.FC = () => {
const intl = useIntl();
const theme = useTheme();
const isMobile = useIsMobile();
const handleLoadMore = debounce(() => {
fetchNextPage();
}, 300, { edges: ['leading'] });
@ -41,7 +36,6 @@ const Bookmarks: React.FC = () => {
isLoading={typeof isLoading === 'boolean' ? isLoading : true}
onLoadMore={() => handleLoadMore()}
emptyMessage={emptyMessage}
divideType={(theme === 'black' || isMobile) ? 'border' : 'space'}
/>
</PullToRefresh>
</Column>

View File

@ -10,13 +10,11 @@ import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
import { useInstance } from 'soapbox/hooks/useInstance.ts';
import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
import { useSettings } from 'soapbox/hooks/useSettings.ts';
import { useTheme } from 'soapbox/hooks/useTheme.ts';
import Timeline from '../ui/components/timeline.tsx';
const CommunityTimeline = () => {
const dispatch = useAppDispatch();
const theme = useTheme();
const { instance } = useInstance();
const settings = useSettings();
@ -50,7 +48,6 @@ const CommunityTimeline = () => {
prefix='home'
onLoadMore={handleLoadMore}
emptyMessage={<FormattedMessage id='empty_column.community' defaultMessage='The local timeline is empty. Write something publicly to get the ball rolling!' />}
divideType={(theme === 'black' || isMobile) ? 'border' : 'space'}
/>
</PullToRefresh>
</Column>

View File

@ -47,7 +47,6 @@ const DirectTimeline = () => {
timelineId='direct'
onLoadMore={handleLoadMore}
emptyMessage={<FormattedMessage id='empty_column.direct' defaultMessage="You don't have any direct messages yet. When you send or receive one, it will show up here." />}
divideType='border'
/>
</Column>
);

View File

@ -185,7 +185,7 @@ const EventDiscussion: React.FC<IEventDiscussion> = (props) => {
ref={scroller}
hasMore={!!next}
onLoadMore={handleLoadMore}
placeholderComponent={() => <PlaceholderStatus variant='slim' />}
placeholderComponent={() => <PlaceholderStatus />}
initialTopMostItemIndex={0}
emptyMessage={<FormattedMessage id='event.discussion.empty' defaultMessage='No one has commented this event yet. When someone does, they will appear here.' />}
>

View File

@ -47,7 +47,6 @@ const GroupTagTimeline: React.FC<IGroupTimeline> = (props) => {
scrollKey='group_timeline'
timelineId={`group:tags:${groupId}:${tag.name}`}
onLoadMore={handleLoadMore}
divideType='border'
showGroup={false}
emptyMessageCard={false}
emptyMessage={

View File

@ -130,7 +130,6 @@ const GroupTimeline: React.FC<IGroupTimeline> = (props) => {
</Stack>
}
emptyMessageCard={false}
divideType='border'
showGroup={false}
featuredStatusIds={featuredStatusIds}
/>

View File

@ -13,7 +13,6 @@ import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
import { useLoggedIn } from 'soapbox/hooks/useLoggedIn.ts';
import { useTheme } from 'soapbox/hooks/useTheme.ts';
interface IHashtagTimeline {
params?: {
@ -29,7 +28,6 @@ export const HashtagTimeline: React.FC<IHashtagTimeline> = ({ params }) => {
const tag = useAppSelector((state) => state.tags.get(id));
const next = useAppSelector(state => state.timelines.get(`hashtag:${id}`)?.next);
const { isLoggedIn } = useLoggedIn();
const theme = useTheme();
const isMobile = useIsMobile();
const handleLoadMore = (maxId: string) => {
@ -76,7 +74,6 @@ export const HashtagTimeline: React.FC<IHashtagTimeline> = ({ params }) => {
timelineId={`hashtag:${id}`}
onLoadMore={handleLoadMore}
emptyMessage={<FormattedMessage id='empty_column.hashtag' defaultMessage='There is nothing in this hashtag yet.' />}
divideType={(theme === 'black' || isMobile) ? 'border' : 'space'}
/>
</Column>
);

View File

@ -13,7 +13,6 @@ import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
import { useInstance } from 'soapbox/hooks/useInstance.ts';
import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
import { useTheme } from 'soapbox/hooks/useTheme.ts';
const messages = defineMessages({
title: { id: 'column.home', defaultMessage: 'Home' },
@ -24,7 +23,6 @@ const HomeTimeline: React.FC = () => {
const dispatch = useAppDispatch();
const features = useFeatures();
const { instance } = useInstance();
const theme = useTheme();
const polling = useRef<NodeJS.Timeout | null>(null);
const isMobile = useIsMobile();
@ -75,7 +73,6 @@ const HomeTimeline: React.FC = () => {
scrollKey='home_timeline'
onLoadMore={handleLoadMore}
timelineId='home'
divideType={(theme === 'black' || isMobile) ? 'border' : 'space'}
emptyMessage={
<Stack space={1}>
<Text size='xl' weight='medium' align='center'>

View File

@ -9,7 +9,6 @@ import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
import { useInstance } from 'soapbox/hooks/useInstance.ts';
import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
import { useTheme } from 'soapbox/hooks/useTheme.ts';
import AboutPage from '../about/index.tsx';
import Timeline from '../ui/components/timeline.tsx';
@ -19,7 +18,6 @@ import { SiteBanner } from './components/site-banner.tsx';
const LandingTimeline = () => {
const dispatch = useAppDispatch();
const { instance } = useInstance();
const theme = useTheme();
const isMobile = useIsMobile();
const timelineEnabled = !instance.pleroma.metadata.restrict_unauthenticated.timelines.local;
@ -62,7 +60,6 @@ const LandingTimeline = () => {
prefix='home'
onLoadMore={handleLoadMore}
emptyMessage={<FormattedMessage id='empty_column.community' defaultMessage='The local timeline is empty. Write something publicly to get the ball rolling!' />}
divideType={(theme === 'black' || isMobile) ? 'border' : 'space'}
/>
</PullToRefresh>
) : (

View File

@ -13,14 +13,12 @@ import Spinner from 'soapbox/components/ui/spinner.tsx';
import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
import { useTheme } from 'soapbox/hooks/useTheme.ts';
import Timeline from '../ui/components/timeline.tsx';
const ListTimeline: React.FC = () => {
const dispatch = useAppDispatch();
const { id } = useParams<{ id: string }>();
const theme = useTheme();
const isMobile = useIsMobile();
const list = useAppSelector((state) => state.lists.get(id));
@ -73,7 +71,6 @@ const ListTimeline: React.FC = () => {
timelineId={`list:${id}`}
onLoadMore={handleLoadMore}
emptyMessage={emptyMessage}
divideType={(theme === 'black' || isMobile) ? 'border' : 'space'}
/>
</Column>
);

View File

@ -19,9 +19,7 @@ import Portal from 'soapbox/components/ui/portal.tsx';
import PlaceholderNotification from 'soapbox/features/placeholder/components/placeholder-notification.tsx';
import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
import { useSettings } from 'soapbox/hooks/useSettings.ts';
import { useTheme } from 'soapbox/hooks/useTheme.ts';
import FilterBar from './components/filter-bar.tsx';
import Notification from './components/notification.tsx';
@ -63,9 +61,6 @@ const Notifications = () => {
const hasMore = useAppSelector(state => state.notifications.hasMore);
const totalQueuedNotificationsCount = useAppSelector(state => state.notifications.totalQueuedNotificationsCount || 0);
const theme = useTheme();
const isMobile = useIsMobile();
const node = useRef<VirtuosoHandle>(null);
const column = useRef<HTMLDivElement>(null);
const scrollableContentRef = useRef<ImmutableList<JSX.Element> | null>(null);
@ -186,7 +181,7 @@ const Notifications = () => {
ref={column}
label={intl.formatMessage(messages.title)}
withHeader={false}
className={clsx({ '!p-0': isMobile || theme === 'black' })}
className='!p-0'
>
{filterBarContainer}

View File

@ -1,4 +1,3 @@
import clsx from 'clsx';
import { memo } from 'react';
import HStack from 'soapbox/components/ui/hstack.tsx';
@ -7,19 +6,9 @@ import PlaceholderAvatar from './placeholder-avatar.tsx';
import PlaceholderDisplayName from './placeholder-display-name.tsx';
import PlaceholderStatusContent from './placeholder-status-content.tsx';
interface IPlaceholderStatus {
variant?: 'rounded' | 'slim' | 'default';
}
/** Fake status to display while data is loading. */
const PlaceholderStatus: React.FC<IPlaceholderStatus> = ({ variant }) => (
<div
className={clsx({
'status-placeholder bg-white black:bg-black dark:bg-primary-900': true,
'shadow-xl dark:shadow-none sm:rounded-xl px-4 py-6 sm:p-5': variant === 'rounded',
'py-4': variant === 'slim',
})}
>
const PlaceholderStatus: React.FC = () => (
<div className='status-placeholder bg-white py-4 black:bg-black dark:bg-primary-900'>
<div className='w-full animate-pulse overflow-hidden'>
<div>
<HStack space={3} alignItems='center'>

View File

@ -16,7 +16,6 @@ import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
import { useInstance } from 'soapbox/hooks/useInstance.ts';
import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
import { useSettings } from 'soapbox/hooks/useSettings.ts';
import { useTheme } from 'soapbox/hooks/useTheme.ts';
import PinnedHostsPicker from '../remote-timeline/components/pinned-hosts-picker.tsx';
import Timeline from '../ui/components/timeline.tsx';
@ -30,7 +29,6 @@ const PublicTimeline = () => {
const intl = useIntl();
const dispatch = useAppDispatch();
const features = useFeatures();
const theme = useTheme();
const [language, setLanguage] = useState<string>(localStorage.getItem('soapbox:global:language') || '');
@ -118,7 +116,6 @@ const PublicTimeline = () => {
prefix='home'
onLoadMore={handleLoadMore}
emptyMessage={<FormattedMessage id='empty_column.public' defaultMessage='There is nothing here! Write something publicly, or manually follow users from other servers to fill it up' />}
divideType={(theme === 'black' || isMobile) ? 'border' : 'space'}
/>
</PullToRefresh>
</Column>

View File

@ -10,7 +10,6 @@ import { Column } from 'soapbox/components/ui/column.tsx';
import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
import { useTheme } from 'soapbox/hooks/useTheme.ts';
const messages = defineMessages({
heading: { id: 'column.quotes', defaultMessage: 'Post quotes' },
@ -23,7 +22,6 @@ const Quotes: React.FC = () => {
const dispatch = useAppDispatch();
const intl = useIntl();
const { statusId } = useParams<{ statusId: string }>();
const theme = useTheme();
const isMobile = useIsMobile();
const statusIds = useAppSelector((state) => state.status_lists.getIn([`quotes:${statusId}`, 'items'], ImmutableOrderedSet<string>()));
@ -51,7 +49,6 @@ const Quotes: React.FC = () => {
onLoadMore={() => handleLoadMore(statusId, dispatch)}
onRefresh={handleRefresh}
emptyMessage={emptyMessage}
divideType={(theme === 'black' || isMobile) ? 'border' : 'space'}
/>
</Column>
);

View File

@ -13,7 +13,6 @@ import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
import { useSettings } from 'soapbox/hooks/useSettings.ts';
import { useTheme } from 'soapbox/hooks/useTheme.ts';
import Timeline from '../ui/components/timeline.tsx';
@ -29,7 +28,6 @@ interface IRemoteTimeline {
const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
const history = useHistory();
const dispatch = useAppDispatch();
const theme = useTheme();
const instance = params?.instance as string;
const settings = useSettings();
@ -84,7 +82,6 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
values={{ instance }}
/>
}
divideType={(theme === 'black' || isMobile) ? 'border' : 'space'}
/>
</Column>
);

View File

@ -1,11 +1,8 @@
import clsx from 'clsx';
import { defineMessages, useIntl } from 'react-intl';
import { Column } from 'soapbox/components/ui/column.tsx';
import SearchResults from 'soapbox/features/compose/components/search-results.tsx';
import Search from 'soapbox/features/compose/components/search.tsx';
import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
import { useTheme } from 'soapbox/hooks/useTheme.ts';
const messages = defineMessages({
heading: { id: 'column.search', defaultMessage: 'Discover' },
@ -14,13 +11,10 @@ const messages = defineMessages({
const SearchPage = () => {
const intl = useIntl();
const theme = useTheme();
const isMobile = useIsMobile();
return (
<Column
label={intl.formatMessage(messages.heading)}
className={clsx({ '!px-0': isMobile || theme === 'black' })}
className='!px-0'
>
<div className='space-y-4'>
<div className='px-4 sm:py-0'>

View File

@ -44,7 +44,7 @@ const ThreadStatus: React.FC<IThreadStatus> = (props): JSX.Element => {
// @ts-ignore FIXME
<StatusContainer {...props} showGroup={false} />
) : (
<PlaceholderStatus variant='default' />
<PlaceholderStatus />
)}
</div>
);

View File

@ -445,7 +445,7 @@ const Thread = (props: IThread) => {
ref={scroller}
hasMore={!!next}
onLoadMore={handleLoadMore}
placeholderComponent={() => <PlaceholderStatus variant='slim' />}
placeholderComponent={() => <PlaceholderStatus />}
initialTopMostItemIndex={initialTopMostItemIndex}
useWindowScroll={useWindowScroll}
itemClassName={itemClassName}

View File

@ -13,7 +13,6 @@ import { Column } from 'soapbox/components/ui/column.tsx';
import Timeline from 'soapbox/features/ui/components/timeline.tsx';
import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
import { useTheme } from 'soapbox/hooks/useTheme.ts';
const messages = defineMessages({
title: { id: 'column.test', defaultMessage: 'Test timeline' },
@ -31,7 +30,6 @@ const onlyMedia = false;
const TestTimeline: React.FC = () => {
const intl = useIntl();
const dispatch = useAppDispatch();
const theme = useTheme();
const isMobile = useIsMobile();
useEffect(() => {
@ -45,7 +43,6 @@ const TestTimeline: React.FC = () => {
scrollKey={`${timelineId}_timeline`}
timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}
emptyMessage={<FormattedMessage id='empty_column.test' defaultMessage='The test timeline is empty.' />}
divideType={(theme === 'black' || isMobile) ? 'border' : 'space'}
/>
</Column>
);