Remove `=== 'black'` conditionals
This commit is contained in:
parent
f952499a33
commit
a4b041723a
|
@ -36,8 +36,6 @@ interface IPureStatusList extends Omit<IScrollableList, 'onLoadMore' | 'children
|
||||||
emptyMessage: React.ReactNode;
|
emptyMessage: React.ReactNode;
|
||||||
/** ID of the timeline in Redux. */
|
/** ID of the timeline in Redux. */
|
||||||
timelineId?: string;
|
timelineId?: string;
|
||||||
/** Whether to display a gap or border between statuses in the list. */
|
|
||||||
divideType?: 'space' | 'border';
|
|
||||||
/** Whether to display ads. */
|
/** Whether to display ads. */
|
||||||
showAds?: boolean;
|
showAds?: boolean;
|
||||||
/** Whether to show group information. */
|
/** Whether to show group information. */
|
||||||
|
@ -51,7 +49,6 @@ const PureStatusList: React.FC<IPureStatusList> = ({
|
||||||
statuses,
|
statuses,
|
||||||
lastStatusId,
|
lastStatusId,
|
||||||
featuredStatuses,
|
featuredStatuses,
|
||||||
divideType = 'border',
|
|
||||||
onLoadMore,
|
onLoadMore,
|
||||||
timelineId,
|
timelineId,
|
||||||
isLoading,
|
isLoading,
|
||||||
|
@ -133,7 +130,6 @@ const PureStatusList: React.FC<IPureStatusList> = ({
|
||||||
onMoveUp={handleMoveUp}
|
onMoveUp={handleMoveUp}
|
||||||
onMoveDown={handleMoveDown}
|
onMoveDown={handleMoveDown}
|
||||||
showGroup={showGroup}
|
showGroup={showGroup}
|
||||||
variant={divideType === 'border' ? 'slim' : 'rounded'}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -161,7 +157,6 @@ const PureStatusList: React.FC<IPureStatusList> = ({
|
||||||
onMoveUp={handleMoveUp}
|
onMoveUp={handleMoveUp}
|
||||||
onMoveDown={handleMoveDown}
|
onMoveDown={handleMoveDown}
|
||||||
showGroup={showGroup}
|
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}
|
isLoading={isLoading}
|
||||||
showLoading={isLoading && statuses.length === 0}
|
showLoading={isLoading && statuses.length === 0}
|
||||||
onLoadMore={handleLoadOlder}
|
onLoadMore={handleLoadOlder}
|
||||||
placeholderComponent={() => <PlaceholderStatus variant={divideType === 'border' ? 'slim' : 'rounded'} />}
|
placeholderComponent={() => <PlaceholderStatus />}
|
||||||
placeholderCount={20}
|
placeholderCount={20}
|
||||||
ref={node}
|
ref={node}
|
||||||
listClassName={clsx('divide-y divide-solid divide-gray-200 dark:divide-gray-800', {
|
listClassName={clsx('divide-y divide-solid divide-gray-200 dark:divide-gray-800', className)}
|
||||||
'divide-none': divideType !== 'border',
|
|
||||||
}, className)}
|
|
||||||
itemClassName={clsx({
|
|
||||||
'pb-3': divideType !== 'border',
|
|
||||||
})}
|
|
||||||
{...other}
|
{...other}
|
||||||
>
|
>
|
||||||
{renderScrollableContent()}
|
{renderScrollableContent()}
|
||||||
|
|
|
@ -57,7 +57,6 @@ export interface IPureStatus {
|
||||||
featured?: boolean;
|
featured?: boolean;
|
||||||
hideActionBar?: boolean;
|
hideActionBar?: boolean;
|
||||||
hoverable?: boolean;
|
hoverable?: boolean;
|
||||||
variant?: 'default' | 'rounded' | 'slim';
|
|
||||||
showGroup?: boolean;
|
showGroup?: boolean;
|
||||||
accountAction?: React.ReactElement;
|
accountAction?: React.ReactElement;
|
||||||
}
|
}
|
||||||
|
@ -80,7 +79,6 @@ const PureStatus: React.FC<IPureStatus> = (props) => {
|
||||||
featured,
|
featured,
|
||||||
unread,
|
unread,
|
||||||
hideActionBar,
|
hideActionBar,
|
||||||
variant = 'rounded',
|
|
||||||
showGroup = true,
|
showGroup = true,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
|
@ -420,9 +418,10 @@ const PureStatus: React.FC<IPureStatus> = (props) => {
|
||||||
role='link'
|
role='link'
|
||||||
>
|
>
|
||||||
<Card
|
<Card
|
||||||
variant={variant}
|
variant='slim'
|
||||||
className={clsx('status--wrapper space-y-4', {
|
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}
|
data-id={status.id}
|
||||||
>
|
>
|
||||||
|
|
|
@ -36,8 +36,6 @@ interface IStatusList extends Omit<IScrollableList, 'onLoadMore' | 'children'> {
|
||||||
emptyMessage: React.ReactNode;
|
emptyMessage: React.ReactNode;
|
||||||
/** ID of the timeline in Redux. */
|
/** ID of the timeline in Redux. */
|
||||||
timelineId?: string;
|
timelineId?: string;
|
||||||
/** Whether to display a gap or border between statuses in the list. */
|
|
||||||
divideType?: 'space' | 'border';
|
|
||||||
/** Whether to display ads. */
|
/** Whether to display ads. */
|
||||||
showAds?: boolean;
|
showAds?: boolean;
|
||||||
/** Whether to show group information. */
|
/** Whether to show group information. */
|
||||||
|
@ -52,7 +50,6 @@ const StatusList: React.FC<IStatusList> = ({
|
||||||
statusIds,
|
statusIds,
|
||||||
lastStatusId,
|
lastStatusId,
|
||||||
featuredStatusIds,
|
featuredStatusIds,
|
||||||
divideType = 'border',
|
|
||||||
onLoadMore,
|
onLoadMore,
|
||||||
timelineId,
|
timelineId,
|
||||||
isLoading,
|
isLoading,
|
||||||
|
@ -131,7 +128,6 @@ const StatusList: React.FC<IStatusList> = ({
|
||||||
onMoveDown={handleMoveDown}
|
onMoveDown={handleMoveDown}
|
||||||
contextType={timelineId}
|
contextType={timelineId}
|
||||||
showGroup={showGroup}
|
showGroup={showGroup}
|
||||||
variant={divideType === 'border' ? 'slim' : 'rounded'}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -159,7 +155,6 @@ const StatusList: React.FC<IStatusList> = ({
|
||||||
onMoveDown={handleMoveDown}
|
onMoveDown={handleMoveDown}
|
||||||
contextType={timelineId}
|
contextType={timelineId}
|
||||||
showGroup={showGroup}
|
showGroup={showGroup}
|
||||||
variant={divideType === 'border' ? 'slim' : 'default'}
|
|
||||||
/>
|
/>
|
||||||
));
|
));
|
||||||
};
|
};
|
||||||
|
@ -234,15 +229,10 @@ const StatusList: React.FC<IStatusList> = ({
|
||||||
isLoading={isLoading}
|
isLoading={isLoading}
|
||||||
showLoading={isLoading && statusIds.size === 0}
|
showLoading={isLoading && statusIds.size === 0}
|
||||||
onLoadMore={handleLoadOlder}
|
onLoadMore={handleLoadOlder}
|
||||||
placeholderComponent={() => <PlaceholderStatus variant={divideType === 'border' ? 'slim' : 'rounded'} />}
|
placeholderComponent={() => <PlaceholderStatus />}
|
||||||
placeholderCount={20}
|
placeholderCount={20}
|
||||||
ref={node}
|
ref={node}
|
||||||
listClassName={clsx('divide-y divide-solid divide-gray-200 dark:divide-gray-800', {
|
listClassName={clsx('divide-y divide-solid divide-gray-200 dark:divide-gray-800', className)}
|
||||||
'divide-none': divideType !== 'border',
|
|
||||||
}, className)}
|
|
||||||
itemClassName={clsx({
|
|
||||||
'pb-3': divideType !== 'border',
|
|
||||||
})}
|
|
||||||
{...other}
|
{...other}
|
||||||
>
|
>
|
||||||
{renderScrollableContent()}
|
{renderScrollableContent()}
|
||||||
|
|
|
@ -57,7 +57,7 @@ export interface IStatus {
|
||||||
featured?: boolean;
|
featured?: boolean;
|
||||||
hideActionBar?: boolean;
|
hideActionBar?: boolean;
|
||||||
hoverable?: boolean;
|
hoverable?: boolean;
|
||||||
variant?: 'default' | 'rounded' | 'slim';
|
variant?: 'default' | 'slim';
|
||||||
showGroup?: boolean;
|
showGroup?: boolean;
|
||||||
accountAction?: React.ReactElement;
|
accountAction?: React.ReactElement;
|
||||||
}
|
}
|
||||||
|
@ -81,7 +81,7 @@ const Status: React.FC<IStatus> = (props) => {
|
||||||
featured,
|
featured,
|
||||||
unread,
|
unread,
|
||||||
hideActionBar,
|
hideActionBar,
|
||||||
variant = 'rounded',
|
variant = 'slim',
|
||||||
showGroup = true,
|
showGroup = true,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
|
@ -419,7 +419,8 @@ const Status: React.FC<IStatus> = (props) => {
|
||||||
<Card
|
<Card
|
||||||
variant={variant}
|
variant={variant}
|
||||||
className={clsx('status--wrapper space-y-4', {
|
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}
|
data-id={status.id}
|
||||||
>
|
>
|
||||||
|
|
|
@ -5,8 +5,6 @@ import { useBookmarks } from 'soapbox/api/hooks/index.ts';
|
||||||
import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
|
import PullToRefresh from 'soapbox/components/pull-to-refresh.tsx';
|
||||||
import PureStatusList from 'soapbox/components/pure-status-list.tsx';
|
import PureStatusList from 'soapbox/components/pure-status-list.tsx';
|
||||||
import { Column } from 'soapbox/components/ui/column.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({
|
const messages = defineMessages({
|
||||||
heading: { id: 'column.bookmarks', defaultMessage: 'Bookmarks' },
|
heading: { id: 'column.bookmarks', defaultMessage: 'Bookmarks' },
|
||||||
|
@ -15,9 +13,6 @@ const messages = defineMessages({
|
||||||
const Bookmarks: React.FC = () => {
|
const Bookmarks: React.FC = () => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
|
|
||||||
const theme = useTheme();
|
|
||||||
const isMobile = useIsMobile();
|
|
||||||
|
|
||||||
const handleLoadMore = debounce(() => {
|
const handleLoadMore = debounce(() => {
|
||||||
fetchNextPage();
|
fetchNextPage();
|
||||||
}, 300, { edges: ['leading'] });
|
}, 300, { edges: ['leading'] });
|
||||||
|
@ -41,7 +36,6 @@ const Bookmarks: React.FC = () => {
|
||||||
isLoading={typeof isLoading === 'boolean' ? isLoading : true}
|
isLoading={typeof isLoading === 'boolean' ? isLoading : true}
|
||||||
onLoadMore={() => handleLoadMore()}
|
onLoadMore={() => handleLoadMore()}
|
||||||
emptyMessage={emptyMessage}
|
emptyMessage={emptyMessage}
|
||||||
divideType={(theme === 'black' || isMobile) ? 'border' : 'space'}
|
|
||||||
/>
|
/>
|
||||||
</PullToRefresh>
|
</PullToRefresh>
|
||||||
</Column>
|
</Column>
|
||||||
|
|
|
@ -10,13 +10,11 @@ import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
|
||||||
import { useInstance } from 'soapbox/hooks/useInstance.ts';
|
import { useInstance } from 'soapbox/hooks/useInstance.ts';
|
||||||
import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
|
import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
|
||||||
import { useSettings } from 'soapbox/hooks/useSettings.ts';
|
import { useSettings } from 'soapbox/hooks/useSettings.ts';
|
||||||
import { useTheme } from 'soapbox/hooks/useTheme.ts';
|
|
||||||
|
|
||||||
import Timeline from '../ui/components/timeline.tsx';
|
import Timeline from '../ui/components/timeline.tsx';
|
||||||
|
|
||||||
const CommunityTimeline = () => {
|
const CommunityTimeline = () => {
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
const theme = useTheme();
|
|
||||||
const { instance } = useInstance();
|
const { instance } = useInstance();
|
||||||
|
|
||||||
const settings = useSettings();
|
const settings = useSettings();
|
||||||
|
@ -50,7 +48,6 @@ const CommunityTimeline = () => {
|
||||||
prefix='home'
|
prefix='home'
|
||||||
onLoadMore={handleLoadMore}
|
onLoadMore={handleLoadMore}
|
||||||
emptyMessage={<FormattedMessage id='empty_column.community' defaultMessage='The local timeline is empty. Write something publicly to get the ball rolling!' />}
|
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>
|
</PullToRefresh>
|
||||||
</Column>
|
</Column>
|
||||||
|
|
|
@ -47,7 +47,6 @@ const DirectTimeline = () => {
|
||||||
timelineId='direct'
|
timelineId='direct'
|
||||||
onLoadMore={handleLoadMore}
|
onLoadMore={handleLoadMore}
|
||||||
emptyMessage={<FormattedMessage id='empty_column.direct' defaultMessage="You don't have any direct messages yet. When you send or receive one, it will show up here." />}
|
emptyMessage={<FormattedMessage id='empty_column.direct' defaultMessage="You don't have any direct messages yet. When you send or receive one, it will show up here." />}
|
||||||
divideType='border'
|
|
||||||
/>
|
/>
|
||||||
</Column>
|
</Column>
|
||||||
);
|
);
|
||||||
|
|
|
@ -185,7 +185,7 @@ const EventDiscussion: React.FC<IEventDiscussion> = (props) => {
|
||||||
ref={scroller}
|
ref={scroller}
|
||||||
hasMore={!!next}
|
hasMore={!!next}
|
||||||
onLoadMore={handleLoadMore}
|
onLoadMore={handleLoadMore}
|
||||||
placeholderComponent={() => <PlaceholderStatus variant='slim' />}
|
placeholderComponent={() => <PlaceholderStatus />}
|
||||||
initialTopMostItemIndex={0}
|
initialTopMostItemIndex={0}
|
||||||
emptyMessage={<FormattedMessage id='event.discussion.empty' defaultMessage='No one has commented this event yet. When someone does, they will appear here.' />}
|
emptyMessage={<FormattedMessage id='event.discussion.empty' defaultMessage='No one has commented this event yet. When someone does, they will appear here.' />}
|
||||||
>
|
>
|
||||||
|
|
|
@ -47,7 +47,6 @@ const GroupTagTimeline: React.FC<IGroupTimeline> = (props) => {
|
||||||
scrollKey='group_timeline'
|
scrollKey='group_timeline'
|
||||||
timelineId={`group:tags:${groupId}:${tag.name}`}
|
timelineId={`group:tags:${groupId}:${tag.name}`}
|
||||||
onLoadMore={handleLoadMore}
|
onLoadMore={handleLoadMore}
|
||||||
divideType='border'
|
|
||||||
showGroup={false}
|
showGroup={false}
|
||||||
emptyMessageCard={false}
|
emptyMessageCard={false}
|
||||||
emptyMessage={
|
emptyMessage={
|
||||||
|
|
|
@ -130,7 +130,6 @@ const GroupTimeline: React.FC<IGroupTimeline> = (props) => {
|
||||||
</Stack>
|
</Stack>
|
||||||
}
|
}
|
||||||
emptyMessageCard={false}
|
emptyMessageCard={false}
|
||||||
divideType='border'
|
|
||||||
showGroup={false}
|
showGroup={false}
|
||||||
featuredStatusIds={featuredStatusIds}
|
featuredStatusIds={featuredStatusIds}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -13,7 +13,6 @@ import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
|
||||||
import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
|
import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
|
||||||
import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
|
import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
|
||||||
import { useLoggedIn } from 'soapbox/hooks/useLoggedIn.ts';
|
import { useLoggedIn } from 'soapbox/hooks/useLoggedIn.ts';
|
||||||
import { useTheme } from 'soapbox/hooks/useTheme.ts';
|
|
||||||
|
|
||||||
interface IHashtagTimeline {
|
interface IHashtagTimeline {
|
||||||
params?: {
|
params?: {
|
||||||
|
@ -29,7 +28,6 @@ export const HashtagTimeline: React.FC<IHashtagTimeline> = ({ params }) => {
|
||||||
const tag = useAppSelector((state) => state.tags.get(id));
|
const tag = useAppSelector((state) => state.tags.get(id));
|
||||||
const next = useAppSelector(state => state.timelines.get(`hashtag:${id}`)?.next);
|
const next = useAppSelector(state => state.timelines.get(`hashtag:${id}`)?.next);
|
||||||
const { isLoggedIn } = useLoggedIn();
|
const { isLoggedIn } = useLoggedIn();
|
||||||
const theme = useTheme();
|
|
||||||
const isMobile = useIsMobile();
|
const isMobile = useIsMobile();
|
||||||
|
|
||||||
const handleLoadMore = (maxId: string) => {
|
const handleLoadMore = (maxId: string) => {
|
||||||
|
@ -76,7 +74,6 @@ export const HashtagTimeline: React.FC<IHashtagTimeline> = ({ params }) => {
|
||||||
timelineId={`hashtag:${id}`}
|
timelineId={`hashtag:${id}`}
|
||||||
onLoadMore={handleLoadMore}
|
onLoadMore={handleLoadMore}
|
||||||
emptyMessage={<FormattedMessage id='empty_column.hashtag' defaultMessage='There is nothing in this hashtag yet.' />}
|
emptyMessage={<FormattedMessage id='empty_column.hashtag' defaultMessage='There is nothing in this hashtag yet.' />}
|
||||||
divideType={(theme === 'black' || isMobile) ? 'border' : 'space'}
|
|
||||||
/>
|
/>
|
||||||
</Column>
|
</Column>
|
||||||
);
|
);
|
||||||
|
|
|
@ -13,7 +13,6 @@ import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
|
||||||
import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
|
import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
|
||||||
import { useInstance } from 'soapbox/hooks/useInstance.ts';
|
import { useInstance } from 'soapbox/hooks/useInstance.ts';
|
||||||
import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
|
import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
|
||||||
import { useTheme } from 'soapbox/hooks/useTheme.ts';
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
title: { id: 'column.home', defaultMessage: 'Home' },
|
title: { id: 'column.home', defaultMessage: 'Home' },
|
||||||
|
@ -24,7 +23,6 @@ const HomeTimeline: React.FC = () => {
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
const features = useFeatures();
|
const features = useFeatures();
|
||||||
const { instance } = useInstance();
|
const { instance } = useInstance();
|
||||||
const theme = useTheme();
|
|
||||||
|
|
||||||
const polling = useRef<NodeJS.Timeout | null>(null);
|
const polling = useRef<NodeJS.Timeout | null>(null);
|
||||||
const isMobile = useIsMobile();
|
const isMobile = useIsMobile();
|
||||||
|
@ -75,7 +73,6 @@ const HomeTimeline: React.FC = () => {
|
||||||
scrollKey='home_timeline'
|
scrollKey='home_timeline'
|
||||||
onLoadMore={handleLoadMore}
|
onLoadMore={handleLoadMore}
|
||||||
timelineId='home'
|
timelineId='home'
|
||||||
divideType={(theme === 'black' || isMobile) ? 'border' : 'space'}
|
|
||||||
emptyMessage={
|
emptyMessage={
|
||||||
<Stack space={1}>
|
<Stack space={1}>
|
||||||
<Text size='xl' weight='medium' align='center'>
|
<Text size='xl' weight='medium' align='center'>
|
||||||
|
|
|
@ -9,7 +9,6 @@ import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
|
||||||
import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
|
import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
|
||||||
import { useInstance } from 'soapbox/hooks/useInstance.ts';
|
import { useInstance } from 'soapbox/hooks/useInstance.ts';
|
||||||
import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
|
import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
|
||||||
import { useTheme } from 'soapbox/hooks/useTheme.ts';
|
|
||||||
|
|
||||||
import AboutPage from '../about/index.tsx';
|
import AboutPage from '../about/index.tsx';
|
||||||
import Timeline from '../ui/components/timeline.tsx';
|
import Timeline from '../ui/components/timeline.tsx';
|
||||||
|
@ -19,7 +18,6 @@ import { SiteBanner } from './components/site-banner.tsx';
|
||||||
const LandingTimeline = () => {
|
const LandingTimeline = () => {
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
const { instance } = useInstance();
|
const { instance } = useInstance();
|
||||||
const theme = useTheme();
|
|
||||||
const isMobile = useIsMobile();
|
const isMobile = useIsMobile();
|
||||||
|
|
||||||
const timelineEnabled = !instance.pleroma.metadata.restrict_unauthenticated.timelines.local;
|
const timelineEnabled = !instance.pleroma.metadata.restrict_unauthenticated.timelines.local;
|
||||||
|
@ -62,7 +60,6 @@ const LandingTimeline = () => {
|
||||||
prefix='home'
|
prefix='home'
|
||||||
onLoadMore={handleLoadMore}
|
onLoadMore={handleLoadMore}
|
||||||
emptyMessage={<FormattedMessage id='empty_column.community' defaultMessage='The local timeline is empty. Write something publicly to get the ball rolling!' />}
|
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>
|
</PullToRefresh>
|
||||||
) : (
|
) : (
|
||||||
|
|
|
@ -13,14 +13,12 @@ import Spinner from 'soapbox/components/ui/spinner.tsx';
|
||||||
import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
|
import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
|
||||||
import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
|
import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
|
||||||
import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
|
import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
|
||||||
import { useTheme } from 'soapbox/hooks/useTheme.ts';
|
|
||||||
|
|
||||||
import Timeline from '../ui/components/timeline.tsx';
|
import Timeline from '../ui/components/timeline.tsx';
|
||||||
|
|
||||||
const ListTimeline: React.FC = () => {
|
const ListTimeline: React.FC = () => {
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
const { id } = useParams<{ id: string }>();
|
const { id } = useParams<{ id: string }>();
|
||||||
const theme = useTheme();
|
|
||||||
const isMobile = useIsMobile();
|
const isMobile = useIsMobile();
|
||||||
|
|
||||||
const list = useAppSelector((state) => state.lists.get(id));
|
const list = useAppSelector((state) => state.lists.get(id));
|
||||||
|
@ -73,7 +71,6 @@ const ListTimeline: React.FC = () => {
|
||||||
timelineId={`list:${id}`}
|
timelineId={`list:${id}`}
|
||||||
onLoadMore={handleLoadMore}
|
onLoadMore={handleLoadMore}
|
||||||
emptyMessage={emptyMessage}
|
emptyMessage={emptyMessage}
|
||||||
divideType={(theme === 'black' || isMobile) ? 'border' : 'space'}
|
|
||||||
/>
|
/>
|
||||||
</Column>
|
</Column>
|
||||||
);
|
);
|
||||||
|
|
|
@ -19,9 +19,7 @@ import Portal from 'soapbox/components/ui/portal.tsx';
|
||||||
import PlaceholderNotification from 'soapbox/features/placeholder/components/placeholder-notification.tsx';
|
import PlaceholderNotification from 'soapbox/features/placeholder/components/placeholder-notification.tsx';
|
||||||
import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
|
import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
|
||||||
import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
|
import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
|
||||||
import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
|
|
||||||
import { useSettings } from 'soapbox/hooks/useSettings.ts';
|
import { useSettings } from 'soapbox/hooks/useSettings.ts';
|
||||||
import { useTheme } from 'soapbox/hooks/useTheme.ts';
|
|
||||||
|
|
||||||
import FilterBar from './components/filter-bar.tsx';
|
import FilterBar from './components/filter-bar.tsx';
|
||||||
import Notification from './components/notification.tsx';
|
import Notification from './components/notification.tsx';
|
||||||
|
@ -63,9 +61,6 @@ const Notifications = () => {
|
||||||
const hasMore = useAppSelector(state => state.notifications.hasMore);
|
const hasMore = useAppSelector(state => state.notifications.hasMore);
|
||||||
const totalQueuedNotificationsCount = useAppSelector(state => state.notifications.totalQueuedNotificationsCount || 0);
|
const totalQueuedNotificationsCount = useAppSelector(state => state.notifications.totalQueuedNotificationsCount || 0);
|
||||||
|
|
||||||
const theme = useTheme();
|
|
||||||
const isMobile = useIsMobile();
|
|
||||||
|
|
||||||
const node = useRef<VirtuosoHandle>(null);
|
const node = useRef<VirtuosoHandle>(null);
|
||||||
const column = useRef<HTMLDivElement>(null);
|
const column = useRef<HTMLDivElement>(null);
|
||||||
const scrollableContentRef = useRef<ImmutableList<JSX.Element> | null>(null);
|
const scrollableContentRef = useRef<ImmutableList<JSX.Element> | null>(null);
|
||||||
|
@ -186,7 +181,7 @@ const Notifications = () => {
|
||||||
ref={column}
|
ref={column}
|
||||||
label={intl.formatMessage(messages.title)}
|
label={intl.formatMessage(messages.title)}
|
||||||
withHeader={false}
|
withHeader={false}
|
||||||
className={clsx({ '!p-0': isMobile || theme === 'black' })}
|
className='!p-0'
|
||||||
>
|
>
|
||||||
{filterBarContainer}
|
{filterBarContainer}
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
import clsx from 'clsx';
|
|
||||||
import { memo } from 'react';
|
import { memo } from 'react';
|
||||||
|
|
||||||
import HStack from 'soapbox/components/ui/hstack.tsx';
|
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 PlaceholderDisplayName from './placeholder-display-name.tsx';
|
||||||
import PlaceholderStatusContent from './placeholder-status-content.tsx';
|
import PlaceholderStatusContent from './placeholder-status-content.tsx';
|
||||||
|
|
||||||
interface IPlaceholderStatus {
|
|
||||||
variant?: 'rounded' | 'slim' | 'default';
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Fake status to display while data is loading. */
|
/** Fake status to display while data is loading. */
|
||||||
const PlaceholderStatus: React.FC<IPlaceholderStatus> = ({ variant }) => (
|
const PlaceholderStatus: React.FC = () => (
|
||||||
<div
|
<div className='status-placeholder bg-white py-4 black:bg-black dark:bg-primary-900'>
|
||||||
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',
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
<div className='w-full animate-pulse overflow-hidden'>
|
<div className='w-full animate-pulse overflow-hidden'>
|
||||||
<div>
|
<div>
|
||||||
<HStack space={3} alignItems='center'>
|
<HStack space={3} alignItems='center'>
|
||||||
|
|
|
@ -16,7 +16,6 @@ import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
|
||||||
import { useInstance } from 'soapbox/hooks/useInstance.ts';
|
import { useInstance } from 'soapbox/hooks/useInstance.ts';
|
||||||
import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
|
import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
|
||||||
import { useSettings } from 'soapbox/hooks/useSettings.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 PinnedHostsPicker from '../remote-timeline/components/pinned-hosts-picker.tsx';
|
||||||
import Timeline from '../ui/components/timeline.tsx';
|
import Timeline from '../ui/components/timeline.tsx';
|
||||||
|
@ -30,7 +29,6 @@ const PublicTimeline = () => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
const features = useFeatures();
|
const features = useFeatures();
|
||||||
const theme = useTheme();
|
|
||||||
|
|
||||||
const [language, setLanguage] = useState<string>(localStorage.getItem('soapbox:global:language') || '');
|
const [language, setLanguage] = useState<string>(localStorage.getItem('soapbox:global:language') || '');
|
||||||
|
|
||||||
|
@ -118,7 +116,6 @@ const PublicTimeline = () => {
|
||||||
prefix='home'
|
prefix='home'
|
||||||
onLoadMore={handleLoadMore}
|
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' />}
|
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>
|
</PullToRefresh>
|
||||||
</Column>
|
</Column>
|
||||||
|
|
|
@ -10,7 +10,6 @@ import { Column } from 'soapbox/components/ui/column.tsx';
|
||||||
import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
|
import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
|
||||||
import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
|
import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
|
||||||
import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
|
import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
|
||||||
import { useTheme } from 'soapbox/hooks/useTheme.ts';
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
heading: { id: 'column.quotes', defaultMessage: 'Post quotes' },
|
heading: { id: 'column.quotes', defaultMessage: 'Post quotes' },
|
||||||
|
@ -23,7 +22,6 @@ const Quotes: React.FC = () => {
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const { statusId } = useParams<{ statusId: string }>();
|
const { statusId } = useParams<{ statusId: string }>();
|
||||||
const theme = useTheme();
|
|
||||||
const isMobile = useIsMobile();
|
const isMobile = useIsMobile();
|
||||||
|
|
||||||
const statusIds = useAppSelector((state) => state.status_lists.getIn([`quotes:${statusId}`, 'items'], ImmutableOrderedSet<string>()));
|
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)}
|
onLoadMore={() => handleLoadMore(statusId, dispatch)}
|
||||||
onRefresh={handleRefresh}
|
onRefresh={handleRefresh}
|
||||||
emptyMessage={emptyMessage}
|
emptyMessage={emptyMessage}
|
||||||
divideType={(theme === 'black' || isMobile) ? 'border' : 'space'}
|
|
||||||
/>
|
/>
|
||||||
</Column>
|
</Column>
|
||||||
);
|
);
|
||||||
|
|
|
@ -13,7 +13,6 @@ import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
|
||||||
import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
|
import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
|
||||||
import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
|
import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
|
||||||
import { useSettings } from 'soapbox/hooks/useSettings.ts';
|
import { useSettings } from 'soapbox/hooks/useSettings.ts';
|
||||||
import { useTheme } from 'soapbox/hooks/useTheme.ts';
|
|
||||||
|
|
||||||
import Timeline from '../ui/components/timeline.tsx';
|
import Timeline from '../ui/components/timeline.tsx';
|
||||||
|
|
||||||
|
@ -29,7 +28,6 @@ interface IRemoteTimeline {
|
||||||
const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
|
const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
|
||||||
const history = useHistory();
|
const history = useHistory();
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
const theme = useTheme();
|
|
||||||
|
|
||||||
const instance = params?.instance as string;
|
const instance = params?.instance as string;
|
||||||
const settings = useSettings();
|
const settings = useSettings();
|
||||||
|
@ -84,7 +82,6 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
|
||||||
values={{ instance }}
|
values={{ instance }}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
divideType={(theme === 'black' || isMobile) ? 'border' : 'space'}
|
|
||||||
/>
|
/>
|
||||||
</Column>
|
</Column>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,11 +1,8 @@
|
||||||
import clsx from 'clsx';
|
|
||||||
import { defineMessages, useIntl } from 'react-intl';
|
import { defineMessages, useIntl } from 'react-intl';
|
||||||
|
|
||||||
import { Column } from 'soapbox/components/ui/column.tsx';
|
import { Column } from 'soapbox/components/ui/column.tsx';
|
||||||
import SearchResults from 'soapbox/features/compose/components/search-results.tsx';
|
import SearchResults from 'soapbox/features/compose/components/search-results.tsx';
|
||||||
import Search from 'soapbox/features/compose/components/search.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({
|
const messages = defineMessages({
|
||||||
heading: { id: 'column.search', defaultMessage: 'Discover' },
|
heading: { id: 'column.search', defaultMessage: 'Discover' },
|
||||||
|
@ -14,13 +11,10 @@ const messages = defineMessages({
|
||||||
const SearchPage = () => {
|
const SearchPage = () => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
|
|
||||||
const theme = useTheme();
|
|
||||||
const isMobile = useIsMobile();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Column
|
<Column
|
||||||
label={intl.formatMessage(messages.heading)}
|
label={intl.formatMessage(messages.heading)}
|
||||||
className={clsx({ '!px-0': isMobile || theme === 'black' })}
|
className='!px-0'
|
||||||
>
|
>
|
||||||
<div className='space-y-4'>
|
<div className='space-y-4'>
|
||||||
<div className='px-4 sm:py-0'>
|
<div className='px-4 sm:py-0'>
|
||||||
|
|
|
@ -44,7 +44,7 @@ const ThreadStatus: React.FC<IThreadStatus> = (props): JSX.Element => {
|
||||||
// @ts-ignore FIXME
|
// @ts-ignore FIXME
|
||||||
<StatusContainer {...props} showGroup={false} />
|
<StatusContainer {...props} showGroup={false} />
|
||||||
) : (
|
) : (
|
||||||
<PlaceholderStatus variant='default' />
|
<PlaceholderStatus />
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -445,7 +445,7 @@ const Thread = (props: IThread) => {
|
||||||
ref={scroller}
|
ref={scroller}
|
||||||
hasMore={!!next}
|
hasMore={!!next}
|
||||||
onLoadMore={handleLoadMore}
|
onLoadMore={handleLoadMore}
|
||||||
placeholderComponent={() => <PlaceholderStatus variant='slim' />}
|
placeholderComponent={() => <PlaceholderStatus />}
|
||||||
initialTopMostItemIndex={initialTopMostItemIndex}
|
initialTopMostItemIndex={initialTopMostItemIndex}
|
||||||
useWindowScroll={useWindowScroll}
|
useWindowScroll={useWindowScroll}
|
||||||
itemClassName={itemClassName}
|
itemClassName={itemClassName}
|
||||||
|
|
|
@ -13,7 +13,6 @@ import { Column } from 'soapbox/components/ui/column.tsx';
|
||||||
import Timeline from 'soapbox/features/ui/components/timeline.tsx';
|
import Timeline from 'soapbox/features/ui/components/timeline.tsx';
|
||||||
import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
|
import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
|
||||||
import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
|
import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
|
||||||
import { useTheme } from 'soapbox/hooks/useTheme.ts';
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
title: { id: 'column.test', defaultMessage: 'Test timeline' },
|
title: { id: 'column.test', defaultMessage: 'Test timeline' },
|
||||||
|
@ -31,7 +30,6 @@ const onlyMedia = false;
|
||||||
const TestTimeline: React.FC = () => {
|
const TestTimeline: React.FC = () => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
const theme = useTheme();
|
|
||||||
const isMobile = useIsMobile();
|
const isMobile = useIsMobile();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -45,7 +43,6 @@ const TestTimeline: React.FC = () => {
|
||||||
scrollKey={`${timelineId}_timeline`}
|
scrollKey={`${timelineId}_timeline`}
|
||||||
timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}
|
timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}
|
||||||
emptyMessage={<FormattedMessage id='empty_column.test' defaultMessage='The test timeline is empty.' />}
|
emptyMessage={<FormattedMessage id='empty_column.test' defaultMessage='The test timeline is empty.' />}
|
||||||
divideType={(theme === 'black' || isMobile) ? 'border' : 'space'}
|
|
||||||
/>
|
/>
|
||||||
</Column>
|
</Column>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue