pl-fe: move around some files

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

packages/pl-fe/src/features/export-data/components/csv-exporter.tsx

@@ -1,49 +0,0 @@
-import React, { useState } from 'react';
-import { MessageDescriptor, useIntl } from 'react-intl';
-
-import Button from 'pl-fe/components/ui/button';
-import Form from 'pl-fe/components/ui/form';
-import FormActions from 'pl-fe/components/ui/form-actions';
-import Text from 'pl-fe/components/ui/text';
-import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
-import { AppDispatch, RootState } from 'pl-fe/store';
-
-interface ICSVExporter {
-  messages: {
-    input_label: MessageDescriptor;
-    input_hint: MessageDescriptor;
-    submit: MessageDescriptor;
-  };
-  action: () => (dispatch: AppDispatch, getState: () => RootState) => Promise<any>;
-}
-
-const CSVExporter: React.FC<ICSVExporter> = ({ messages, action }) => {
-  const dispatch = useAppDispatch();
-  const intl = useIntl();
-
-  const [isLoading, setIsLoading] = useState(false);
-
-  const handleClick: React.MouseEventHandler = (event) => {
-    setIsLoading(true);
-    dispatch(action()).then(() => {
-      setIsLoading(false);
-    }).catch(() => {
-      setIsLoading(false);
-    });
-  };
-
-  return (
-    <Form>
-      <Text size='xl' weight='bold'>{intl.formatMessage(messages.input_label)}</Text>
-      <Text theme='muted'>{intl.formatMessage(messages.input_hint)}</Text>
-
-      <FormActions>
-        <Button theme='primary' onClick={handleClick} disabled={isLoading}>
-          {intl.formatMessage(messages.submit)}
-        </Button>
-      </FormActions>
-    </Form>
-  );
-};
-
-export { CSVExporter as default };

packages/pl-fe/src/features/import-data/index.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-
-import {
-  importFollows,
-  importBlocks,
-  importMutes,
-} from 'pl-fe/actions/import-data';
-import Column from 'pl-fe/components/ui/column';
-import { useFeatures } from 'pl-fe/hooks/use-features';
-
-import DataImporter from './components/data-importer';
-
-const messages = defineMessages({
-  heading: { id: 'column.import_data', defaultMessage: 'Import data' },
-  submit: { id: 'import_data.actions.import', defaultMessage: 'Import' },
-});
-
-const followMessages = defineMessages({
-  input_label: { id: 'import_data.follows_label', defaultMessage: 'Follows' },
-  input_hint: { id: 'import_data.hints.follows', defaultMessage: 'CSV file containing a list of followed accounts' },
-  submit: { id: 'import_data.actions.import_follows', defaultMessage: 'Import follows' },
-});
-
-const blockMessages = defineMessages({
-  input_label: { id: 'import_data.blocks_label', defaultMessage: 'Blocks' },
-  input_hint: { id: 'import_data.hints.blocks', defaultMessage: 'CSV file containing a list of blocked accounts' },
-  submit: { id: 'import_data.actions.import_blocks', defaultMessage: 'Import blocks' },
-});
-
-const muteMessages = defineMessages({
-  input_label: { id: 'import_data.mutes_label', defaultMessage: 'Mutes' },
-  input_hint: { id: 'import_data.hints.mutes', defaultMessage: 'CSV file containing a list of muted accounts' },
-  submit: { id: 'import_data.actions.import_mutes', defaultMessage: 'Import mutes' },
-});
-
-const ImportData = () => {
-  const intl = useIntl();
-  const features = useFeatures();
-
-  return (
-    <Column label={intl.formatMessage(messages.heading)}>
-      {features.importFollows && <DataImporter action={importFollows} messages={followMessages} allowOverwrite={features.importOverwrite} />}
-      {features.importBlocks && <DataImporter action={importBlocks} messages={blockMessages} allowOverwrite={features.importOverwrite} />}
-      {features.importMutes && <DataImporter action={importMutes} messages={muteMessages} allowOverwrite={features.importOverwrite} />}
-    </Column>
-  );
-};
-
-export { ImportData as default };

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

