diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/badges.tsx b/app/javascript/flavours/glitch/components/account_header/badges.tsx similarity index 98% rename from app/javascript/flavours/glitch/features/account_timeline/components/badges.tsx rename to app/javascript/flavours/glitch/components/account_header/badges.tsx index 96aaa60a01..a34fed109f 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/badges.tsx +++ b/app/javascript/flavours/glitch/components/account_header/badges.tsx @@ -4,6 +4,10 @@ import type { FC } from 'react'; import { FormattedMessage } from 'react-intl'; import { fetchRelationships } from '@/flavours/glitch/actions/accounts'; +import { useAccount } from '@/flavours/glitch/hooks/useAccount'; +import type { AccountRole } from '@/flavours/glitch/models/account'; +import { useAppDispatch, useAppSelector } from '@/flavours/glitch/store'; + import { AdminBadge, AutomatedBadge, @@ -11,10 +15,7 @@ import { BlockedBadge, GroupBadge, MutedBadge, -} from '@/flavours/glitch/components/badge'; -import { useAccount } from '@/flavours/glitch/hooks/useAccount'; -import type { AccountRole } from '@/flavours/glitch/models/account'; -import { useAppDispatch, useAppSelector } from '@/flavours/glitch/store'; +} from '../badge'; import classes from './styles.module.scss'; diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/buttons.tsx b/app/javascript/flavours/glitch/components/account_header/buttons.tsx similarity index 94% rename from app/javascript/flavours/glitch/features/account_timeline/components/buttons.tsx rename to app/javascript/flavours/glitch/components/account_header/buttons.tsx index 50d96536b5..e8e286a0da 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/buttons.tsx +++ b/app/javascript/flavours/glitch/components/account_header/buttons.tsx @@ -6,9 +6,6 @@ import { defineMessages, useIntl } from 'react-intl'; import classNames from 'classnames'; import { followAccount } from '@/flavours/glitch/actions/accounts'; -import { CopyIconButton } from '@/flavours/glitch/components/copy_icon_button'; -import { FollowButton } from '@/flavours/glitch/components/follow_button'; -import { IconButton } from '@/flavours/glitch/components/icon_button'; import { useAccount } from '@/flavours/glitch/hooks/useAccount'; import { getAccountHidden } from '@/flavours/glitch/selectors/accounts'; import { useAppDispatch, useAppSelector } from '@/flavours/glitch/store'; @@ -16,6 +13,10 @@ import NotificationsIcon from '@/material-icons/400-24px/notifications.svg?react import NotificationsActiveIcon from '@/material-icons/400-24px/notifications_active-fill.svg?react'; import ShareIcon from '@/material-icons/400-24px/share.svg?react'; +import { CopyIconButton } from '../copy_icon_button'; +import { FollowButton } from '../follow_button'; +import { IconButton } from '../icon_button'; + import { AccountMenu } from './menu'; const messages = defineMessages({ diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/fields.tsx b/app/javascript/flavours/glitch/components/account_header/fields.tsx similarity index 93% rename from app/javascript/flavours/glitch/features/account_timeline/components/fields.tsx rename to app/javascript/flavours/glitch/components/account_header/fields.tsx index 134eab1308..1de53eec46 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/fields.tsx +++ b/app/javascript/flavours/glitch/components/account_header/fields.tsx @@ -6,22 +6,22 @@ import { defineMessage, useIntl } from 'react-intl'; import classNames from 'classnames'; import { openModal } from '@/flavours/glitch/actions/modal'; -import { CustomEmojiProvider } from '@/flavours/glitch/components/emoji/context'; -import type { EmojiHTMLProps } from '@/flavours/glitch/components/emoji/html'; -import { EmojiHTML } from '@/flavours/glitch/components/emoji/html'; -import { Icon } from '@/flavours/glitch/components/icon'; -import { IconButton } from '@/flavours/glitch/components/icon_button'; -import { MiniCard } from '@/flavours/glitch/components/mini_card'; -import { useElementHandledLink } from '@/flavours/glitch/components/status/handled_link'; +import { useFieldHtml } from '@/flavours/glitch/features/account_timeline/hooks/useFieldHtml'; +import { cleanExtraEmojis } from '@/flavours/glitch/features/emoji/normalize'; import { useAccount } from '@/flavours/glitch/hooks/useAccount'; import { useResizeObserver } from '@/flavours/glitch/hooks/useObserver'; +import type { AccountFieldShape } from '@/flavours/glitch/models/account'; import { useAppDispatch } from '@/flavours/glitch/store'; import IconVerified from '@/images/icons/icon_verified.svg?react'; import MoreIcon from '@/material-icons/400-24px/more_horiz.svg?react'; -import { cleanExtraEmojis } from '../../emoji/normalize'; -import type { AccountField } from '../common'; -import { useFieldHtml } from '../hooks/useFieldHtml'; +import { CustomEmojiProvider } from '../emoji/context'; +import type { EmojiHTMLProps } from '../emoji/html'; +import { EmojiHTML } from '../emoji/html'; +import { Icon } from '../icon'; +import { IconButton } from '../icon_button'; +import { MiniCard } from '../mini_card'; +import { useElementHandledLink } from '../status/handled_link'; import classes from './styles.module.scss'; @@ -37,6 +37,12 @@ const dateFormatOptions: Intl.DateTimeFormatOptions = { minute: '2-digit', }; +export interface AccountField extends AccountFieldShape { + nameHasEmojis: boolean; + value_plain: string; + valueHasEmojis: boolean; +} + export const AccountHeaderFields: FC<{ accountId: string }> = ({ accountId, }) => { diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/account_header.tsx b/app/javascript/flavours/glitch/components/account_header/index.tsx similarity index 91% rename from app/javascript/flavours/glitch/features/account_timeline/components/account_header.tsx rename to app/javascript/flavours/glitch/components/account_header/index.tsx index 4c41ae98d9..565b9aaefb 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/account_header.tsx +++ b/app/javascript/flavours/glitch/components/account_header/index.tsx @@ -4,9 +4,6 @@ import classNames from 'classnames'; import { Helmet } from 'react-helmet'; import { openModal } from '@/flavours/glitch/actions/modal'; -import { AccountBio } from '@/flavours/glitch/components/account_bio'; -import { Avatar } from '@/flavours/glitch/components/avatar'; -import { AnimateEmojiProvider } from '@/flavours/glitch/components/emoji/context'; import FollowRequestNoteContainer from '@/flavours/glitch/features/account/containers/follow_request_note_container'; import { useLayout } from '@/flavours/glitch/hooks/useLayout'; import { useVisibility } from '@/flavours/glitch/hooks/useVisibility'; @@ -19,18 +16,20 @@ import type { Account } from '@/flavours/glitch/models/account'; import { getAccountHidden } from '@/flavours/glitch/selectors/accounts'; import { useAppSelector, useAppDispatch } from '@/flavours/glitch/store'; -import { FamiliarFollowers } from '../../../components/familiar_followers'; +import { AccountBio } from '../account_bio'; +import { Avatar } from '../avatar'; +import { AnimateEmojiProvider } from '../emoji/context'; +import { FamiliarFollowers } from '../familiar_followers'; -import { AccountName } from './account_name'; -import { AccountSubscriptionForm } from './account_subscription_form'; import { AccountButtons } from './buttons'; import { AccountHeaderFields } from './fields'; -import { AccountInfo } from './info'; import { MemorialNote } from './memorial_note'; import { MovedNote } from './moved_note'; +import { AccountName } from './name'; import { AccountNote } from './note'; import { AccountNumberFields } from './number_fields'; import classes from './styles.module.scss'; +import { AccountSubscriptionForm } from './subscription_form'; import { AccountTabs } from './tabs'; const titleFromAccount = (account: Account) => { @@ -113,10 +112,6 @@ export const AccountHeader: React.FC<{ )}
- {me !== account.id && relationship && ( - - )} - {!suspendedOrHidden && ( = ({ accountId }) => { diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/moved_note.tsx b/app/javascript/flavours/glitch/components/account_header/moved_note.tsx similarity index 86% rename from app/javascript/flavours/glitch/features/account_timeline/components/moved_note.tsx rename to app/javascript/flavours/glitch/components/account_header/moved_note.tsx index 801d171130..ffb3e5bfed 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/moved_note.tsx +++ b/app/javascript/flavours/glitch/components/account_header/moved_note.tsx @@ -1,10 +1,11 @@ import { FormattedMessage } from 'react-intl'; -import { DisplayName } from '@/flavours/glitch/components/display_name'; -import { AvatarOverlay } from 'flavours/glitch/components/avatar_overlay'; -import { Permalink } from 'flavours/glitch/components/permalink'; import { useAppSelector } from 'flavours/glitch/store'; +import { AvatarOverlay } from '../avatar_overlay'; +import { DisplayName } from '../display_name'; +import { Permalink } from '../permalink'; + export const MovedNote: React.FC<{ accountId: string; targetAccountId: string; diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/account_name.tsx b/app/javascript/flavours/glitch/components/account_header/name.tsx similarity index 96% rename from app/javascript/flavours/glitch/features/account_timeline/components/account_name.tsx rename to app/javascript/flavours/glitch/components/account_header/name.tsx index 3798f7571b..fadfe81bd7 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/account_name.tsx +++ b/app/javascript/flavours/glitch/components/account_header/name.tsx @@ -8,10 +8,6 @@ import classNames from 'classnames'; import Overlay from 'react-overlays/esm/Overlay'; import { showAlert } from '@/flavours/glitch/actions/alerts'; -import { FollowsYouBadge } from '@/flavours/glitch/components/badge'; -import { Button } from '@/flavours/glitch/components/button'; -import { DisplayName } from '@/flavours/glitch/components/display_name'; -import { Icon } from '@/flavours/glitch/components/icon'; import { useAccount } from '@/flavours/glitch/hooks/useAccount'; import { useRelationship } from '@/flavours/glitch/hooks/useRelationship'; import { useAppDispatch, useAppSelector } from '@/flavours/glitch/store'; @@ -20,6 +16,11 @@ import ContentCopyIcon from '@/material-icons/400-24px/content_copy.svg?react'; import HelpIcon from '@/material-icons/400-24px/help.svg?react'; import DomainIcon from '@/material-icons/400-24px/language.svg?react'; +import { FollowsYouBadge } from '../badge'; +import { Button } from '../button'; +import { DisplayName } from '../display_name'; +import { Icon } from '../icon'; + import { AccountBadges } from './badges'; import classes from './styles.module.scss'; diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/note.tsx b/app/javascript/flavours/glitch/components/account_header/note.tsx similarity index 92% rename from app/javascript/flavours/glitch/features/account_timeline/components/note.tsx rename to app/javascript/flavours/glitch/components/account_header/note.tsx index 80beea8049..ce68b5492a 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/note.tsx +++ b/app/javascript/flavours/glitch/components/account_header/note.tsx @@ -5,11 +5,12 @@ import { defineMessages, useIntl } from 'react-intl'; import { fetchRelationships } from '@/flavours/glitch/actions/accounts'; import { openModal } from '@/flavours/glitch/actions/modal'; -import { Callout } from '@/flavours/glitch/components/callout'; -import { IconButton } from '@/flavours/glitch/components/icon_button'; import { useAppDispatch, useAppSelector } from '@/flavours/glitch/store'; import EditIcon from '@/material-icons/400-24px/edit_square.svg?react'; +import { Callout } from '../callout'; +import { IconButton } from '../icon_button'; + import classes from './styles.module.scss'; const messages = defineMessages({ diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/number_fields.tsx b/app/javascript/flavours/glitch/components/account_header/number_fields.tsx similarity index 90% rename from app/javascript/flavours/glitch/features/account_timeline/components/number_fields.tsx rename to app/javascript/flavours/glitch/components/account_header/number_fields.tsx index 15842da458..62eb36957a 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/number_fields.tsx +++ b/app/javascript/flavours/glitch/components/account_header/number_fields.tsx @@ -4,15 +4,13 @@ import type { FC } from 'react'; import { FormattedMessage, useIntl } from 'react-intl'; import { openModal } from '@/flavours/glitch/actions/modal'; -import { FormattedDateWrapper } from '@/flavours/glitch/components/formatted_date'; -import { - NumberFields, - NumberFieldsItem, -} from '@/flavours/glitch/components/number_fields'; -import { ShortNumber } from '@/flavours/glitch/components/short_number'; import { useAccount } from '@/flavours/glitch/hooks/useAccount'; import { useAppDispatch } from '@/flavours/glitch/store'; +import { FormattedDateWrapper } from '../formatted_date'; +import { NumberFields, NumberFieldsItem } from '../number_fields'; +import { ShortNumber } from '../short_number'; + export const AccountNumberFields: FC<{ accountId: string }> = ({ accountId, }) => { diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/styles.module.scss b/app/javascript/flavours/glitch/components/account_header/styles.module.scss similarity index 100% rename from app/javascript/flavours/glitch/features/account_timeline/components/styles.module.scss rename to app/javascript/flavours/glitch/components/account_header/styles.module.scss diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/account_subscription_form.tsx b/app/javascript/flavours/glitch/components/account_header/subscription_form.tsx similarity index 91% rename from app/javascript/flavours/glitch/features/account_timeline/components/account_subscription_form.tsx rename to app/javascript/flavours/glitch/components/account_header/subscription_form.tsx index d5dd05e417..ef1f5a7e85 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/account_subscription_form.tsx +++ b/app/javascript/flavours/glitch/components/account_header/subscription_form.tsx @@ -8,16 +8,17 @@ import { Link } from 'react-router-dom'; import { AxiosError } from 'axios'; -import { apiSubscribeByEmail } from 'flavours/glitch/api/accounts'; +import { apiSubscribeByEmail } from '@/flavours/glitch/api/accounts'; import type { ValidationErrorResponse, ValidationError, -} from 'flavours/glitch/api_types/errors'; -import { Button } from 'flavours/glitch/components/button'; -import { DisplayName } from 'flavours/glitch/components/display_name'; -import type { FieldStatus } from 'flavours/glitch/components/form_fields'; -import { TextInputField } from 'flavours/glitch/components/form_fields/text_input_field'; -import { useAppSelector } from 'flavours/glitch/store'; +} from '@/flavours/glitch/api_types/errors'; +import { useAppSelector } from '@/flavours/glitch/store'; + +import { Button } from '../button'; +import { DisplayName } from '../display_name'; +import type { FieldStatus } from '../form_fields'; +import { TextInputField } from '../form_fields/text_input_field'; import classes from './styles.module.scss'; diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/tabs.tsx b/app/javascript/flavours/glitch/components/account_header/tabs.tsx similarity index 94% rename from app/javascript/flavours/glitch/features/account_timeline/components/tabs.tsx rename to app/javascript/flavours/glitch/components/account_header/tabs.tsx index b19211a680..6731fea7e5 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/tabs.tsx +++ b/app/javascript/flavours/glitch/components/account_header/tabs.tsx @@ -4,10 +4,11 @@ import { FormattedMessage } from 'react-intl'; import type { NavLinkProps } from 'react-router-dom'; -import { TabLink, TabList } from '@/flavours/glitch/components/tab_list'; import { useAccount } from '@/flavours/glitch/hooks/useAccount'; import { useAccountId } from '@/flavours/glitch/hooks/useAccountId'; +import { TabLink, TabList } from '../tab_list'; + import classes from './styles.module.scss'; const isActive: Required['isActive'] = (match, location) => diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/limited_account_hint.tsx b/app/javascript/flavours/glitch/components/limited_account_hint.tsx similarity index 76% rename from app/javascript/flavours/glitch/features/account_timeline/components/limited_account_hint.tsx rename to app/javascript/flavours/glitch/components/limited_account_hint.tsx index 5613811d2f..6332156f27 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/limited_account_hint.tsx +++ b/app/javascript/flavours/glitch/components/limited_account_hint.tsx @@ -2,10 +2,11 @@ import { useCallback } from 'react'; import { FormattedMessage } from 'react-intl'; -import { revealAccount } from 'flavours/glitch/actions/accounts_typed'; -import { Button } from 'flavours/glitch/components/button'; -import { domain } from 'flavours/glitch/initial_state'; -import { useAppDispatch } from 'flavours/glitch/store'; +import { revealAccount } from '@/flavours/glitch/actions/accounts_typed'; +import { domain } from '@/flavours/glitch/initial_state'; +import { useAppDispatch } from '@/flavours/glitch/store'; + +import { Button } from './button'; export const LimitedAccountHint: React.FC<{ accountId: string }> = ({ accountId, diff --git a/app/javascript/flavours/glitch/components/status_list.jsx b/app/javascript/flavours/glitch/components/status_list.jsx index f1c45c2fef..ab3bdccb40 100644 --- a/app/javascript/flavours/glitch/components/status_list.jsx +++ b/app/javascript/flavours/glitch/components/status_list.jsx @@ -8,7 +8,7 @@ import { debounce } from 'lodash'; import { TIMELINE_GAP, TIMELINE_PINNED_VIEW_ALL, TIMELINE_SUGGESTIONS } from 'flavours/glitch/actions/timelines'; import { RegenerationIndicator } from 'flavours/glitch/components/regeneration_indicator'; import { InlineFollowSuggestions } from 'flavours/glitch/features/home_timeline/components/inline_follow_suggestions'; -import { PinnedShowAllButton } from '@/flavours/glitch/features/account_timeline/v2/pinned_statuses'; +import { PinnedShowAllButton } from '@/flavours/glitch/features/account_timeline/components/pinned_statuses'; import { StatusQuoteManager } from '../components/status_quoted'; diff --git a/app/javascript/flavours/glitch/features/account_featured/components/empty_message.tsx b/app/javascript/flavours/glitch/features/account_featured/components/empty_message.tsx index 83ab894824..a2b723e3e6 100644 --- a/app/javascript/flavours/glitch/features/account_featured/components/empty_message.tsx +++ b/app/javascript/flavours/glitch/features/account_featured/components/empty_message.tsx @@ -8,7 +8,7 @@ import { Link } from 'react-router-dom'; import { openModal } from '@/flavours/glitch/actions/modal'; import { Button } from '@/flavours/glitch/components/button'; import { EmptyState } from '@/flavours/glitch/components/empty_state'; -import { LimitedAccountHint } from '@/flavours/glitch/features/account_timeline/components/limited_account_hint'; +import { LimitedAccountHint } from '@/flavours/glitch/components/limited_account_hint'; import { areCollectionsEnabled } from '@/flavours/glitch/features/collections/utils'; import { useCurrentAccountId } from '@/flavours/glitch/hooks/useAccountId'; import { useAppDispatch } from '@/flavours/glitch/store'; diff --git a/app/javascript/flavours/glitch/features/account_featured/index.tsx b/app/javascript/flavours/glitch/features/account_featured/index.tsx index c5568745f6..f38a4eda40 100644 --- a/app/javascript/flavours/glitch/features/account_featured/index.tsx +++ b/app/javascript/flavours/glitch/features/account_featured/index.tsx @@ -6,26 +6,26 @@ import { useHistory } from 'react-router'; import { List as ImmutableList } from 'immutable'; -import AddIcon from '@/material-icons/400-24px/add.svg?react'; -import { fetchEndorsedAccounts } from 'flavours/glitch/actions/accounts'; -import { AccountListItem } from 'flavours/glitch/components/account_list_item'; -import { ColumnBackButton } from 'flavours/glitch/components/column_back_button'; -import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator'; -import { RemoteHint } from 'flavours/glitch/components/remote_hint'; +import { fetchEndorsedAccounts } from '@/flavours/glitch/actions/accounts'; +import { AccountHeader } from '@/flavours/glitch/components/account_header'; +import { AccountListItem } from '@/flavours/glitch/components/account_list_item'; +import { ColumnBackButton } from '@/flavours/glitch/components/column_back_button'; +import { LoadingIndicator } from '@/flavours/glitch/components/loading_indicator'; +import { RemoteHint } from '@/flavours/glitch/components/remote_hint'; import { Article, ItemList, Scrollable, -} from 'flavours/glitch/components/scrollable_list/components'; -import type { TruncatedListItemInfo } from 'flavours/glitch/components/truncated_list'; -import { TruncatedListItems } from 'flavours/glitch/components/truncated_list'; -import { AccountHeader } from 'flavours/glitch/features/account_timeline/components/account_header'; -import BundleColumnError from 'flavours/glitch/features/ui/components/bundle_column_error'; -import Column from 'flavours/glitch/features/ui/components/column'; -import { useAccount } from 'flavours/glitch/hooks/useAccount'; -import { useAccountId } from 'flavours/glitch/hooks/useAccountId'; -import { useAccountVisibility } from 'flavours/glitch/hooks/useAccountVisibility'; -import { useAppDispatch, useAppSelector } from 'flavours/glitch/store'; +} from '@/flavours/glitch/components/scrollable_list/components'; +import type { TruncatedListItemInfo } from '@/flavours/glitch/components/truncated_list'; +import { TruncatedListItems } from '@/flavours/glitch/components/truncated_list'; +import BundleColumnError from '@/flavours/glitch/features/ui/components/bundle_column_error'; +import Column from '@/flavours/glitch/features/ui/components/column'; +import { useAccount } from '@/flavours/glitch/hooks/useAccount'; +import { useAccountId } from '@/flavours/glitch/hooks/useAccountId'; +import { useAccountVisibility } from '@/flavours/glitch/hooks/useAccountVisibility'; +import { useAppDispatch, useAppSelector } from '@/flavours/glitch/store'; +import AddIcon from '@/material-icons/400-24px/add.svg?react'; import { useAccountCollections } from '../collections'; import { CollectionListItem } from '../collections/components/collection_list_item'; diff --git a/app/javascript/flavours/glitch/features/account_gallery/index.tsx b/app/javascript/flavours/glitch/features/account_gallery/index.tsx index 3d16074436..4e4776f383 100644 --- a/app/javascript/flavours/glitch/features/account_gallery/index.tsx +++ b/app/javascript/flavours/glitch/features/account_gallery/index.tsx @@ -4,23 +4,23 @@ import { FormattedMessage, useIntl, defineMessages } from 'react-intl'; import { List as ImmutableList, isList } from 'immutable'; -import PersonIcon from '@/material-icons/400-24px/person.svg?react'; -import { openModal } from 'flavours/glitch/actions/modal'; -import { expandAccountMediaTimeline } from 'flavours/glitch/actions/timelines'; -import { RemoteHint } from 'flavours/glitch/components/remote_hint'; -import ScrollableList from 'flavours/glitch/components/scrollable_list'; -import { AccountHeader } from 'flavours/glitch/features/account_timeline/components/account_header'; -import { LimitedAccountHint } from 'flavours/glitch/features/account_timeline/components/limited_account_hint'; -import BundleColumnError from 'flavours/glitch/features/ui/components/bundle_column_error'; -import Column from 'flavours/glitch/features/ui/components/column'; -import { useAccountId } from 'flavours/glitch/hooks/useAccountId'; -import { useAccountVisibility } from 'flavours/glitch/hooks/useAccountVisibility'; -import type { MediaAttachment } from 'flavours/glitch/models/media_attachment'; +import { openModal } from '@/flavours/glitch/actions/modal'; +import { expandAccountMediaTimeline } from '@/flavours/glitch/actions/timelines'; +import { AccountHeader } from '@/flavours/glitch/components/account_header'; +import { LimitedAccountHint } from '@/flavours/glitch/components/limited_account_hint'; +import { RemoteHint } from '@/flavours/glitch/components/remote_hint'; +import ScrollableList from '@/flavours/glitch/components/scrollable_list'; +import BundleColumnError from '@/flavours/glitch/features/ui/components/bundle_column_error'; +import Column from '@/flavours/glitch/features/ui/components/column'; +import { useAccountId } from '@/flavours/glitch/hooks/useAccountId'; +import { useAccountVisibility } from '@/flavours/glitch/hooks/useAccountVisibility'; +import type { MediaAttachment } from '@/flavours/glitch/models/media_attachment'; import { useAppSelector, useAppDispatch, createAppSelector, -} from 'flavours/glitch/store'; +} from '@/flavours/glitch/store'; +import PersonIcon from '@/material-icons/400-24px/person.svg?react'; import { MediaItem } from './components/media_item'; diff --git a/app/javascript/flavours/glitch/features/account_timeline/common.ts b/app/javascript/flavours/glitch/features/account_timeline/common.ts deleted file mode 100644 index 84accded14..0000000000 --- a/app/javascript/flavours/glitch/features/account_timeline/common.ts +++ /dev/null @@ -1,7 +0,0 @@ -import type { AccountFieldShape } from '@/flavours/glitch/models/account'; - -export interface AccountField extends AccountFieldShape { - nameHasEmojis: boolean; - value_plain: string; - valueHasEmojis: boolean; -} diff --git a/app/javascript/flavours/glitch/features/account_timeline/v2/featured_tags.tsx b/app/javascript/flavours/glitch/features/account_timeline/components/featured_tags.tsx similarity index 96% rename from app/javascript/flavours/glitch/features/account_timeline/v2/featured_tags.tsx rename to app/javascript/flavours/glitch/features/account_timeline/components/featured_tags.tsx index 62d460f961..8534e45215 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/v2/featured_tags.tsx +++ b/app/javascript/flavours/glitch/features/account_timeline/components/featured_tags.tsx @@ -13,8 +13,8 @@ import { useOverflowButton } from '@/flavours/glitch/hooks/useOverflow'; import { selectAccountFeaturedTags } from '@/flavours/glitch/selectors/accounts'; import { useAppDispatch, useAppSelector } from '@/flavours/glitch/store'; -import { useAccountContext } from './context'; -import classes from './styles.module.scss'; +import { useAccountContext } from '../hooks/useAccountContext'; +import classes from '../styles.module.scss'; export const FeaturedTags: FC<{ accountId: string }> = ({ accountId }) => { // Fetch tags. diff --git a/app/javascript/flavours/glitch/features/account_timeline/v2/filters.tsx b/app/javascript/flavours/glitch/features/account_timeline/components/filters.tsx similarity index 95% rename from app/javascript/flavours/glitch/features/account_timeline/v2/filters.tsx rename to app/javascript/flavours/glitch/features/account_timeline/components/filters.tsx index 0982c6598f..c0f84fee59 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/v2/filters.tsx +++ b/app/javascript/flavours/glitch/features/account_timeline/components/filters.tsx @@ -7,14 +7,13 @@ import { useParams } from 'react-router'; import Overlay from 'react-overlays/esm/Overlay'; +import { AccountTabs } from '@/flavours/glitch/components/account_header/tabs'; import { Toggle } from '@/flavours/glitch/components/form_fields'; import { Icon } from '@/flavours/glitch/components/icon'; import KeyboardArrowDownIcon from '@/material-icons/400-24px/keyboard_arrow_down.svg?react'; -import { AccountTabs } from '../components/tabs'; - -import { useAccountContext } from './context'; -import classes from './styles.module.scss'; +import { useAccountContext } from '../hooks/useAccountContext'; +import classes from '../styles.module.scss'; export const AccountFilters: FC = () => { const { acct } = useParams<{ acct: string }>(); diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/info.tsx b/app/javascript/flavours/glitch/features/account_timeline/components/info.tsx deleted file mode 100644 index 0b3a54213a..0000000000 --- a/app/javascript/flavours/glitch/features/account_timeline/components/info.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import type { FC } from 'react'; - -import { FormattedMessage } from 'react-intl'; - -import type { Relationship } from '@/flavours/glitch/models/relationship'; - -export const AccountInfo: FC<{ relationship?: Relationship }> = ({ - relationship, -}) => { - if (!relationship) { - return null; - } - return ( -
- {(relationship.followed_by || relationship.requested_by) && ( - - - - )} - {relationship.blocking && ( - - - - )} - {relationship.muting && ( - - - - )} - {relationship.domain_blocking && ( - - - - )} -
- ); -}; - -const AccountInfoFollower: FC<{ relationship: Relationship }> = ({ - relationship, -}) => { - if ( - relationship.followed_by && - (relationship.following || relationship.requested) - ) { - return ( - - ); - } else if (relationship.followed_by) { - return ( - - ); - } else if (relationship.requested_by) { - return ( - - ); - } - return null; -}; diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/pinned_statuses.tsx b/app/javascript/flavours/glitch/features/account_timeline/components/pinned_statuses.tsx new file mode 100644 index 0000000000..06192dba06 --- /dev/null +++ b/app/javascript/flavours/glitch/features/account_timeline/components/pinned_statuses.tsx @@ -0,0 +1,55 @@ +import type { FC } from 'react'; + +import { FormattedMessage } from 'react-intl'; + +import classNames from 'classnames'; + +import { Badge } from '@/flavours/glitch/components/badge'; +import { Button } from '@/flavours/glitch/components/button'; +import { Icon } from '@/flavours/glitch/components/icon'; +import { StatusHeader } from '@/flavours/glitch/components/status/header'; +import type { StatusHeaderRenderFn } from '@/flavours/glitch/components/status/header'; +import IconPinned from '@/images/icons/icon_pinned.svg?react'; + +import { useAccountContext } from '../hooks/useAccountContext'; +import classes from '../styles.module.scss'; + +export const renderPinnedStatusHeader: StatusHeaderRenderFn = ({ + featured, + ...args +}) => { + if (!featured) { + return ; + } + return ( + + } + label={ + + } + /> + + ); +}; + +export const PinnedShowAllButton: FC = () => { + const { onShowAllPinned } = useAccountContext(); + + return ( + + ); +}; diff --git a/app/javascript/flavours/glitch/features/account_timeline/v2/tags_suggestions.tsx b/app/javascript/flavours/glitch/features/account_timeline/components/tags_suggestions.tsx similarity index 98% rename from app/javascript/flavours/glitch/features/account_timeline/v2/tags_suggestions.tsx rename to app/javascript/flavours/glitch/features/account_timeline/components/tags_suggestions.tsx index 528e8fe683..4d5882c7ee 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/v2/tags_suggestions.tsx +++ b/app/javascript/flavours/glitch/features/account_timeline/components/tags_suggestions.tsx @@ -20,7 +20,7 @@ import { createAppSelector, } from '@/flavours/glitch/store'; -import classes from './styles.module.scss'; +import classes from '../styles.module.scss'; const MAX_SUGGESTED_TAGS = 3; diff --git a/app/javascript/flavours/glitch/features/account_timeline/v2/context.tsx b/app/javascript/flavours/glitch/features/account_timeline/hooks/useAccountContext.ts similarity index 82% rename from app/javascript/flavours/glitch/features/account_timeline/v2/context.tsx rename to app/javascript/flavours/glitch/features/account_timeline/hooks/useAccountContext.ts index d139522f9f..eb61682b24 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/v2/context.tsx +++ b/app/javascript/flavours/glitch/features/account_timeline/hooks/useAccountContext.ts @@ -1,4 +1,3 @@ -import type { FC, ReactNode } from 'react'; import { createContext, useCallback, @@ -10,7 +9,7 @@ import { import { useStorageState } from '@/flavours/glitch/hooks/useStorage'; interface AccountTimelineContextValue { - accountId: string; + accountId: string | null; boosts: boolean; replies: boolean; showAllPinned: boolean; @@ -19,13 +18,20 @@ interface AccountTimelineContextValue { onShowAllPinned: () => void; } -const AccountTimelineContext = +export const AccountTimelineContext = createContext(null); -export const AccountTimelineProvider: FC<{ - accountId: string; - children: ReactNode; -}> = ({ accountId, children }) => { +export function useAccountContext() { + const values = useContext(AccountTimelineContext); + if (!values) { + throw new Error( + 'useAccountFilters must be used within an AccountTimelineProvider', + ); + } + return values; +} + +export const useAccountContextValue = (accountId?: string | null) => { const storageOptions = { type: 'local', prefix: 'account-filters', @@ -62,9 +68,9 @@ export const AccountTimelineProvider: FC<{ }, []); // Memoize the context value to avoid unnecessary re-renders. - const value = useMemo( + return useMemo( () => ({ - accountId, + accountId: accountId ?? null, boosts, replies, showAllPinned, @@ -82,20 +88,4 @@ export const AccountTimelineProvider: FC<{ showAllPinned, ], ); - - return ( - - {children} - - ); }; - -export function useAccountContext() { - const values = useContext(AccountTimelineContext); - if (!values) { - throw new Error( - 'useAccountFilters must be used within an AccountTimelineProvider', - ); - } - return values; -} diff --git a/app/javascript/flavours/glitch/features/account_timeline/hooks/usePinned.ts b/app/javascript/flavours/glitch/features/account_timeline/hooks/usePinned.ts new file mode 100644 index 0000000000..8cf6988294 --- /dev/null +++ b/app/javascript/flavours/glitch/features/account_timeline/hooks/usePinned.ts @@ -0,0 +1,58 @@ +import { useEffect, useMemo } from 'react'; + +import { TIMELINE_PINNED_VIEW_ALL } from '@/flavours/glitch/actions/timelines'; +import { + expandTimelineByKey, + timelineKey, +} from '@/flavours/glitch/actions/timelines_typed'; +import { selectTimelineByKey } from '@/flavours/glitch/selectors/timelines'; +import { useAppDispatch, useAppSelector } from '@/flavours/glitch/store'; + +import { useAccountContext } from './useAccountContext'; + +export function usePinnedStatusIds({ + accountId, + tagged, + forceEmptyState = false, +}: { + accountId: string; + tagged?: string; + forceEmptyState?: boolean; +}) { + const pinnedKey = timelineKey({ + type: 'account', + userId: accountId, + tagged, + pinned: true, + replies: true, + }); + + const dispatch = useAppDispatch(); + useEffect(() => { + dispatch(expandTimelineByKey({ key: pinnedKey })); + }, [dispatch, pinnedKey]); + + const pinnedTimeline = useAppSelector((state) => + selectTimelineByKey(state, pinnedKey), + ); + + const { showAllPinned } = useAccountContext(); + + const pinnedTimelineItems = pinnedTimeline?.items; // Make a const to avoid the React Compiler complaining. + const pinnedStatusIds = useMemo(() => { + if (!pinnedTimelineItems || forceEmptyState) { + return undefined; + } + + if (pinnedTimelineItems.size <= 1 || showAllPinned) { + return pinnedTimelineItems; + } + return pinnedTimelineItems.slice(0, 1).push(TIMELINE_PINNED_VIEW_ALL); + }, [forceEmptyState, pinnedTimelineItems, showAllPinned]); + + return { + statusIds: pinnedStatusIds, + isLoading: !!pinnedTimeline?.isLoading, + showAllPinned, + }; +} diff --git a/app/javascript/flavours/glitch/features/account_timeline/index.jsx b/app/javascript/flavours/glitch/features/account_timeline/index.jsx deleted file mode 100644 index 65b9c38803..0000000000 --- a/app/javascript/flavours/glitch/features/account_timeline/index.jsx +++ /dev/null @@ -1,197 +0,0 @@ -import PropTypes from 'prop-types'; - -import { FormattedMessage } from 'react-intl'; - -import { List as ImmutableList } from 'immutable'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import ImmutablePureComponent from 'react-immutable-pure-component'; -import { connect } from 'react-redux'; - -import { ProfileColumnHeader } from 'flavours/glitch/features/account/components/profile_column_header'; -import BundleColumnError from 'flavours/glitch/features/ui/components/bundle_column_error'; -import { normalizeForLookup } from 'flavours/glitch/reducers/accounts_map'; -import { getAccountHidden } from 'flavours/glitch/selectors/accounts'; - -import { lookupAccount, fetchAccount } from '../../actions/accounts'; -import { expandAccountFeaturedTimeline, expandAccountTimeline } from '../../actions/timelines'; -import { LoadingIndicator } from '../../components/loading_indicator'; -import StatusList from '../../components/status_list'; -import Column from '../ui/components/column'; -import { RemoteHint } from 'flavours/glitch/components/remote_hint'; - -import { AccountHeader } from './components/account_header'; -import { LimitedAccountHint } from './components/limited_account_hint'; -import { FeaturedCarousel } from '@/flavours/glitch/components/featured_carousel'; - -const emptyList = ImmutableList(); - -const mapStateToProps = (state, { params: { acct, id, tagged }, withReplies = false }) => { - const accountId = id || state.accounts_map[normalizeForLookup(acct)]; - - if (accountId === null) { - return { - isLoading: false, - isAccount: false, - statusIds: emptyList, - }; - } else if (!accountId) { - return { - isLoading: true, - statusIds: emptyList, - }; - } - - const path = withReplies ? `${accountId}:with_replies` : `${accountId}${tagged ? `:${tagged}` : ''}`; - - return { - accountId, - isAccount: !!state.getIn(['accounts', accountId]), - statusIds: state.getIn(['timelines', `account:${path}`, 'items'], ImmutableList()), - isLoading: state.getIn(['timelines', `account:${path}`, 'isLoading']), - hasMore: state.getIn(['timelines', `account:${path}`, 'hasMore']), - suspended: state.getIn(['accounts', accountId, 'suspended'], false), - hidden: getAccountHidden(state, accountId), - }; -}; - -class AccountTimeline extends ImmutablePureComponent { - - static propTypes = { - params: PropTypes.shape({ - acct: PropTypes.string, - id: PropTypes.string, - tagged: PropTypes.string, - }).isRequired, - accountId: PropTypes.string, - dispatch: PropTypes.func.isRequired, - statusIds: ImmutablePropTypes.list, - isLoading: PropTypes.bool, - hasMore: PropTypes.bool, - withReplies: PropTypes.bool, - isAccount: PropTypes.bool, - suspended: PropTypes.bool, - hidden: PropTypes.bool, - multiColumn: PropTypes.bool, - }; - - _load () { - const { accountId, withReplies, params: { tagged }, dispatch } = this.props; - - dispatch(fetchAccount(accountId)); - - if (!withReplies) { - dispatch(expandAccountFeaturedTimeline(accountId, { tagged })); - } - - dispatch(expandAccountTimeline(accountId, { withReplies, tagged })); - } - - componentDidMount () { - const { params: { acct }, accountId, dispatch } = this.props; - - if (accountId) { - this._load(); - } else { - dispatch(lookupAccount(acct)); - } - } - - componentDidUpdate (prevProps) { - const { params: { acct, tagged }, accountId, withReplies, dispatch } = this.props; - - if (prevProps.accountId !== accountId && accountId) { - this._load(); - } else if (prevProps.params.acct !== acct) { - dispatch(lookupAccount(acct)); - } else if (prevProps.params.tagged !== tagged) { - if (!withReplies) { - dispatch(expandAccountFeaturedTimeline(accountId, { tagged })); - } - dispatch(expandAccountTimeline(accountId, { withReplies, tagged })); - } - } - - UNSAFE_componentWillReceiveProps (nextProps) { - const { dispatch } = this.props; - - if ((nextProps.params.accountId !== this.props.params.accountId && nextProps.params.accountId) || nextProps.withReplies !== this.props.withReplies) { - dispatch(fetchAccount(nextProps.params.accountId)); - - if (!nextProps.withReplies) { - dispatch(expandAccountFeaturedTimeline(nextProps.params.accountId)); - } - - dispatch(expandAccountTimeline(nextProps.params.accountId, { withReplies: nextProps.params.withReplies })); - } - } - - handleHeaderClick = () => { - this.column.scrollTop(); - }; - - handleLoadMore = maxId => { - this.props.dispatch(expandAccountTimeline(this.props.accountId, { maxId, withReplies: this.props.withReplies, tagged: this.props.params.tagged })); - }; - - setRef = c => { - this.column = c; - }; - - render () { - const { accountId, statusIds, isLoading, hasMore, suspended, isAccount, hidden, multiColumn, remote, remoteUrl, params: { tagged } } = this.props; - - if (isLoading && statusIds.isEmpty()) { - return ( - - - - ); - } else if (!isLoading && !isAccount) { - return ( - - ); - } - - let emptyMessage; - - const forceEmptyState = suspended || hidden; - - if (suspended) { - emptyMessage = ; - } else if (hidden) { - emptyMessage = ; - } else if (remote && statusIds.isEmpty()) { - emptyMessage = ; - } else { - emptyMessage = ; - } - - return ( - - - - - - {!forceEmptyState && } - - } - alwaysPrepend - append={} - scrollKey='account_timeline' - statusIds={forceEmptyState ? emptyList : statusIds} - isLoading={isLoading} - hasMore={!forceEmptyState && hasMore} - onLoadMore={this.handleLoadMore} - emptyMessage={emptyMessage} - bindToDocument={!multiColumn} - timelineId='account' - /> - - ); - } - -} - -export default connect(mapStateToProps)(AccountTimeline); diff --git a/app/javascript/flavours/glitch/features/account_timeline/v2/index.tsx b/app/javascript/flavours/glitch/features/account_timeline/index.tsx similarity index 78% rename from app/javascript/flavours/glitch/features/account_timeline/v2/index.tsx rename to app/javascript/flavours/glitch/features/account_timeline/index.tsx index 295cb1427d..1b5dc47ffa 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/v2/index.tsx +++ b/app/javascript/flavours/glitch/features/account_timeline/index.tsx @@ -1,4 +1,4 @@ -import { useCallback, useEffect } from 'react'; +import { useCallback, useEffect, useRef } from 'react'; import type { FC } from 'react'; import { FormattedMessage } from 'react-intl'; @@ -12,8 +12,10 @@ import { expandTimelineByKey, timelineKey, } from '@/flavours/glitch/actions/timelines_typed'; +import { AccountHeader } from '@/flavours/glitch/components/account_header'; import { Column } from '@/flavours/glitch/components/column'; -import { ColumnBackButton } from '@/flavours/glitch/components/column_back_button'; +import type { ColumnRef } from '@/flavours/glitch/components/column'; +import { LimitedAccountHint } from '@/flavours/glitch/components/limited_account_hint'; import { LoadingIndicator } from '@/flavours/glitch/components/loading_indicator'; import { RemoteHint } from '@/flavours/glitch/components/remote_hint'; import StatusList from '@/flavours/glitch/components/status_list'; @@ -26,23 +28,25 @@ import { useAccountVisibility } from '@/flavours/glitch/hooks/useAccountVisibili import { selectTimelineByKey } from '@/flavours/glitch/selectors/timelines'; import { useAppDispatch, useAppSelector } from '@/flavours/glitch/store'; -import { AccountHeader } from '../components/account_header'; -import { LimitedAccountHint } from '../components/limited_account_hint'; +import { ProfileColumnHeader } from '../account/components/profile_column_header'; -import { AccountTimelineProvider, useAccountContext } from './context'; -import { FeaturedTags } from './featured_tags'; -import { AccountFilters } from './filters'; +import { FeaturedTags } from './components/featured_tags'; +import { AccountFilters } from './components/filters'; +import { renderPinnedStatusHeader } from './components/pinned_statuses'; +import { TagSuggestions } from './components/tags_suggestions'; import { - renderPinnedStatusHeader, - usePinnedStatusIds, -} from './pinned_statuses'; + AccountTimelineContext, + useAccountContext, + useAccountContextValue, +} from './hooks/useAccountContext'; +import { usePinnedStatusIds } from './hooks/usePinned'; import classes from './styles.module.scss'; -import { TagSuggestions } from './tags_suggestions'; const emptyList = ImmutableList(); -const AccountTimelineV2: FC<{ multiColumn: boolean }> = ({ multiColumn }) => { +const AccountTimeline: FC<{ multiColumn: boolean }> = ({ multiColumn }) => { const accountId = useAccountId(); + const accountContext = useAccountContextValue(accountId); // Null means accountId does not exist (e.g. invalid acct). Undefined means loading. if (accountId === null) { @@ -59,13 +63,13 @@ const AccountTimelineV2: FC<{ multiColumn: boolean }> = ({ multiColumn }) => { // Add this key to remount the timeline when accountId changes. return ( - + - + ); }; @@ -106,11 +110,19 @@ const InnerTimeline: FC<{ accountId: string; multiColumn: boolean }> = ({ const { isLoading: isPinnedLoading, statusIds: pinnedStatusIds } = usePinnedStatusIds({ accountId, tagged, forceEmptyState }); + const columnRef = useRef(null); + const handleHeaderClick = useCallback(() => { + columnRef.current?.scrollTop(); + }, []); + const isLoading = !!timeline?.isLoading || isPinnedLoading; return ( - - + + = ({ accountId }) => { }; // eslint-disable-next-line import/no-default-export -export default AccountTimelineV2; +export default AccountTimeline; diff --git a/app/javascript/flavours/glitch/features/account_timeline/modals/field_modal.tsx b/app/javascript/flavours/glitch/features/account_timeline/modals/field_modal.tsx index 52dc571e81..06ac88bdf0 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/modals/field_modal.tsx +++ b/app/javascript/flavours/glitch/features/account_timeline/modals/field_modal.tsx @@ -2,6 +2,7 @@ import type { FC } from 'react'; import { FormattedMessage } from 'react-intl'; +import type { AccountField } from '@/flavours/glitch/components/account_header/fields'; import { Button } from '@/flavours/glitch/components/button'; import { EmojiHTML } from '@/flavours/glitch/components/emoji/html'; import { @@ -10,7 +11,6 @@ import { ModalShellBody, } from '@/flavours/glitch/components/modal_shell'; -import type { AccountField } from '../common'; import { useFieldHtml } from '../hooks/useFieldHtml'; import classes from './styles.module.scss'; diff --git a/app/javascript/flavours/glitch/features/account_timeline/v2/styles.module.scss b/app/javascript/flavours/glitch/features/account_timeline/styles.module.scss similarity index 100% rename from app/javascript/flavours/glitch/features/account_timeline/v2/styles.module.scss rename to app/javascript/flavours/glitch/features/account_timeline/styles.module.scss diff --git a/app/javascript/flavours/glitch/features/account_timeline/v2/pinned_statuses.tsx b/app/javascript/flavours/glitch/features/account_timeline/v2/pinned_statuses.tsx deleted file mode 100644 index 2a702ba71d..0000000000 --- a/app/javascript/flavours/glitch/features/account_timeline/v2/pinned_statuses.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import type { FC } from 'react'; -import { useEffect, useMemo } from 'react'; - -import { FormattedMessage } from 'react-intl'; - -import classNames from 'classnames'; - -import { TIMELINE_PINNED_VIEW_ALL } from '@/flavours/glitch/actions/timelines'; -import { - expandTimelineByKey, - timelineKey, -} from '@/flavours/glitch/actions/timelines_typed'; -import { Badge } from '@/flavours/glitch/components/badge'; -import { Button } from '@/flavours/glitch/components/button'; -import { Icon } from '@/flavours/glitch/components/icon'; -import { StatusHeader } from '@/flavours/glitch/components/status/header'; -import type { StatusHeaderRenderFn } from '@/flavours/glitch/components/status/header'; -import { selectTimelineByKey } from '@/flavours/glitch/selectors/timelines'; -import { useAppDispatch, useAppSelector } from '@/flavours/glitch/store'; -import IconPinned from '@/images/icons/icon_pinned.svg?react'; - -import { useAccountContext } from './context'; -import classes from './styles.module.scss'; - -export function usePinnedStatusIds({ - accountId, - tagged, - forceEmptyState = false, -}: { - accountId: string; - tagged?: string; - forceEmptyState?: boolean; -}) { - const pinnedKey = timelineKey({ - type: 'account', - userId: accountId, - tagged, - pinned: true, - replies: true, - }); - - const dispatch = useAppDispatch(); - useEffect(() => { - dispatch(expandTimelineByKey({ key: pinnedKey })); - }, [dispatch, pinnedKey]); - - const pinnedTimeline = useAppSelector((state) => - selectTimelineByKey(state, pinnedKey), - ); - - const { showAllPinned } = useAccountContext(); - - const pinnedTimelineItems = pinnedTimeline?.items; // Make a const to avoid the React Compiler complaining. - const pinnedStatusIds = useMemo(() => { - if (!pinnedTimelineItems || forceEmptyState) { - return undefined; - } - - if (pinnedTimelineItems.size <= 1 || showAllPinned) { - return pinnedTimelineItems; - } - return pinnedTimelineItems.slice(0, 1).push(TIMELINE_PINNED_VIEW_ALL); - }, [forceEmptyState, pinnedTimelineItems, showAllPinned]); - - return { - statusIds: pinnedStatusIds, - isLoading: !!pinnedTimeline?.isLoading, - showAllPinned, - }; -} - -export const renderPinnedStatusHeader: StatusHeaderRenderFn = ({ - featured, - ...args -}) => { - if (!featured) { - return ; - } - return ( - - } - label={ - - } - /> - - ); -}; - -export const PinnedShowAllButton: FC = () => { - const { onShowAllPinned } = useAccountContext(); - - return ( - - ); -}; diff --git a/app/javascript/flavours/glitch/features/account_timeline/v2/status_header.tsx b/app/javascript/flavours/glitch/features/account_timeline/v2/status_header.tsx deleted file mode 100644 index d05b5e7069..0000000000 --- a/app/javascript/flavours/glitch/features/account_timeline/v2/status_header.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import type { FC } from 'react'; - -import { Link } from 'react-router-dom'; - -import { RelativeTimestamp } from '@/flavours/glitch/components/relative_timestamp'; -import type { StatusHeaderProps } from '@/flavours/glitch/components/status/header'; -import { - StatusDisplayName, - StatusEditedAt, - StatusVisibility, -} from '@/flavours/glitch/components/status/header'; -import type { Account } from '@/flavours/glitch/models/account'; - -export const AccountStatusHeader: FC = ({ - status, - account, - children, - avatarSize = 48, - wrapperProps, - onHeaderClick, -}) => { - const statusAccount = status.get('account') as Account | undefined; - const editedAt = status.get('edited_at') as string; - - return ( - /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */ -
- - - - {editedAt && } - - - - - {children} -
- ); -}; diff --git a/app/javascript/flavours/glitch/features/followers/components/empty.tsx b/app/javascript/flavours/glitch/features/followers/components/empty.tsx index 8999ddb5ba..608efaa807 100644 --- a/app/javascript/flavours/glitch/features/followers/components/empty.tsx +++ b/app/javascript/flavours/glitch/features/followers/components/empty.tsx @@ -2,7 +2,7 @@ import type { FC, ReactNode } from 'react'; import { FormattedMessage } from 'react-intl'; -import { LimitedAccountHint } from '@/flavours/glitch/features/account_timeline/components/limited_account_hint'; +import { LimitedAccountHint } from '@/flavours/glitch/components/limited_account_hint'; import { useAccountVisibility } from '@/flavours/glitch/hooks/useAccountVisibility'; import type { Account } from '@/flavours/glitch/models/account'; diff --git a/app/javascript/flavours/glitch/features/ui/util/async-components.js b/app/javascript/flavours/glitch/features/ui/util/async-components.js index 7f8c3222d8..6cb0d9cee2 100644 --- a/app/javascript/flavours/glitch/features/ui/util/async-components.js +++ b/app/javascript/flavours/glitch/features/ui/util/async-components.js @@ -77,7 +77,7 @@ export function PinnedStatuses () { } export function AccountTimeline () { - return import('../../account_timeline/v2'); + return import('../../account_timeline'); } export function AccountGallery () {