Merge HomeTimeline and CommunityTimeline into MyNostr

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 = () => {
       <Stack space={6}>
         <Link key='logo' to='/' data-preview-title-id='column.home' className='ml-4 flex shrink-0 items-center'>
           <SiteLogo alt='Logo' className='h-10 w-auto cursor-pointer' />
-          <span className='hidden'><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></span>
+          <span className='hidden'><FormattedMessage id='tabs_bar.my_nostr' defaultMessage='My Nostr' /></span>
         </Link>
 
         <Search openInRoute autosuggest />
@@ -156,11 +156,21 @@ const SidebarNavigation = () => {
         <Stack space={2}>
           <SidebarNavigationLink
             to='/'
-            icon={homeIcon}
+            icon={affiliateIcon}
-            activeIcon={homeFilledIcon}
+            activeIcon={affiliateFilledIcon}
-            text={<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />}
+            text={<FormattedMessage id='tabs_bar.my_nostr' defaultMessage='My Nostr' />}
           />
 
+          {account && (
+            <SidebarNavigationLink
+              to='/notifications'
+              icon={bellIcon}
+              activeIcon={bellFilledIcon}
+              count={notificationCount}
+              text={<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />}
+            />
+          )}
+
           <SidebarNavigationLink
             to='/search'
             icon={searchIcon}
@@ -169,13 +179,6 @@ const SidebarNavigation = () => {
 
           {account && (
             <>
-              <SidebarNavigationLink
-                to='/notifications'
-                icon={bellIcon}
-                activeIcon={bellFilledIcon}
-                count={notificationCount}
-                text={<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />}
-              />
 
               {renderMessagesLink()}
 
@@ -187,6 +190,21 @@ const SidebarNavigation = () => {
                   text={<FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />}
                 />
               )}
+            </>)}
+
+          {/* TODO: Add community page when ready */}
+          {false && (features.publicTimeline) && (
+            (account || !restrictUnauth.timelines.local) && (
+              <SidebarNavigationLink
+                to='/timeline/local'
+                icon={features.federating ? usersIcon : worldIcon}
+                text={features.federating ? instance.title : <FormattedMessage id='tabs_bar.global' defaultMessage='Global' />}
+              />
+            )
+          )}
+
+          {account && (
+            <>
 
               <SidebarNavigationLink
                 to={`/@${account.acct}`}
@@ -215,23 +233,13 @@ const SidebarNavigation = () => {
           )}
 
           {(features.publicTimeline) && (
-            <>
+            features.federating && (account || !restrictUnauth.timelines.federated)) && (
-              {(account || !restrictUnauth.timelines.local) && (
-                <SidebarNavigationLink
-                  to='/timeline/local'
-                  icon={features.federating ? atIcon : worldIcon}
-                  text={features.federating ? instance.domain : <FormattedMessage id='tabs_bar.global' defaultMessage='Global' />}
-                />
-              )}
-
-              {(features.federating && (account || !restrictUnauth.timelines.federated)) && (
             <SidebarNavigationLink
               to='/timeline/global'
               icon={worldIcon}
               text={<FormattedMessage id='tabs_bar.global' defaultMessage='Global' />}
             />
-              )}
+
-            </>
           )}
 
           {menu.length > 0 && (

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 => {
       }}
     >
       <ThumbNavigationLink
-        src={homeIcon}
+        src={affiliateIcon}
-        activeSrc={homeFilledIcon}
+        activeSrc={affiliateFilledIcon}
-        text={<FormattedMessage id='navigation.home' defaultMessage='Home' />}
+        text={<FormattedMessage id='navigation.my_nostr' defaultMessage='My Nostr' />}
         to='/'
         exact
       />

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;

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 (
+    <>
+      <Tabs
+        items={[
+          {
+            name: 'forYou',
+            text: <FormattedMessage id='tabs_bar.for_you' defaultMessage='For You' />,
+            action: () => setActiveTab('forYou'),
+            notification: notifications.home,
+          },
+          {
+            name: 'local',
+            text: <div className='block max-w-xs truncate'>{instance.title}</div>,
+            action: () => setActiveTab('local'),
+            notification: notifications.instance,
+          },
+        ]}
+        activeItem={activeTab}
+      />
+
+      <Suspense fallback={<div className='p-4 text-center'><FormattedMessage id='loading_indicator.label' defaultMessage='Loading...' /></div>}>
+        {activeTab === 'forYou' ? <HomeTimeline /> : <CommunityTimeline />}
+      </Suspense>
+    </>
+  );
+};
+
+export default MyNostrTimeline;

src/features/ui/components/navbar.tsx

@@ -114,7 +114,7 @@ const Navbar = () => {
           >
             <Link key='logo' to='/' data-preview-title-id='column.home' className='ml-4 flex shrink-0 items-center'>
               <SiteLogo alt='Logo' className='h-5 w-auto cursor-pointer' />
-              <span className='hidden'><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></span>
+              <span className='hidden'><FormattedMessage id='tabs_bar.my_nostr' defaultMessage='My Nostr' /></span>
             </Link>
 
             {account && (

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<ISwitchingColumnsArea> = ({ children }) =>
       <WrappedRoute path='/logout' page={EmptyPage} component={LogoutPage} publicRoute exact />
 
       {isLoggedIn ? (
-        <WrappedRoute path='/' exact page={HomePage} component={HomeTimeline} content={children} />
+        <WrappedRoute path='/' exact page={HomePage} component={MyNostrTimeline} content={children} />
       ) : (
         <WrappedRoute path='/' exact page={LandingPage} component={LandingTimeline} content={children} publicRoute />
       )}
@@ -193,7 +192,6 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
         NOTE: we cannot nest routes in a fragment
         https://stackoverflow.com/a/68637108
       */}
-      {features.federating && <WrappedRoute path='/timeline/local' exact page={HomePage} component={CommunityTimeline} content={children} publicRoute />}
       {features.federating && <WrappedRoute path='/timeline/global' exact page={HomePage} component={PublicTimeline} content={children} publicRoute />}
       {features.federating && <WrappedRoute path='/timeline/:instance' exact page={RemoteInstancePage} component={RemoteTimeline} content={children} publicRoute />}
 

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'));

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",

src/pages/home-page.tsx

@@ -1,7 +1,6 @@
 import clsx from 'clsx';
 import { useRef } from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
-import { useSelector } from 'react-redux';
 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<IHomePage> = ({ 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<HTMLDivElement>(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<IHomePage> = ({ children }) => {
   const avatar = account ? account.avatar : '';
 
   const renderSuggestions = () => {
-    if (features.suggestionsLocal && pathname !== '/timeline/global') {
+    if (features.suggestionsLocal && !isGlobalPage) {
       return <LatestAccountsPanel limit={3} />;
     } else if (features.suggestions) {
       return <WhoToFollowPanel limit={3} />;
@@ -105,15 +100,6 @@ const HomePage: React.FC<IHomePage> = ({ children }) => {
           </Card>
         )}
 
-        <div className='sticky top-12 z-20 bg-white/90 backdrop-blur black:bg-black/90 dark:bg-primary-900/90 lg:top-0'>
-          <Tabs
-            items={[
-              { name: 'home', text: <FormattedMessage id='tabs_bar.home' defaultMessage='Home' />, to: '/', notification: notifications.home },
-              { name: 'local', text: <div className='block max-w-xs truncate'>{instance.domain}</div>, to: '/timeline/local', notification: notifications.instance },
-            ]}
-            activeItem={pathname === '/timeline/local' ? 'local' : 'home'}
-          />
-        </div>
 
         {children}