@@ -15,10 +15,10 @@ import { useFeatures } from 'pl-fe/hooks/use-features';
 import { useInstance } from 'pl-fe/hooks/use-instance';
 import { usePlFeConfig } from 'pl-fe/hooks/use-pl-fe-config';
 import { useSettings } from 'pl-fe/hooks/use-settings';
+import { PaletteListItem } from 'pl-fe/pages/dashboard/theme-editor';
 import colors from 'pl-fe/utils/colors';
 import { isStandalone } from 'pl-fe/utils/state';
 
-import { PaletteListItem } from '../theme-editor';
 import ThemeToggle from '../ui/components/theme-toggle';
 
 import type { AppDispatch } from 'pl-fe/store';

packages/pl-fe/src/features/security/mfa-form.tsx

@@ -12,13 +12,6 @@ import DisableOtpForm from './mfa/disable-otp-form';
 import EnableOtpForm from './mfa/enable-otp-form';
 import OtpConfirmForm from './mfa/otp-confirm-form';
 
-/*
-Security settings page for user account
-Routed to /settings/mfa
-Includes following features:
-- Set up Multi-factor Auth
-*/
-
 const messages = defineMessages({
   heading: { id: 'column.mfa', defaultMessage: 'Multi-factor authentication' },
 });

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

@@ -5,12 +5,12 @@ 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/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 Announcements = lazy(() => import('pl-fe/pages/dashboard/announcements'));
+export const AuthTokenList = lazy(() => import('pl-fe/pages/settings/auth-token-list'));
 export const Backups = lazy(() => import('pl-fe/pages/settings/backups'));
-export const Blocks = lazy(() => import('pl-fe/features/blocks'));
+export const Blocks = lazy(() => import('pl-fe/pages/settings/blocks'));
 export const BookmarkFolders = lazy(() => import('pl-fe/features/bookmark-folders'));
-export const Bookmarks = lazy(() => import('pl-fe/features/bookmarks'));
+export const Bookmarks = lazy(() => import('pl-fe/pages/status-lists/bookmarks'));
 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'));
@@ -18,7 +18,7 @@ export const Circles = lazy(() => import('pl-fe/features/circles'));
 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'));
+export const Conversations = lazy(() => import('pl-fe/pages/status-lists/conversations'));
 export const CreateApp = lazy(() => import('pl-fe/features/developers/apps/create'));
 export const CryptoDonate = lazy(() => import('pl-fe/features/crypto-donate'));
 export const Dashboard = lazy(() => import('pl-fe/features/admin'));
@@ -36,9 +36,9 @@ 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'));
-export const ExportData = lazy(() => import('pl-fe/features/export-data'));
+export const ExportData = lazy(() => import('pl-fe/pages/settings/export-data'));
 export const ExternalLogin = lazy(() => import('pl-fe/features/external-login'));
-export const FavouritedStatuses = lazy(() => import('pl-fe/features/favourited-statuses'));
+export const FavouritedStatuses = lazy(() => import('pl-fe/pages/status-lists/favourited-statuses'));
 export const FederationRestrictions = lazy(() => import('pl-fe/features/federation-restrictions'));
 export const Filters = lazy(() => import('pl-fe/features/filters'));
 export const FollowedTags = lazy(() => import('pl-fe/features/followed-tags'));
