pl-fe: start moving files around

Signed-off-by: Nicole Mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/actions/compose.ts

@@ -22,9 +22,9 @@ import type { EditorState } from 'lexical';
 import type { Account as BaseAccount, CreateStatusParams, CustomEmoji, Group, MediaAttachment, Status as BaseStatus, Tag, Poll, ScheduledStatus, InteractionPolicy, UpdateMediaParams } from 'pl-api';
 import type { AutoSuggestion } from 'pl-fe/components/autosuggest-input';
 import type { Emoji } from 'pl-fe/features/emoji';
-import type { Policy, Rule, Scope } from 'pl-fe/features/interaction-policies';
 import type { Account } from 'pl-fe/normalizers/account';
 import type { Status } from 'pl-fe/normalizers/status';
+import type { Policy, Rule, Scope } from 'pl-fe/pages/settings/interaction-policies';
 import type { ClearLinkSuggestion } from 'pl-fe/reducers/compose';
 import type { AppDispatch, RootState } from 'pl-fe/store';
 import type { History } from 'pl-fe/types/history';

packages/pl-fe/src/features/admin/announcements.tsx

@@ -92,7 +92,7 @@ const Announcement: React.FC<IAnnouncement> = ({ announcement }) => {
   );
 };
 
-const Announcements: React.FC = () => {
+const AdminAnnouncementsPage: React.FC = () => {
   const intl = useIntl();
   const { openModal } = useModalsStore();
 
@@ -132,4 +132,4 @@ const Announcements: React.FC = () => {
   );
 };
 
-export { Announcements as default };
+export { AdminAnnouncementsPage as default };

packages/pl-fe/src/features/admin/domains.tsx

@@ -102,7 +102,7 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
   );
 };
 
