diff --git a/app/javascript/flavours/glitch/components/emoji/html.tsx b/app/javascript/flavours/glitch/components/emoji/html.tsx index daa58d2470..5dd7b504d8 100644 --- a/app/javascript/flavours/glitch/components/emoji/html.tsx +++ b/app/javascript/flavours/glitch/components/emoji/html.tsx @@ -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 ( - + {contents} diff --git a/app/javascript/flavours/glitch/components/mini_card/index.tsx b/app/javascript/flavours/glitch/components/mini_card/index.tsx index fe1e84ff37..e3357cb1ae 100644 --- a/app/javascript/flavours/glitch/components/mini_card/index.tsx +++ b/app/javascript/flavours/glitch/components/mini_card/index.tsx @@ -23,7 +23,17 @@ export type MiniCardProps = OmitUnion< export const MiniCard = forwardRef( ( - { 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( )}
{label}
{value}
+ {children} ); }, diff --git a/app/javascript/flavours/glitch/features/account_about/index.tsx b/app/javascript/flavours/glitch/features/account_about/index.tsx deleted file mode 100644 index 433e47af54..0000000000 --- a/app/javascript/flavours/glitch/features/account_about/index.tsx +++ /dev/null @@ -1,125 +0,0 @@ -import type { FC } from 'react'; - -import { FormattedMessage } from 'react-intl'; - -import { useParams } from 'react-router'; - -import { AccountBio } from '@/flavours/glitch/components/account_bio'; -import { Column } from '@/flavours/glitch/components/column'; -import { ColumnBackButton } from '@/flavours/glitch/components/column_back_button'; -import { LoadingIndicator } from '@/flavours/glitch/components/loading_indicator'; -import BundleColumnError from '@/flavours/glitch/features/ui/components/bundle_column_error'; -import type { AccountId } from '@/flavours/glitch/hooks/useAccountId'; -import { useAccountId } from '@/flavours/glitch/hooks/useAccountId'; -import { useAccountVisibility } from '@/flavours/glitch/hooks/useAccountVisibility'; -import { createAppSelector, useAppSelector } from '@/flavours/glitch/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 ; - } - - if (!accountId || isProfileEmpty === null) { - return ( - - - - ); - } - - const showEmptyMessage = forceEmptyState || isProfileEmpty; - - return ( - - -
- -
- {!showEmptyMessage ? ( - <> - - - - ) : ( -
- -
- )} -
-
- - ); -}; - -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 ( - - ); - } else if (hidden) { - return ; - } else if (blockedBy) { - return ( - - ); - } else if (accountId === currentUserId) { - return ( - - ); - } - - return ( - - ); -}; diff --git a/app/javascript/flavours/glitch/features/account_about/styles.module.css b/app/javascript/flavours/glitch/features/account_about/styles.module.css deleted file mode 100644 index a0f5569b29..0000000000 --- a/app/javascript/flavours/glitch/features/account_about/styles.module.css +++ /dev/null @@ -1,7 +0,0 @@ -.wrapper { - padding: 16px; -} - -.bio { - color: var(--color-text-primary); -} diff --git a/app/javascript/flavours/glitch/features/account_timeline/common.ts b/app/javascript/flavours/glitch/features/account_timeline/common.ts index 866b2549e6..9a4dbd7491 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/common.ts +++ b/app/javascript/flavours/glitch/features/account_timeline/common.ts @@ -1,5 +1,12 @@ +import type { AccountFieldShape } from '@/flavours/glitch/models/account'; import { isServerFeatureEnabled } from '@/flavours/glitch/utils/environment'; export function isRedesignEnabled() { return isServerFeatureEnabled('profile_redesign'); } + +export interface AccountField extends AccountFieldShape { + nameHasEmojis: boolean; + value_plain: string; + valueHasEmojis: boolean; +} 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 873542ed39..db33bb2220 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 @@ -210,18 +210,14 @@ export const AccountHeader: React.FC<{ ))} - {(!isRedesign || layout === 'single-column') && ( - <> - - - - )} + + )} diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/fields.tsx b/app/javascript/flavours/glitch/features/account_timeline/components/fields.tsx index ddbb68f4fa..0bb5002b45 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/fields.tsx +++ b/app/javascript/flavours/glitch/features/account_timeline/components/fields.tsx @@ -1,28 +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 { openModal } from '@/flavours/glitch/actions/modal'; import { AccountFields } from '@/flavours/glitch/components/account_fields'; 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 { FormattedDateWrapper } from '@/flavours/glitch/components/formatted_date'; 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 { useAccount } from '@/flavours/glitch/hooks/useAccount'; -import type { - Account, - AccountFieldShape, -} from '@/flavours/glitch/models/account'; -import type { OnElementHandler } from '@/flavours/glitch/utils/html'; +import { useResizeObserver } from '@/flavours/glitch/hooks/useObserver'; +import type { Account } 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 { isRedesignEnabled } from '../common'; +import { useFieldHtml } from '../hooks/useFieldHtml'; import classes from './redesign.module.scss'; @@ -77,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 ( -
- {account.fields.map((field, key) => ( - +
+ {fields.map((field, key) => ( + ))}
); }; -const FieldRow: FC< - { - textHasCustomEmoji: (text?: string | null) => boolean; - htmlHandlers: ReturnType; - } & AccountFieldShape -> = ({ - textHasCustomEmoji, - htmlHandlers, - name, - name_emojified, - value_emojified, - value_plain, - verified_at, -}) => { +const FieldRow: FC<{ + htmlHandlers: ReturnType; + 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 */ -
- -
+ label={ - - {verified_at && ( - - )} -
-
+ } + value={ + + } + ref={wrapperRef} + > + {verified_at && ( + + )} + ); }; -const FieldHTML: FC< - { - as?: 'span' | 'dt'; - text: string; - textEmojified: string; - textHasCustomEmoji: boolean; - titleLength: number; - } & Omit -> = ({ - as, +type FieldHTMLProps = { + text: string; + textEmojified: string; + textHasCustomEmoji: boolean; + isOverflowing?: boolean; + onOverflowClick?: () => void; +} & Omit; + +const FieldHTML: FC = ({ 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 ( - - {children} - - ); - } - return onElement?.(element, props, children, extra); - } - return undefined; - }, - [onElement, textHasCustomEmoji], - ); + const intl = useIntl(); + const handleElement = useFieldHtml(textHasCustomEmoji, onElement); - return ( + const html = ( ); + if (!isOverflowing) { + return html; + } + + return ( + <> + {html} + + + ); }; -function filterAttributesForSpan(props: Record) { - const validAttributes: Record = {}; - for (const key of Object.keys(props)) { - if (key in htmlConfig.tags.span.attributes) { - validAttributes[key] = props[key]; +function useColumnWrap() { + const listRef = useRef(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(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( + 'dt > [data-contents]', + ); + const value = wrapperEle.querySelector( + '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, + }; } diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/redesign.module.scss b/app/javascript/flavours/glitch/features/account_timeline/components/redesign.module.scss index 5d7a5fa650..1d52b1f5ab 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/redesign.module.scss +++ b/app/javascript/flavours/glitch/features/account_timeline/components/redesign.module.scss @@ -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 { diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/tabs.tsx b/app/javascript/flavours/glitch/features/account_timeline/components/tabs.tsx index e68f694a13..eeb48c1c53 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/tabs.tsx +++ b/app/javascript/flavours/glitch/features/account_timeline/components/tabs.tsx @@ -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 '@/flavours/glitch/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 (
- {layout !== 'single-column' && ( - - - - )} - + diff --git a/app/javascript/flavours/glitch/features/account_timeline/hooks/useFieldHtml.tsx b/app/javascript/flavours/glitch/features/account_timeline/hooks/useFieldHtml.tsx new file mode 100644 index 0000000000..fe7210294b --- /dev/null +++ b/app/javascript/flavours/glitch/features/account_timeline/hooks/useFieldHtml.tsx @@ -0,0 +1,38 @@ +import type { Key } from 'react'; +import { useCallback } from 'react'; + +import htmlConfig from '@/config/html-tags.json'; +import type { OnElementHandler } from '@/flavours/glitch/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 ( + + {children} + + ); + } + return onElement?.(element, props, children, extra); + } + return undefined; + }, + [onElement, hasCustomEmoji], + ); +} + +function filterAttributesForSpan(props: Record) { + const validAttributes: Record = {}; + for (const key of Object.keys(props)) { + if (key in htmlConfig.tags.span.attributes) { + validAttributes[key] = props[key]; + } + } + return validAttributes; +} 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 new file mode 100644 index 0000000000..5522f4ae1e --- /dev/null +++ b/app/javascript/flavours/glitch/features/account_timeline/modals/field_modal.tsx @@ -0,0 +1,44 @@ +import type { FC } from 'react'; + +import { FormattedMessage } from 'react-intl'; + +import { EmojiHTML } from '@/flavours/glitch/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 ( +
+
+
+ + +
+
+
+
+ +
+
+
+ ); +}; diff --git a/app/javascript/flavours/glitch/features/account_timeline/modals/note_modal.tsx b/app/javascript/flavours/glitch/features/account_timeline/modals/note_modal.tsx index 72feedad45..3c55d15024 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/modals/note_modal.tsx +++ b/app/javascript/flavours/glitch/features/account_timeline/modals/note_modal.tsx @@ -13,7 +13,7 @@ import { useAppDispatch, useAppSelector } from '@/flavours/glitch/store'; import { ConfirmationModal } from '../../ui/components/confirmation_modals'; -import classes from './modals.module.css'; +import classes from './styles.module.css'; const messages = defineMessages({ newTitle: { diff --git a/app/javascript/flavours/glitch/features/account_timeline/modals/modals.module.css b/app/javascript/flavours/glitch/features/account_timeline/modals/styles.module.css similarity index 80% rename from app/javascript/flavours/glitch/features/account_timeline/modals/modals.module.css rename to app/javascript/flavours/glitch/features/account_timeline/modals/styles.module.css index cee0bc498a..4740a42cb9 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/modals/modals.module.css +++ b/app/javascript/flavours/glitch/features/account_timeline/modals/styles.module.css @@ -19,3 +19,9 @@ outline: var(--outline-focus-default); outline-offset: 2px; } + +.fieldValue { + color: var(--color-text-primary); + font-weight: 600; + margin-top: 4px; +} diff --git a/app/javascript/flavours/glitch/features/ui/components/modal_root.jsx b/app/javascript/flavours/glitch/features/ui/components/modal_root.jsx index ef440f84a4..6c0c9d11cc 100644 --- a/app/javascript/flavours/glitch/features/ui/components/modal_root.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/modal_root.jsx @@ -100,6 +100,7 @@ export const MODAL_COMPONENTS = { 'ANNUAL_REPORT': AnnualReportModal, 'COMPOSE_PRIVACY': () => Promise.resolve({ default: VisibilityModal }), 'ACCOUNT_NOTE': () => import('@/flavours/glitch/features/account_timeline/modals/note_modal').then(module => ({ default: module.AccountNoteModal })), + 'ACCOUNT_FIELD_OVERFLOW': () => import('@/flavours/glitch/features/account_timeline/modals/field_modal').then(module => ({ default: module.AccountFieldModal })), 'ACCOUNT_EDIT_NAME': () => import('@/flavours/glitch/features/account_edit/components/name_modal').then(module => ({ default: module.NameModal })), 'ACCOUNT_EDIT_BIO': () => import('@/flavours/glitch/features/account_edit/components/bio_modal').then(module => ({ default: module.BioModal })), }; diff --git a/app/javascript/flavours/glitch/features/ui/index.jsx b/app/javascript/flavours/glitch/features/ui/index.jsx index a75d3c64d2..f434bf7a8e 100644 --- a/app/javascript/flavours/glitch/features/ui/index.jsx +++ b/app/javascript/flavours/glitch/features/ui/index.jsx @@ -25,7 +25,7 @@ import { layoutFromWindow } from 'flavours/glitch/is_mobile'; import { selectUnreadNotificationGroupsCount } from 'flavours/glitch/selectors/notifications'; import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router'; import { checkAnnualReport } from '@/flavours/glitch/reducers/slices/annual_report'; -import { isClientFeatureEnabled, isServerFeatureEnabled } from '@/flavours/glitch/utils/environment'; +import { isClientFeatureEnabled } from '@/flavours/glitch/utils/environment'; import { uploadCompose, resetCompose, changeComposeSpoilerness } from '../../actions/compose'; import { clearHeight } from '../../actions/height_cache'; @@ -83,7 +83,6 @@ import { PrivacyPolicy, TermsOfService, AccountFeatured, - AccountAbout, AccountEdit, AccountEditFeaturedTags, Quotes, @@ -174,36 +173,6 @@ class SwitchingColumnsArea extends PureComponent { } const profileRedesignRoutes = []; - if (isServerFeatureEnabled('profile_redesign')) { - profileRedesignRoutes.push( - , - ); - // 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( - , - , - , - , - ); - } else { - // Otherwise, provide and redirect to the /about page. - profileRedesignRoutes.push( - , - , - - ); - } - } else { - profileRedesignRoutes.push( - , - // If the redesign is not enabled but someone shares an /about link, redirect to the root. - , - - ); - } - if (isClientFeatureEnabled('profile_editing')) { profileRedesignRoutes.push( , @@ -265,6 +234,7 @@ class SwitchingColumnsArea extends PureComponent { {...profileRedesignRoutes} + 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 f9b32705fe..ad386a8da7 100644 --- a/app/javascript/flavours/glitch/features/ui/util/async-components.js +++ b/app/javascript/flavours/glitch/features/ui/util/async-components.js @@ -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 })); diff --git a/app/javascript/flavours/glitch/hooks/useObserver.ts b/app/javascript/flavours/glitch/hooks/useObserver.ts new file mode 100644 index 0000000000..4b979f6d32 --- /dev/null +++ b/app/javascript/flavours/glitch/hooks/useObserver.ts @@ -0,0 +1,29 @@ +import { useEffect, useRef } from 'react'; + +export function useResizeObserver(callback: ResizeObserverCallback) { + const observerRef = useRef(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(null); + observerRef.current ??= new MutationObserver(callback); + + useEffect(() => { + const observer = observerRef.current; + return () => { + observer?.disconnect(); + }; + }, []); + + return observerRef.current; +} diff --git a/app/javascript/flavours/glitch/hooks/useOverflow.ts b/app/javascript/flavours/glitch/hooks/useOverflow.ts index b306fb4871..b85222cf56 100644 --- a/app/javascript/flavours/glitch/hooks/useOverflow.ts +++ b/app/javascript/flavours/glitch/hooks/useOverflow.ts @@ -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(null); - // Set up observers to watch for size and content changes. - const resizeObserverRef = useRef(null); - const mutationObserverRef = useRef(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,