@@ -52,11 +52,11 @@ export const GroupGallery = lazy(() => import('pl-fe/features/group/group-galler
 export const GroupMembers = lazy(() => import('pl-fe/features/group/group-members'));
 export const GroupMembershipRequests = lazy(() => import('pl-fe/features/group/group-membership-requests'));
 export const Groups = lazy(() => import('pl-fe/features/groups'));
-export const GroupTimeline = lazy(() => import('pl-fe/features/group/group-timeline'));
-export const HashtagTimeline = lazy(() => import('pl-fe/features/hashtag-timeline'));
-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 GroupTimeline = lazy(() => import('pl-fe/pages/timelines/group-timeline'));
+export const HashtagTimeline = lazy(() => import('pl-fe/pages/timelines/hashtag-timeline'));
+export const HomeTimeline = lazy(() => import('pl-fe/pages/timelines/home-timeline'));
+export const ImportData = lazy(() => import('pl-fe/pages/settings/import-data'));
+export const IntentionalError = lazy(() => import('pl-fe/pages/utils/intentional-error'));
 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/pages/timelines/landing-timeline'));
@@ -69,19 +69,19 @@ 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/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'));
+export const Mutes = lazy(() => import('pl-fe/pages/settings/mutes'));
+export const NewStatus = lazy(() => import('pl-fe/pages/utils/new-status'));
 export const Notifications = lazy(() => import('pl-fe/features/notifications'));
 export const OutgoingFollowRequests = lazy(() => import('pl-fe/features/follow-requests/components/outgoing-follow-requests'));
-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 PasswordReset = lazy(() => import('pl-fe/pages/auth/password-reset'));
+export const PinnedStatuses = lazy(() => import('pl-fe/pages/status-lists/pinned-statuses'));
 export const PlFeConfig = lazy(() => import('pl-fe/features/pl-fe-config'));
 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'));
-export const RemoteTimeline = lazy(() => import('pl-fe/features/remote-timeline'));
+export const RemoteTimeline = lazy(() => import('pl-fe/pages/timelines/remote-timeline'));
 export const Rules = lazy(() => import('pl-fe/features/admin/rules'));
 export const ScheduledStatuses = lazy(() => import('pl-fe/features/scheduled-statuses'));
 export const Search = lazy(() => import('pl-fe/features/search'));
@@ -89,12 +89,12 @@ 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/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 Share = lazy(() => import('pl-fe/pages/utils/share'));
 export const Status = lazy(() => import('pl-fe/features/status'));
 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'));
+export const ThemeEditor = lazy(() => import('pl-fe/pages/dashboard/theme-editor'));
+export const UrlPrivacy = lazy(() => import('pl-fe/pages/settings/url-privacy'));
+export const UserIndex = lazy(() => import('pl-fe/pages/dashboard/user-index'));
 
 // Panels
 export const AccountNotePanel = lazy(() => import('pl-fe/features/ui/components/panels/account-note-panel'));

packages/pl-fe/src/pages/auth/password-reset.tsx

@@ -19,7 +19,7 @@ const messages = defineMessages({
   confirmation: { id: 'password_reset.confirmation', defaultMessage: 'Check your email for confirmation.' },
 });
 
-const PasswordReset = () => {
+const PasswordResetPage = () => {
   const dispatch = useAppDispatch();
   const intl = useIntl();
   const features = useFeatures();
@@ -63,4 +63,4 @@ const PasswordReset = () => {
   );
 };
 
-export { PasswordReset as default };
+export { PasswordResetPage as default };

packages/pl-fe/src/pages/dashboard/theme-editor.tsx

@@ -12,6 +12,7 @@ import Column from 'pl-fe/components/ui/column';
 import Form from 'pl-fe/components/ui/form';
 import FormActions from 'pl-fe/components/ui/form-actions';
 import ColorPicker from 'pl-fe/features/pl-fe-config/components/color-picker';
+import Palette, { ColorGroup } from 'pl-fe/features/theme-editor/components/palette';
 import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
 import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
 import { usePlFeConfig } from 'pl-fe/hooks/use-pl-fe-config';
@@ -20,8 +21,6 @@ import { plFeConfigSchema } from 'pl-fe/normalizers/pl-fe/pl-fe-config';
 import toast from 'pl-fe/toast';
 import { download } from 'pl-fe/utils/download';
 
-import Palette, { ColorGroup } from './components/palette';
-
 import type { ColorChangeHandler } from 'react-color';
 
 const messages = defineMessages({
@@ -47,7 +46,7 @@ interface IThemeEditor {
 }
 
 /** UI for editing Tailwind theme colors. */
-const ThemeEditor: React.FC<IThemeEditor> = () => {
+const ThemeEditorPage: React.FC<IThemeEditor> = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
@@ -285,4 +284,4 @@ const ColorListItem: React.FC<IColorListItem> = ({ label, value, onChange }) =>
   );
 };
 
-export { ThemeEditor as default, PaletteListItem };
+export { ThemeEditorPage as default, PaletteListItem };

packages/pl-fe/src/pages/dashboard/user-index.tsx

@@ -16,7 +16,7 @@ const messages = defineMessages({
   searchPlaceholder: { id: 'admin.user_index.search_input_placeholder', defaultMessage: 'Who are you looking for?' },
 });
 
-const UserIndex: React.FC = () => {
+const UserIndexPage: React.FC = () => {
   const dispatch = useAppDispatch();
   const intl = useIntl();
 
@@ -68,4 +68,4 @@ const UserIndex: React.FC = () => {
   );
 };
 
-export { UserIndex as default };
+export { UserIndexPage as default };

packages/pl-fe/src/pages/settings/auth-token-list.tsx

@@ -144,7 +144,7 @@ const AuthToken: React.FC<IAuthToken> = ({ token, isCurrent }) => {
   );
 };
 
-const AuthTokenList: React.FC = () => {
+const AuthTokenListPage: React.FC = () => {
   const intl = useIntl();
 
   const { data: tokens } = useInfiniteQuery(oauthTokensQueryOptions);
@@ -178,4 +178,4 @@ const AuthTokenList: React.FC = () => {
   );
 };
 
-export { AuthTokenList as default };
+export { AuthTokenListPage as default };

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

@@ -11,7 +11,7 @@ const messages = defineMessages({
   heading: { id: 'column.blocks', defaultMessage: 'Blocks' },
 });
 
-const Blocks: React.FC = () => {
+const BlocksPage: React.FC = () => {
   const intl = useIntl();
 
   const {
@@ -49,4 +49,4 @@ const Blocks: React.FC = () => {
   );
 };
 
-export { Blocks as default };
+export { BlocksPage as default };

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

@@ -1,14 +1,57 @@
-import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import React, { useState } from 'react';
+import { defineMessages, useIntl, type MessageDescriptor } from 'react-intl';
 
 import {
   exportFollows,
   exportBlocks,
   exportMutes,
 } from 'pl-fe/actions/export-data';
+import Button from 'pl-fe/components/ui/button';
 import Column from 'pl-fe/components/ui/column';
+import Form from 'pl-fe/components/ui/form';
+import FormActions from 'pl-fe/components/ui/form-actions';
+import Text from 'pl-fe/components/ui/text';
+import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
 
-import CSVExporter from './components/csv-exporter';
+import type { AppDispatch, RootState } from 'pl-fe/store';
+
+interface ICSVExporter {
+  messages: {
+    input_label: MessageDescriptor;
+    input_hint: MessageDescriptor;
+    submit: MessageDescriptor;
+  };
+  action: () => (dispatch: AppDispatch, getState: () => RootState) => Promise<any>;
+}
+
+const CSVExporter: React.FC<ICSVExporter> = ({ messages, action }) => {
+  const dispatch = useAppDispatch();
+  const intl = useIntl();
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleClick: React.MouseEventHandler = (event) => {
+    setIsLoading(true);
+    dispatch(action()).then(() => {
+      setIsLoading(false);
+    }).catch(() => {
+      setIsLoading(false);
+    });
+  };
+
+  return (
+    <Form>
+      <Text size='xl' weight='bold'>{intl.formatMessage(messages.input_label)}</Text>
+      <Text theme='muted'>{intl.formatMessage(messages.input_hint)}</Text>
+
+      <FormActions>
+        <Button theme='primary' onClick={handleClick} disabled={isLoading}>
+          {intl.formatMessage(messages.submit)}
+        </Button>
+      </FormActions>
+    </Form>
+  );
+};
 
 const messages = defineMessages({
   heading: { id: 'column.export_data', defaultMessage: 'Export data' },
@@ -33,7 +76,7 @@ const muteMessages = defineMessages({
   submit: { id: 'export_data.actions.export_mutes', defaultMessage: 'Export mutes' },
 });
 
-const ExportData = () => {
+const ExportDataPage = () => {
   const intl = useIntl();
 
   return (
@@ -45,4 +88,4 @@ const ExportData = () => {
   );
 };
 
-export { ExportData as default };
+export { ExportDataPage as default };

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

@@ -1,8 +1,14 @@
 import React, { useState } from 'react';
-import { FormattedMessage, MessageDescriptor, useIntl } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl, type MessageDescriptor } from 'react-intl';
 
+import {
+  importFollows,
+  importBlocks,
+  importMutes,
+} from 'pl-fe/actions/import-data';
 import List, { ListItem } from 'pl-fe/components/list';
 import Button from 'pl-fe/components/ui/button';
+import Column from 'pl-fe/components/ui/column';
 import FileInput from 'pl-fe/components/ui/file-input';
 import Form from 'pl-fe/components/ui/form';
 import FormActions from 'pl-fe/components/ui/form-actions';
@@ -10,9 +16,33 @@ import FormGroup from 'pl-fe/components/ui/form-group';
 import Text from 'pl-fe/components/ui/text';
 import Toggle from 'pl-fe/components/ui/toggle';
 import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
+import { useFeatures } from 'pl-fe/hooks/use-features';
 
 import type { AppDispatch, RootState } from 'pl-fe/store';
 
+const messages = defineMessages({
+  heading: { id: 'column.import_data', defaultMessage: 'Import data' },
+  submit: { id: 'import_data.actions.import', defaultMessage: 'Import' },
+});
+
+const followMessages = defineMessages({
+  input_label: { id: 'import_data.follows_label', defaultMessage: 'Follows' },
+  input_hint: { id: 'import_data.hints.follows', defaultMessage: 'CSV file containing a list of followed accounts' },
+  submit: { id: 'import_data.actions.import_follows', defaultMessage: 'Import follows' },
+});
+
+const blockMessages = defineMessages({
+  input_label: { id: 'import_data.blocks_label', defaultMessage: 'Blocks' },
+  input_hint: { id: 'import_data.hints.blocks', defaultMessage: 'CSV file containing a list of blocked accounts' },
+  submit: { id: 'import_data.actions.import_blocks', defaultMessage: 'Import blocks' },
+});
+
+const muteMessages = defineMessages({
+  input_label: { id: 'import_data.mutes_label', defaultMessage: 'Mutes' },
+  input_hint: { id: 'import_data.hints.mutes', defaultMessage: 'CSV file containing a list of muted accounts' },
+  submit: { id: 'import_data.actions.import_mutes', defaultMessage: 'Import mutes' },
+});
+
 interface IDataImporter {
   messages: {
     input_label: MessageDescriptor;
@@ -83,4 +113,17 @@ const DataImporter: React.FC<IDataImporter> = ({ messages, action, accept = '.cs
   );
 };
 
-export { DataImporter as default };
+const ImportDataPage = () => {
+  const intl = useIntl();
+  const features = useFeatures();
+
+  return (
+    <Column label={intl.formatMessage(messages.heading)}>
+      {features.importFollows && <DataImporter action={importFollows} messages={followMessages} allowOverwrite={features.importOverwrite} />}
+      {features.importBlocks && <DataImporter action={importBlocks} messages={blockMessages} allowOverwrite={features.importOverwrite} />}
+      {features.importMutes && <DataImporter action={importMutes} messages={muteMessages} allowOverwrite={features.importOverwrite} />}
+    </Column>
+  );
+};
+
+export { ImportDataPage as default };

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

@@ -11,7 +11,7 @@ const messages = defineMessages({
   heading: { id: 'column.mutes', defaultMessage: 'Mutes' },
 });
 
-const Mutes: React.FC = () => {
+const MutesPage: React.FC = () => {
   const intl = useIntl();
 
   const {
@@ -48,4 +48,4 @@ const Mutes: React.FC = () => {
   );
 };
 
-export { Mutes as default };
+export { MutesPage as default };

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

@@ -13,14 +13,13 @@ import FormActions from 'pl-fe/components/ui/form-actions';
 import FormGroup from 'pl-fe/components/ui/form-group';
 import Input from 'pl-fe/components/ui/input';
 import Toggle from 'pl-fe/components/ui/toggle';
+import { SelectDropdown } from 'pl-fe/features/forms';
 import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
 import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
 import { useSettings } from 'pl-fe/hooks/use-settings';
 import KVStore from 'pl-fe/storage/kv-store';
 import { KVStoreRedirectServicesItem } from 'pl-fe/utils/url-purify';
 
-import { SelectDropdown } from '../forms';
-
 const messages = defineMessages({
   urlPrivacy: { id: 'settings.url_privacy', defaultMessage: 'URL privacy' },
   rulesUrlPlaceholder: { id: 'url_privacy.rules_url.placeholder', defaultMessage: 'Rules URL' },

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

@@ -37,7 +37,7 @@ interface IBookmarks {
   };
 }
 
-const Bookmarks: React.FC<IBookmarks> = ({ params }) => {
+const BookmarksPage: React.FC<IBookmarks> = ({ params }) => {
   const dispatch = useAppDispatch();
   const intl = useIntl();
   const history = useHistory();
@@ -126,4 +126,4 @@ const Bookmarks: React.FC<IBookmarks> = ({ params }) => {
   );
 };
 
-export { Bookmarks as default };
+export { BookmarksPage as default };

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

@@ -6,10 +6,9 @@ import { mountConversations, unmountConversations, expandConversations } from 'p
 import { useDirectStream } from 'pl-fe/api/hooks/streaming/use-direct-stream';
 import AccountSearch from 'pl-fe/components/account-search';
 import Column from 'pl-fe/components/ui/column';
+import ConversationsList from 'pl-fe/features/conversations/components/conversations-list';
 import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
 
-import ConversationsList from './components/conversations-list';
-
 const messages = defineMessages({
   title: { id: 'column.direct', defaultMessage: 'Direct messages' },
   searchPlaceholder: { id: 'direct.search_placeholder', defaultMessage: 'Send a message to…' },

packages/pl-fe/src/pages/status-lists/favourited-statuses.tsx

@@ -23,7 +23,7 @@ interface IFavourites {
 }
 
 /** Timeline displaying a user's favourited statuses. */
-const Favourites: React.FC<IFavourites> = ({ params }) => {
+const FavouritedStatusesPage: React.FC<IFavourites> = ({ params }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
   const { account: ownAccount } = useOwnAccount();
@@ -99,4 +99,4 @@ const Favourites: React.FC<IFavourites> = ({ params }) => {
   );
 };
 
-export { Favourites as default };
+export { FavouritedStatusesPage as default };

packages/pl-fe/src/pages/status-lists/pinned-statuses.tsx

@@ -14,7 +14,7 @@ const messages = defineMessages({
   heading: { id: 'column.pins', defaultMessage: 'Pinned posts' },
 });
 
-const PinnedStatuses = () => {
+const PinnedStatusesPage = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
   const { username } = useParams<{ username: string }>();
@@ -49,4 +49,4 @@ const PinnedStatuses = () => {
   );
 };
 
-export { PinnedStatuses as default };
+export { PinnedStatusesPage as default };

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

@@ -18,18 +18,18 @@ import { useDraggedFiles } from 'pl-fe/hooks/use-dragged-files';
 import { useOwnAccount } from 'pl-fe/hooks/use-own-account';
 import { makeGetStatusIds } from 'pl-fe/selectors';
 
-import Timeline from '../ui/components/timeline';
-import { ComposeForm } from '../ui/util/async-components';
+import Timeline from '../../features/ui/components/timeline';
+import { ComposeForm } from '../../features/ui/util/async-components';
 
 type RouteParams = { groupId: string };
 
-interface IGroupTimeline {
+interface IGroupTimelinePage {
   params: RouteParams;
 }
 
 const getStatusIds = makeGetStatusIds();
 
-const GroupTimeline: React.FC<IGroupTimeline> = (props) => {
+const GroupTimelinePage: React.FC<IGroupTimelinePage> = (props) => {
   const intl = useIntl();
   const { account } = useOwnAccount();
   const dispatch = useAppDispatch();
@@ -119,4 +119,4 @@ const GroupTimeline: React.FC<IGroupTimeline> = (props) => {
   );
 };
 
-export { GroupTimeline as default };
+export { GroupTimelinePage as default };

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

@@ -15,13 +15,13 @@ import { useTheme } from 'pl-fe/hooks/use-theme';
 import { useFollowHashtagMutation, useUnfollowHashtagMutation } from 'pl-fe/queries/hashtags/use-followed-tags';
 import { useHashtag } from 'pl-fe/queries/hashtags/use-hashtag';
 
-interface IHashtagTimeline {
+interface IHashtagTimelinePage {
   params?: {
     id?: string;
   };
 }
 
-const HashtagTimeline: React.FC<IHashtagTimeline> = ({ params }) => {
+const HashtagTimelinePage: React.FC<IHashtagTimelinePage> = ({ params }) => {
   const tagId = params?.id || '';
 
   const features = useFeatures();
@@ -81,4 +81,4 @@ const HashtagTimeline: React.FC<IHashtagTimeline> = ({ params }) => {
   );
 };
 
-export { HashtagTimeline as default };
+export { HashtagTimelinePage as default };

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

@@ -19,7 +19,7 @@ const messages = defineMessages({
   title: { id: 'column.home', defaultMessage: 'Home' },
 });
 
-const HomeTimeline: React.FC = () => {
+const HomeTimelinePage: React.FC = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
   const features = useFeatures();
@@ -109,4 +109,4 @@ const HomeTimeline: React.FC = () => {
   );
 };
 
-export { HomeTimeline as default };
+export { HomeTimelinePage as default };

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

@@ -8,23 +8,21 @@ import IconButton from 'pl-fe/components/icon-button';
 import Column from 'pl-fe/components/ui/column';
 import HStack from 'pl-fe/components/ui/hstack';
 import Text from 'pl-fe/components/ui/text';
+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 { 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';
-
-import PinnedHostsPicker from './components/pinned-hosts-picker';
-
-interface IRemoteTimeline {
+interface IRemoteTimelinePage {
   params?: {
     instance?: string;
   };
 }
 
 /** View statuses from a remote instance. */
-const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
+const RemoteTimelinePage: React.FC<IRemoteTimelinePage> = ({ params }) => {
   const history = useHistory();
   const dispatch = useAppDispatch();
   const theme = useTheme();
@@ -88,4 +86,4 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
   );
 };
 
-export { RemoteTimeline as default };
+export { RemoteTimelinePage as default };

packages/pl-fe/src/pages/utils/intentional-error.tsx

@@ -4,8 +4,8 @@ import React from 'react';
  * IntentionalError:
  * For testing logging/monitoring & previewing ErrorBoundary design.
  */
-const IntentionalError: React.FC = () => {
+const IntentionalErrorPage: React.FC = () => {
   throw new Error('This error is intentional.');
 };
 
-export { IntentionalError as default };
+export { IntentionalErrorPage as default };

packages/pl-fe/src/pages/utils/new-status.tsx

@@ -3,7 +3,7 @@ import { Redirect } from 'react-router-dom';
 
 import { useModalsStore } from 'pl-fe/stores/modals';
 
-const NewStatus = () => {
+const NewStatusPage = () => {
   const { openModal } = useModalsStore();
 
   useEffect(() => {
@@ -15,4 +15,4 @@ const NewStatus = () => {
   );
 };
 
-export { NewStatus as default };
+export { NewStatusPage as default };

packages/pl-fe/src/pages/utils/share.tsx

@@ -4,7 +4,7 @@ import { useHistory, useLocation } from 'react-router-dom';
 import { openComposeWithText } from 'pl-fe/actions/compose';
 import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
 
-const Share: React.FC = () => {
+const SharePage: React.FC = () => {
   const dispatch = useAppDispatch();
   const history = useHistory();
 
@@ -31,4 +31,4 @@ const Share: React.FC = () => {
   return null;
 };
 
-export { Share as default };
+export { SharePage as default };