diff --git a/app/javascript/mastodon/components/modal_root.jsx b/app/javascript/mastodon/components/modal_root.jsx
index e7fa5e6f9a..b0d88fe8f9 100644
--- a/app/javascript/mastodon/components/modal_root.jsx
+++ b/app/javascript/mastodon/components/modal_root.jsx
@@ -13,11 +13,14 @@ class ModalRoot extends PureComponent {
static propTypes = {
children: PropTypes.node,
onClose: PropTypes.func.isRequired,
- backgroundColor: PropTypes.shape({
- r: PropTypes.number,
- g: PropTypes.number,
- b: PropTypes.number,
- }),
+ backgroundColor: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.shape({
+ r: PropTypes.number,
+ g: PropTypes.number,
+ b: PropTypes.number,
+ }),
+ ]),
ignoreFocus: PropTypes.bool,
...WithOptionalRouterPropTypes,
};
@@ -141,14 +144,17 @@ class ModalRoot extends PureComponent {
let backgroundColor = null;
- if (this.props.backgroundColor) {
- backgroundColor = multiply({ ...this.props.backgroundColor, a: 1 }, { r: 0, g: 0, b: 0, a: 0.7 });
+ if (this.props.backgroundColor && typeof this.props.backgroundColor === 'string') {
+ backgroundColor = this.props.backgroundColor;
+ } else if (this.props.backgroundColor) {
+ const darkenedColor = multiply({ ...this.props.backgroundColor, a: 1 }, { r: 0, g: 0, b: 0, a: 0.7 });
+ backgroundColor = `rgb(${darkenedColor.r}, ${darkenedColor.g}, ${darkenedColor.b})`;
}
return (
diff --git a/app/javascript/mastodon/components/status.jsx b/app/javascript/mastodon/components/status.jsx
index ad13229382..c6bca9996d 100644
--- a/app/javascript/mastodon/components/status.jsx
+++ b/app/javascript/mastodon/components/status.jsx
@@ -405,13 +405,16 @@ class Status extends ImmutablePureComponent {
};
let media, statusAvatar, prepend, rebloggedByText;
+ const matchedFilters = status.get('matched_filters');
+ const expanded = (!matchedFilters || this.state.showDespiteFilter) && (!status.get('hidden') || status.get('spoiler_text').length === 0);
if (hidden) {
return (
{status.getIn(['account', 'display_name']) || status.getIn(['account', 'username'])}
- {status.get('content')}
+ {status.get('spoiler_text').length > 0 && ({status.get('spoiler_text')})}
+ {expanded && {status.get('content')}}
);
@@ -420,7 +423,6 @@ class Status extends ImmutablePureComponent {
const connectUp = previousId && previousId === status.get('in_reply_to_id');
const connectToRoot = rootId && rootId === status.get('in_reply_to_id');
const connectReply = nextInReplyToId && nextInReplyToId === status.get('id');
- const matchedFilters = status.get('matched_filters');
let visibilityName = status.get('limited_scope') || status.get('visibility_ex') || status.get('visibility');
@@ -578,7 +580,6 @@ class Status extends ImmutablePureComponent {
}
const {statusContentProps, hashtagBar} = getHashtagBarForStatus(status);
- const expanded = (!matchedFilters || this.state.showDespiteFilter) && (!status.get('hidden') || status.get('spoiler_text').length === 0);
const withLimited = status.get('visibility_ex') === 'limited' && status.get('limited_scope') ?
: null;
const withQuote = status.get('quote_id') ?
: null;
diff --git a/app/javascript/mastodon/features/annual_report/archetype.tsx b/app/javascript/mastodon/features/annual_report/archetype.tsx
new file mode 100644
index 0000000000..fffbc1803e
--- /dev/null
+++ b/app/javascript/mastodon/features/annual_report/archetype.tsx
@@ -0,0 +1,69 @@
+import { FormattedMessage } from 'react-intl';
+
+import booster from '@/images/archetypes/booster.png';
+import lurker from '@/images/archetypes/lurker.png';
+import oracle from '@/images/archetypes/oracle.png';
+import pollster from '@/images/archetypes/pollster.png';
+import replier from '@/images/archetypes/replier.png';
+import type { Archetype as ArchetypeData } from 'mastodon/models/annual_report';
+
+export const Archetype: React.FC<{
+ data: ArchetypeData;
+}> = ({ data }) => {
+ let illustration, label;
+
+ switch (data) {
+ case 'booster':
+ illustration = booster;
+ label = (
+
+ );
+ break;
+ case 'replier':
+ illustration = replier;
+ label = (
+
+ );
+ break;
+ case 'pollster':
+ illustration = pollster;
+ label = (
+
+ );
+ break;
+ case 'lurker':
+ illustration = lurker;
+ label = (
+
+ );
+ break;
+ case 'oracle':
+ illustration = oracle;
+ label = (
+
+ );
+ break;
+ }
+
+ return (
+
+
{label}
+
+
+ );
+};
diff --git a/app/javascript/mastodon/features/annual_report/followers.tsx b/app/javascript/mastodon/features/annual_report/followers.tsx
new file mode 100644
index 0000000000..196013ae9d
--- /dev/null
+++ b/app/javascript/mastodon/features/annual_report/followers.tsx
@@ -0,0 +1,69 @@
+import { FormattedMessage, FormattedNumber } from 'react-intl';
+
+import { Sparklines, SparklinesCurve } from 'react-sparklines';
+
+import { ShortNumber } from 'mastodon/components/short_number';
+import type { TimeSeriesMonth } from 'mastodon/models/annual_report';
+
+export const Followers: React.FC<{
+ data: TimeSeriesMonth[];
+ total?: number;
+}> = ({ data, total }) => {
+ const change = data.reduce((sum, item) => sum + item.followers, 0);
+
+ const cumulativeGraph = data.reduce(
+ (newData, item) => [
+ ...newData,
+ item.followers + (newData[newData.length - 1] ?? 0),
+ ],
+ [0],
+ );
+
+ return (
+
+
+
+
+
+
+
+
+
+ {change > -1 ? '+' : '-'}
+
+
+
+
+
+
+ );
+};
diff --git a/app/javascript/mastodon/features/annual_report/highlighted_post.tsx b/app/javascript/mastodon/features/annual_report/highlighted_post.tsx
new file mode 100644
index 0000000000..3a2a70713d
--- /dev/null
+++ b/app/javascript/mastodon/features/annual_report/highlighted_post.tsx
@@ -0,0 +1,105 @@
+/* eslint-disable @typescript-eslint/no-unsafe-return,
+ @typescript-eslint/no-explicit-any,
+ @typescript-eslint/no-unsafe-assignment */
+
+import { useCallback } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import { toggleStatusSpoilers } from 'mastodon/actions/statuses';
+import { DetailedStatus } from 'mastodon/features/status/components/detailed_status';
+import { me } from 'mastodon/initial_state';
+import type { TopStatuses } from 'mastodon/models/annual_report';
+import { makeGetStatus, makeGetPictureInPicture } from 'mastodon/selectors';
+import { useAppSelector, useAppDispatch } from 'mastodon/store';
+
+const getStatus = makeGetStatus() as unknown as (arg0: any, arg1: any) => any;
+const getPictureInPicture = makeGetPictureInPicture() as unknown as (
+ arg0: any,
+ arg1: any,
+) => any;
+
+export const HighlightedPost: React.FC<{
+ data: TopStatuses;
+}> = ({ data }) => {
+ let statusId, label;
+
+ if (data.by_reblogs) {
+ statusId = data.by_reblogs;
+ label = (
+
+ );
+ } else if (data.by_favourites) {
+ statusId = data.by_favourites;
+ label = (
+
+ );
+ } else {
+ statusId = data.by_replies;
+ label = (
+
+ );
+ }
+
+ const dispatch = useAppDispatch();
+ const domain = useAppSelector((state) => state.meta.get('domain'));
+ const status = useAppSelector((state) =>
+ statusId ? getStatus(state, { id: statusId }) : undefined,
+ );
+ const pictureInPicture = useAppSelector((state) =>
+ statusId ? getPictureInPicture(state, { id: statusId }) : undefined,
+ );
+ const account = useAppSelector((state) =>
+ me ? state.accounts.get(me) : undefined,
+ );
+
+ const handleToggleHidden = useCallback(() => {
+ dispatch(toggleStatusSpoilers(statusId));
+ }, [dispatch, statusId]);
+
+ if (!status) {
+ return (
+
+ );
+ }
+
+ const displayName = (
+
+
+
+ ),
+ }}
+ />
+
+ {label}
+
+ );
+
+ return (
+
+
+
+ );
+};
diff --git a/app/javascript/mastodon/features/annual_report/index.tsx b/app/javascript/mastodon/features/annual_report/index.tsx
new file mode 100644
index 0000000000..91f03330c0
--- /dev/null
+++ b/app/javascript/mastodon/features/annual_report/index.tsx
@@ -0,0 +1,99 @@
+import { useState, useEffect } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import {
+ importFetchedStatuses,
+ importFetchedAccounts,
+} from 'mastodon/actions/importer';
+import { apiRequestGet, apiRequestPost } from 'mastodon/api';
+import { LoadingIndicator } from 'mastodon/components/loading_indicator';
+import { me } from 'mastodon/initial_state';
+import type { Account } from 'mastodon/models/account';
+import type { AnnualReport as AnnualReportData } from 'mastodon/models/annual_report';
+import type { Status } from 'mastodon/models/status';
+import { useAppSelector, useAppDispatch } from 'mastodon/store';
+
+import { Archetype } from './archetype';
+import { Followers } from './followers';
+import { HighlightedPost } from './highlighted_post';
+import { MostUsedHashtag } from './most_used_hashtag';
+import { NewPosts } from './new_posts';
+import { Percentile } from './percentile';
+
+interface AnnualReportResponse {
+ annual_reports: AnnualReportData[];
+ accounts: Account[];
+ statuses: Status[];
+}
+
+export const AnnualReport: React.FC<{
+ year: string;
+}> = ({ year }) => {
+ const [response, setResponse] = useState
(null);
+ const [loading, setLoading] = useState(false);
+ const currentAccount = useAppSelector((state) =>
+ me ? state.accounts.get(me) : undefined,
+ );
+ const dispatch = useAppDispatch();
+
+ useEffect(() => {
+ setLoading(true);
+
+ apiRequestGet(`v1/annual_reports/${year}`)
+ .then((data) => {
+ dispatch(importFetchedStatuses(data.statuses));
+ dispatch(importFetchedAccounts(data.accounts));
+
+ setResponse(data);
+ setLoading(false);
+
+ return apiRequestPost(`v1/annual_reports/${year}/read`);
+ })
+ .catch(() => {
+ setLoading(false);
+ });
+ }, [dispatch, year, setResponse, setLoading]);
+
+ if (loading) {
+ return ;
+ }
+
+ const report = response?.annual_reports[0];
+
+ if (!report) {
+ return null;
+ }
+
+ return (
+
+ );
+};
diff --git a/app/javascript/mastodon/features/annual_report/most_used_app.tsx b/app/javascript/mastodon/features/annual_report/most_used_app.tsx
new file mode 100644
index 0000000000..2d8c8aa582
--- /dev/null
+++ b/app/javascript/mastodon/features/annual_report/most_used_app.tsx
@@ -0,0 +1,29 @@
+import { FormattedMessage } from 'react-intl';
+
+import type { NameAndCount } from 'mastodon/models/annual_report';
+
+export const MostUsedApp: React.FC<{
+ data: NameAndCount[];
+}> = ({ data }) => {
+ const app = data[0];
+
+ if (!app) {
+ return (
+
+ );
+ }
+
+ return (
+
+ );
+};
diff --git a/app/javascript/mastodon/features/annual_report/most_used_hashtag.tsx b/app/javascript/mastodon/features/annual_report/most_used_hashtag.tsx
new file mode 100644
index 0000000000..0e4c78f639
--- /dev/null
+++ b/app/javascript/mastodon/features/annual_report/most_used_hashtag.tsx
@@ -0,0 +1,29 @@
+import { FormattedMessage } from 'react-intl';
+
+import type { NameAndCount } from 'mastodon/models/annual_report';
+
+export const MostUsedHashtag: React.FC<{
+ data: NameAndCount[];
+}> = ({ data }) => {
+ const hashtag = data[0];
+
+ if (!hashtag) {
+ return (
+
+ );
+ }
+
+ return (
+
+
+ #{hashtag.name}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
(
+
+ {str}
+
+ ),
+ percentage: () => (
+
+
+
+ ),
+ bottomLabel: (str) => (
+
+
+ {str}
+
+
+ {percentile < 6 && (
+
+
+
+ )}
+
+