From af21019e732835449b243e606263c71bf49e8dae Mon Sep 17 00:00:00 2001 From: danidfra Date: Wed, 26 Feb 2025 14:06:03 -0300 Subject: [PATCH] Merge HomeTimeline and CommunityTimeline into MyNostr --- src/components/sidebar-navigation.tsx | 68 +++++++++++-------- src/components/thumb-navigation.tsx | 10 +-- .../community-timeline.tsx} | 0 .../home-timeline.tsx} | 5 +- src/features/my-nostr-timeline/index.tsx | 43 ++++++++++++ src/features/ui/components/navbar.tsx | 2 +- src/features/ui/index.tsx | 6 +- src/features/ui/util/async-components.ts | 3 +- src/locales/en.json | 9 +-- src/pages/home-page.tsx | 20 +----- 10 files changed, 101 insertions(+), 65 deletions(-) rename src/features/{community-timeline/index.tsx => my-nostr-timeline/community-timeline.tsx} (100%) rename src/features/{home-timeline/index.tsx => my-nostr-timeline/home-timeline.tsx} (97%) create mode 100644 src/features/my-nostr-timeline/index.tsx diff --git a/src/components/sidebar-navigation.tsx b/src/components/sidebar-navigation.tsx index 9f8641b56..c910840db 100644 --- a/src/components/sidebar-navigation.tsx +++ b/src/components/sidebar-navigation.tsx @@ -1,9 +1,9 @@ +import affiliateFilledIcon from '@tabler/icons/filled/affiliate.svg'; import bellFilledIcon from '@tabler/icons/filled/bell.svg'; import circlesFilledIcon from '@tabler/icons/filled/circles.svg'; -import homeFilledIcon from '@tabler/icons/filled/home.svg'; import settingsFilledIcon from '@tabler/icons/filled/settings.svg'; import userFilledIcon from '@tabler/icons/filled/user.svg'; -import atIcon from '@tabler/icons/outline/at.svg'; +import affiliateIcon from '@tabler/icons/outline/affiliate.svg'; import bellIcon from '@tabler/icons/outline/bell.svg'; import bookmarkIcon from '@tabler/icons/outline/bookmark.svg'; import calendarEventIcon from '@tabler/icons/outline/calendar-event.svg'; @@ -11,7 +11,6 @@ import circlesIcon from '@tabler/icons/outline/circles.svg'; import codeIcon from '@tabler/icons/outline/code.svg'; import dashboardIcon from '@tabler/icons/outline/dashboard.svg'; import dotsCircleHorizontalIcon from '@tabler/icons/outline/dots-circle-horizontal.svg'; -import homeIcon from '@tabler/icons/outline/home.svg'; import listIcon from '@tabler/icons/outline/list.svg'; import mailIcon from '@tabler/icons/outline/mail.svg'; import messagesIcon from '@tabler/icons/outline/messages.svg'; @@ -19,6 +18,7 @@ import searchIcon from '@tabler/icons/outline/search.svg'; import settingsIcon from '@tabler/icons/outline/settings.svg'; import userPlusIcon from '@tabler/icons/outline/user-plus.svg'; import userIcon from '@tabler/icons/outline/user.svg'; +import usersIcon from '@tabler/icons/outline/users.svg'; import worldIcon from '@tabler/icons/outline/world.svg'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import { Link } from 'react-router-dom'; @@ -148,7 +148,7 @@ const SidebarNavigation = () => { - + @@ -156,11 +156,21 @@ const SidebarNavigation = () => { } + icon={affiliateIcon} + activeIcon={affiliateFilledIcon} + text={} /> + {account && ( + } + /> + )} + { {account && ( <> - } - /> {renderMessagesLink()} @@ -187,6 +190,21 @@ const SidebarNavigation = () => { text={} /> )} + )} + + {/* TODO: Add community page when ready */} + {false && (features.publicTimeline) && ( + (account || !restrictUnauth.timelines.local) && ( + } + /> + ) + )} + + {account && ( + <> { )} {(features.publicTimeline) && ( - <> - {(account || !restrictUnauth.timelines.local) && ( - } - /> - )} + features.federating && (account || !restrictUnauth.timelines.federated)) && ( + } + /> - {(features.federating && (account || !restrictUnauth.timelines.federated)) && ( - } - /> - )} - )} {menu.length > 0 && ( diff --git a/src/components/thumb-navigation.tsx b/src/components/thumb-navigation.tsx index e33c235d7..7384b58bf 100644 --- a/src/components/thumb-navigation.tsx +++ b/src/components/thumb-navigation.tsx @@ -1,11 +1,11 @@ +import affiliateFilledIcon from '@tabler/icons/filled/affiliate.svg'; import bellFilledIcon from '@tabler/icons/filled/bell.svg'; import circlesFilledIcon from '@tabler/icons/filled/circles.svg'; -import homeFilledIcon from '@tabler/icons/filled/home.svg'; import mailFilledIcon from '@tabler/icons/filled/mail.svg'; +import affiliateIcon from '@tabler/icons/outline/affiliate.svg'; import bellIcon from '@tabler/icons/outline/bell.svg'; import circlesIcon from '@tabler/icons/outline/circles.svg'; import dashboardIcon from '@tabler/icons/outline/dashboard.svg'; -import homeIcon from '@tabler/icons/outline/home.svg'; import mailIcon from '@tabler/icons/outline/mail.svg'; import messagesIcon from '@tabler/icons/outline/messages.svg'; import searchIcon from '@tabler/icons/outline/search.svg'; @@ -66,9 +66,9 @@ const ThumbNavigation: React.FC = (): JSX.Element => { }} > } + src={affiliateIcon} + activeSrc={affiliateFilledIcon} + text={} to='/' exact /> diff --git a/src/features/community-timeline/index.tsx b/src/features/my-nostr-timeline/community-timeline.tsx similarity index 100% rename from src/features/community-timeline/index.tsx rename to src/features/my-nostr-timeline/community-timeline.tsx diff --git a/src/features/home-timeline/index.tsx b/src/features/my-nostr-timeline/home-timeline.tsx similarity index 97% rename from src/features/home-timeline/index.tsx rename to src/features/my-nostr-timeline/home-timeline.tsx index 69f893191..39e03edeb 100644 --- a/src/features/home-timeline/index.tsx +++ b/src/features/my-nostr-timeline/home-timeline.tsx @@ -14,7 +14,7 @@ import { useFeatures } from 'soapbox/hooks/useFeatures.ts'; import { useInstance } from 'soapbox/hooks/useInstance.ts'; const messages = defineMessages({ - title: { id: 'column.home', defaultMessage: 'Home' }, + title: { id: 'column.my_nostr', defaultMessage: 'My Nostr' }, }); const HomeTimeline: React.FC = () => { @@ -110,4 +110,5 @@ const HomeTimeline: React.FC = () => { ); }; -export default HomeTimeline; + +export default HomeTimeline; \ No newline at end of file diff --git a/src/features/my-nostr-timeline/index.tsx b/src/features/my-nostr-timeline/index.tsx new file mode 100644 index 000000000..5e5e9894d --- /dev/null +++ b/src/features/my-nostr-timeline/index.tsx @@ -0,0 +1,43 @@ +import { useState, lazy, Suspense } from 'react'; +import { FormattedMessage } from 'react-intl'; + +import Tabs from 'soapbox/components/ui/tabs.tsx'; +import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts'; +import { useInstance } from 'soapbox/hooks/useInstance.ts'; + +const HomeTimeline = lazy(() => import('soapbox/features/my-nostr-timeline/home-timeline.tsx')); +const CommunityTimeline = lazy(() => import('soapbox/features/my-nostr-timeline/community-timeline.tsx')); + +const MyNostrTimeline = () => { + const { instance } = useInstance(); + const [activeTab, setActiveTab] = useState('forYou'); + const notifications = useAppSelector((state) => state.notificationsTab); + + return ( + <> + , + action: () => setActiveTab('forYou'), + notification: notifications.home, + }, + { + name: 'local', + text:
{instance.title}
, + action: () => setActiveTab('local'), + notification: notifications.instance, + }, + ]} + activeItem={activeTab} + /> + + }> + {activeTab === 'forYou' ? : } + + + ); +}; + +export default MyNostrTimeline; \ No newline at end of file diff --git a/src/features/ui/components/navbar.tsx b/src/features/ui/components/navbar.tsx index 63891cb75..47d60c7b8 100644 --- a/src/features/ui/components/navbar.tsx +++ b/src/features/ui/components/navbar.tsx @@ -114,7 +114,7 @@ const Navbar = () => { > - + {account && ( diff --git a/src/features/ui/index.tsx b/src/features/ui/index.tsx index d6422624e..9c61e2079 100644 --- a/src/features/ui/index.tsx +++ b/src/features/ui/index.tsx @@ -47,12 +47,11 @@ import FloatingActionButton from './components/floating-action-button.tsx'; import Navbar from './components/navbar.tsx'; import { Status, - CommunityTimeline, PublicTimeline, RemoteTimeline, AccountTimeline, AccountGallery, - HomeTimeline, + MyNostrTimeline, Followers, Following, DirectTimeline, @@ -184,7 +183,7 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {isLoggedIn ? ( - + ) : ( )} @@ -193,7 +192,6 @@ const SwitchingColumnsArea: React.FC = ({ children }) => NOTE: we cannot nest routes in a fragment https://stackoverflow.com/a/68637108 */} - {features.federating && } {features.federating && } {features.federating && } diff --git a/src/features/ui/util/async-components.ts b/src/features/ui/util/async-components.ts index e6717d626..104b0f66c 100644 --- a/src/features/ui/util/async-components.ts +++ b/src/features/ui/util/async-components.ts @@ -5,10 +5,9 @@ export const EmojiPicker = lazy(() => import('soapbox/features/emoji/components/ export const EmojiPickerModal = lazy(() => import('soapbox/features/ui/components/modals/emoji-picker-modal.tsx')); export const Notifications = lazy(() => import('soapbox/features/notifications/index.tsx')); export const LandingTimeline = lazy(() => import('soapbox/features/landing-timeline/index.tsx')); -export const HomeTimeline = lazy(() => import('soapbox/features/home-timeline/index.tsx')); +export const MyNostrTimeline = lazy(() => import('soapbox/features/my-nostr-timeline/index.tsx')); export const PublicTimeline = lazy(() => import('soapbox/features/public-timeline/index.tsx')); export const RemoteTimeline = lazy(() => import('soapbox/features/remote-timeline/index.tsx')); -export const CommunityTimeline = lazy(() => import('soapbox/features/community-timeline/index.tsx')); export const HashtagTimeline = lazy(() => import('soapbox/features/hashtag-timeline/index.tsx')); export const DirectTimeline = lazy(() => import('soapbox/features/direct-timeline/index.tsx')); export const Conversations = lazy(() => import('soapbox/features/conversations/index.tsx')); diff --git a/src/locales/en.json b/src/locales/en.json index aca5adb3c..9778237ad 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -408,7 +408,6 @@ "column.group_blocked_members": "Banned Members", "column.group_pending_requests": "Pending requests", "column.groups": "Groups", - "column.home": "Home", "column.import_data": "Import data", "column.info": "Server information", "column.lists": "Lists", @@ -421,6 +420,7 @@ "column.mfa_setup": "Proceed to Setup", "column.migration": "Account migration", "column.mutes": "Mutes", + "column.my_nostr": "My Nostr", "column.notifications": "Notifications", "column.pins": "Pinned posts", "column.preferences": "Preferences", @@ -1011,7 +1011,7 @@ "lists.new.title_placeholder": "New list title", "lists.search": "Search among people you follow", "lists.subheading": "Your lists", - "loading_indicator.label": "Loading…", + "loading_indicator.label": "Loading...", "location_search.placeholder": "Find an address", "login.fields.email_label": "E-mail address", "login.fields.instance_label": "Instance", @@ -1120,7 +1120,7 @@ "navigation.dashboard": "Dashboard", "navigation.developers": "Developers", "navigation.direct_messages": "Messages", - "navigation.home": "Home", + "navigation.my_nostr": "My Nostr", "navigation.notifications": "Notifications", "navigation.search": "Discover", "navigation_bar.account_aliases": "Account aliases", @@ -1614,10 +1614,11 @@ "sw.url": "Script URL", "tabs_bar.all": "All", "tabs_bar.dashboard": "Dashboard", + "tabs_bar.for_you": "For You", "tabs_bar.global": "Global", "tabs_bar.groups": "Groups", - "tabs_bar.home": "Home", "tabs_bar.more": "More", + "tabs_bar.my_nostr": "My Nostr", "tabs_bar.notifications": "Notifications", "tabs_bar.profile": "Profile", "tabs_bar.search": "Discover", diff --git a/src/pages/home-page.tsx b/src/pages/home-page.tsx index 5913db7ad..485ac5e3d 100644 --- a/src/pages/home-page.tsx +++ b/src/pages/home-page.tsx @@ -1,7 +1,6 @@ import clsx from 'clsx'; import { useRef } from 'react'; -import { FormattedMessage, useIntl } from 'react-intl'; -import { useSelector } from 'react-redux'; +import { useIntl } from 'react-intl'; import { Link, useLocation } from 'react-router-dom'; import { uploadCompose } from 'soapbox/actions/compose.ts'; @@ -9,7 +8,6 @@ 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 Layout from 'soapbox/components/ui/layout.tsx'; -import Tabs from 'soapbox/components/ui/tabs.tsx'; import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx'; import { WhoToFollowPanel, @@ -27,11 +25,9 @@ import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts'; import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts'; import { useDraggedFiles } from 'soapbox/hooks/useDraggedFiles.ts'; import { useFeatures } from 'soapbox/hooks/useFeatures.ts'; -import { useInstance } from 'soapbox/hooks/useInstance.ts'; import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts'; import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts'; import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts'; -import { RootState } from 'soapbox/store.ts'; import ComposeForm from '../features/compose/components/compose-form.tsx'; @@ -43,17 +39,16 @@ const HomePage: React.FC = ({ children }) => { const intl = useIntl(); const dispatch = useAppDispatch(); const { pathname } = useLocation(); - const notifications = useSelector((state: RootState) => state.notificationsTab); const me = useAppSelector(state => state.me); const { account } = useOwnAccount(); const features = useFeatures(); const soapboxConfig = useSoapboxConfig(); - const { instance } = useInstance(); const composeId = 'home'; const composeBlock = useRef(null); const isMobile = useIsMobile(); + const isGlobalPage = pathname === '/timeline/global'; const hasPatron = soapboxConfig.extensions.getIn(['patron', 'enabled']) === true; const hasCrypto = typeof soapboxConfig.cryptoAddresses.getIn([0, 'ticker']) === 'string'; @@ -67,7 +62,7 @@ const HomePage: React.FC = ({ children }) => { const avatar = account ? account.avatar : ''; const renderSuggestions = () => { - if (features.suggestionsLocal && pathname !== '/timeline/global') { + if (features.suggestionsLocal && !isGlobalPage) { return ; } else if (features.suggestions) { return ; @@ -105,15 +100,6 @@ const HomePage: React.FC = ({ children }) => { )} -
- , to: '/', notification: notifications.home }, - { name: 'local', text:
{instance.domain}
, to: '/timeline/local', notification: notifications.instance }, - ]} - activeItem={pathname === '/timeline/local' ? 'local' : 'home'} - /> -
{children}