Leatherface/mastodon
0
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2026-03-29 03:00:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

Profile redesign: Account fields grid (#37976)

Browse Source
This commit is contained in:
Echo
2026-02-25 17:59:18 +01:00
committed by GitHub
parent f9326efef6
commit dcbf7ab8dc
20 changed files with 488 additions and 412 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/javascript/mastodon/components/emoji/html.tsx
View File

@@ -20,18 +20,7 @@ export interface EmojiHTMLProps {
}
export const EmojiHTML = polymorphicForwardRef<'div', EmojiHTMLProps>(
(
{
extraEmojis,
htmlString,
as: asProp = 'div', // Rename for syntax highlighting
className,
onElement,
onAttribute,
...props
},
ref,
) => {
({ extraEmojis, htmlString, onElement, onAttribute, ...props }, ref) => {
const contents = useMemo(
() =>
htmlStringToComponents(htmlString, {
@@ -44,12 +33,7 @@ export const EmojiHTML = polymorphicForwardRef<'div', EmojiHTMLProps>(
return (
<CustomEmojiProvider emojis={extraEmojis}>
<AnimateEmojiProvider
{...props}
as={asProp}
className={className}
ref={ref}
>
<AnimateEmojiProvider {...props} ref={ref}>
{contents}
</AnimateEmojiProvider>
</CustomEmojiProvider>

13
app/javascript/mastodon/components/mini_card/index.tsx
View File

@@ -23,7 +23,17 @@ export type MiniCardProps = OmitUnion<
export const MiniCard = forwardRef<HTMLDivElement, MiniCardProps>(
(
{ label, value, className, hidden, icon, iconId, iconClassName, ...props },
{
label,
value,
className,
hidden,
icon,
iconId,
iconClassName,
children,
...props
},
ref,
) => {
if (!label) {
@@ -50,6 +60,7 @@ export const MiniCard = forwardRef<HTMLDivElement, MiniCardProps>(
)}
<dt className={classes.label}>{label}</dt>
<dd className={classes.value}>{value}</dd>
{children}
</div>
);
},

125
app/javascript/mastodon/features/account_about/index.tsx
View File

@@ -1,125 +0,0 @@
import type { FC } from 'react';
import { FormattedMessage } from 'react-intl';
import { useParams } from 'react-router';
import { AccountBio } from '@/mastodon/components/account_bio';
import { Column } from '@/mastodon/components/column';
import { ColumnBackButton } from '@/mastodon/components/column_back_button';
import { LoadingIndicator } from '@/mastodon/components/loading_indicator';
import BundleColumnError from '@/mastodon/features/ui/components/bundle_column_error';
import type { AccountId } from '@/mastodon/hooks/useAccountId';
import { useAccountId } from '@/mastodon/hooks/useAccountId';
import { useAccountVisibility } from '@/mastodon/hooks/useAccountVisibility';
import { createAppSelector, useAppSelector } from '@/mastodon/store';
import { AccountHeader } from '../account_timeline/components/account_header';
import { AccountHeaderFields } from '../account_timeline/components/fields';
import { LimitedAccountHint } from '../account_timeline/components/limited_account_hint';
import classes from './styles.module.css';
const selectIsProfileEmpty = createAppSelector(
[(state) => state.accounts, (_, accountId: AccountId) => accountId],
(accounts, accountId) => {
// Null means still loading, otherwise it's a boolean.
if (!accountId) {
return null;
}
const account = accounts.get(accountId);
if (!account) {
return null;
}
return !account.note && !account.fields.size;
},
);
export const AccountAbout: FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
const accountId = useAccountId();
const { blockedBy, hidden, suspended } = useAccountVisibility(accountId);
const forceEmptyState = blockedBy || hidden || suspended;
const isProfileEmpty = useAppSelector((state) =>
selectIsProfileEmpty(state, accountId),
);
if (accountId === null) {
return <BundleColumnError multiColumn={multiColumn} errorType='routing' />;
}
if (!accountId || isProfileEmpty === null) {
return (
<Column bindToDocument={!multiColumn}>
<LoadingIndicator />
</Column>
);
}
const showEmptyMessage = forceEmptyState || isProfileEmpty;
return (
<Column bindToDocument={!multiColumn}>
<ColumnBackButton />
<div className='scrollable scrollable--flex'>
<AccountHeader accountId={accountId} hideTabs={forceEmptyState} />
<div className={classes.wrapper}>
{!showEmptyMessage ? (
<>
<AccountBio
accountId={accountId}
className={`${classes.bio} account__header__content`}
/>
<AccountHeaderFields accountId={accountId} />
</>
) : (
<div className='empty-column-indicator'>
<EmptyMessage accountId={accountId} />
</div>
)}
</div>
</div>
</Column>
);
};
const EmptyMessage: FC<{ accountId: string }> = ({ accountId }) => {
const { blockedBy, hidden, suspended } = useAccountVisibility(accountId);
const currentUserId = useAppSelector(
(state) => state.meta.get('me') as string | null,
);
const { acct } = useParams<{ acct?: string }>();
if (suspended) {
return (
<FormattedMessage
id='empty_column.account_suspended'
defaultMessage='Account suspended'
/>
);
} else if (hidden) {
return <LimitedAccountHint accountId={accountId} />;
} else if (blockedBy) {
return (
<FormattedMessage
id='empty_column.account_unavailable'
defaultMessage='Profile unavailable'
/>
);
} else if (accountId === currentUserId) {
return (
<FormattedMessage
id='empty_column.account_about.me'
defaultMessage='You have not added any information about yourself yet.'
/>
);
}
return (
<FormattedMessage
id='empty_column.account_about.other'
defaultMessage='{acct} has not added any information about themselves yet.'
values={{ acct }}
/>
);
};

7
app/javascript/mastodon/features/account_about/styles.module.css
View File

@@ -1,7 +0,0 @@
.wrapper {
padding: 16px;
}
.bio {
color: var(--color-text-primary);
}

7
app/javascript/mastodon/features/account_timeline/common.ts
View File

@@ -1,5 +1,12 @@
import type { AccountFieldShape } from '@/mastodon/models/account';
import { isServerFeatureEnabled } from '@/mastodon/utils/environment';
export function isRedesignEnabled() {
return isServerFeatureEnabled('profile_redesign');
}
export interface AccountField extends AccountFieldShape {
nameHasEmojis: boolean;
value_plain: string;
valueHasEmojis: boolean;
}

20
app/javascript/mastodon/features/account_timeline/components/account_header.tsx
View File

@@ -210,18 +210,14 @@ export const AccountHeader: React.FC<{
<AccountNote accountId={accountId} />
))}
{(!isRedesign || layout === 'single-column') && (
<>
<AccountBio
accountId={accountId}
className={classNames(
'account__header__content',
isRedesign && redesignClasses.bio,
)}
/>
<AccountHeaderFields accountId={accountId} />
</>
)}
<AccountBio
accountId={accountId}
className={classNames(
'account__header__content',
isRedesign && redesignClasses.bio,
)}
/>
<AccountHeaderFields accountId={accountId} />
</div>
<AccountNumberFields accountId={accountId} />

394
app/javascript/mastodon/features/account_timeline/components/fields.tsx
View File

@@ -1,25 +1,31 @@
import { useCallback, useMemo, useState } from 'react';
import type { FC, Key } from 'react';
import { useCallback, useMemo, useRef, useState } from 'react';
import type { FC } from 'react';
import { defineMessage, FormattedMessage, useIntl } from 'react-intl';
import classNames from 'classnames';
import htmlConfig from '@/config/html-tags.json';
import IconVerified from '@/images/icons/icon_verified.svg?react';
import { openModal } from '@/mastodon/actions/modal';
import { AccountFields } from '@/mastodon/components/account_fields';
import { CustomEmojiProvider } from '@/mastodon/components/emoji/context';
import type { EmojiHTMLProps } from '@/mastodon/components/emoji/html';
import { EmojiHTML } from '@/mastodon/components/emoji/html';
import { FormattedDateWrapper } from '@/mastodon/components/formatted_date';
import { Icon } from '@/mastodon/components/icon';
import { IconButton } from '@/mastodon/components/icon_button';
import { MiniCard } from '@/mastodon/components/mini_card';
import { useElementHandledLink } from '@/mastodon/components/status/handled_link';
import { useAccount } from '@/mastodon/hooks/useAccount';
import type { Account, AccountFieldShape } from '@/mastodon/models/account';
import type { OnElementHandler } from '@/mastodon/utils/html';
import { useResizeObserver } from '@/mastodon/hooks/useObserver';
import type { Account } from '@/mastodon/models/account';
import { useAppDispatch } from '@/mastodon/store';
import MoreIcon from '@/material-icons/400-24px/more_horiz.svg?react';
import { cleanExtraEmojis } from '../../emoji/normalize';
import type { AccountField } from '../common';
import { isRedesignEnabled } from '../common';
import { useFieldHtml } from '../hooks/useFieldHtml';
import classes from './redesign.module.scss';
@@ -74,172 +80,310 @@ const RedesignAccountHeaderFields: FC<{ account: Account }> = ({ account }) => {
() => cleanExtraEmojis(account.emojis),
[account.emojis],
);
const textHasCustomEmoji = useCallback(
(text?: string | null) => {
if (!emojis || !text) {
return false;
}
for (const emoji of Object.keys(emojis)) {
if (text.includes(`:${emoji}:`)) {
return true;
}
}
return false;
},
[emojis],
);
const fields: AccountField[] = useMemo(() => {
const fields = account.fields.toJS();
if (!emojis) {
return fields.map((field) => ({
...field,
nameHasEmojis: false,
value_plain: field.value_plain ?? '',
valueHasEmojis: false,
}));
}
const shortcodes = Object.keys(emojis);
return fields.map((field) => ({
...field,
nameHasEmojis: shortcodes.some((code) =>
field.name.includes(`:${code}:`),
),
value_plain: field.value_plain ?? '',
valueHasEmojis: shortcodes.some((code) =>
field.value_plain?.includes(`:${code}:`),
),
}));
}, [account.fields, emojis]);
const htmlHandlers = useElementHandledLink({
hashtagAccountId: account.id,
});
if (account.fields.isEmpty()) {
const { wrapperRef } = useColumnWrap();
if (fields.length === 0) {
return null;
}
return (
<CustomEmojiProvider emojis={emojis}>
<dl className={classes.fieldList}>
{account.fields.map((field, key) => (
<FieldRow
key={key}
{...field.toJSON()}
htmlHandlers={htmlHandlers}
textHasCustomEmoji={textHasCustomEmoji}
/>
<dl className={classes.fieldList} ref={wrapperRef}>
{fields.map((field, key) => (
<FieldRow key={key} field={field} htmlHandlers={htmlHandlers} />
))}
</dl>
</CustomEmojiProvider>
);
};
const FieldRow: FC<
{
textHasCustomEmoji: (text?: string | null) => boolean;
htmlHandlers: ReturnType<typeof useElementHandledLink>;
} & AccountFieldShape
> = ({
textHasCustomEmoji,
htmlHandlers,
name,
name_emojified,
value_emojified,
value_plain,
verified_at,
}) => {
const FieldRow: FC<{
htmlHandlers: ReturnType<typeof useElementHandledLink>;
field: AccountField;
}> = ({ htmlHandlers, field }) => {
const intl = useIntl();
const [showAll, setShowAll] = useState(false);
const handleClick = useCallback(() => {
setShowAll((prev) => !prev);
}, []);
const {
name,
name_emojified,
nameHasEmojis,
value_emojified,
value_plain,
valueHasEmojis,
verified_at,
} = field;
const { wrapperRef, isLabelOverflowing, isValueOverflowing } =
useFieldOverflow();
const dispatch = useAppDispatch();
const handleOverflowClick = useCallback(() => {
dispatch(
openModal({
modalType: 'ACCOUNT_FIELD_OVERFLOW',
modalProps: { field },
}),
);
}, [dispatch, field]);
return (
/* eslint-disable -- This method of showing field contents is not very accessible, but it's what we've got for now */
<div
<MiniCard
className={classNames(
classes.fieldRow,
classes.fieldItem,
verified_at && classes.fieldVerified,
showAll && classes.fieldShowAll,
)}
onClick={handleClick}
/* eslint-enable */
>
<FieldHTML
as='dt'
text={name}
textEmojified={name_emojified}
textHasCustomEmoji={textHasCustomEmoji(name)}
titleLength={50}
className='translate'
{...htmlHandlers}
/>
<dd>
label={
<FieldHTML
as='span'
text={value_plain ?? ''}
textEmojified={value_emojified}
textHasCustomEmoji={textHasCustomEmoji(value_plain ?? '')}
titleLength={120}
text={name}
textEmojified={name_emojified}
textHasCustomEmoji={nameHasEmojis}
className='translate'
isOverflowing={isLabelOverflowing}
onOverflowClick={handleOverflowClick}
{...htmlHandlers}
/>
{verified_at && (
<Icon
id='verified'
icon={IconVerified}
className={classes.fieldVerifiedIcon}
aria-label={intl.formatMessage(verifyMessage, {
date: intl.formatDate(verified_at, dateFormatOptions),
})}
noFill
/>
)}
</dd>
</div>
}
value={
<FieldHTML
text={value_plain}
textEmojified={value_emojified}
textHasCustomEmoji={valueHasEmojis}
isOverflowing={isValueOverflowing}
onOverflowClick={handleOverflowClick}
{...htmlHandlers}
/>
}
ref={wrapperRef}
>
{verified_at && (
<Icon
id='verified'
icon={IconVerified}
className={classes.fieldVerifiedIcon}
aria-label={intl.formatMessage(verifyMessage, {
date: intl.formatDate(verified_at, dateFormatOptions),
})}
noFill
/>
)}
</MiniCard>
);
};
const FieldHTML: FC<
{
as?: 'span' | 'dt';
text: string;
textEmojified: string;
textHasCustomEmoji: boolean;
titleLength: number;
} & Omit<EmojiHTMLProps, 'htmlString'>
> = ({
as,
type FieldHTMLProps = {
text: string;
textEmojified: string;
textHasCustomEmoji: boolean;
isOverflowing?: boolean;
onOverflowClick?: () => void;
} & Omit<EmojiHTMLProps, 'htmlString'>;
const FieldHTML: FC<FieldHTMLProps> = ({
className,
extraEmojis,
text,
textEmojified,
textHasCustomEmoji,
titleLength,
isOverflowing,
onOverflowClick,
onElement,
...props
}) => {
const handleElement: OnElementHandler = useCallback(
(element, props, children, extra) => {
if (element instanceof HTMLAnchorElement) {
// Don't allow custom emoji and links in the same field to prevent verification spoofing.
if (textHasCustomEmoji) {
return (
<span {...filterAttributesForSpan(props)} key={props.key as Key}>
{children}
</span>
);
}
return onElement?.(element, props, children, extra);
}
return undefined;
},
[onElement, textHasCustomEmoji],
);
const intl = useIntl();
const handleElement = useFieldHtml(textHasCustomEmoji, onElement);
return (
const html = (
<EmojiHTML
as={as}
as='span'
htmlString={textEmojified}
title={showTitleOnLength(text, titleLength)}
className={className}
onElement={handleElement}
data-contents
{...props}
/>
);
if (!isOverflowing) {
return html;
}
return (
<>
{html}
<IconButton
icon='ellipsis'
iconComponent={MoreIcon}
title={intl.formatMessage({
id: 'account.field_overflow',
defaultMessage: 'Show full content',
})}
className={classes.fieldOverflowButton}
onClick={onOverflowClick}
/>
</>
);
};
function filterAttributesForSpan(props: Record<string, unknown>) {
const validAttributes: Record<string, unknown> = {};
for (const key of Object.keys(props)) {
if (key in htmlConfig.tags.span.attributes) {
validAttributes[key] = props[key];
function useColumnWrap() {
const listRef = useRef<HTMLDListElement | null>(null);
const handleRecalculate = useCallback(() => {
const listEle = listRef.current;
if (!listEle) {
return;
}
}
return validAttributes;
// Calculate dimensions from styles and element size to determine column spans.
const styles = getComputedStyle(listEle);
const gap = parseFloat(styles.columnGap || styles.gap || '0');
const columnCount = parseInt(styles.getPropertyValue('--cols')) || 2;
const listWidth = listEle.offsetWidth;
const colWidth = (listWidth - gap * (columnCount - 1)) / columnCount;
// Matrix to hold the grid layout.
const itemGrid: { ele: HTMLElement; span: number }[][] = [];
// First, determine the column span for each item and populate the grid matrix.
let currentRow = 0;
for (const child of listEle.children) {
if (!(child instanceof HTMLElement)) {
continue;
}
// This uses a data attribute to detect which elements to measure that overflow.
const contents = child.querySelectorAll('[data-contents]');
const childStyles = getComputedStyle(child);
const padding =
parseFloat(childStyles.paddingLeft) +
parseFloat(childStyles.paddingRight);
const contentWidth =
Math.max(
...Array.from(contents).map((content) => content.scrollWidth),
) + padding;
const contentSpan = Math.ceil(contentWidth / colWidth);
const maxColSpan = Math.min(contentSpan, columnCount);
const curRow = itemGrid[currentRow] ?? [];
const availableCols =
columnCount - curRow.reduce((carry, curr) => carry + curr.span, 0);
// Move to next row if current item doesn't fit.
if (maxColSpan > availableCols) {
currentRow++;
}
itemGrid[currentRow] = (itemGrid[currentRow] ?? []).concat({
ele: child,
span: maxColSpan,
});
}
// Next, iterate through the grid matrix and set the column spans and row breaks.
for (const row of itemGrid) {
let remainingRowSpan = columnCount;
for (let i = 0; i < row.length; i++) {
const item = row[i];
if (!item) {
break;
}
const { ele, span } = item;
if (i < row.length - 1) {
ele.dataset.cols = span.toString();
remainingRowSpan -= span;
} else {
// Last item in the row takes up remaining space to fill the row.
ele.dataset.cols = remainingRowSpan.toString();
break;
}
}
}
}, []);
const observer = useResizeObserver(handleRecalculate);
const wrapperRefCallback = useCallback(
(element: HTMLDListElement | null) => {
if (element) {
listRef.current = element;
observer.observe(element);
}
},
[observer],
);
return { wrapperRef: wrapperRefCallback };
}
function showTitleOnLength(value: string | null, maxLength: number) {
if (value && value.length > maxLength) {
return value;
}
return undefined;
function useFieldOverflow() {
const [isLabelOverflowing, setIsLabelOverflowing] = useState(false);
const [isValueOverflowing, setIsValueOverflowing] = useState(false);
const wrapperRef = useRef<HTMLElement | null>(null);
const handleRecalculate = useCallback(() => {
const wrapperEle = wrapperRef.current;
if (!wrapperEle) return;
const wrapperStyles = getComputedStyle(wrapperEle);
const maxWidth =
wrapperEle.offsetWidth -
(parseFloat(wrapperStyles.paddingLeft) +
parseFloat(wrapperStyles.paddingRight));
const label = wrapperEle.querySelector<HTMLSpanElement>(
'dt > [data-contents]',
);
const value = wrapperEle.querySelector<HTMLSpanElement>(
'dd > [data-contents]',
);
setIsLabelOverflowing(label ? label.scrollWidth > maxWidth : false);
setIsValueOverflowing(value ? value.scrollWidth > maxWidth : false);
}, []);
const observer = useResizeObserver(handleRecalculate);
const wrapperRefCallback = useCallback(
(element: HTMLElement | null) => {
if (element) {
wrapperRef.current = element;
observer.observe(element);
}
},
[observer],
);
return {
isLabelOverflowing,
isValueOverflowing,
wrapperRef: wrapperRefCallback,
};
}

88
app/javascript/mastodon/features/account_timeline/components/redesign.module.scss
View File

@@ -214,64 +214,90 @@ svg.badgeIcon {
}
.fieldList {
--cols: 4;
position: relative;
display: grid;
grid-template-columns: 160px 1fr;
column-gap: 12px;
grid-template-columns: repeat(var(--cols), 1fr);
gap: 12px;
margin: 16px 0;
border-top: 0.5px solid var(--color-border-primary);
@container (width < 420px) {
grid-template-columns: 100px 1fr;
--cols: 2;
}
}
.fieldRow {
display: grid;
grid-column: 1 / -1;
align-items: start;
grid-template-columns: subgrid;
padding: 8px;
border-bottom: 0.5px solid var(--color-border-primary);
.fieldItem {
--col-span: 1;
> :is(dt, dd) {
&:not(.fieldShowAll) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
grid-column: span var(--col-span);
position: relative;
@for $col from 2 through 4 {
&[data-cols='#{$col}'] {
--col-span: #{$col};
}
}
> dt {
color: var(--color-text-secondary);
dt {
font-weight: normal;
}
> dd {
display: flex;
align-items: center;
gap: 4px;
dd {
font-weight: 500;
}
a {
color: inherit;
text-decoration: none;
:is(dt, dd) {
text-overflow: initial;
&:hover,
&:focus {
text-decoration: underline;
// Override the MiniCard link styles
a {
color: inherit;
font-weight: inherit;
&:hover,
&:focus {
color: inherit;
text-decoration: underline;
}
}
}
}
.fieldVerified {
background-color: var(--color-bg-success-softer);
dt {
padding-right: 24px;
}
}
.fieldVerifiedIcon {
width: 16px;
height: 16px;
position: absolute;
top: 8px;
right: 8px;
}
.fieldOverflowButton {
--default-bg-color: var(--color-bg-secondary-solid);
--hover-bg-color: color-mix(
in oklab,
var(--color-bg-brand-base),
var(--default-bg-color) var(--overlay-strength-brand)
);
position: absolute;
right: 8px;
padding: 0 2px;
transition: background-color 0.2s ease-in-out;
border: 2px solid var(--color-bg-primary);
> svg {
width: 16px;
height: 12px;
}
}
.fieldNumbersWrapper {

10
app/javascript/mastodon/features/account_timeline/components/tabs.tsx
View File

@@ -5,23 +5,15 @@ import { FormattedMessage } from 'react-intl';
import type { NavLinkProps } from 'react-router-dom';
import { NavLink } from 'react-router-dom';
import { useLayout } from '@/mastodon/hooks/useLayout';
import { isRedesignEnabled } from '../common';
import classes from './redesign.module.scss';
export const AccountTabs: FC<{ acct: string }> = ({ acct }) => {
const { layout } = useLayout();
if (isRedesignEnabled()) {
return (
<div className={classes.tabs}>
{layout !== 'single-column' && (
<NavLink exact to={`/@${acct}/about`}>
<FormattedMessage id='account.about' defaultMessage='About' />
</NavLink>
)}
<NavLink isActive={isActive} to={`/@${acct}/posts`}>
<NavLink isActive={isActive} to={`/@${acct}`}>
<FormattedMessage id='account.activity' defaultMessage='Activity' />
</NavLink>
<NavLink exact to={`/@${acct}/media`}>

38
app/javascript/mastodon/features/account_timeline/hooks/useFieldHtml.tsx Normal file
View File

@@ -0,0 +1,38 @@
import type { Key } from 'react';
import { useCallback } from 'react';
import htmlConfig from '@/config/html-tags.json';
import type { OnElementHandler } from '@/mastodon/utils/html';
export function useFieldHtml(
hasCustomEmoji: boolean,
onElement?: OnElementHandler,
): OnElementHandler {
return useCallback(
(element, props, children, extra) => {
if (element instanceof HTMLAnchorElement) {
// Don't allow custom emoji and links in the same field to prevent verification spoofing.
if (hasCustomEmoji) {
return (
<span {...filterAttributesForSpan(props)} key={props.key as Key}>
{children}
</span>
);
}
return onElement?.(element, props, children, extra);
}
return undefined;
},
[onElement, hasCustomEmoji],
);
}
function filterAttributesForSpan(props: Record<string, unknown>) {
const validAttributes: Record<string, unknown> = {};
for (const key of Object.keys(props)) {
if (key in htmlConfig.tags.span.attributes) {
validAttributes[key] = props[key];
}
}
return validAttributes;
}

44
app/javascript/mastodon/features/account_timeline/modals/field_modal.tsx Normal file
View File

@@ -0,0 +1,44 @@
import type { FC } from 'react';
import { FormattedMessage } from 'react-intl';
import { EmojiHTML } from '@/mastodon/components/emoji/html';
import type { AccountField } from '../common';
import { useFieldHtml } from '../hooks/useFieldHtml';
import classes from './styles.module.css';
export const AccountFieldModal: FC<{
onClose: () => void;
field: AccountField;
}> = ({ onClose, field }) => {
const handleLabelElement = useFieldHtml(field.nameHasEmojis);
const handleValueElement = useFieldHtml(field.valueHasEmojis);
return (
<div className='modal-root__modal safety-action-modal'>
<div className='safety-action-modal__top'>
<div className='safety-action-modal__confirmation'>
<EmojiHTML
as='p'
htmlString={field.name_emojified}
onElement={handleLabelElement}
/>
<EmojiHTML
as='p'
htmlString={field.value_emojified}
onElement={handleValueElement}
className={classes.fieldValue}
/>
</div>
</div>
<div className='safety-action-modal__bottom'>
<div className='safety-action-modal__actions'>
<button onClick={onClose} className='link-button' type='button'>
<FormattedMessage id='lightbox.close' defaultMessage='Close' />
</button>
</div>
</div>
</div>
);
};

2
app/javascript/mastodon/features/account_timeline/modals/note_modal.tsx
View File

@@ -13,7 +13,7 @@ import { useAppDispatch, useAppSelector } from '@/mastodon/store';
import { ConfirmationModal } from '../../ui/components/confirmation_modals';
import classes from './modals.module.css';
import classes from './styles.module.css';
const messages = defineMessages({
newTitle: {

6
app/javascript/mastodon/features/account_timeline/modals/modals.module.css → app/javascript/mastodon/features/account_timeline/modals/styles.module.css
View File

@@ -19,3 +19,9 @@
outline: var(--outline-focus-default);
outline-offset: 2px;
}
.fieldValue {
color: var(--color-text-primary);
font-weight: 600;
margin-top: 4px;
}

1
app/javascript/mastodon/features/ui/components/modal_root.jsx
View File

@@ -92,6 +92,7 @@ export const MODAL_COMPONENTS = {
'ANNUAL_REPORT': AnnualReportModal,
'COMPOSE_PRIVACY': () => Promise.resolve({ default: VisibilityModal }),
'ACCOUNT_NOTE': () => import('@/mastodon/features/account_timeline/modals/note_modal').then(module => ({ default: module.AccountNoteModal })),
'ACCOUNT_FIELD_OVERFLOW': () => import('@/mastodon/features/account_timeline/modals/field_modal').then(module => ({ default: module.AccountFieldModal })),
'ACCOUNT_EDIT_NAME': () => import('@/mastodon/features/account_edit/components/name_modal').then(module => ({ default: module.NameModal })),
'ACCOUNT_EDIT_BIO': () => import('@/mastodon/features/account_edit/components/bio_modal').then(module => ({ default: module.BioModal })),
};

34
app/javascript/mastodon/features/ui/index.jsx
View File

@@ -22,7 +22,7 @@ import { identityContextPropShape, withIdentity } from 'mastodon/identity_contex
import { layoutFromWindow } from 'mastodon/is_mobile';
import { WithRouterPropTypes } from 'mastodon/utils/react_router';
import { checkAnnualReport } from '@/mastodon/reducers/slices/annual_report';
import { isClientFeatureEnabled, isServerFeatureEnabled } from '@/mastodon/utils/environment';
import { isClientFeatureEnabled } from '@/mastodon/utils/environment';
import { uploadCompose, resetCompose, changeComposeSpoilerness } from '../../actions/compose';
import { clearHeight } from '../../actions/height_cache';
@@ -80,7 +80,6 @@ import {
PrivacyPolicy,
TermsOfService,
AccountFeatured,
AccountAbout,
AccountEdit,
AccountEditFeaturedTags,
Quotes,
@@ -166,36 +165,6 @@ class SwitchingColumnsArea extends PureComponent {
}
const profileRedesignRoutes = [];
if (isServerFeatureEnabled('profile_redesign')) {
profileRedesignRoutes.push(
<WrappedRoute key="posts" path={['/@:acct/posts', '/accounts/:id/posts']} exact component={AccountTimeline} content={children} />,
);
// Check if we're in single-column mode. Confusingly, the singleColumn prop includes mobile.
if (this.props.layout === 'single-column') {
// When in single column mode (desktop w/o advanced view), redirect both the root and about to the posts tab.
profileRedesignRoutes.push(
<Redirect key="acct-redirect" from='/@:acct' to='/@:acct/posts' exact />,
<Redirect key="id-redirect" from='/accounts/:id' to='/accounts/:id/posts' exact />,
<Redirect key="about-acct-redirect" from='/@:acct/about' to='/@:acct/posts' exact />,
<Redirect key="about-id-redirect" from='/accounts/:id/about' to='/accounts/:id/posts' exact />,
);
} else {
// Otherwise, provide and redirect to the /about page.
profileRedesignRoutes.push(
<WrappedRoute key="about" path={['/@:acct/about', '/accounts/:id/about']} component={AccountAbout} content={children} />,
<Redirect key="acct-redirect" from='/@:acct' to='/@:acct/about' exact />,
<Redirect key="id-redirect" from='/accounts/:id' to='/accounts/:id/about' exact />
);
}
} else {
profileRedesignRoutes.push(
<WrappedRoute path={['/@:acct', '/accounts/:id']} exact component={AccountTimeline} content={children} />,
// If the redesign is not enabled but someone shares an /about link, redirect to the root.
<Redirect key="about-acct-redirect" from='/@:acct/about' to='/@:acct' exact />,
<Redirect key="about-id-redirect" from='/accounts/:id/about' to='/accounts/:id' exact />
);
}
if (isClientFeatureEnabled('profile_editing')) {
profileRedesignRoutes.push(
<WrappedRoute key="edit" path='/profile/edit' component={AccountEdit} content={children} />,
@@ -257,6 +226,7 @@ class SwitchingColumnsArea extends PureComponent {
{...profileRedesignRoutes}
<WrappedRoute path={['/@:acct', '/accounts/:id']} exact component={AccountTimeline} content={children} />
<WrappedRoute path={['/@:acct/featured', '/accounts/:id/featured']} component={AccountFeatured} content={children} />
<WrappedRoute path='/@:acct/tagged/:tagged?' exact component={AccountTimeline} content={children} />
<WrappedRoute path={['/@:acct/with_replies', '/accounts/:id/with_replies']} component={AccountTimeline} content={children} componentParams={{ withReplies: true }} />

5
app/javascript/mastodon/features/ui/util/async-components.js
View File

@@ -93,11 +93,6 @@ export function AccountFeatured() {
return import('../../account_featured');
}
export function AccountAbout() {
return import('../../account_about')
.then((module) => ({ default: module.AccountAbout }));
}
export function AccountEdit() {
return import('../../account_edit')
.then((module) => ({ default: module.AccountEdit }));

29
app/javascript/mastodon/hooks/useObserver.ts Normal file
View File

@@ -0,0 +1,29 @@
import { useEffect, useRef } from 'react';
export function useResizeObserver(callback: ResizeObserverCallback) {
const observerRef = useRef<ResizeObserver | null>(null);
observerRef.current ??= new ResizeObserver(callback);
useEffect(() => {
const observer = observerRef.current;
return () => {
observer?.disconnect();
};
}, []);
return observerRef.current;
}
export function useMutationObserver(callback: MutationCallback) {
const observerRef = useRef<MutationObserver | null>(null);
observerRef.current ??= new MutationObserver(callback);
useEffect(() => {
const observer = observerRef.current;
return () => {
observer?.disconnect();
};
}, []);
return observerRef.current;
}

51
app/javascript/mastodon/hooks/useOverflow.ts
View File

@@ -1,6 +1,8 @@
import type { MutableRefObject, RefCallback } from 'react';
import { useState, useRef, useCallback, useEffect } from 'react';
import { useMutationObserver, useResizeObserver } from './useObserver';
/**
* Hook to manage overflow of items in a container with a "more" button.
*
@@ -182,48 +184,30 @@ export function useOverflowObservers({
// This is the item container element.
const listRef = useRef<HTMLElement | null>(null);
// Set up observers to watch for size and content changes.
const resizeObserverRef = useRef<ResizeObserver | null>(null);
const mutationObserverRef = useRef<MutationObserver | null>(null);
// Helper to get or create the resize observer.
const resizeObserver = useCallback(() => {
const observer = (resizeObserverRef.current ??= new ResizeObserver(
onRecalculate,
));
return observer;
}, [onRecalculate]);
const resizeObserver = useResizeObserver(onRecalculate);
// Iterate through children and observe them for size changes.
const handleChildrenChange = useCallback(() => {
const listEle = listRef.current;
const observer = resizeObserver();
if (listEle) {
for (const child of listEle.children) {
if (child instanceof HTMLElement) {
observer.observe(child);
resizeObserver.observe(child);
}
}
}
onRecalculate();
}, [onRecalculate, resizeObserver]);
// Helper to get or create the mutation observer.
const mutationObserver = useCallback(() => {
const observer = (mutationObserverRef.current ??= new MutationObserver(
handleChildrenChange,
));
return observer;
}, [handleChildrenChange]);
const mutationObserver = useMutationObserver(handleChildrenChange);
// Set up observers.
const handleObserve = useCallback(() => {
if (wrapperRef.current) {
resizeObserver().observe(wrapperRef.current);
resizeObserver.observe(wrapperRef.current);
}
if (listRef.current) {
mutationObserver().observe(listRef.current, { childList: true });
mutationObserver.observe(listRef.current, { childList: true });
handleChildrenChange();
}
}, [handleChildrenChange, mutationObserver, resizeObserver]);
@@ -233,12 +217,12 @@ export function useOverflowObservers({
const wrapperRefCallback = useCallback(
(node: HTMLElement | null) => {
if (node) {
wrapperRef.current = node;
wrapperRef.current = node; // eslint-disable-line react-hooks/immutability -- https://github.com/facebook/react/issues/34955
handleObserve();
if (typeof onWrapperRef === 'function') {
onWrapperRef(node);
} else if (onWrapperRef && 'current' in onWrapperRef) {
onWrapperRef.current = node;
onWrapperRef.current = node; // eslint-disable-line react-hooks/immutability -- https://github.com/facebook/react/issues/34955
}
}
},
@@ -254,28 +238,13 @@ export function useOverflowObservers({
if (typeof onListRef === 'function') {
onListRef(node);
} else if (onListRef && 'current' in onListRef) {
onListRef.current = node;
onListRef.current = node; // eslint-disable-line react-hooks/immutability -- https://github.com/facebook/react/issues/34955
}
}
},
[handleObserve, onListRef],
);
useEffect(() => {
handleObserve();
return () => {
if (resizeObserverRef.current) {
resizeObserverRef.current.disconnect();
resizeObserverRef.current = null;
}
if (mutationObserverRef.current) {
mutationObserverRef.current.disconnect();
mutationObserverRef.current = null;
}
};
}, [handleObserve]);
return {
wrapperRefCallback,
listRefCallback,

4
app/javascript/mastodon/locales/en.json
View File

@@ -13,7 +13,6 @@
"about.not_available": "This information has not been made available on this server.",
"about.powered_by": "Decentralized social media powered by {mastodon}",
"about.rules": "Server rules",
"account.about": "About",
"account.account_note_header": "Personal note",
"account.activity": "Activity",
"account.add_note": "Add a personal note",
@@ -49,6 +48,7 @@
"account.featured.hashtags": "Hashtags",
"account.featured_tags.last_status_at": "Last post on {date}",
"account.featured_tags.last_status_never": "No posts",
"account.field_overflow": "Show full content",
"account.filters.all": "All activity",
"account.filters.boosts_toggle": "Show boosts",
"account.filters.posts_boosts": "Posts and boosts",
@@ -499,8 +499,6 @@
"emoji_button.search_results": "Search results",
"emoji_button.symbols": "Symbols",
"emoji_button.travel": "Travel & Places",
"empty_column.account_about.me": "You have not added any information about yourself yet.",
"empty_column.account_about.other": "{acct} has not added any information about themselves yet.",
"empty_column.account_featured.me": "You have not featured anything yet. Did you know that you can feature your hashtags you use the most, and even your friend’s accounts on your profile?",
"empty_column.account_featured.other": "{acct} has not featured anything yet. Did you know that you can feature your hashtags you use the most, and even your friend’s accounts on your profile?",
"empty_column.account_featured_other.unknown": "This account has not featured anything yet.",

2
config/routes.rb
View File

@@ -155,9 +155,7 @@ Rails.application.routes.draw do
constraints(username: %r{[^@/.]+}) do
with_options to: 'accounts#show' do
get '/@:username', as: :short_account
get '/@:username/posts'
get '/@:username/featured'
get '/@:username/about'
get '/@:username/with_replies', as: :short_account_with_replies
get '/@:username/media', as: :short_account_media
get '/@:username/tagged/:tag', as: :short_account_tag