diff --git a/app/javascript/flavours/glitch/components/account/index.tsx b/app/javascript/flavours/glitch/components/account/index.tsx index be3f6212b9..c8ef4a9428 100644 --- a/app/javascript/flavours/glitch/components/account/index.tsx +++ b/app/javascript/flavours/glitch/components/account/index.tsx @@ -20,6 +20,7 @@ import { openModal } from 'flavours/glitch/actions/modal'; import { initMuteModal } from 'flavours/glitch/actions/mutes'; import { apiFollowAccount } from 'flavours/glitch/api/accounts'; import { Avatar } from 'flavours/glitch/components/avatar'; +import { VerifiedBadge } from 'flavours/glitch/components/badge'; import { Button } from 'flavours/glitch/components/button'; import { FollowersCounter } from 'flavours/glitch/components/counters'; import { DisplayName } from 'flavours/glitch/components/display_name'; @@ -28,7 +29,6 @@ import { FollowButton } from 'flavours/glitch/components/follow_button'; import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp'; import { ShortNumber } from 'flavours/glitch/components/short_number'; import { Skeleton } from 'flavours/glitch/components/skeleton'; -import { VerifiedBadge } from 'flavours/glitch/components/verified_badge'; import { useIdentity } from 'flavours/glitch/identity_context'; import { me } from 'flavours/glitch/initial_state'; import type { MenuItem } from 'flavours/glitch/models/dropdown_menu'; diff --git a/app/javascript/flavours/glitch/components/account_list_item/account_list_item.stories.tsx b/app/javascript/flavours/glitch/components/account_list_item/account_list_item.stories.tsx new file mode 100644 index 0000000000..bad1667b12 --- /dev/null +++ b/app/javascript/flavours/glitch/components/account_list_item/account_list_item.stories.tsx @@ -0,0 +1,45 @@ +import type { Meta, StoryObj } from '@storybook/react-vite'; + +import { accountFactoryState } from '@/testing/factories'; + +import { AccountListItem } from './index'; + +const meta = { + title: 'Components/AccountListItem', + component: AccountListItem, + args: { + accountId: '1', + withBorder: false, + }, + parameters: { + state: { + accounts: { + '1': accountFactoryState(), + }, + }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; + +export const WithCustomStats: Story = { + args: { + stats: ['posts', 'last-active'], + }, +}; + +export const WithBorder: Story = { + args: { + withBorder: true, + }, +}; + +export const WithoutButton: Story = { + args: { + renderButton: () => null, + }, +}; diff --git a/app/javascript/flavours/glitch/components/account_list_item/index.tsx b/app/javascript/flavours/glitch/components/account_list_item/index.tsx new file mode 100644 index 0000000000..7c4ed47f48 --- /dev/null +++ b/app/javascript/flavours/glitch/components/account_list_item/index.tsx @@ -0,0 +1,184 @@ +import { useMemo } from 'react'; + +import { FormattedMessage, useIntl } from 'react-intl'; + +import classNames from 'classnames'; + +import { Account } from 'flavours/glitch/components/account'; +import { VerifiedBadge } from 'flavours/glitch/components/badge'; +import { useAccount } from 'flavours/glitch/hooks/useAccount'; +import { useRelationship } from 'flavours/glitch/hooks/useRelationship'; +import type { Relationship } from 'flavours/glitch/models/relationship'; + +import { EmojiHTML } from '../emoji/html'; +import { FamiliarFollowers } from '../familiar_followers'; +import { FollowButton } from '../follow_button'; +import { FormattedDateWrapper } from '../formatted_date'; +import { NumberFields, NumberFieldsItem } from '../number_fields'; +import { RelativeTimestamp } from '../relative_timestamp'; +import { ShortNumber } from '../short_number'; + +import classes from './styles.module.scss'; + +export interface RenderButtonOptions { + accountId: string | undefined; + relationship: Relationship | null | undefined; +} + +type Stat = 'followers' | 'following' | 'posts' | 'joined' | 'last-active'; + +interface Props { + accountId: string | undefined; + stats?: Stat[]; + renderButton?: (options: RenderButtonOptions) => React.ReactNode; + withBorder?: boolean; +} + +const DEFAULT_STATS: Stat[] = ['followers', 'following', 'joined']; + +/** + * Extended account list item with bio, verified link badge, + * and familiar follower widget. + * + * The displayed account stats can be customised using the `stats` prop, + * and button rendering can be customised via the `renderButton` prop. + */ +export const AccountListItem: React.FC = ({ + accountId, + stats = DEFAULT_STATS, + withBorder = true, + renderButton = defaultRenderButton, +}) => { + const intl = useIntl(); + const account = useAccount(accountId); + const relationship = useRelationship(accountId); + + const createdThisYear = useMemo( + () => account?.created_at.includes(new Date().getFullYear().toString()), + [account?.created_at], + ); + + if (!accountId || !account) { + return null; + } + + const firstVerifiedField = account.fields.find((item) => !!item.verified_at); + + return ( +
+
+ + + {renderButton({ accountId, relationship })} +
+ + + {stats.includes('followers') && ( + + } + hint={intl.formatNumber(account.followers_count)} + > + + + )} + {stats.includes('following') && ( + + } + hint={intl.formatNumber(account.following_count)} + link={`/@${account.acct}/following`} + > + + + )} + {stats.includes('posts') && ( + + } + hint={intl.formatNumber(account.statuses_count)} + > + + + )} + {stats.includes('joined') && ( + + } + hint={intl.formatDate(account.created_at)} + > + {createdThisYear ? ( + + ) : ( + + )} + + )} + {stats.includes('last-active') && ( + + } + > + + + )} + {firstVerifiedField && ( + + )} + + + {account.note.length > 0 && ( + + )} +
+ ); +}; + +const defaultRenderButton = ({ accountId }: RenderButtonOptions) => ( + +); + +export const AccountListItemFollowButton: React.FC<{ + accountId: string | undefined; +}> = ({ accountId }) => ( + +); diff --git a/app/javascript/flavours/glitch/components/account_list_item/styles.module.scss b/app/javascript/flavours/glitch/components/account_list_item/styles.module.scss new file mode 100644 index 0000000000..d8bfd73f1f --- /dev/null +++ b/app/javascript/flavours/glitch/components/account_list_item/styles.module.scss @@ -0,0 +1,50 @@ +.wrapper { + display: flex; + flex-direction: column; + align-items: start; + gap: 12px; + padding: 16px; + + &[data-with-border='true'] { + border-bottom: 1px solid var(--color-border-primary); + } + + :global(.account__note) { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + line-clamp: 3; + } +} + +.header { + display: flex; + align-items: start; + width: 100%; +} + +.account { + --account-name-size: 15px; + --account-handle-color: var(--color-text-secondary); + --account-handle-size: 13px; + --account-bio-color: var(--color-text-primary); + --account-bio-size: 13px; + --account-outer-spacing: 0; + + flex-grow: 1; + margin-inline-end: 16px; +} + +.verifiedBadge { + align-self: end; +} + +.bio { + :any-link { + color: var(--color-text-status-links); + + &:hover { + text-decoration: none; + } + } +} diff --git a/app/javascript/flavours/glitch/components/badge/badge.stories.tsx b/app/javascript/flavours/glitch/components/badge/badge.stories.tsx index f8d91d555a..3730cb1814 100644 --- a/app/javascript/flavours/glitch/components/badge/badge.stories.tsx +++ b/app/javascript/flavours/glitch/components/badge/badge.stories.tsx @@ -35,6 +35,12 @@ export const Domain: Story = { }, }; +export const Verified: Story = { + render() { + return ; + }, +}; + export const CustomIcon: Story = { args: { ...Default.args, diff --git a/app/javascript/flavours/glitch/components/badge/index.tsx b/app/javascript/flavours/glitch/components/badge/index.tsx index 6c6f0cdca5..5f2120b64c 100644 --- a/app/javascript/flavours/glitch/components/badge/index.tsx +++ b/app/javascript/flavours/glitch/components/badge/index.tsx @@ -4,19 +4,23 @@ import { FormattedMessage, useIntl } from 'react-intl'; import classNames from 'classnames'; +import type { OnAttributeHandler } from '@/flavours/glitch/utils/html'; import AdminIcon from '@/images/icons/icon_admin.svg?react'; +import IconVerified from '@/images/icons/icon_verified.svg?react'; import BlockIcon from '@/material-icons/400-24px/block.svg?react'; import GroupsIcon from '@/material-icons/400-24px/group.svg?react'; import PersonIcon from '@/material-icons/400-24px/person.svg?react'; import SmartToyIcon from '@/material-icons/400-24px/smart_toy.svg?react'; import VolumeOffIcon from '@/material-icons/400-24px/volume_off.svg?react'; +import { EmojiHTML } from '../emoji/html'; +import { Icon } from '../icon'; + import classes from './styles.module.scss'; -interface BadgeProps { +interface BadgeProps extends React.ComponentPropsWithoutRef<'div'> { label: ReactNode; icon?: ReactNode; - className?: string; domain?: ReactNode; roleId?: string; variant?: @@ -35,9 +39,16 @@ export const Badge: FC = ({ className, domain, roleId, + ...otherProps }) => (
{icon} @@ -134,3 +145,31 @@ export const BlockedBadge: FC> = ({ label, ...props }) => ( {...props} /> ); + +const onAttribute: OnAttributeHandler = (name, value, tagName) => { + if (name === 'rel' && tagName === 'a') { + if (value === 'me') { + return null; + } + return [ + name, + value + .split(' ') + .filter((x) => x !== 'me') + .join(' '), + ]; + } + return undefined; +}; + +export const VerifiedBadge: React.FC<{ link: string; className?: string }> = ({ + link, + className, +}) => ( + } + label={} + className={className} + /> +); diff --git a/app/javascript/flavours/glitch/components/badge/styles.module.scss b/app/javascript/flavours/glitch/components/badge/styles.module.scss index 77ac42fc7b..59c738b9cc 100644 --- a/app/javascript/flavours/glitch/components/badge/styles.module.scss +++ b/app/javascript/flavours/glitch/components/badge/styles.module.scss @@ -2,18 +2,28 @@ color: var(--color-text-primary); font-size: 13px; display: inline-flex; + max-width: 100%; padding: 4px; - padding-inline-end: 8px; gap: 4px; - border-radius: 6px; + border-radius: 8px; align-items: center; + overflow-wrap: anywhere; > svg { width: auto; - height: 15px; + height: 17px; fill: currentColor; opacity: 0.85; } + + a { + color: inherit; + text-decoration: none; + } + + &:not(.badgeWithoutIcon) { + padding-inline-end: 8px; + } } .domain { @@ -41,7 +51,6 @@ .success { background-color: var(--color-bg-success-softest); - color: var(--color-text-success); } .warning { diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/familiar_followers.tsx b/app/javascript/flavours/glitch/components/familiar_followers/index.tsx similarity index 83% rename from app/javascript/flavours/glitch/features/account_timeline/components/familiar_followers.tsx rename to app/javascript/flavours/glitch/components/familiar_followers/index.tsx index 90f80f7282..2527389d28 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/familiar_followers.tsx +++ b/app/javascript/flavours/glitch/components/familiar_followers/index.tsx @@ -1,11 +1,14 @@ import { FormattedMessage } from 'react-intl'; +import classNames from 'classnames'; + import { Avatar } from '@/flavours/glitch/components/avatar'; import { AvatarGroup } from '@/flavours/glitch/components/avatar_group'; import { LinkedDisplayName } from '@/flavours/glitch/components/display_name'; import type { Account } from '@/flavours/glitch/models/account'; -import { useFetchFamiliarFollowers } from '../hooks/familiar_followers'; +import classes from './styles.module.scss'; +import { useFetchFamiliarFollowers } from './use_fetch_familiar_followers'; const FamiliarFollowersReadout: React.FC<{ familiarFollowers: Account[] }> = ({ familiarFollowers, @@ -51,9 +54,10 @@ const FamiliarFollowersReadout: React.FC<{ familiarFollowers: Account[] }> = ({ } }; -export const FamiliarFollowers: React.FC<{ accountId: string }> = ({ - accountId, -}) => { +export const FamiliarFollowers: React.FC<{ + accountId: string; + className?: string; +}> = ({ accountId, className }) => { const { familiarFollowers, isLoading } = useFetchFamiliarFollowers({ accountId, }); @@ -63,10 +67,10 @@ export const FamiliarFollowers: React.FC<{ accountId: string }> = ({ } return ( -
- +
+ {familiarFollowers.slice(0, 3).map((account) => ( - + ))} diff --git a/app/javascript/flavours/glitch/components/familiar_followers/styles.module.scss b/app/javascript/flavours/glitch/components/familiar_followers/styles.module.scss new file mode 100644 index 0000000000..f3a11f970f --- /dev/null +++ b/app/javascript/flavours/glitch/components/familiar_followers/styles.module.scss @@ -0,0 +1,11 @@ +.wrapper { + display: flex; + align-items: center; + gap: 10px; + + a:any-link { + font-weight: 500; + text-decoration: none; + color: var(--color-text-primary); + } +} diff --git a/app/javascript/flavours/glitch/features/account_timeline/hooks/familiar_followers.ts b/app/javascript/flavours/glitch/components/familiar_followers/use_fetch_familiar_followers.ts similarity index 100% rename from app/javascript/flavours/glitch/features/account_timeline/hooks/familiar_followers.ts rename to app/javascript/flavours/glitch/components/familiar_followers/use_fetch_familiar_followers.ts diff --git a/app/javascript/flavours/glitch/components/hover_card_account.tsx b/app/javascript/flavours/glitch/components/hover_card_account.tsx index 5f702e9dd5..c1f51e9b7b 100644 --- a/app/javascript/flavours/glitch/components/hover_card_account.tsx +++ b/app/javascript/flavours/glitch/components/hover_card_account.tsx @@ -4,6 +4,7 @@ import { FormattedMessage } from 'react-intl'; import classNames from 'classnames'; +import { useFetchFamiliarFollowers } from '@/flavours/glitch/components/familiar_followers/use_fetch_familiar_followers'; import { fetchAccount } from 'flavours/glitch/actions/accounts'; import { AccountBio } from 'flavours/glitch/components/account_bio'; import { AccountFields } from 'flavours/glitch/components/account_fields'; @@ -18,7 +19,6 @@ import { FollowButton } from 'flavours/glitch/components/follow_button'; import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator'; import { Permalink } from 'flavours/glitch/components/permalink'; import { ShortNumber } from 'flavours/glitch/components/short_number'; -import { useFetchFamiliarFollowers } from 'flavours/glitch/features/account_timeline/hooks/familiar_followers'; import { domain } from 'flavours/glitch/initial_state'; import { getAccountHidden } from 'flavours/glitch/selectors/accounts'; import { useAppSelector, useAppDispatch } from 'flavours/glitch/store'; diff --git a/app/javascript/flavours/glitch/components/number_fields/index.tsx b/app/javascript/flavours/glitch/components/number_fields/index.tsx index f137ab76ef..71ee954888 100644 --- a/app/javascript/flavours/glitch/components/number_fields/index.tsx +++ b/app/javascript/flavours/glitch/components/number_fields/index.tsx @@ -1,22 +1,21 @@ +import classNames from 'classnames'; import { NavLink } from 'react-router-dom'; import type { MastodonLocationDescriptor } from 'flavours/glitch/components/router'; import classes from './styles.module.scss'; -interface WrapperProps { - children: React.ReactNode; -} - -export const NumberFields: React.FC = ({ children }) => { - return
    {children}
; +export const NumberFields: React.FC> = ({ + children, + className, +}) => { + return
    {children}
; }; -interface ItemProps { +interface ItemProps extends React.ComponentPropsWithoutRef<'li'> { label: React.ReactNode; hint?: string; link?: MastodonLocationDescriptor; - children: React.ReactNode; } export const NumberFieldsItem: React.FC = ({ @@ -24,9 +23,10 @@ export const NumberFieldsItem: React.FC = ({ hint, link, children, + className, }) => { return ( -
  • +
  • {label} {link ? ( diff --git a/app/javascript/flavours/glitch/components/number_fields/styles.module.scss b/app/javascript/flavours/glitch/components/number_fields/styles.module.scss index e61ace8235..f8739f7c10 100644 --- a/app/javascript/flavours/glitch/components/number_fields/styles.module.scss +++ b/app/javascript/flavours/glitch/components/number_fields/styles.module.scss @@ -1,9 +1,9 @@ .list { display: flex; flex-wrap: wrap; - margin: 8px 0; + margin: 0; padding: 0; - gap: 4px 20px; + gap: 4px 24px; font-size: 13px; color: var(--color-text-secondary); } @@ -19,6 +19,7 @@ font-weight: 600; color: var(--color-text-primary); font-size: 15px; + white-space: nowrap; } a { diff --git a/app/javascript/flavours/glitch/components/verified_badge.tsx b/app/javascript/flavours/glitch/components/verified_badge.tsx deleted file mode 100644 index f1af86137f..0000000000 --- a/app/javascript/flavours/glitch/components/verified_badge.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { EmojiHTML } from '@/flavours/glitch/components/emoji/html'; -import CheckIcon from '@/material-icons/400-24px/check.svg?react'; - -import type { OnAttributeHandler } from '../utils/html'; - -import { Icon } from './icon'; - -const onAttribute: OnAttributeHandler = (name, value, tagName) => { - if (name === 'rel' && tagName === 'a') { - if (value === 'me') { - return null; - } - return [ - name, - value - .split(' ') - .filter((x) => x !== 'me') - .join(' '), - ]; - } - return undefined; -}; - -interface Props { - link: string; -} -export const VerifiedBadge: React.FC = ({ link }) => ( - - - - -); diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/account_header.tsx b/app/javascript/flavours/glitch/features/account_timeline/components/account_header.tsx index ba5001b716..4c41ae98d9 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/account_header.tsx +++ b/app/javascript/flavours/glitch/features/account_timeline/components/account_header.tsx @@ -19,10 +19,11 @@ 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 { AccountName } from './account_name'; import { AccountSubscriptionForm } from './account_subscription_form'; import { AccountButtons } from './buttons'; -import { FamiliarFollowers } from './familiar_followers'; import { AccountHeaderFields } from './fields'; import { AccountInfo } from './info'; import { MemorialNote } from './memorial_note'; @@ -165,7 +166,10 @@ export const AccountHeader: React.FC<{ {!isMe && !suspendedOrHidden && ( - + )} {!suspendedOrHidden && ( diff --git a/app/javascript/flavours/glitch/features/collections/detail/accounts_list.tsx b/app/javascript/flavours/glitch/features/collections/detail/accounts_list.tsx index cde5f3a891..52e3ad697e 100644 --- a/app/javascript/flavours/glitch/features/collections/detail/accounts_list.tsx +++ b/app/javascript/flavours/glitch/features/collections/detail/accounts_list.tsx @@ -3,22 +3,17 @@ import { useCallback, useRef, useState } from 'react'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import type { ApiCollectionJSON } from 'flavours/glitch/api_types/collections'; -import { Account } from 'flavours/glitch/components/account'; +import type { RenderButtonOptions } from 'flavours/glitch/components/account_list_item'; +import { + AccountListItem, + AccountListItemFollowButton, +} from 'flavours/glitch/components/account_list_item'; import { Button } from 'flavours/glitch/components/button'; import { Callout } from 'flavours/glitch/components/callout'; -import { FollowButton } from 'flavours/glitch/components/follow_button'; -import { - NumberFields, - NumberFieldsItem, -} from 'flavours/glitch/components/number_fields'; -import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp'; import { Article, ItemList, } from 'flavours/glitch/components/scrollable_list/components'; -import { ShortNumber } from 'flavours/glitch/components/short_number'; -import { useAccount } from 'flavours/glitch/hooks/useAccount'; -import { useRelationship } from 'flavours/glitch/hooks/useRelationship'; import { me } from 'flavours/glitch/initial_state'; import { useConfirmRevoke } from './revoke_collection_inclusion_modal'; @@ -31,99 +26,6 @@ const messages = defineMessages({ }, }); -const AccountItem: React.FC<{ - accountId: string | undefined; - collectionOwnerId: string; - onRevoke: () => void; - withBio?: boolean; - withBorder?: boolean; -}> = ({ - accountId, - collectionOwnerId, - onRevoke, - withBio = true, - withBorder = true, -}) => { - const intl = useIntl(); - const account = useAccount(accountId); - const relationship = useRelationship(accountId); - - if (!accountId || !account) { - return null; - } - - // When viewing your own collection, only show the Follow button - // for accounts you're not following (anymore). - // Otherwise, always show the follow button in its various states. - const isOwnAccount = accountId === me; - const withoutButton = - isOwnAccount || - !relationship || - (collectionOwnerId === me && - (relationship.following || relationship.requested)); - - return ( -
    - - - } - hint={intl.formatNumber(account.followers_count)} - > - - - - - } - hint={intl.formatNumber(account.statuses_count)} - > - - - - - } - > - - - - } - /> - {!withoutButton && } - {isOwnAccount && ( - - )} -
    - ); -}; - const SensitiveScreen: React.FC<{ sensitive: boolean | undefined; focusTargetRef: React.RefObject; @@ -158,6 +60,7 @@ const SensitiveScreen: React.FC<{ /> } onPrimary={showAnyway} + className={classes.sensitiveScreen} > (null); const isOwnCollection = collection?.account_id === me; - const { items = [] } = collection ?? {}; + const { items = [], account_id: collectionOwnerId } = collection ?? {}; + + const renderAccountItemButton = useCallback( + ({ relationship, accountId }: RenderButtonOptions) => { + // When viewing your own collection, only show the Follow button + // for accounts you're not following anymore. + const withoutButton = + !relationship || + (collectionOwnerId === me && + (relationship.following || relationship.requested)); + + if (withoutButton) return null; + + if (accountId === me) { + return ( + + ); + } + + return ; + }, + [collectionOwnerId, confirmRevoke], + ); return ( - + <>

    - {items.map(({ account_id }, index) => ( -
    - -
    - ))} + + {items.map(({ account_id }, index) => ( +
    + +
    + ))} +     )} - + ); }; diff --git a/app/javascript/flavours/glitch/features/collections/detail/index.tsx b/app/javascript/flavours/glitch/features/collections/detail/index.tsx index 28e67837de..f915f9501d 100644 --- a/app/javascript/flavours/glitch/features/collections/detail/index.tsx +++ b/app/javascript/flavours/glitch/features/collections/detail/index.tsx @@ -11,6 +11,7 @@ import { useAccountHandle } from '@/flavours/glitch/components/display_name/defa import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react'; import ShareIcon from '@/material-icons/400-24px/share.svg?react'; import type { ApiCollectionJSON } from 'flavours/glitch/api_types/collections'; +import { Badge } from 'flavours/glitch/components/badge'; import { Callout } from 'flavours/glitch/components/callout'; import { Column } from 'flavours/glitch/components/column'; import { ColumnHeader } from 'flavours/glitch/components/column_header'; @@ -138,7 +139,7 @@ const CollectionHeader: React.FC<{ collection: ApiCollectionJSON }> = ({
    - {tag && #{tag.name}} + {tag && }

    {name}

    diff --git a/app/javascript/flavours/glitch/features/collections/detail/styles.module.scss b/app/javascript/flavours/glitch/features/collections/detail/styles.module.scss index 54d421e037..da972334ff 100644 --- a/app/javascript/flavours/glitch/features/collections/detail/styles.module.scss +++ b/app/javascript/flavours/glitch/features/collections/detail/styles.module.scss @@ -2,7 +2,8 @@ display: flex; flex-direction: column; gap: 12px; - padding: 24px; + padding: 16px; + padding-bottom: 24px; } .titleWithMenu { @@ -20,15 +21,6 @@ min-width: 0; } -.tag { - display: inline-block; - padding: 4px; - font-size: 13px; - font-weight: 500; - color: var(--color-text-secondary); - background: var(--color-bg-secondary); -} - .name { font-size: 22px; font-weight: 500; @@ -71,45 +63,12 @@ } } -.itemList { - padding-inline: 24px; +.sensitiveScreen { + margin: 16px; } .columnSubheading { - padding-bottom: 12px; + padding-inline: 16px; font-size: 15px; font-weight: 500; } - -.accountItemWrapper { - display: flex; - align-items: start; - padding-block: 16px; - - &[data-with-border='true'] { - border-bottom: 1px solid var(--color-border-primary); - } - - :global(.account__note) { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; - line-clamp: 3; - } - - // Hide 'No description provided' message added by `Account` component - :global(.account__note--missing) { - display: none; - } -} - -.accountItem { - --account-name-size: 15px; - --account-handle-color: var(--color-text-secondary); - --account-handle-size: 13px; - --account-bio-color: var(--color-text-primary); - --account-bio-size: 13px; - --account-outer-spacing: 0; - - flex-grow: 1; -} diff --git a/app/javascript/flavours/glitch/features/followers/components/list.tsx b/app/javascript/flavours/glitch/features/followers/components/list.tsx index b79a441ca6..3f1ab5108d 100644 --- a/app/javascript/flavours/glitch/features/followers/components/list.tsx +++ b/app/javascript/flavours/glitch/features/followers/components/list.tsx @@ -1,7 +1,7 @@ import { useCallback, useMemo, useRef } from 'react'; import type { FC, ReactNode } from 'react'; -import { Account } from '@/flavours/glitch/components/account'; +import { AccountListItem } from '@/flavours/glitch/components/account_list_item'; import type { ColumnRef } from '@/flavours/glitch/components/column'; import { Column } from '@/flavours/glitch/components/column'; import { LoadingIndicator } from '@/flavours/glitch/components/loading_indicator'; @@ -55,12 +55,12 @@ export const AccountList: FC = ({ } const children = list?.items.map((followerId) => ( - + )) ?? []; if (prependAccountId) { children.unshift( - , + , ); } return children; diff --git a/app/javascript/flavours/glitch/features/home_timeline/components/inline_follow_suggestions.tsx b/app/javascript/flavours/glitch/features/home_timeline/components/inline_follow_suggestions.tsx index 64a13ee5df..5dc42869e3 100644 --- a/app/javascript/flavours/glitch/features/home_timeline/components/inline_follow_suggestions.tsx +++ b/app/javascript/flavours/glitch/features/home_timeline/components/inline_follow_suggestions.tsx @@ -16,12 +16,12 @@ import { } from 'flavours/glitch/actions/suggestions'; import type { ApiSuggestionSourceJSON } from 'flavours/glitch/api_types/suggestions'; import { Avatar } from 'flavours/glitch/components/avatar'; +import { Badge, VerifiedBadge } from 'flavours/glitch/components/badge'; import { DisplayName } from 'flavours/glitch/components/display_name'; import { FollowButton } from 'flavours/glitch/components/follow_button'; import { Icon } from 'flavours/glitch/components/icon'; import { IconButton } from 'flavours/glitch/components/icon_button'; import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator'; -import { VerifiedBadge } from 'flavours/glitch/components/verified_badge'; import { domain } from 'flavours/glitch/initial_state'; import { useAppDispatch, useAppSelector } from 'flavours/glitch/store'; @@ -110,13 +110,12 @@ const Source: React.FC<{ id: ApiSuggestionSourceJSON }> = ({ id }) => { } return ( -
    - - {label} -
    + label={label} + icon={} + /> ); }; diff --git a/app/javascript/flavours/glitch/features/lists/members.tsx b/app/javascript/flavours/glitch/features/lists/members.tsx index 79f28ac927..1a18e8e499 100644 --- a/app/javascript/flavours/glitch/features/lists/members.tsx +++ b/app/javascript/flavours/glitch/features/lists/members.tsx @@ -19,6 +19,7 @@ import { apiRemoveAccountFromList, } from 'flavours/glitch/api/lists'; import { Avatar } from 'flavours/glitch/components/avatar'; +import { VerifiedBadge } from 'flavours/glitch/components/badge'; import { Button } from 'flavours/glitch/components/button'; import { Column } from 'flavours/glitch/components/column'; import { ColumnHeader } from 'flavours/glitch/components/column_header'; @@ -27,7 +28,6 @@ import { FollowersCounter } from 'flavours/glitch/components/counters'; import { DisplayName } from 'flavours/glitch/components/display_name'; import ScrollableList from 'flavours/glitch/components/scrollable_list'; import { ShortNumber } from 'flavours/glitch/components/short_number'; -import { VerifiedBadge } from 'flavours/glitch/components/verified_badge'; import { useSearchAccounts } from 'flavours/glitch/hooks/useSearchAccounts'; import { me } from 'flavours/glitch/initial_state'; import { useAppDispatch, useAppSelector } from 'flavours/glitch/store'; diff --git a/app/javascript/flavours/glitch/styles/mastodon/components.scss b/app/javascript/flavours/glitch/styles/mastodon/components.scss index fb1f8ea160..d877fc2b76 100644 --- a/app/javascript/flavours/glitch/styles/mastodon/components.scss +++ b/app/javascript/flavours/glitch/styles/mastodon/components.scss @@ -9022,20 +9022,6 @@ noscript { } } } - - &__familiar-followers { - display: flex; - align-items: center; - gap: 10px; - margin-block: 16px; - color: var(--color-text-secondary); - - a:any-link { - font-weight: 500; - text-decoration: none; - color: var(--color-text-primary); - } - } } .account__contents { @@ -9045,6 +9031,7 @@ noscript { .account__details { display: flex; flex-wrap: wrap; + align-items: center; column-gap: 1em; } @@ -11020,11 +11007,6 @@ noscript { } &__source { - display: inline-flex; - align-items: center; - max-width: 100%; - color: var(--color-text-tertiary); - gap: 4px; overflow: hidden; white-space: nowrap; cursor: help; @@ -11033,11 +11015,6 @@ noscript { overflow: hidden; text-overflow: ellipsis; } - - .icon { - width: 16px; - height: 16px; - } } } @@ -11063,11 +11040,6 @@ noscript { } } - .verified-badge { - font-size: 14px; - max-width: 100%; - } - .button { display: block; width: 100%;