Merge HomeTimeline and CommunityTimeline into MyNostr

2025-02-26 14:06:03 -03:00 · 2025-02-26 14:06:03 -03:00 · af21019e73
commit af21019e73
--- 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 = () => {
      <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}
-            activeIcon={homeFilledIcon}
-            text={<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />}
+            icon={affiliateIcon}
+            activeIcon={affiliateFilledIcon}
+            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) && (
-            <>
-              {(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' />}
+            />

-              {(features.federating && (account || !restrictUnauth.timelines.federated)) && (
-                <SidebarNavigationLink
-                  to='/timeline/global'
-                  icon={worldIcon}
-                  text={<FormattedMessage id='tabs_bar.global' defaultMessage='Global' />}
-                />
-              )}
-            </>
          )}

          {menu.length > 0 && (
--- 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 => {
      }}
    >
      <ThumbNavigationLink
-        src={homeIcon}
-        activeSrc={homeFilledIcon}
-        text={<FormattedMessage id='navigation.home' defaultMessage='Home' />}
+        src={affiliateIcon}
+        activeSrc={affiliateFilledIcon}
+        text={<FormattedMessage id='navigation.my_nostr' defaultMessage='My Nostr' />}
        to='/'
        exact
      />
--- a/src/features/my-nostr-timeline/community-timeline.tsx
+++ b/src/features/my-nostr-timeline/community-timeline.tsx
--- a/src/features/my-nostr-timeline/home-timeline.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;
--- a/src/features/my-nostr-timeline/index.tsx
+++ 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 (
+    <>
+      <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;
--- a/src/features/ui/components/navbar.tsx
+++ b/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 && (
--- 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<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 />}

--- 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'));
--- 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",
--- 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<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}