tarrien/Mastodon
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Profile redesign: Show full join date (#38687)

Browse Source
This commit is contained in:
Echo authored and GitHub committed 2026-04-23 12:47:01 +00:00
1 parent 2f0db28aa4
commit e2be688389
14 files changed
+438 -48
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/javascript/images/anniversary.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1440 1245"><path fill="#ffb900" d="M438.957 163.115c25.062 5.75 49.562 1.125 66.312-10.687-9.813-17.875-29.688-32.563-55.063-38.312-19.875-4.625-39.5-2.625-55.063 4.312 1.75-1.125 3.438-2.312 5.188-3.75 18.437-11.812 37.5-23.062 57.375-32.874-17.875 8.625-35.438 18.437-52.438 28.812 11.5-10.688 20.75-25.938 25.063-44.126 6.062-25.062 1.75-49.562-9.813-66.312-17.874 9.5-33.125 29.375-39.188 54.5-6.062 24.5-2 48.75 9.25 65.438-25.937 17-50.749 35.749-74.062 56.188 11.25-13.812 18.749-32.875 19.625-54.5.875-26.5-8.625-50.438-23.937-65.126-16.126 13.563-27.375 36.626-28.251 63.126-.875 26.25 8.375 49.874 23.063 64.312-23.626 21.625-45.812 45-66 69.749 7.5-14.437 11.25-32.875 9.25-52.188-2.625-26.812-15.251-49.563-32.563-62.251-14.437 15.563-22.5 40.375-19.875 67.438 2.625 26.5 15 48.749 31.688 61.374a726 726 0 0 0-34.312 49c-6.312 10.063-12.125 20.188-17.874 30.563 4.875-15.875 5.187-34.563-.313-53.625-7.5-26.5-24.5-47.251-44.125-56.812-11.813 18.437-15.251 44.688-7.813 71.5 7.5 25.937 23.626 46.437 42.938 56.188-12.688 24.812-23.938 50.437-33.438 76.688-.562-14.126-4.312-29.126-11.5-43.251-13.25-25.375-34.562-42.688-56.5-48.125-8.062 21.062-6.312 48.437 6.938 73.812 12.125 23.374 31.437 40.062 51.625 46.688-.875 3.187-2 6.312-2.875 9.5-7.187 24.5-12.687 49.312-17 74.374-2.875-14.437-9.5-29.125-19.625-42.688-17.875-23.062-42.375-36.625-65.125-38.312-4.313 22.5 2.312 49.875 20.188 72.938 16.437 21.625 38.937 34.562 60.562 37.749-2.875 24.188-4.625 48.437-4.625 72.625v7.813c-5.5-12.375-13.812-24.188-24.812-34.563-21.625-20.188-48.437-30-71.812-27.688-.562 23.375 10.688 49.563 32.312 70.063 19.625 18.437 43.812 27.937 65.75 27.937a582 582 0 0 0 9.499 77c-7.5-10.375-17.312-19.875-29.374-27.937-25.063-16.438-53.938-21.063-76.688-14.688 3.75 23.375 19.625 47.563 44.688 64 22.5 14.688 47.874 19.875 69.188 16.437 1.75 6.625 3.187 13.25 5.187 19.875 4.625 16.437 9.813 32.874 15.875 49-8.938-8.063-19.312-15-31.437-20.438-28.563-12.374-58.5-12.374-81-2.312 7.5 23.375 27.937 45.563 56.5 57.937 25.062 10.938 51.312 12.375 72.374 5.5 8.938 20.188 19 40.063 30.251 59.375-10.063-6.313-21.937-11.5-34.563-14.437-30.25-7.188-59.937-1.75-80.125 12.125 11.812 21.621 35.749 39.811 66 47.001 26.5 6.31 52.437 2.87 71.812-7.19 12.375 18.75 25.937 36.88 40.375 54.19-9.813-3.44-20.75-5.75-32.312-6.63-31.688-2-60.563 8.63-78.126 26.25 15.563 19.63 42.688 33.75 74.375 35.75 26.812 1.75 51.312-5.75 69.188-18.43 14.688 15.25 30 29.68 46.125 43.25-10.937-1.44-22.5-1.75-34.312 0-33.749 4.31-61.688 21.31-76.688 43.5 20.438 17.56 51.875 26.5 85.626 22.19 27.937-3.75 51.874-15.88 67.749-32.57 27.375 19.88 56.5 37.5 86.749 52.75 5.5 2.63 11.813.31 14.438-4.87 2.625-5.5.312-11.82-4.875-14.44-23.938-11.5-47-24.81-69.188-39.5 14.688-20.19 21.937-49 17.874-79.87-4.312-33.75-21.312-61.69-43.5-76.69-17.562 20.43-26.5 51.87-22.188 85.62 2.625 19 8.938 36.31 18.188 50.19-21.312-15.87-41.812-32.87-61.125-51.31 17-16.13 28.563-41.25 30.251-70.06 1.75-31.69-8.938-60.255-26.5-78.129-19.626 15.562-33.438 42.939-35.188 74.689-1.125 18.19 2 35.19 8.062 49.87-18.188-19.31-35.437-39.81-51-61.37 18.75-12.69 34.312-34.564 40.626-62.001 7.187-30.251 2-59.938-12.126-80.126-21.625 11.5-39.812 35.438-47 65.75-4.062 16.437-4.062 32.874-1.125 47.562-1.125-2-2.625-3.75-3.75-5.75-12.125-19-23.062-38.625-32.874-58.812 20.749-9.25 40.062-28.25 51-54.5 12.375-28.562 12.125-58.5 1.75-81-23.375 7.813-45.251 28.251-57.626 56.812-6.937 15.875-9.812 32.312-9.25 47.563-9.812-23.063-18.437-46.437-25.374-70.312-.313-.563-.313-1.125-.313-1.438 21.312-5.5 42.375-21.062 57.063-44.125 16.125-25.375 20.188-54.188 13.563-77-23.375 4.063-47.251 20.188-63.438 45.563-8.625 13.812-13.812 28.812-15.874 42.937-6.313-26.812-10.938-53.937-13.563-81.312 21.937-1.125 45.812-12.125 64.563-32.312 20.188-21.625 30-48.437 27.688-71.812-23.375-.562-49.563 10.688-70.063 32.312-12.125 13-20.437 27.937-24.812 42.688-.563-9.812-.875-19.625-1.125-29.688-.313-19.312.562-38.625 2.312-57.937 21.312 2.875 46.438-3.75 68.063-19.875 23.375-17.312 37.188-41.812 39.188-64.563-22.5-4.625-49.875 1.75-73.251 19-14.125 10.375-24.5 23.375-31.125 36.875 3.438-27.688 8.938-55.375 16.125-82.437 20.438 6.625 46.438 4.312 70.312-8.063 25.375-13.25 42.688-34.562 48.126-56.5-21.063-8.062-48.438-6.312-73.812 6.938-16.438 8.625-29.375 20.437-38.063 33.749 9.25-29.688 20.437-58.812 33.749-86.749 18.438 10.062 43.5 12.687 68.626 5.187 26.5-7.812 46.688-25.062 55.937-45-18.437-11.5-45-14.688-71.5-6.937-17.312 5.187-32 14.437-42.688 25.688 6.625-12.375 13.563-24.812 20.749-36.875 7.813-12.687 15.875-25.063 24.5-37.188 16.126 12.375 40.063 18.749 65.75 15.251 26.812-3.75 49-17.312 60.812-35.188-16.126-13.812-41.251-21.063-68.063-17.312-17.312 2.312-32.312 8.937-44.375 17.874 17.875-23.374 37.5-45.812 58.5-66.562 13.563 15.562 36.312 25.937 62.251 26.812 26.5.875 50.437-8.938 64.875-24.188-13.563-16.126-36.626-27.126-63.438-27.938-19.625-.562-37.5 4.625-51.625 13.25 23.375Line truncated
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

app/javascript/mastodon/actions/compose.js
+2 -1
View File
@@ -153,10 +153,11 @@ export function resetCompose() {
};
}
export const focusCompose = (defaultText = '') => (dispatch, getState) => {
export const focusCompose = (defaultText = '', caretStart = false) => (dispatch, getState) => {
dispatch({
type: COMPOSE_FOCUS,
defaultText,
caretStart,
});
ensureComposeIsVisible(getState);
app/javascript/mastodon/components/number_fields/index.tsx
+6 -1
View File
@@ -24,9 +24,14 @@ export const NumberFieldsItem: React.FC<ItemProps> = ({
link,
children,
className,
...restProps
}) => {
return (
<li className={classNames(classes.item, className)} title={hint}>
<li
{...restProps}
className={classNames(classes.item, className)}
title={hint}
>
{label}
{link ? (
<NavLink exact to={link}>
app/javascript/mastodon/components/number_fields/styles.module.scss
+12
View File
@@ -14,6 +14,7 @@
}
a,
button,
strong {
display: block;
font-weight: 600;
@@ -25,10 +26,21 @@
a {
padding: 0;
text-decoration: none;
}
a,
button {
&:hover,
&:focus {
text-decoration: underline;
}
}
button {
appearance: none;
background: none;
border: none;
display: block;
padding: 0;
}
}
app/javascript/mastodon/features/account_timeline/components/number_fields.tsx
+21 -10
View File
@@ -1,8 +1,9 @@
import { useMemo } from 'react';
import { useCallback, useMemo } from 'react';
import type { FC } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import { openModal } from '@/mastodon/actions/modal';
import { FormattedDateWrapper } from '@/mastodon/components/formatted_date';
import {
NumberFields,
@@ -10,6 +11,7 @@ import {
} from '@/mastodon/components/number_fields';
import { ShortNumber } from '@/mastodon/components/short_number';
import { useAccount } from '@/mastodon/hooks/useAccount';
import { useAppDispatch } from '@/mastodon/store';
export const AccountNumberFields: FC<{ accountId: string }> = ({
accountId,
@@ -21,6 +23,13 @@ export const AccountNumberFields: FC<{ accountId: string }> = ({
[account?.created_at],
);
const dispatch = useAppDispatch();
const showJoinModal = useCallback(() => {
dispatch(
openModal({ modalType: 'ACCOUNT_JOIN_DATE', modalProps: { accountId } }),
);
}, [accountId, dispatch]);
if (!account) {
return null;
}
@@ -60,15 +69,17 @@ export const AccountNumberFields: FC<{ accountId: string }> = ({
}
hint={intl.formatDate(account.created_at)}
>
{createdThisYear ? (
<FormattedDateWrapper
value={account.created_at}
month='short'
day='2-digit'
/>
) : (
<FormattedDateWrapper value={account.created_at} year='numeric' />
)}
<button type='button' onClick={showJoinModal}>
{createdThisYear ? (
<FormattedDateWrapper
value={account.created_at}
month='short'
day='2-digit'
/>
) : (
<FormattedDateWrapper value={account.created_at} year='numeric' />
)}
</button>
</NumberFieldsItem>
</NumberFields>
);
app/javascript/mastodon/features/account_timeline/modals/field_modal.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ import {
import type { AccountField } from '../common';
import { useFieldHtml } from '../hooks/useFieldHtml';
import classes from './styles.module.css';
import classes from './styles.module.scss';
export const AccountFieldModal: FC<{
onClose: () => void;
app/javascript/mastodon/features/account_timeline/modals/join_modal.tsx
+270
View File
@@ -0,0 +1,270 @@
import { useCallback, useMemo } from 'react';
import type { FC } from 'react';
import { defineMessage, FormattedMessage, useIntl } from 'react-intl';
import AnniversaryImage from '@/images/anniversary.svg?react';
import { focusCompose, resetCompose } from '@/mastodon/actions/compose';
import { closeModal } from '@/mastodon/actions/modal';
import { Button } from '@/mastodon/components/button';
import { DisplayNameSimple } from '@/mastodon/components/display_name/simple';
import { FormattedDateWrapper } from '@/mastodon/components/formatted_date';
import { IconButton } from '@/mastodon/components/icon_button';
import { ModalShell, ModalShellBody } from '@/mastodon/components/modal_shell';
import { useAccount } from '@/mastodon/hooks/useAccount';
import { useCurrentAccountId } from '@/mastodon/hooks/useAccountId';
import {
createAppSelector,
useAppDispatch,
useAppSelector,
} from '@/mastodon/store';
import CloseIcon from '@/material-icons/400-24px/close.svg?react';
import classes from './styles.module.scss';
const closeMessage = defineMessage({
id: 'lightbox.close',
defaultMessage: 'Close',
});
const selectServerName = createAppSelector(
[
(state) => state.accounts,
(_, accountId: string) => accountId,
(state) => state.server.getIn(['server', 'domain']) as string | undefined,
],
(accounts, accountId, serverDomain) => {
const acct = accounts.getIn([accountId, 'acct']) as string | undefined;
if (!acct) {
return undefined;
}
const domain = acct.split('@').at(1);
if (domain) {
return domain;
}
return serverDomain;
},
);
export const AccountJoinModal: FC<{
accountId: string;
onClose: () => void;
}> = ({ accountId, onClose }) => {
const intl = useIntl();
const account = useAccount(accountId);
const currentId = useCurrentAccountId();
const isMe = accountId === currentId;
const createdAtStr = account?.created_at;
const anniversary = useMemo(() => {
if (!createdAtStr) {
return null;
}
const now = new Date();
const createdAt = new Date(createdAtStr);
if (
now.getMonth() === createdAt.getMonth() &&
now.getDate() === createdAt.getDate()
) {
return now.getFullYear() - createdAt.getFullYear();
}
return null;
}, [createdAtStr]);
const domain = useAppSelector((state) => selectServerName(state, accountId));
const dispatch = useAppDispatch();
const handle = account?.acct;
const handleShare = useCallback(() => {
if (anniversary === null) {
return;
}
let shareText = '#Fediversary';
if (anniversary === 0) {
shareText = isMe ? '#firstday' : '#welcome';
}
if (!isMe && handle) {
shareText = `@${handle} ${shareText}`;
}
dispatch(resetCompose());
dispatch(focusCompose(`\n\n${shareText}`, true));
dispatch(closeModal({ modalType: 'ACCOUNT_JOIN_DATE', ignoreFocus: true }));
}, [anniversary, handle, dispatch, isMe]);
return (
<ModalShell className={classes.joinShell}>
<ModalShellBody className={classes.joinWrapper}>
<AccountAnniversaryImage anniversary={anniversary} />
<div>
<AccountJoinMessage
name={<DisplayNameSimple account={account} />}
isMe={isMe}
serverName={domain}
anniversary={anniversary}
/>
<h1>
<FormattedDateWrapper
value={account?.created_at}
month='short'
day='numeric'
year='numeric'
/>
</h1>
</div>
<AccountAnniversaryShare
anniversary={anniversary}
onShare={handleShare}
isMe={isMe}
/>
<IconButton
iconComponent={CloseIcon}
icon='times'
onClick={onClose}
title={intl.formatMessage(closeMessage)}
className={classes.joinClose}
/>
</ModalShellBody>
</ModalShell>
);
};
const AccountJoinMessage: FC<{
name: React.JSX.Element;
isMe: boolean;
serverName?: string;
anniversary: number | null;
}> = ({ name, isMe, serverName, anniversary }) => {
if (anniversary === 0) {
if (isMe) {
return (
<FormattedMessage
id='account.join_modal.me_today'
defaultMessage='It’s your first day on {server}!'
tagName='p'
values={{
server: serverName,
}}
/>
);
}
return (
<FormattedMessage
id='account.join_modal.other_today'
defaultMessage='It’s {name}’s first day on {server}!'
tagName='p'
values={{
name,
server: serverName,
}}
/>
);
}
if (isMe) {
if (anniversary !== null && anniversary > 0) {
return (
<FormattedMessage
id='account.join_modal.me_anniversary'
defaultMessage='Happy Fediversary! You joined {server} on'
tagName='p'
values={{
server: serverName,
}}
/>
);
}
return (
<FormattedMessage
id='account.join_modal.me'
defaultMessage='You joined {server} on'
tagName='p'
values={{
server: serverName,
}}
/>
);
}
return (
<FormattedMessage
id='account.join_modal.other'
defaultMessage='{name} joined {server} on'
tagName='p'
values={{
name,
server: serverName,
}}
/>
);
};
const AccountAnniversaryImage: FC<{ anniversary: number | null }> = ({
anniversary,
}) => {
if (anniversary === null) {
return null;
}
return (
<div className={classes.joinBanner}>
<AnniversaryImage role='presentation' />
<h2>{anniversary || 1}</h2>
{anniversary === 0 && (
<FormattedMessage
id='account.join_modal.day'
defaultMessage='Day'
tagName='h3'
/>
)}
{anniversary > 0 && (
<FormattedMessage
id='account.join_modal.years'
defaultMessage='{number, plural, one {year} other {years}}'
values={{ number: anniversary }}
tagName='h3'
/>
)}
</div>
);
};
const AccountAnniversaryShare: FC<{
anniversary: number | null;
onShare: () => void;
isMe: boolean;
}> = ({ anniversary, onShare, isMe }) => {
if (anniversary === null) {
return null;
}
return (
<Button onClick={onShare}>
{anniversary === 0 && isMe && (
<FormattedMessage
id='account.join_modal.share.intro'
defaultMessage='Share an intro post'
/>
)}
{anniversary === 0 && !isMe && (
<FormattedMessage
id='account.join_modal.share.welcome'
defaultMessage='Share a welcome post'
/>
)}
{anniversary > 0 && (
<FormattedMessage
id='account.join_modal.share.celebrate'
defaultMessage='Share a celebratory post'
/>
)}
</Button>
);
};
app/javascript/mastodon/features/account_timeline/modals/note_modal.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ import { useAppDispatch, useAppSelector } from '@/mastodon/store';
import { ConfirmationModal } from '../../ui/components/confirmation_modals';
import classes from './styles.module.css';
import classes from './styles.module.scss';
const messages = defineMessages({
newTitle: {
app/javascript/mastodon/features/account_timeline/modals/styles.module.css
-32
View File
@@ -1,32 +0,0 @@
.noteCallout {
margin-bottom: 16px;
}
.noteInput {
min-height: 70px;
width: 100%;
padding: 8px;
border-radius: 8px;
box-sizing: border-box;
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
appearance: none;
resize: none;
margin-top: 4px;
}
.noteInput:focus-visible {
outline: var(--outline-focus-default);
outline-offset: 2px;
}
.fieldName,
.fieldValue {
word-break: break-all;
}
.fieldValue {
color: var(--color-text-primary);
font-weight: 600;
margin-top: 4px;
}
app/javascript/mastodon/features/account_timeline/modals/styles.module.scss
+108
View File
@@ -0,0 +1,108 @@
@use '@/styles/mastodon/variables' as *;
.noteCallout {
margin-bottom: 16px;
}
.noteInput {
min-height: 70px;
width: 100%;
padding: 8px;
border-radius: 8px;
box-sizing: border-box;
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
appearance: none;
resize: none;
margin-top: 4px;
}
.noteInput:focus-visible {
outline: var(--outline-focus-default);
outline-offset: 2px;
}
.fieldName,
.fieldValue {
word-break: break-all;
}
.fieldValue {
color: var(--color-text-primary);
font-weight: 600;
margin-top: 4px;
}
@media screen and (min-width: ($mobile-breakpoint + 1)) {
.joinShell {
> :global(.safety-action-modal__top) {
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
border-bottom-width: 1px;
}
}
}
.joinWrapper {
display: flex;
flex-direction: column;
color: var(--color-text-primary);
align-items: center;
justify-content: center;
position: relative;
min-height: 120px;
gap: 16px;
p,
h1 {
text-align: center;
}
p {
font-size: 13px;
}
h1 {
margin-top: 8px;
margin-bottom: 0;
font-size: 17px;
font-weight: 600;
}
}
.joinBanner {
width: 120px;
height: 110px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
svg {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
h2 {
font-size: 40px;
font-weight: 600;
line-height: 40px;
margin-top: 8px;
}
h3 {
font-size: 13px;
color: var(--color-text-secondary);
text-transform: uppercase;
}
}
.joinClose {
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
app/javascript/mastodon/features/ui/components/modal_root.jsx
+1
View File
@@ -93,6 +93,7 @@ export const MODAL_COMPONENTS = {
'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_JOIN_DATE': () => import('@/mastodon/features/account_timeline/modals/join_modal').then(module => ({ default: module.AccountJoinModal })),
'ACCOUNT_EDIT_NAME': accountEditModal('NameModal'),
'ACCOUNT_EDIT_BIO': accountEditModal('BioModal'),
'ACCOUNT_EDIT_PROFILE_DISPLAY': accountEditModal('ProfileDisplayModal'),
app/javascript/mastodon/locales/en.json
+10
View File
@@ -71,6 +71,16 @@
"account.go_to_profile": "Go to profile",
"account.hide_reblogs": "Hide boosts from @{name}",
"account.in_memoriam": "In Memoriam.",
"account.join_modal.day": "Day",
"account.join_modal.me": "You joined {server} on",
"account.join_modal.me_anniversary": "Happy Fediversary! You joined {server} on",
"account.join_modal.me_today": "It’s your first day on {server}!",
"account.join_modal.other": "{name} joined {server} on",
"account.join_modal.other_today": "It’s {name}’s first day on {server}!",
"account.join_modal.share.celebrate": "Share a celebratory post",
"account.join_modal.share.intro": "Share an intro post",
"account.join_modal.share.welcome": "Share a welcome post",
"account.join_modal.years": "{number, plural, one {year} other {years}}",
"account.joined_short": "Joined",
"account.languages": "Change subscribed languages",
"account.last_active": "Last active",
app/javascript/mastodon/reducers/compose.js
+4 -1
View File
@@ -610,7 +610,10 @@ export const composeReducer = (state = initialState, action) => {
case COMPOSE_LANGUAGE_CHANGE:
return state.set('language', action.language);
case COMPOSE_FOCUS:
return state.set('focusDate', new Date()).update('text', text => text.length > 0 ? text : action.defaultText);
return state
.set('focusDate', new Date())
.update('text', text => text.length > 0 ? text : action.defaultText)
.update('caretPosition', position => action.caretStart ? 0 : position);
case COMPOSE_CHANGE_MEDIA_ORDER:
return state.update('media_attachments', list => {
const indexA = list.findIndex(x => x.get('id') === action.a);
app/javascript/styles/mastodon/components.scss
+1 -1
View File
@@ -6370,7 +6370,7 @@ a.status-card {
&__top {
border-radius: 16px 16px 0 0;
border-bottom: 0;
border-bottom-width: 0;
gap: 16px;
}