diff --git a/src/components/pure-status-list.tsx b/src/components/pure-status-list.tsx index be3ed8914..885cf997a 100644 --- a/src/components/pure-status-list.tsx +++ b/src/components/pure-status-list.tsx @@ -36,8 +36,6 @@ interface IPureStatusList extends Omit = ({ statuses, lastStatusId, featuredStatuses, - divideType = 'border', onLoadMore, timelineId, isLoading, @@ -133,7 +130,6 @@ const PureStatusList: React.FC = ({ onMoveUp={handleMoveUp} onMoveDown={handleMoveDown} showGroup={showGroup} - variant={divideType === 'border' ? 'slim' : 'rounded'} /> ); }; @@ -161,7 +157,6 @@ const PureStatusList: React.FC = ({ 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 = ({ isLoading={isLoading} showLoading={isLoading && statuses.length === 0} onLoadMore={handleLoadOlder} - placeholderComponent={() => } + placeholderComponent={() => } 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()} diff --git a/src/components/pure-status.tsx b/src/components/pure-status.tsx index 31e9e5ded..80385c40f 100644 --- a/src/components/pure-status.tsx +++ b/src/components/pure-status.tsx @@ -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 = (props) => { featured, unread, hideActionBar, - variant = 'rounded', showGroup = true, } = props; @@ -420,9 +418,10 @@ const PureStatus: React.FC = (props) => { role='link' > diff --git a/src/components/status-list.tsx b/src/components/status-list.tsx index 1d7274f8d..bde2524fb 100644 --- a/src/components/status-list.tsx +++ b/src/components/status-list.tsx @@ -36,8 +36,6 @@ interface IStatusList extends Omit { 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 = ({ statusIds, lastStatusId, featuredStatusIds, - divideType = 'border', onLoadMore, timelineId, isLoading, @@ -131,7 +128,6 @@ const StatusList: React.FC = ({ onMoveDown={handleMoveDown} contextType={timelineId} showGroup={showGroup} - variant={divideType === 'border' ? 'slim' : 'rounded'} /> ); }; @@ -159,7 +155,6 @@ const StatusList: React.FC = ({ onMoveDown={handleMoveDown} contextType={timelineId} showGroup={showGroup} - variant={divideType === 'border' ? 'slim' : 'default'} /> )); }; @@ -234,15 +229,10 @@ const StatusList: React.FC = ({ isLoading={isLoading} showLoading={isLoading && statusIds.size === 0} onLoadMore={handleLoadOlder} - placeholderComponent={() => } + placeholderComponent={() => } 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()} diff --git a/src/components/status.tsx b/src/components/status.tsx index 317a7295e..b721f977c 100644 --- a/src/components/status.tsx +++ b/src/components/status.tsx @@ -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 = (props) => { featured, unread, hideActionBar, - variant = 'rounded', + variant = 'slim', showGroup = true, } = props; @@ -419,7 +419,8 @@ const Status: React.FC = (props) => { diff --git a/src/features/bookmarks/index.tsx b/src/features/bookmarks/index.tsx index 79ab0940d..2d4c9b9c2 100644 --- a/src/features/bookmarks/index.tsx +++ b/src/features/bookmarks/index.tsx @@ -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'} /> diff --git a/src/features/community-timeline/index.tsx b/src/features/community-timeline/index.tsx index 3840b3468..03e63770f 100644 --- a/src/features/community-timeline/index.tsx +++ b/src/features/community-timeline/index.tsx @@ -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={} - divideType={(theme === 'black' || isMobile) ? 'border' : 'space'} /> diff --git a/src/features/direct-timeline/index.tsx b/src/features/direct-timeline/index.tsx index 0fbe55d00..b7a31c4ed 100644 --- a/src/features/direct-timeline/index.tsx +++ b/src/features/direct-timeline/index.tsx @@ -47,7 +47,6 @@ const DirectTimeline = () => { timelineId='direct' onLoadMore={handleLoadMore} emptyMessage={} - divideType='border' /> ); diff --git a/src/features/event/event-discussion.tsx b/src/features/event/event-discussion.tsx index ede6a3aad..c8284eb4d 100644 --- a/src/features/event/event-discussion.tsx +++ b/src/features/event/event-discussion.tsx @@ -185,7 +185,7 @@ const EventDiscussion: React.FC = (props) => { ref={scroller} hasMore={!!next} onLoadMore={handleLoadMore} - placeholderComponent={() => } + placeholderComponent={() => } initialTopMostItemIndex={0} emptyMessage={} > diff --git a/src/features/group/group-tag-timeline.tsx b/src/features/group/group-tag-timeline.tsx index 20c5a9398..7de9c4ae4 100644 --- a/src/features/group/group-tag-timeline.tsx +++ b/src/features/group/group-tag-timeline.tsx @@ -47,7 +47,6 @@ const GroupTagTimeline: React.FC = (props) => { scrollKey='group_timeline' timelineId={`group:tags:${groupId}:${tag.name}`} onLoadMore={handleLoadMore} - divideType='border' showGroup={false} emptyMessageCard={false} emptyMessage={ diff --git a/src/features/group/group-timeline.tsx b/src/features/group/group-timeline.tsx index 47a5a6a51..5eecd58ff 100644 --- a/src/features/group/group-timeline.tsx +++ b/src/features/group/group-timeline.tsx @@ -130,7 +130,6 @@ const GroupTimeline: React.FC = (props) => { } emptyMessageCard={false} - divideType='border' showGroup={false} featuredStatusIds={featuredStatusIds} /> diff --git a/src/features/hashtag-timeline/index.tsx b/src/features/hashtag-timeline/index.tsx index 2416495b8..47a3b2d0b 100644 --- a/src/features/hashtag-timeline/index.tsx +++ b/src/features/hashtag-timeline/index.tsx @@ -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 = ({ 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 = ({ params }) => { timelineId={`hashtag:${id}`} onLoadMore={handleLoadMore} emptyMessage={} - divideType={(theme === 'black' || isMobile) ? 'border' : 'space'} /> ); diff --git a/src/features/home-timeline/index.tsx b/src/features/home-timeline/index.tsx index 426b46c8c..3f572bc77 100644 --- a/src/features/home-timeline/index.tsx +++ b/src/features/home-timeline/index.tsx @@ -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(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={ diff --git a/src/features/landing-timeline/index.tsx b/src/features/landing-timeline/index.tsx index 8bd19a80c..7660377f1 100644 --- a/src/features/landing-timeline/index.tsx +++ b/src/features/landing-timeline/index.tsx @@ -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={} - divideType={(theme === 'black' || isMobile) ? 'border' : 'space'} /> ) : ( diff --git a/src/features/list-timeline/index.tsx b/src/features/list-timeline/index.tsx index cbcecd06b..f0b5bb07e 100644 --- a/src/features/list-timeline/index.tsx +++ b/src/features/list-timeline/index.tsx @@ -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'} /> ); diff --git a/src/features/notifications/index.tsx b/src/features/notifications/index.tsx index d53e1cfbb..4ba6a2094 100644 --- a/src/features/notifications/index.tsx +++ b/src/features/notifications/index.tsx @@ -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(null); const column = useRef(null); const scrollableContentRef = useRef | 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} diff --git a/src/features/placeholder/components/placeholder-status.tsx b/src/features/placeholder/components/placeholder-status.tsx index ffb6c92b1..df217c660 100644 --- a/src/features/placeholder/components/placeholder-status.tsx +++ b/src/features/placeholder/components/placeholder-status.tsx @@ -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 = ({ variant }) => ( -
+const PlaceholderStatus: React.FC = () => ( +
diff --git a/src/features/public-timeline/index.tsx b/src/features/public-timeline/index.tsx index 31fb04e53..0926d8ea3 100644 --- a/src/features/public-timeline/index.tsx +++ b/src/features/public-timeline/index.tsx @@ -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(localStorage.getItem('soapbox:global:language') || ''); @@ -118,7 +116,6 @@ const PublicTimeline = () => { prefix='home' onLoadMore={handleLoadMore} emptyMessage={} - divideType={(theme === 'black' || isMobile) ? 'border' : 'space'} /> diff --git a/src/features/quotes/index.tsx b/src/features/quotes/index.tsx index ad4aec2d5..93d02442a 100644 --- a/src/features/quotes/index.tsx +++ b/src/features/quotes/index.tsx @@ -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())); @@ -51,7 +49,6 @@ const Quotes: React.FC = () => { onLoadMore={() => handleLoadMore(statusId, dispatch)} onRefresh={handleRefresh} emptyMessage={emptyMessage} - divideType={(theme === 'black' || isMobile) ? 'border' : 'space'} /> ); diff --git a/src/features/remote-timeline/index.tsx b/src/features/remote-timeline/index.tsx index 8b04b7f86..39786bb59 100644 --- a/src/features/remote-timeline/index.tsx +++ b/src/features/remote-timeline/index.tsx @@ -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 = ({ 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 = ({ params }) => { values={{ instance }} /> } - divideType={(theme === 'black' || isMobile) ? 'border' : 'space'} /> ); diff --git a/src/features/search/index.tsx b/src/features/search/index.tsx index 34ce2f2fe..f8321586e 100644 --- a/src/features/search/index.tsx +++ b/src/features/search/index.tsx @@ -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 (
diff --git a/src/features/status/components/thread-status.tsx b/src/features/status/components/thread-status.tsx index a5ff00e7f..88aaa269a 100644 --- a/src/features/status/components/thread-status.tsx +++ b/src/features/status/components/thread-status.tsx @@ -44,7 +44,7 @@ const ThreadStatus: React.FC = (props): JSX.Element => { // @ts-ignore FIXME ) : ( - + )}
); diff --git a/src/features/status/components/thread.tsx b/src/features/status/components/thread.tsx index 975984b88..e8f4b8180 100644 --- a/src/features/status/components/thread.tsx +++ b/src/features/status/components/thread.tsx @@ -445,7 +445,7 @@ const Thread = (props: IThread) => { ref={scroller} hasMore={!!next} onLoadMore={handleLoadMore} - placeholderComponent={() => } + placeholderComponent={() => } initialTopMostItemIndex={initialTopMostItemIndex} useWindowScroll={useWindowScroll} itemClassName={itemClassName} diff --git a/src/features/test-timeline/index.tsx b/src/features/test-timeline/index.tsx index afcdea1f9..f227d20d0 100644 --- a/src/features/test-timeline/index.tsx +++ b/src/features/test-timeline/index.tsx @@ -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={} - divideType={(theme === 'black' || isMobile) ? 'border' : 'space'} /> );