-const Domains: React.FC = () => {
+const AdminDomainsPage: React.FC = () => {
   const intl = useIntl();
 
   const { openModal } = useModalsStore();
@@ -148,4 +148,4 @@ const Domains: React.FC = () => {
   );
 };
 
-export { Domains as default };
+export { AdminDomainsPage as default };

packages/pl-fe/src/features/admin/index.tsx

@@ -14,7 +14,7 @@ const messages = defineMessages({
   heading: { id: 'column.admin.dashboard', defaultMessage: 'Dashboard' },
 });
 
-const Admin: React.FC = () => {
+const AdminPage: React.FC = () => {
   const intl = useIntl();
   const { account } = useOwnAccount();
 
@@ -33,4 +33,4 @@ const Admin: React.FC = () => {
   );
 };
 
-export { Admin as default };
+export { AdminPage as default };

packages/pl-fe/src/features/aliases/components/account.tsx

@@ -1,56 +0,0 @@
-import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-
-import { addToAliases } from 'pl-fe/actions/aliases';
-import { useAccount } from 'pl-fe/api/hooks/accounts/use-account';
-import AccountComponent from 'pl-fe/components/account';
-import IconButton from 'pl-fe/components/icon-button';
-import HStack from 'pl-fe/components/ui/hstack';
-import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
-import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
-import { useFeatures } from 'pl-fe/hooks/use-features';
-
-const messages = defineMessages({
-  add: { id: 'aliases.account.add', defaultMessage: 'Create alias' },
-});
-
-interface IAccount {
-  accountId: string;
-  aliases: string[];
-}
-
-const Account: React.FC<IAccount> = ({ accountId, aliases }) => {
-  const intl = useIntl();
-  const dispatch = useAppDispatch();
-  const features = useFeatures();
-
-  const me = useAppSelector((state) => state.me);
-  const { account } = useAccount(accountId);
-
-  const apId = account?.ap_id;
-  const name = features.accountMoving ? account?.acct : apId;
-  const added = name ? aliases.includes(name) : false;
-
-  const handleOnAdd = () => dispatch(addToAliases(account!));
-
-  if (!account) return null;
-
-  let button;
-
-  if (!added && accountId !== me) {
-    button = (
-      <IconButton src={require('@tabler/icons/outline/plus.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={handleOnAdd} />
-    );
-  }
-
-  return (
-    <HStack space={1} alignItems='center' justifyContent='between' className='p-2.5'>
-      <div className='w-full'>
-        <AccountComponent account={account} withRelationship={false} />
-      </div>
-      {button}
-    </HStack>
-  );
-};
-
-export { Account as default };

packages/pl-fe/src/features/aliases/components/search.tsx

@@ -1,65 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-
-import { fetchAliasesSuggestions, clearAliasesSuggestions, changeAliasesSuggestions } from 'pl-fe/actions/aliases';
-import Icon from 'pl-fe/components/icon';
-import Button from 'pl-fe/components/ui/button';
-import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
-import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
-
-const messages = defineMessages({
-  search: { id: 'aliases.search', defaultMessage: 'Search your old account' },
-  searchTitle: { id: 'tabs_bar.search', defaultMessage: 'Search' },
-});
-
-const Search: React.FC = () => {
-  const dispatch = useAppDispatch();
-  const intl = useIntl();
-
-  const value = useAppSelector(state => state.aliases.suggestions.value);
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    dispatch(changeAliasesSuggestions(e.target.value));
-  };
-
-  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.keyCode === 13) {
-      dispatch(fetchAliasesSuggestions(value));
-    }
-  };
-
-  const handleSubmit = () => {
-    dispatch(fetchAliasesSuggestions(value));
-  };
-
-  const handleClear = () => {
-    dispatch(clearAliasesSuggestions());
-  };
-
-  const hasValue = value.length > 0;
-
-  return (
-    <div className='flex items-center gap-1'>
-      <label className='relative grow'>
-        <span style={{ display: 'none' }}>{intl.formatMessage(messages.search)}</span>
-
-        <input
-          className='block w-full rounded-full focus:border-primary-500 focus:ring-primary-500 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500 sm:text-sm'
-          type='text'
-          value={value}
-          onChange={handleChange}
-          onKeyUp={handleKeyUp}
-          placeholder={intl.formatMessage(messages.search)}
-        />
-
-        <div role='button' tabIndex={hasValue ? 0 : -1} className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-3 rtl:left-0 rtl:right-auto' onClick={handleClear}>
-          <Icon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('size-5 text-gray-600', { 'hidden': !hasValue })} />
-        </div>
-      </label>
-      <Button onClick={handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
-    </div>
-  );
-};
-
-export { Search as default };

packages/pl-fe/src/features/landing-timeline/components/logo-text.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-interface ILogoText extends Pick<React.HTMLAttributes<HTMLHeadingElement>, 'dir'> {
-  children: React.ReactNode;
-}
-
-/** Big text in site colors, for displaying the site name. Resizes itself according to the screen size. */
-const LogoText: React.FC<ILogoText> = ({ children, dir }) => (
-  <h1
-    className='-my-5 overflow-hidden text-ellipsis bg-gradient-to-br from-accent-500 via-primary-500 to-gradient-end bg-clip-text text-5xl font-extrabold !leading-tight text-transparent lg:text-6xl xl:text-7xl'
-    dir={dir}
-  >
-    {children}
-  </h1>
-);
-
-export { LogoText };

packages/pl-fe/src/features/landing-timeline/components/site-banner.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-
-import Markup from 'pl-fe/components/markup';
-import { ParsedContent } from 'pl-fe/components/parsed-content';
-import Stack from 'pl-fe/components/ui/stack';
-import { useInstance } from 'pl-fe/hooks/use-instance';
-import { getTextDirection } from 'pl-fe/utils/rtl';
-
-import { LogoText } from './logo-text';
-
-const SiteBanner: React.FC = () => {
-  const instance = useInstance();
-
-  return (
-    <Stack space={6}>
-      <LogoText dir={getTextDirection(instance.title)}>
-        {instance.title}
-      </LogoText>
-
-      {instance.description.trim().length > 0 && (
-        <Markup
-          size='lg'
-          direction={getTextDirection(instance.description)}
-        >
-          <ParsedContent html={instance.description} />
-        </Markup>
-      )}
-    </Stack>
-  );
-};
-
-export { SiteBanner };

packages/pl-fe/src/features/ui/components/modals/compose-interaction-policy-modal.tsx

@@ -4,9 +4,9 @@ import { FormattedMessage } from 'react-intl';
 import { changeComposeInteractionPolicyOption } from 'pl-fe/actions/compose';
 import Modal from 'pl-fe/components/ui/modal';
 import Stack from 'pl-fe/components/ui/stack';
-import { InteractionPolicyConfig, type Policy, type Rule, type Scope } from 'pl-fe/features/interaction-policies';
 import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
 import { useCompose } from 'pl-fe/hooks/use-compose';
+import { InteractionPolicyConfig, type Policy, type Rule, type Scope } from 'pl-fe/pages/settings/interaction-policies';
 import { useInteractionPolicies } from 'pl-fe/queries/settings/use-interaction-policies';
 
 import type { BaseModalProps } from '../modal-root';

packages/pl-fe/src/features/ui/util/async-components.ts

@@ -1,21 +1,21 @@
 import { lazy } from 'react';
 
 // Pages
-export const AboutPage = lazy(() => import('pl-fe/features/about'));
+export const AboutPage = lazy(() => import('pl-fe/pages/about'));
 export const AccountGallery = lazy(() => import('pl-fe/features/account-gallery'));
 export const AccountTimeline = lazy(() => import('pl-fe/features/account-timeline'));
-export const Aliases = lazy(() => import('pl-fe/features/aliases'));
+export const Aliases = lazy(() => import('pl-fe/pages/settings/aliases'));
 export const Announcements = lazy(() => import('pl-fe/features/admin/announcements'));
 export const AuthTokenList = lazy(() => import('pl-fe/features/auth-token-list'));
-export const Backups = lazy(() => import('pl-fe/features/backups'));
+export const Backups = lazy(() => import('pl-fe/pages/settings/backups'));
 export const Blocks = lazy(() => import('pl-fe/features/blocks'));
 export const BookmarkFolders = lazy(() => import('pl-fe/features/bookmark-folders'));
 export const Bookmarks = lazy(() => import('pl-fe/features/bookmarks'));
-export const BubbleTimeline = lazy(() => import('pl-fe/features/bubble-timeline'));
+export const BubbleTimeline = lazy(() => import('pl-fe/pages/timelines/bubble-timeline'));
 export const ChatIndex = lazy(() => import('pl-fe/features/chats'));
 export const Circle = lazy(() => import('pl-fe/features/circle'));
 export const Circles = lazy(() => import('pl-fe/features/circles'));
-export const CommunityTimeline = lazy(() => import('pl-fe/features/community-timeline'));
+export const CommunityTimeline = lazy(() => import('pl-fe/pages/timelines/community-timeline'));
 export const ComposeEditor = lazy(() => import('pl-fe/features/compose/editor'));
 export const ComposeEvent = lazy(() => import('pl-fe/features/compose-event'));
 export const Conversations = lazy(() => import('pl-fe/features/conversations'));
@@ -28,11 +28,11 @@ export const Directory = lazy(() => import('pl-fe/features/directory'));
 export const DomainBlocks = lazy(() => import('pl-fe/features/domain-blocks'));
 export const Domains = lazy(() => import('pl-fe/features/admin/domains'));
 export const DraftStatuses = lazy(() => import('pl-fe/features/draft-statuses'));
-export const EditEmail = lazy(() => import('pl-fe/features/edit-email'));
+export const EditEmail = lazy(() => import('pl-fe/pages/settings/edit-email'));
 export const EditFilter = lazy(() => import('pl-fe/features/filters/edit-filter'));
 export const EditGroup = lazy(() => import('pl-fe/features/group/edit-group'));
-export const EditPassword = lazy(() => import('pl-fe/features/edit-password'));
-export const EditProfile = lazy(() => import('pl-fe/features/edit-profile'));
+export const EditPassword = lazy(() => import('pl-fe/pages/settings/edit-password'));
+export const EditProfile = lazy(() => import('pl-fe/pages/settings/edit-profile'));
 export const EventDiscussion = lazy(() => import('pl-fe/features/event/event-discussion'));
 export const EventInformation = lazy(() => import('pl-fe/features/event/event-information'));
 export const Events = lazy(() => import('pl-fe/features/events'));
@@ -57,17 +57,17 @@ export const HashtagTimeline = lazy(() => import('pl-fe/features/hashtag-timelin
 export const HomeTimeline = lazy(() => import('pl-fe/features/home-timeline'));
 export const ImportData = lazy(() => import('pl-fe/features/import-data'));
 export const IntentionalError = lazy(() => import('pl-fe/features/intentional-error'));
-export const InteractionPolicies = lazy(() => import('pl-fe/features/interaction-policies'));
+export const InteractionPolicies = lazy(() => import('pl-fe/pages/settings/interaction-policies'));
 export const InteractionRequests = lazy(() => import('pl-fe/features/interaction-requests'));
-export const LandingTimeline = lazy(() => import('pl-fe/features/landing-timeline'));
-export const LinkTimeline = lazy(() => import('pl-fe/features/link-timeline'));
+export const LandingTimeline = lazy(() => import('pl-fe/pages/timelines/landing-timeline'));
+export const LinkTimeline = lazy(() => import('pl-fe/pages/timelines/link-timeline'));
 export const Lists = lazy(() => import('pl-fe/features/lists'));
-export const ListTimeline = lazy(() => import('pl-fe/features/list-timeline'));
+export const ListTimeline = lazy(() => import('pl-fe/pages/timelines/list-timeline'));
 export const LoginPage = lazy(() => import('pl-fe/features/auth-login/components/login-page'));
 export const LogoutPage = lazy(() => import('pl-fe/features/auth-login/components/logout'));
 export const ManageGroup = lazy(() => import('pl-fe/features/group/manage-group'));
 export const MediaGallery = lazy(() => import('pl-fe/components/media-gallery'));
-export const Migration = lazy(() => import('pl-fe/features/migration'));
+export const Migration = lazy(() => import('pl-fe/pages/settings/migration'));
 export const ModerationLog = lazy(() => import('pl-fe/features/admin/moderation-log'));
 export const Mutes = lazy(() => import('pl-fe/features/mutes'));
 export const NewStatus = lazy(() => import('pl-fe/features/new-status'));
@@ -76,8 +76,8 @@ export const OutgoingFollowRequests = lazy(() => import('pl-fe/features/follow-r
 export const PasswordReset = lazy(() => import('pl-fe/features/auth-login/components/password-reset'));
 export const PinnedStatuses = lazy(() => import('pl-fe/features/pinned-statuses'));
 export const PlFeConfig = lazy(() => import('pl-fe/features/pl-fe-config'));
-export const PublicTimeline = lazy(() => import('pl-fe/features/public-timeline'));
-export const Quotes = lazy(() => import('pl-fe/features/quotes'));
+export const PublicTimeline = lazy(() => import('pl-fe/pages/timelines/public-timeline'));
+export const Quotes = lazy(() => import('pl-fe/pages/status-lists/quotes'));
 export const RegisterInvite = lazy(() => import('pl-fe/features/register-invite'));
 export const RegistrationPage = lazy(() => import('pl-fe/features/auth-login/components/registration-page'));
 export const Relays = lazy(() => import('pl-fe/features/admin/relays'));
@@ -87,11 +87,11 @@ export const ScheduledStatuses = lazy(() => import('pl-fe/features/scheduled-sta
 export const Search = lazy(() => import('pl-fe/features/search'));
 export const ServerInfo = lazy(() => import('pl-fe/features/server-info'));
 export const ServiceWorkerInfo = lazy(() => import('pl-fe/features/developers/service-worker-info'));
-export const Settings = lazy(() => import('pl-fe/features/settings'));
+export const Settings = lazy(() => import('pl-fe/pages/settings/settings'));
 export const SettingsStore = lazy(() => import('pl-fe/features/developers/settings-store'));
 export const Share = lazy(() => import('pl-fe/features/share'));
 export const Status = lazy(() => import('pl-fe/features/status'));
-export const TestTimeline = lazy(() => import('pl-fe/features/test-timeline'));
+export const TestTimeline = lazy(() => import('pl-fe/pages/timelines/test-timeline'));
 export const ThemeEditor = lazy(() => import('pl-fe/features/theme-editor'));
 export const UrlPrivacy = lazy(() => import('pl-fe/features/url-privacy'));
 export const UserIndex = lazy(() => import('pl-fe/features/admin/user-index'));

packages/pl-fe/src/pages/about.tsx

@@ -8,7 +8,7 @@ import { usePlFeConfig } from 'pl-fe/hooks/use-pl-fe-config';
 import { useSettings } from 'pl-fe/hooks/use-settings';
 import { useAboutPage } from 'pl-fe/queries/pl-fe/use-about-page';
 
-import { languages } from '../preferences';
+import { languages } from '../features/preferences';
 
 /** Displays arbitrary user-uploaded HTML on a page at `/about/:slug` */
 const AboutPage: React.FC = () => {

packages/pl-fe/src/pages/settings/aliases.tsx

@@ -1,9 +1,14 @@
+import clsx from 'clsx';
 import React, { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { fetchAliases, removeFromAliases } from 'pl-fe/actions/aliases';
+import { addToAliases, changeAliasesSuggestions, clearAliasesSuggestions, fetchAliases, fetchAliasesSuggestions, removeFromAliases } from 'pl-fe/actions/aliases';
+import { useAccount } from 'pl-fe/api/hooks/accounts/use-account';
+import AccountComponent from 'pl-fe/components/account';
 import Icon from 'pl-fe/components/icon';
+import IconButton from 'pl-fe/components/icon-button';
 import ScrollableList from 'pl-fe/components/scrollable-list';
+import Button from 'pl-fe/components/ui/button';
 import { CardHeader, CardTitle } from 'pl-fe/components/ui/card';
 import Column from 'pl-fe/components/ui/column';
 import HStack from 'pl-fe/components/ui/hstack';
@@ -13,9 +18,6 @@ import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
 import { useFeatures } from 'pl-fe/hooks/use-features';
 import { useOwnAccount } from 'pl-fe/hooks/use-own-account';
 
-import Account from './components/account';
-import Search from './components/search';
-
 const messages = defineMessages({
   heading: { id: 'column.aliases', defaultMessage: 'Account aliases' },
   subheading_add_new: { id: 'column.aliases.subheading_add_new', defaultMessage: 'Add New Alias' },
@@ -23,9 +25,100 @@ const messages = defineMessages({
   delete_error: { id: 'column.aliases.delete_error', defaultMessage: 'Error deleting alias' },
   subheading_aliases: { id: 'column.aliases.subheading_aliases', defaultMessage: 'Current aliases' },
   delete: { id: 'column.aliases.delete', defaultMessage: 'Delete' },
+  add: { id: 'aliases.account.add', defaultMessage: 'Create alias' },
+  search: { id: 'aliases.search', defaultMessage: 'Search your old account' },
+  searchTitle: { id: 'tabs_bar.search', defaultMessage: 'Search' },
 });
 
-const Aliases = () => {
+interface IAccount {
+  accountId: string;
+  aliases: string[];
+}
+
+const Account: React.FC<IAccount> = ({ accountId, aliases }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+  const features = useFeatures();
+
+  const me = useAppSelector((state) => state.me);
+  const { account } = useAccount(accountId);
+
+  const apId = account?.ap_id;
+  const name = features.accountMoving ? account?.acct : apId;
+  const added = name ? aliases.includes(name) : false;
+
+  const handleOnAdd = () => dispatch(addToAliases(account!));
+
+  if (!account) return null;
+
+  let button;
+
+  if (!added && accountId !== me) {
+    button = (
+      <IconButton src={require('@tabler/icons/outline/plus.svg')} iconClassName='h-5 w-5' title={intl.formatMessage(messages.add)} onClick={handleOnAdd} />
+    );
+  }
+
+  return (
+    <HStack space={1} alignItems='center' justifyContent='between' className='p-2.5'>
+      <div className='w-full'>
+        <AccountComponent account={account} withRelationship={false} />
+      </div>
+      {button}
+    </HStack>
+  );
+};
+
+const Search: React.FC = () => {
+  const dispatch = useAppDispatch();
+  const intl = useIntl();
+
+  const value = useAppSelector(state => state.aliases.suggestions.value);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    dispatch(changeAliasesSuggestions(e.target.value));
+  };
+
+  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.keyCode === 13) {
+      dispatch(fetchAliasesSuggestions(value));
+    }
+  };
+
+  const handleSubmit = () => {
+    dispatch(fetchAliasesSuggestions(value));
+  };
+
+  const handleClear = () => {
+    dispatch(clearAliasesSuggestions());
+  };
+
+  const hasValue = value.length > 0;
+
+  return (
+    <div className='flex items-center gap-1'>
+      <label className='relative grow'>
+        <span style={{ display: 'none' }}>{intl.formatMessage(messages.search)}</span>
+
+        <input
+          className='block w-full rounded-full focus:border-primary-500 focus:ring-primary-500 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500 sm:text-sm'
+          type='text'
+          value={value}
+          onChange={handleChange}
+          onKeyUp={handleKeyUp}
+          placeholder={intl.formatMessage(messages.search)}
+        />
+
+        <div role='button' tabIndex={hasValue ? 0 : -1} className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-3 rtl:left-0 rtl:right-auto' onClick={handleClear}>
+          <Icon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('size-5 text-gray-600', { 'hidden': !hasValue })} />
+        </div>
+      </label>
+      <Button onClick={handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
+    </div>
+  );
+};
+
+const AliasesPage = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
   const features = useFeatures();
@@ -96,4 +189,4 @@ const Aliases = () => {
   );
 };
 
-export { Aliases as default };
+export { AliasesPage as default };

packages/pl-fe/src/pages/settings/backups.tsx

@@ -59,7 +59,7 @@ const Backup: React.FC<IBackup> = ({ backup }) => {
   );
 };
 
-const Backups = () => {
+const BackupsPage = () => {
   const intl = useIntl();
 
   const { data: backups = [], isLoading } = useBackups();
@@ -105,4 +105,4 @@ const Backups = () => {
   );
 };
 
-export { Backups as default };
+export { BackupsPage as default };

packages/pl-fe/src/pages/settings/edit-email.tsx

@@ -24,7 +24,7 @@ const messages = defineMessages({
 
 const initialState = { email: '', password: '' };
 
-const EditEmail = () => {
+const EditEmailPage = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
@@ -84,4 +84,4 @@ const EditEmail = () => {
   );
 };
 
-export { EditEmail as default };
+export { EditEmailPage as default };

packages/pl-fe/src/pages/settings/edit-password.tsx

@@ -25,7 +25,7 @@ const messages = defineMessages({
 
 const initialState = { currentPassword: '', newPassword: '', newPasswordConfirmation: '' };
 
-const EditPassword = () => {
+const EditPasswordPage = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
@@ -102,4 +102,4 @@ const EditPassword = () => {
   );
 };
 
-export { EditPassword as default };
+export { EditPasswordPage as default };

packages/pl-fe/src/pages/settings/edit-profile.tsx

@@ -18,6 +18,9 @@ import Input from 'pl-fe/components/ui/input';
 import Streamfield from 'pl-fe/components/ui/streamfield';
 import Textarea from 'pl-fe/components/ui/textarea';
 import Toggle from 'pl-fe/components/ui/toggle';
+import AvatarPicker from 'pl-fe/features/edit-profile/components/avatar-picker';
+import HeaderPicker from 'pl-fe/features/edit-profile/components/header-picker';
+import { SelectDropdown } from 'pl-fe/features/forms';
 import { useImageField } from 'pl-fe/hooks/forms/use-image-field';
 import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
 import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
@@ -28,11 +31,6 @@ import { useOwnAccount } from 'pl-fe/hooks/use-own-account';
 import toast from 'pl-fe/toast';
 import { isDefaultAvatar, isDefaultHeader } from 'pl-fe/utils/accounts';
 
-import { SelectDropdown } from '../forms';
-
-import AvatarPicker from './components/avatar-picker';
-import HeaderPicker from './components/header-picker';
-
 import type { StreamfieldComponent } from 'pl-fe/components/ui/streamfield';
 
 const nonDefaultAvatar = (url: string | undefined) => url && isDefaultAvatar(url) ? undefined : url;
@@ -190,7 +188,7 @@ const ProfileField: StreamfieldComponent<AccountCredentialsField> = ({ index, va
 };
 
 /** Edit profile page. */
-const EditProfile: React.FC = () => {
+const EditProfilePage: React.FC = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
   const instance = useInstance();
@@ -584,4 +582,4 @@ const EditProfile: React.FC = () => {
   );
 };
 
-export { EditProfile as default };
+export { EditProfilePage as default };

packages/pl-fe/src/pages/settings/interaction-policies.tsx

@@ -13,7 +13,7 @@ import Text from 'pl-fe/components/ui/text';
 import { useInteractionPolicies } from 'pl-fe/queries/settings/use-interaction-policies';
 import toast from 'pl-fe/toast';
 
-import Warning from '../compose/components/warning';
+import Warning from '../../features/compose/components/warning';
 
 import type { InteractionPolicy } from 'pl-api';
 
@@ -143,7 +143,7 @@ const InteractionPolicyConfig: React.FC<IInteractionPolicyConfig> = ({ interacti
   );
 };
 
-const InteractionPolicies = () => {
+const InteractionPoliciesPage = () => {
   const { interactionPolicies: initial, updateInteractionPolicies, isUpdating } = useInteractionPolicies();
   const intl = useIntl();
   const [interactionPolicies, setInteractionPolicies] = useState(initial);
@@ -208,7 +208,7 @@ const InteractionPolicies = () => {
 };
 
 export {
-  InteractionPolicies as default,
+  InteractionPoliciesPage as default,
   InteractionPolicyConfig,
   type Policy,
   type Rule,

packages/pl-fe/src/pages/settings/migration.tsx

@@ -25,7 +25,7 @@ const messages = defineMessages({
   currentPasswordFieldLabel: { id: 'migration.fields.confirm_password.label', defaultMessage: 'Current password' },
 });
 
-const Migration = () => {
+const MigrationPage = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
   const instance = useInstance();
@@ -130,4 +130,4 @@ const Migration = () => {
   );
 };
 
-export { Migration as default };
+export { MigrationPage as default };

packages/pl-fe/src/pages/settings/settings.tsx

@@ -6,14 +6,13 @@ import List, { ListItem } from 'pl-fe/components/list';
 import Card, { CardBody, CardHeader, CardTitle } from 'pl-fe/components/ui/card';
 import Column from 'pl-fe/components/ui/column';
 import Text from 'pl-fe/components/ui/text';
+import Preferences from 'pl-fe/features/preferences';
+import MessagesSettings from 'pl-fe/features/settings/components/messages-settings';
 import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
 import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
 import { useFeatures } from 'pl-fe/hooks/use-features';
 import { useOwnAccount } from 'pl-fe/hooks/use-own-account';
 
-import Preferences from '../preferences';
-
-import MessagesSettings from './components/messages-settings';
 
 const messages = defineMessages({
   accountAliases: { id: 'navigation_bar.account_aliases', defaultMessage: 'Account aliases' },
@@ -45,7 +44,7 @@ const messages = defineMessages({
 });
 
 /** User settings page. */
-const Settings = () => {
+const SettingsPage = () => {
   const dispatch = useAppDispatch();
   const intl = useIntl();
 
@@ -172,4 +171,4 @@ const Settings = () => {
   );
 };
 
-export { Settings as default };
+export { SettingsPage as default };

packages/pl-fe/src/pages/status-lists/quotes.tsx

@@ -13,7 +13,7 @@ const messages = defineMessages({
   heading: { id: 'column.quotes', defaultMessage: 'Post quotes' },
 });
 
-const Quotes: React.FC = () => {
+const QuotesPage: React.FC = () => {
   const intl = useIntl();
   const { statusId } = useParams<{ statusId: string }>();
   const theme = useTheme();
@@ -50,4 +50,4 @@ const Quotes: React.FC = () => {
   );
 };
 
-export { Quotes as default };
+export { QuotesPage as default };

packages/pl-fe/src/pages/timelines/bubble-timeline.tsx

@@ -5,19 +5,18 @@ import { fetchBubbleTimeline } from 'pl-fe/actions/timelines';
 import { useBubbleStream } from 'pl-fe/api/hooks/streaming/use-bubble-stream';
 import PullToRefresh from 'pl-fe/components/pull-to-refresh';
 import Column from 'pl-fe/components/ui/column';
+import Timeline from 'pl-fe/features/ui/components/timeline';
 import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
 import { useFeatures } from 'pl-fe/hooks/use-features';
 import { useIsMobile } from 'pl-fe/hooks/use-is-mobile';
 import { useSettings } from 'pl-fe/hooks/use-settings';
 import { useTheme } from 'pl-fe/hooks/use-theme';
 
-import Timeline from '../ui/components/timeline';
-
 const messages = defineMessages({
   title: { id: 'column.bubble', defaultMessage: 'Bubble timeline' },
 });
 
-const BubbleTimeline = () => {
+const BubbleTimelinePage = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
   const theme = useTheme();
@@ -59,4 +58,4 @@ const BubbleTimeline = () => {
   );
 };
 
-export { BubbleTimeline as default };
+export { BubbleTimelinePage as default };

packages/pl-fe/src/pages/timelines/community-timeline.tsx

@@ -5,18 +5,17 @@ import { fetchPublicTimeline } from 'pl-fe/actions/timelines';
 import { useCommunityStream } from 'pl-fe/api/hooks/streaming/use-community-stream';
 import PullToRefresh from 'pl-fe/components/pull-to-refresh';
 import Column from 'pl-fe/components/ui/column';
+import Timeline from 'pl-fe/features/ui/components/timeline';
 import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
 import { useIsMobile } from 'pl-fe/hooks/use-is-mobile';
 import { useSettings } from 'pl-fe/hooks/use-settings';
 import { useTheme } from 'pl-fe/hooks/use-theme';
 
-import Timeline from '../ui/components/timeline';
-
 const messages = defineMessages({
   title: { id: 'column.community', defaultMessage: 'Local timeline' },
 });
 
-const CommunityTimeline = () => {
+const CommunityTimelinePage = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
   const theme = useTheme();
@@ -57,4 +56,4 @@ const CommunityTimeline = () => {
   );
 };
 
-export { CommunityTimeline as default };
+export { CommunityTimelinePage as default };

packages/pl-fe/src/pages/timelines/landing-timeline.tsx

@@ -3,19 +3,56 @@ import { FormattedMessage } from 'react-intl';
 
 import { fetchPublicTimeline } from 'pl-fe/actions/timelines';
 import { useCommunityStream } from 'pl-fe/api/hooks/streaming/use-community-stream';
+import Markup from 'pl-fe/components/markup';
+import { ParsedContent } from 'pl-fe/components/parsed-content';
 import PullToRefresh from 'pl-fe/components/pull-to-refresh';
 import Column from 'pl-fe/components/ui/column';
+import Stack from 'pl-fe/components/ui/stack';
+import Timeline from 'pl-fe/features/ui/components/timeline';
 import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
 import { useInstance } from 'pl-fe/hooks/use-instance';
 import { useIsMobile } from 'pl-fe/hooks/use-is-mobile';
 import { useTheme } from 'pl-fe/hooks/use-theme';
+import AboutPage from 'pl-fe/pages/about';
+import { getTextDirection } from 'pl-fe/utils/rtl';
 
-import AboutPage from '../about';
-import Timeline from '../ui/components/timeline';
 
-import { SiteBanner } from './components/site-banner';
+interface ILogoText extends Pick<React.HTMLAttributes<HTMLHeadingElement>, 'dir'> {
+  children: React.ReactNode;
+}
 
-const LandingTimeline = () => {
+/** Big text in site colors, for displaying the site name. Resizes itself according to the screen size. */
+const LogoText: React.FC<ILogoText> = ({ children, dir }) => (
+  <h1
+    className='-my-5 overflow-hidden text-ellipsis bg-gradient-to-br from-accent-500 via-primary-500 to-gradient-end bg-clip-text text-5xl font-extrabold !leading-tight text-transparent lg:text-6xl xl:text-7xl'
+    dir={dir}
+  >
+    {children}
+  </h1>
+);
+
+const SiteBanner: React.FC = () => {
+  const instance = useInstance();
+
+  return (
+    <Stack space={6}>
+      <LogoText dir={getTextDirection(instance.title)}>
+        {instance.title}
+      </LogoText>
+
+      {instance.description.trim().length > 0 && (
+        <Markup
+          size='lg'
+          direction={getTextDirection(instance.description)}
+        >
+          <ParsedContent html={instance.description} />
+        </Markup>
+      )}
+    </Stack>
+  );
+};
+
+const LandingTimelinePage = () => {
   const dispatch = useAppDispatch();
   const instance = useInstance();
   const theme = useTheme();
@@ -65,4 +102,4 @@ const LandingTimeline = () => {
   );
 };
 
-export { LandingTimeline as default };
+export { LandingTimelinePage as default };

packages/pl-fe/src/pages/timelines/link-timeline.tsx

@@ -12,13 +12,13 @@ const messages = defineMessages({
   header: { id: 'column.link_timeline', defaultMessage: 'Posts linking to {url}' },
 });
 
-interface ILinkTimeline {
+interface ILinkTimelinePage {
   params?: {
     url?: string;
   };
 }
 
-const HashtagTimeline: React.FC<ILinkTimeline> = ({ params }) => {
+const LinkTimelinePage: React.FC<ILinkTimelinePage> = ({ params }) => {
   const url = decodeURIComponent(params?.url || '');
 
   const intl = useIntl();
@@ -53,4 +53,4 @@ const HashtagTimeline: React.FC<ILinkTimeline> = ({ params }) => {
   );
 };
 
-export { HashtagTimeline as default };
+export { LinkTimelinePage as default };

packages/pl-fe/src/pages/timelines/list-timeline.tsx

@@ -15,7 +15,7 @@ import { useTheme } from 'pl-fe/hooks/use-theme';
 import { useDeleteList, useList } from 'pl-fe/queries/accounts/use-lists';
 import { useModalsStore } from 'pl-fe/stores/modals';
 
-import Timeline from '../ui/components/timeline';
+import Timeline from '../../features/ui/components/timeline';
 
 const messages = defineMessages({
   deleteHeading: { id: 'confirmations.delete_list.heading', defaultMessage: 'Delete list' },
@@ -25,7 +25,7 @@ const messages = defineMessages({
   deleteList: { id: 'lists.delete', defaultMessage: 'Delete list' },
 });
 
-const ListTimeline: React.FC = () => {
+const ListTimelinePage: React.FC = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
   const { id } = useParams<{ id: string }>();
@@ -119,4 +119,4 @@ const ListTimeline: React.FC = () => {
   );
 };
 
-export { ListTimeline as default };
+export { ListTimelinePage as default };

packages/pl-fe/src/pages/timelines/public-timeline.tsx

@@ -8,21 +8,21 @@ import { usePublicStream } from 'pl-fe/api/hooks/streaming/use-public-stream';
 import PullToRefresh from 'pl-fe/components/pull-to-refresh';
 import Accordion from 'pl-fe/components/ui/accordion';
 import Column from 'pl-fe/components/ui/column';
+import PinnedHostsPicker from 'pl-fe/features/remote-timeline/components/pinned-hosts-picker';
+import Timeline from 'pl-fe/features/ui/components/timeline';
 import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
 import { useInstance } from 'pl-fe/hooks/use-instance';
 import { useIsMobile } from 'pl-fe/hooks/use-is-mobile';
 import { useSettings } from 'pl-fe/hooks/use-settings';
 import { useTheme } from 'pl-fe/hooks/use-theme';
 
-import PinnedHostsPicker from '../remote-timeline/components/pinned-hosts-picker';
-import Timeline from '../ui/components/timeline';
 
 const messages = defineMessages({
   title: { id: 'column.public', defaultMessage: 'Fediverse timeline' },
   dismiss: { id: 'fediverse_tab.explanation_box.dismiss', defaultMessage: 'Don\'t show again' },
 });
 
-const CommunityTimeline = () => {
+const PublicTimelinePage = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
   const theme = useTheme();
@@ -104,4 +104,4 @@ const CommunityTimeline = () => {
   );
 };
 
-export { CommunityTimeline as default };
+export { PublicTimelinePage as default };

packages/pl-fe/src/pages/timelines/test-timeline.tsx

@@ -28,7 +28,7 @@ const MOCK_STATUSES: any[] = [
 const timelineId = 'test';
 const onlyMedia = false;
 
-const TestTimeline: React.FC = () => {
+const TestTimelinePage: React.FC = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
   const theme = useTheme();
@@ -51,4 +51,4 @@ const TestTimeline: React.FC = () => {
   );
 };
 
-export { TestTimeline as default };
+export { TestTimelinePage as default };