From a4b041723a3dd00ae766d723b3ad24f2ebf315cc Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 24 Jan 2025 15:51:42 -0600 Subject: [PATCH 01/10] Remove `=== 'black'` conditionals --- src/components/pure-status-list.tsx | 14 ++------------ src/components/pure-status.tsx | 7 +++---- src/components/status-list.tsx | 14 ++------------ src/components/status.tsx | 7 ++++--- src/features/bookmarks/index.tsx | 6 ------ src/features/community-timeline/index.tsx | 3 --- src/features/direct-timeline/index.tsx | 1 - src/features/event/event-discussion.tsx | 2 +- src/features/group/group-tag-timeline.tsx | 1 - src/features/group/group-timeline.tsx | 1 - src/features/hashtag-timeline/index.tsx | 3 --- src/features/home-timeline/index.tsx | 3 --- src/features/landing-timeline/index.tsx | 3 --- src/features/list-timeline/index.tsx | 3 --- src/features/notifications/index.tsx | 7 +------ .../placeholder/components/placeholder-status.tsx | 15 ++------------- src/features/public-timeline/index.tsx | 3 --- src/features/quotes/index.tsx | 3 --- src/features/remote-timeline/index.tsx | 3 --- src/features/search/index.tsx | 8 +------- src/features/status/components/thread-status.tsx | 2 +- src/features/status/components/thread.tsx | 2 +- src/features/test-timeline/index.tsx | 3 --- 23 files changed, 18 insertions(+), 96 deletions(-) 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'} /> ); From 191d7f1967cb495bca3f9082a02aeb626b1a0880 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 24 Jan 2025 18:57:31 -0600 Subject: [PATCH 02/10] Fix a bunch of stuff to match the new theme --- .../announcements/announcements-panel.tsx | 2 +- src/components/big-card.tsx | 2 +- src/components/missing-indicator.tsx | 2 +- src/components/profile-hover-card.tsx | 88 +++++++++++-- src/components/pure-status.tsx | 1 - src/components/scrollable-list.tsx | 2 +- src/components/sidebar-menu.tsx | 2 +- src/components/status-hover-card.tsx | 24 +--- src/components/status.tsx | 6 +- src/components/ui/card.tsx | 26 ++-- src/components/ui/column.tsx | 45 +++---- src/components/ui/divider.tsx | 2 +- src/components/ui/layout.tsx | 8 +- src/components/ui/menu.tsx | 2 +- src/features/about/index.tsx | 2 +- src/features/account/components/header.tsx | 8 +- src/features/auth-token-list/index.tsx | 2 +- src/features/backups/index.tsx | 2 +- src/features/bookmarks/index.tsx | 2 +- src/features/community-timeline/index.tsx | 4 +- .../compose/components/search-results.tsx | 10 +- src/features/delete-account/index.tsx | 2 +- src/features/direct-timeline/index.tsx | 2 +- src/features/embedded-status/index.tsx | 2 +- .../events/components/event-carousel.tsx | 2 +- .../feed-suggestions/feed-suggestions.tsx | 2 +- .../group/components/group-header.tsx | 6 +- src/features/hashtag-timeline/index.tsx | 4 +- src/features/home-timeline/index.tsx | 5 +- src/features/landing-timeline/index.tsx | 2 +- src/features/list-timeline/index.tsx | 4 +- .../components/placeholder-status.tsx | 9 +- src/features/public-timeline/index.tsx | 5 +- src/features/remote-timeline/index.tsx | 4 +- src/features/search/index.tsx | 12 +- src/features/settings/index.tsx | 4 +- .../status/components/thread-login-cta.tsx | 2 +- .../status/components/thread-status.tsx | 2 +- src/features/test-timeline/index.tsx | 4 +- src/features/ui/components/column-loading.tsx | 2 +- src/features/ui/components/navbar.tsx | 7 +- src/features/ui/components/pending-status.tsx | 1 - .../ui/components/profile-info-panel.tsx | 4 +- src/features/ui/components/user-panel.tsx | 116 ------------------ src/features/ui/util/async-components.ts | 1 - src/pages/home-page.tsx | 5 +- src/pages/profile-page.tsx | 18 +-- 47 files changed, 182 insertions(+), 287 deletions(-) delete mode 100644 src/features/ui/components/user-panel.tsx diff --git a/src/components/announcements/announcements-panel.tsx b/src/components/announcements/announcements-panel.tsx index 84540954c..3d5254856 100644 --- a/src/components/announcements/announcements-panel.tsx +++ b/src/components/announcements/announcements-panel.tsx @@ -22,7 +22,7 @@ const AnnouncementsPanel = () => { return ( }> - + {announcements!.map((announcement) => ( = ({ title, subtitle, children, onClose }) => { return ( - +
diff --git a/src/components/missing-indicator.tsx b/src/components/missing-indicator.tsx index 42b0b273b..b98413ede 100644 --- a/src/components/missing-indicator.tsx +++ b/src/components/missing-indicator.tsx @@ -9,7 +9,7 @@ interface MissingIndicatorProps { } const MissingIndicator = ({ nested = false }: MissingIndicatorProps): JSX.Element => ( - + diff --git a/src/components/profile-hover-card.tsx b/src/components/profile-hover-card.tsx index d0a43c3c5..d5f6c1e58 100644 --- a/src/components/profile-hover-card.tsx +++ b/src/components/profile-hover-card.tsx @@ -3,8 +3,7 @@ import calendarIcon from '@tabler/icons/outline/calendar.svg'; import clsx from 'clsx'; import { useEffect, useState } from 'react'; import { useIntl, FormattedMessage } from 'react-intl'; -import { useHistory } from 'react-router-dom'; - +import { Link, useHistory } from 'react-router-dom'; import { fetchRelationships } from 'soapbox/actions/accounts.ts'; import { @@ -14,15 +13,20 @@ import { import { useAccount, usePatronUser } from 'soapbox/api/hooks/index.ts'; import Badge from 'soapbox/components/badge.tsx'; import Markup from 'soapbox/components/markup.tsx'; +import StillImage from 'soapbox/components/still-image.tsx'; +import Avatar from 'soapbox/components/ui/avatar.tsx'; import { Card, CardBody } from 'soapbox/components/ui/card.tsx'; import HStack from 'soapbox/components/ui/hstack.tsx'; import Icon from 'soapbox/components/ui/icon.tsx'; import Stack from 'soapbox/components/ui/stack.tsx'; import Text from 'soapbox/components/ui/text.tsx'; +import VerificationBadge from 'soapbox/components/verification-badge.tsx'; import ActionButton from 'soapbox/features/ui/components/action-button.tsx'; -import { UserPanel } from 'soapbox/features/ui/util/async-components.ts'; import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts'; import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts'; +import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts'; +import { emojifyText } from 'soapbox/utils/emojify.tsx'; +import { shortNumberFormat } from 'soapbox/utils/numbers.tsx'; import { showProfileHoverCard } from './hover-ref-wrapper.tsx'; import { dateFormatOptions } from './relative-timestamp.tsx'; @@ -77,6 +81,7 @@ export const ProfileHoverCard: React.FC = ({ visible = true } const accountId: string | undefined = useAppSelector(state => state.profile_hover_card.accountId || undefined); const { account } = useAccount(accountId, { withRelationship: true }); const { patronUser } = usePatronUser(account?.url); + const { displayFqn } = useSoapboxConfig(); const targetRef = useAppSelector(state => state.profile_hover_card.ref?.current); const badges = getBadges(account, patronUser); @@ -118,14 +123,75 @@ export const ProfileHoverCard: React.FC = ({ visible = true } onMouseEnter={handleMouseEnter(dispatch)} onMouseLeave={handleMouseLeave(dispatch)} > - - - - } - badges={badges} - /> + + +
+ +
+ + + + + + + +
+ +
+ + + + + + + {emojifyText(account.display_name, account.emojis)} + + + {account.verified && } + + {badges && badges.length > 0 && ( + + {badges} + + )} + + + + + {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} + + @{displayFqn ? account.fqn : account.acct} + + + + + + {account.followers_count >= 0 && ( + + + + {shortNumberFormat(account.followers_count)} + + + + + + + )} + + {account.following_count >= 0 && ( + + + + {shortNumberFormat(account.following_count)} + + + + + + + )} + {account.local ? ( diff --git a/src/components/pure-status.tsx b/src/components/pure-status.tsx index 80385c40f..6cc39cd5f 100644 --- a/src/components/pure-status.tsx +++ b/src/components/pure-status.tsx @@ -418,7 +418,6 @@ const PureStatus: React.FC = (props) => { role='link' > (({ ) : ( <> {emptyMessageCard ? ( - + {emptyMessage} ) : emptyMessage} diff --git a/src/components/sidebar-menu.tsx b/src/components/sidebar-menu.tsx index 22cdacb94..6028241d5 100644 --- a/src/components/sidebar-menu.tsx +++ b/src/components/sidebar-menu.tsx @@ -381,7 +381,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => { {switcher && ( -
+
{otherAccounts.map(account => renderAccount(account))} diff --git a/src/components/status-hover-card.tsx b/src/components/status-hover-card.tsx index 5c8990610..8a0737161 100644 --- a/src/components/status-hover-card.tsx +++ b/src/components/status-hover-card.tsx @@ -8,7 +8,6 @@ import { updateStatusHoverCard, } from 'soapbox/actions/status-hover-card.ts'; import { fetchStatus } from 'soapbox/actions/statuses.ts'; -import { Card, CardBody } from 'soapbox/components/ui/card.tsx'; import StatusContainer from 'soapbox/containers/status-container.tsx'; import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts'; import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts'; @@ -67,20 +66,7 @@ export const StatusHoverCard: React.FC = ({ visible = true }) }; }, []); - if (!statusId) return null; - - const renderStatus = (statusId: string) => { - return ( - // @ts-ignore - - ); - }; + if (!status) return null; return (
= ({ visible = true }) onMouseEnter={handleMouseEnter()} onMouseLeave={handleMouseLeave()} > - - - {renderStatus(statusId)} - - +
+ +
); }; diff --git a/src/components/status.tsx b/src/components/status.tsx index b721f977c..4c129878f 100644 --- a/src/components/status.tsx +++ b/src/components/status.tsx @@ -57,9 +57,9 @@ export interface IStatus { featured?: boolean; hideActionBar?: boolean; hoverable?: boolean; - variant?: 'default' | 'slim'; showGroup?: boolean; accountAction?: React.ReactElement; + slim?: boolean; } /** @@ -81,8 +81,8 @@ const Status: React.FC = (props) => { featured, unread, hideActionBar, - variant = 'slim', showGroup = true, + slim, } = props; const intl = useIntl(); @@ -417,12 +417,12 @@ const Status: React.FC = (props) => { role='link' > {renderStatusInfo()} diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx index 5c7b32921..d109f84f8 100644 --- a/src/components/ui/card.tsx +++ b/src/components/ui/card.tsx @@ -9,23 +9,16 @@ import SvgIcon from 'soapbox/components/ui/svg-icon.tsx'; import HStack from './hstack.tsx'; import Text from './text.tsx'; -const sizes = { - md: 'p-4 sm:rounded-xl', - lg: 'p-4 sm:p-6 sm:rounded-xl', - xl: 'p-4 sm:p-10 sm:rounded-3xl', -}; - const messages = defineMessages({ back: { id: 'card.back.label', defaultMessage: 'Back' }, }); -export type CardSizes = keyof typeof sizes - interface ICard { - /** The type of card. */ - variant?: 'default' | 'rounded' | 'slim'; + rounded?: boolean; + transparent?: boolean; + slim?: boolean; /** Card size preset. */ - size?: CardSizes; + size?: 'md' | 'lg' | 'xl'; /** Extra classnames for the
element. */ className?: string; /** Elements inside the card. */ @@ -34,15 +27,16 @@ interface ICard { } /** An opaque backdrop to hold a collection of related elements. */ -const Card = forwardRef(({ children, variant = 'default', size = 'md', className, ...filteredProps }, ref): JSX.Element => ( +const Card = forwardRef(({ children, rounded, transparent, slim, size = 'md', className, ...filteredProps }, ref): JSX.Element => (
{children} diff --git a/src/components/ui/column.tsx b/src/components/ui/column.tsx index 07a8785be..ec50559c4 100644 --- a/src/components/ui/column.tsx +++ b/src/components/ui/column.tsx @@ -1,12 +1,12 @@ import clsx from 'clsx'; -import { throttle } from 'es-toolkit'; -import { forwardRef, useCallback, useEffect, useState } from 'react'; +import { forwardRef } from 'react'; import { useHistory } from 'react-router-dom'; import Helmet from 'soapbox/components/helmet.tsx'; +import Stack from 'soapbox/components/ui/stack.tsx'; import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts'; -import { Card, CardBody, CardHeader, CardTitle, type CardSizes } from './card.tsx'; +import { Card, CardBody, CardHeader, CardTitle } from './card.tsx'; type IColumnHeader = Pick; @@ -47,6 +47,8 @@ export interface IColumn { label?: string; /** Whether this column should have a transparent background. */ transparent?: boolean; + /** Whether to display the column without padding. */ + slim?: boolean; /** Whether this column should have a title and back button. */ withHeader?: boolean; /** Extra class name for top
element. */ @@ -60,26 +62,13 @@ export interface IColumn { /** Action for the ColumnHeader, displayed at the end. */ action?: React.ReactNode; /** Column size, inherited from Card. */ - size?: CardSizes; + size?: 'md' | 'lg' | 'xl'; } /** A backdrop for the main section of the UI. */ const Column = forwardRef((props, ref): JSX.Element => { - const { backHref, children, label, transparent = false, withHeader = true, className, bodyClassName, action, size } = props; + const { backHref, children, label, transparent = false, slim, withHeader = true, className, bodyClassName, action, size } = props; const soapboxConfig = useSoapboxConfig(); - const [isScrolled, setIsScrolled] = useState(false); - - const handleScroll = useCallback(throttle(() => { - setIsScrolled(window.pageYOffset > 32); - }, 50), []); - - useEffect(() => { - window.addEventListener('scroll', handleScroll); - - return () => { - window.removeEventListener('scroll', handleScroll); - }; - }, []); return (
@@ -95,25 +84,25 @@ const Column = forwardRef((props, ref): JSX.Element => )} - + {withHeader && ( )} - - {children} - - + + + + {children} + + +
); }); diff --git a/src/components/ui/divider.tsx b/src/components/ui/divider.tsx index 39a4557ea..42f62d395 100644 --- a/src/components/ui/divider.tsx +++ b/src/components/ui/divider.tsx @@ -11,7 +11,7 @@ interface IDivider { const Divider = ({ text, textSize = 'md' }: IDivider) => (