From ee39c83823c89c30f8cafac292661c06ed27b02a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= Date: Tue, 23 Dec 2025 15:02:44 +0100 Subject: [PATCH] pl-fe: some cleanup and make it build MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: nicole mikołajczyk --- packages/pl-fe/src/features/ui/index.tsx | 278 +--------------------- packages/pl-fe/src/features/ui/router.tsx | 45 ++-- 2 files changed, 25 insertions(+), 298 deletions(-) diff --git a/packages/pl-fe/src/features/ui/index.tsx b/packages/pl-fe/src/features/ui/index.tsx index 41a0ada12..f59f68947 100644 --- a/packages/pl-fe/src/features/ui/index.tsx +++ b/packages/pl-fe/src/features/ui/index.tsx @@ -1,6 +1,6 @@ import { Outlet, useNavigate } from '@tanstack/react-router'; import clsx from 'clsx'; -import React, { Suspense, lazy, useEffect, useRef } from 'react'; +import React, { Suspense, useEffect, useRef } from 'react'; import { Toaster } from 'react-hot-toast'; import { Redirect, Switch, useLocation } from 'react-router-dom'; @@ -11,7 +11,6 @@ import { expandNotifications } from 'pl-fe/actions/notifications'; import { register as registerPushNotifications } from 'pl-fe/actions/push-notifications/registerer'; import { fetchHomeTimeline } from 'pl-fe/actions/timelines'; import { useUserStream } from 'pl-fe/api/hooks/streaming/use-user-stream'; -import { WITH_LANDING_PAGE } from 'pl-fe/build-config'; import SidebarNavigation from 'pl-fe/components/sidebar-navigation'; import ThumbNavigation from 'pl-fe/components/thumb-navigation'; import Layout from 'pl-fe/components/ui/layout'; @@ -21,25 +20,9 @@ import { useClient } from 'pl-fe/hooks/use-client'; import { useDraggedFiles } from 'pl-fe/hooks/use-dragged-files'; import { useFeatures } from 'pl-fe/hooks/use-features'; import { useInstance } from 'pl-fe/hooks/use-instance'; -import { useLoggedIn } from 'pl-fe/hooks/use-logged-in'; import { useOwnAccount } from 'pl-fe/hooks/use-own-account'; -import { usePlFeConfig } from 'pl-fe/hooks/use-pl-fe-config'; -import AdminLayout from 'pl-fe/layouts/admin-layout'; -import ChatsLayout from 'pl-fe/layouts/chats-layout'; import DefaultLayout from 'pl-fe/layouts/default-layout'; import EmptyLayout from 'pl-fe/layouts/empty-layout'; -import EventLayout from 'pl-fe/layouts/event-layout'; -import EventsLayout from 'pl-fe/layouts/events-layout'; -import ExternalLoginLayout from 'pl-fe/layouts/external-login-layout'; -import GroupLayout from 'pl-fe/layouts/group-layout'; -import GroupsLayout from 'pl-fe/layouts/groups-layout'; -import HomeLayout from 'pl-fe/layouts/home-layout'; -import LandingLayout from 'pl-fe/layouts/landing-layout'; -import ManageGroupsLayout from 'pl-fe/layouts/manage-groups-layout'; -import ProfileLayout from 'pl-fe/layouts/profile-layout'; -import RemoteInstanceLayout from 'pl-fe/layouts/remote-instance-layout'; -import SearchLayout from 'pl-fe/layouts/search-layout'; -import StatusLayout from 'pl-fe/layouts/status-layout'; import { prefetchFollowRequests } from 'pl-fe/queries/accounts/use-follow-requests'; import { queryClient } from 'pl-fe/queries/client'; import { prefetchCustomEmojis } from 'pl-fe/queries/instance/use-custom-emojis'; @@ -53,108 +36,12 @@ import { isStandalone } from 'pl-fe/utils/state'; import BackgroundShapes from './components/background-shapes'; import { ModalRoot, - AboutPage, - AccountGallery, AccountHoverCard, - AccountTimeline, - AdminAccount, - Aliases, - Announcements, - AuthTokenList, - Backups, - Blocks, - BookmarkFolders, - Bookmarks, - BubbleTimeline, - ChatIndex, ChatWidget, - Circle, - Circles, - CircleTimeline, - CommunityTimeline, - ComposeEvent, - Conversations, - CreateApp, - CryptoDonate, - Dashboard, - DeleteAccount, - Developers, - Directory, - DomainBlocks, - Domains, - DraftStatuses, DropdownNavigation, - EditEmail, - EditFilter, - EditGroup, - EditPassword, - EditProfile, - EventDiscussion, - EventInformation, - Events, - ExportData, - ExternalLogin, - FavouritedStatuses, - FederationRestrictions, - Filters, - FollowRequests, - FollowedTags, - Followers, - Following, GenericNotFound, - GroupBlockedMembers, - GroupGallery, - GroupMembers, - GroupMembershipRequests, - GroupTimeline, - Groups, - HashtagTimeline, - HomeTimeline, - ImportData, - IntentionalError, - InteractionPolicies, - InteractionRequests, - LandingPage, - LandingTimeline, - LinkTimeline, - ListTimeline, - Lists, - LoginPage, - LogoutPage, - ManageGroup, - MfaForm, - Migration, - ModerationLog, - Mutes, - NewStatus, - Notifications, - OutgoingFollowRequests, - PasswordReset, - PinnedStatuses, - PlFeConfig, - PublicTimeline, - Quotes, - RegisterInvite, - RegistrationPage, - Relays, - RemoteTimeline, - Report, - Rules, - ScheduledStatuses, - Search, - ServerInfo, - ServiceWorkerInfo, - Settings, - SettingsStore, - Share, Status, StatusHoverCard, - TestTimeline, - ThemeEditor, - Privacy, - UserIndex, - WrenchedTimeline, - Drive, } from './util/async-components'; import GlobalHotkeys from './util/global-hotkeys'; import { WrappedRoute } from './util/react-router-helpers'; @@ -168,14 +55,7 @@ interface ISwitchingColumnsArea { } const SwitchingColumnsArea: React.FC = React.memo(({ children }) => { - const instance = useInstance(); - const features = useFeatures(); const { search } = useLocation(); - const { isLoggedIn } = useLoggedIn(); - const standalone = useAppSelector(isStandalone); - - const { cryptoAddresses, redirectRootNoLogin } = usePlFeConfig(); - const hasCrypto = cryptoAddresses.length > 0; // NOTE: Mastodon and Pleroma route some basenames to the backend. // When adding new routes, use a basename that does NOT conflict @@ -184,35 +64,6 @@ const SwitchingColumnsArea: React.FC = React.memo(({ chil // Ex: use /login instead of /auth, but redirect /auth to /login return ( - {(!isLoggedIn && redirectRootNoLogin) && ( - - )} - - {standalone && !isLoggedIn && (WITH_LANDING_PAGE - ? - : )} - - - - {isLoggedIn ? ( - - ) : ( - - )} - - {/* - NOTE: we cannot nest routes in a fragment - https://stackoverflow.com/a/68637108 - */} - {features.federating && } - {features.federating && } - {features.bubbleTimeline && } - {features.wrenchedTimeline && } - {features.federating && } - - {features.conversations && } - {features.conversations && } - {/* Mastodon web routes */} @@ -253,131 +104,6 @@ const SwitchingColumnsArea: React.FC = React.memo(({ chil {/* Pleroma hard-coded email URLs */} - - - - - {features.lists && } - {features.lists && } - {features.circles && } - {features.circles && } - {features.bookmarks && } - {features.bookmarks && } - - - - - - {features.profileDirectory && } - {features.events && } - {features.events && } - - {features.chats && } - {features.chats && } - {features.chats && } - {features.shoutbox && } - {features.chats && } - - - {features.outgoingFollowRequests && } - - {features.federating && } - - {(features.filters || features.filtersV2) && } - {(features.filters || features.filtersV2) && } - {(features.filters || features.filtersV2) && } - {(features.followedHashtagsList) && } - {features.interactionRequests && } - - - - - - - - - - - {features.events && } - {features.events && } - {features.events && } - - - - {features.groups && } - {features.groups && } - {features.groups && } - {features.groups && } - {features.groups && } - {features.groups && } - {features.groups && } - {features.groups && } - {features.groups && } - - - - {features.scheduledStatuses && } - - - {features.drive && } - - - - - - {(features.importBlocks || features.importFollows || features.importMutes) && } - {features.manageAccountAliases && } - {features.accountMoving && } - {features.accountBackups && } - - - - - - {features.interactionRequests && } - - - - - - - - - - - - - - - {features.pleromaAdminAnnouncements && } - {features.domains && } - {features.adminRules && } - - - - - - - - Promise.reject(new TypeError('Failed to fetch dynamically imported module: TEST')))} content={children} /> - - - {hasCrypto && } - {features.federating && } - - - - - - {(features.accountCreation && instance.registrations.enabled) && ( - - )} - - - - - - @@ -386,6 +112,8 @@ const SwitchingColumnsArea: React.FC = React.memo(({ chil ); }); +SwitchingColumnsArea.displayName = '_'; + const UI: React.FC = React.memo(() => { const navigate = useNavigate(); const dispatch = useAppDispatch(); diff --git a/packages/pl-fe/src/features/ui/router.tsx b/packages/pl-fe/src/features/ui/router.tsx index 108efd873..f5f663e36 100644 --- a/packages/pl-fe/src/features/ui/router.tsx +++ b/packages/pl-fe/src/features/ui/router.tsx @@ -3,6 +3,7 @@ import { createRootRouteWithContext, createRoute, createRouter, + Navigate, notFound, redirect, RouterProvider, @@ -15,6 +16,7 @@ import Layout from 'pl-fe/components/ui/layout'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; import { useFeatures } from 'pl-fe/hooks/use-features'; import { useInstance } from 'pl-fe/hooks/use-instance'; +import { useLoggedIn } from 'pl-fe/hooks/use-logged-in'; import { useOwnAccount } from 'pl-fe/hooks/use-own-account'; import { usePlFeConfig } from 'pl-fe/hooks/use-pl-fe-config'; import AdminLayout from 'pl-fe/layouts/admin-layout'; @@ -150,7 +152,6 @@ import type { Features } from 'pl-api'; interface RouterContext { instance: ReturnType; features: ReturnType; - isStandalone: boolean; isLoggedIn: boolean; isAdmin: boolean; hasCrypto: boolean; @@ -263,22 +264,23 @@ const layouts = { }; // Root routes -export const homeTimelineRoute = createRoute({ +const HomeRoute = () => { + const { redirectRootNoLogin } = usePlFeConfig(); + const standalone = useAppSelector(isStandalone); + const { isLoggedIn } = useLoggedIn(); + + if (!isLoggedIn && redirectRootNoLogin) return ; + if (standalone && !isLoggedIn && !WITH_LANDING_PAGE) return ; + + if (isLoggedIn) return ; + if (standalone && WITH_LANDING_PAGE) return ; + return ; +}; + +export const homeRoute = createRoute({ getParentRoute: () => layouts.home, path: '/', - component: HomeTimeline, - beforeLoad: ({ context: { isLoggedIn } }) => { - if (!isLoggedIn) throw notFound(); - }, -}); - -export const landingTimelineRoute = createRoute({ - getParentRoute: () => layouts.landing, - path: '/', - component: LandingTimeline, - beforeLoad: ({ context: { isLoggedIn } }) => { - if (isLoggedIn) throw notFound(); - }, + component: HomeRoute, }); // Auth routes @@ -1301,13 +1303,13 @@ const routeTree = rootRoute.addChildren([ ]), layouts.groups.addChildren([groupsRoute]), layouts.home.addChildren([ - homeTimelineRoute, + homeRoute, localTimelineRoute, federatedTimelineRoute, bubbleTimelineRoute, wrenchedTimelineRoute, ]), - layouts.landing.addChildren([landingTimelineRoute]), + layouts.landing.addChildren([/*landingTimelineRoute*/]), layouts.manageGroups.addChildren([ manageGroupRoute, editGroupRoute, @@ -1355,7 +1357,6 @@ const router = createRouter({ instance: instanceInitialState, features: {} as Features, isLoggedIn: false, - isStandalone: false, isAdmin: false, hasCrypto: false, }, @@ -1377,19 +1378,17 @@ declare module '@tanstack/react-router' { const RouterWithContext = () => { const instance = useInstance(); const features = useFeatures(); - const standalone = useAppSelector(isStandalone); const { cryptoAddresses } = usePlFeConfig(); const hasCrypto = cryptoAddresses.length > 0; const { account } = useOwnAccount(); - const context = useMemo(() => ({ + const context: RouterContext = useMemo(() => ({ instance, features, isLoggedIn: !!account, - isStandalone: standalone, - isAdmin: account?.is_admin || account?.is_moderator, + isAdmin: !!(account?.is_admin || account?.is_moderator), hasCrypto, - }), [features.version, standalone, hasCrypto, !!account, account?.is_admin, account?.is_moderator]); + }), [features.version, hasCrypto, !!account, account?.is_admin, account?.is_moderator]); return (