Merge remote-tracking branch 'upstream/main'

app/javascript/flavours/glitch/actions/importer/index.js

@@ -68,13 +68,17 @@ export function importFetchedStatuses(statuses) {
         status.filtered.forEach(result => pushUnique(filters, result.filter));
       }
 
-      if (status.reblog && status.reblog.id) {
+      if (status.reblog?.id) {
         processStatus(status.reblog);
       }
 
-      if (status.poll && status.poll.id) {
+      if (status.poll?.id) {
         pushUnique(polls, normalizePoll(status.poll, getState().getIn(['polls', status.poll.id])));
       }
+
+      if (status.card?.author_account) {
+        pushUnique(accounts, status.card.author_account);
+      }
     }
 
     statuses.forEach(processStatus);

app/javascript/flavours/glitch/actions/importer/normalizer.js

@@ -36,6 +36,10 @@ export function normalizeStatus(status, normalOldStatus, settings) {
     normalStatus.poll = status.poll.id;
   }
 
+  if (status.card?.author_account) {
+    normalStatus.card = { ...status.card, author_account: status.card.author_account.id };
+  }
+
   if (status.filtered) {
     normalStatus.filtered = status.filtered.map(normalizeFilterResult);
   }

app/javascript/flavours/glitch/actions/notification_policies.ts

@@ -0,0 +1,16 @@
+import {
+  apiGetNotificationPolicy,
+  apiUpdateNotificationsPolicy,
+} from 'flavours/glitch/api/notification_policies';
+import type { NotificationPolicy } from 'flavours/glitch/models/notification_policy';
+import { createDataLoadingThunk } from 'flavours/glitch/store/typed_functions';
+
+export const fetchNotificationPolicy = createDataLoadingThunk(
+  'notificationPolicy/fetch',
+  () => apiGetNotificationPolicy(),
+);
+
+export const updateNotificationsPolicy = createDataLoadingThunk(
+  'notificationPolicy/update',
+  (policy: Partial<NotificationPolicy>) => apiUpdateNotificationsPolicy(policy),
+);

app/javascript/flavours/glitch/actions/notifications.js

@@ -57,10 +57,6 @@ export const NOTIFICATIONS_MARK_AS_READ = 'NOTIFICATIONS_MARK_AS_READ';
 export const NOTIFICATIONS_SET_BROWSER_SUPPORT    = 'NOTIFICATIONS_SET_BROWSER_SUPPORT';
 export const NOTIFICATIONS_SET_BROWSER_PERMISSION = 'NOTIFICATIONS_SET_BROWSER_PERMISSION';
 
-export const NOTIFICATION_POLICY_FETCH_REQUEST = 'NOTIFICATION_POLICY_FETCH_REQUEST';
-export const NOTIFICATION_POLICY_FETCH_SUCCESS = 'NOTIFICATION_POLICY_FETCH_SUCCESS';
-export const NOTIFICATION_POLICY_FETCH_FAIL    = 'NOTIFICATION_POLICY_FETCH_FAIL';
-
 export const NOTIFICATION_REQUESTS_FETCH_REQUEST = 'NOTIFICATION_REQUESTS_FETCH_REQUEST';
 export const NOTIFICATION_REQUESTS_FETCH_SUCCESS = 'NOTIFICATION_REQUESTS_FETCH_SUCCESS';
 export const NOTIFICATION_REQUESTS_FETCH_FAIL    = 'NOTIFICATION_REQUESTS_FETCH_FAIL';
@@ -435,40 +431,6 @@ export function setBrowserPermission (value) {
   };
 }
 
-export const fetchNotificationPolicy = () => (dispatch) => {
-  dispatch(fetchNotificationPolicyRequest());
-
-  api().get('/api/v1/notifications/policy').then(({ data }) => {
-    dispatch(fetchNotificationPolicySuccess(data));
-  }).catch(err => {
-    dispatch(fetchNotificationPolicyFail(err));
-  });
-};
-
-export const fetchNotificationPolicyRequest = () => ({
-  type: NOTIFICATION_POLICY_FETCH_REQUEST,
-});
-
-export const fetchNotificationPolicySuccess = policy => ({
-  type: NOTIFICATION_POLICY_FETCH_SUCCESS,
-  policy,
-});
-
-export const fetchNotificationPolicyFail = error => ({
-  type: NOTIFICATION_POLICY_FETCH_FAIL,
-  error,
-});
-
-export const updateNotificationsPolicy = params => (dispatch) => {
-  dispatch(fetchNotificationPolicyRequest());
-
-  api().put('/api/v1/notifications/policy', params).then(({ data }) => {
-    dispatch(fetchNotificationPolicySuccess(data));
-  }).catch(err => {
-    dispatch(fetchNotificationPolicyFail(err));
-  });
-};
-
 export const fetchNotificationRequests = () => (dispatch, getState) => {
   const params = {};
 

app/javascript/flavours/glitch/actions/trends.js

@@ -1,6 +1,6 @@
 import api, { getLinks } from '../api';
 
-import { importFetchedStatuses } from './importer';
+import { importFetchedStatuses, importFetchedAccounts } from './importer';
 
 export const TRENDS_TAGS_FETCH_REQUEST = 'TRENDS_TAGS_FETCH_REQUEST';
 export const TRENDS_TAGS_FETCH_SUCCESS = 'TRENDS_TAGS_FETCH_SUCCESS';
@@ -49,8 +49,11 @@ export const fetchTrendingLinks = () => (dispatch) => {
   dispatch(fetchTrendingLinksRequest());
 
   api()
-    .get('/api/v1/trends/links')
-    .then(({ data }) => dispatch(fetchTrendingLinksSuccess(data)))
+    .get('/api/v1/trends/links', { params: { limit: 20 } })
+    .then(({ data }) => {
+      dispatch(importFetchedAccounts(data.map(link => link.author_account).filter(account => !!account)));
+      dispatch(fetchTrendingLinksSuccess(data));
+    })
     .catch(err => dispatch(fetchTrendingLinksFail(err)));
 };
 

app/javascript/flavours/glitch/api/notification_policies.ts

@@ -0,0 +1,10 @@
+import { apiRequest } from 'flavours/glitch/api';
+import type { NotificationPolicyJSON } from 'flavours/glitch/api_types/notification_policies';
+
+export const apiGetNotificationPolicy = () =>
+  apiRequest<NotificationPolicyJSON>('GET', '/v1/notifications/policy');
+
+export const apiUpdateNotificationsPolicy = (
+  policy: Partial<NotificationPolicyJSON>,
+) =>
+  apiRequest<NotificationPolicyJSON>('PUT', '/v1/notifications/policy', policy);

app/javascript/flavours/glitch/api_types/notification_policies.ts

@@ -0,0 +1,12 @@
+// See app/serializers/rest/notification_policy_serializer.rb
+
+export interface NotificationPolicyJSON {
+  filter_not_following: boolean;
+  filter_not_followers: boolean;
+  filter_new_accounts: boolean;
+  filter_private_mentions: boolean;
+  summary: {
+    pending_requests_count: number;
+    pending_notifications_count: number;
+  };
+}

app/javascript/flavours/glitch/components/more_from_author.jsx

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+
+import { FormattedMessage } from 'react-intl';
+
+import { AuthorLink } from 'flavours/glitch/features/explore/components/author_link';
+
+export const MoreFromAuthor = ({ accountId }) => (
+  <div className='more-from-author'>
+    <svg viewBox='0 0 79 79' className='logo logo--icon' role='img'>
+      <use xlinkHref='#logo-symbol-icon' />
+    </svg>
+
+    <FormattedMessage id='link_preview.more_from_author' defaultMessage='More from {name}' values={{ name: <AuthorLink accountId={accountId} /> }} />
+  </div>
+);
+
+MoreFromAuthor.propTypes = {
+  accountId: PropTypes.string.isRequired,
+};

app/javascript/flavours/glitch/components/server_banner.jsx

@@ -42,10 +42,12 @@ class ServerBanner extends PureComponent {
     return (
       <div className='server-banner'>
         <div className='server-banner__introduction'>
-          <FormattedMessage id='server_banner.introduction' defaultMessage='{domain} is part of the decentralized social network powered by {mastodon}.' values={{ domain: <strong>{domain}</strong>, mastodon: <a href='https://joinmastodon.org' target='_blank'>Mastodon</a> }} />
+          <FormattedMessage id='server_banner.is_one_of_many' defaultMessage='{domain} is one of the many independent Mastodon servers you can use to participate in the fediverse.' values={{ domain: <strong>{domain}</strong>, mastodon: <a href='https://joinmastodon.org' target='_blank'>Mastodon</a> }} />
         </div>
 
-        <ServerHeroImage blurhash={server.getIn(['thumbnail', 'blurhash'])} src={server.getIn(['thumbnail', 'url'])} className='server-banner__hero' />
+        <Link to='/about'>
+          <ServerHeroImage blurhash={server.getIn(['thumbnail', 'blurhash'])} src={server.getIn(['thumbnail', 'url'])} className='server-banner__hero' />
+        </Link>
 
         <div className='server-banner__description'>
           {isLoading ? (
@@ -84,10 +86,6 @@ class ServerBanner extends PureComponent {
             )}
           </div>
         </div>
-
-        <hr className='spacer' />
-
-        <Link className='button button--block button-secondary' to='/about'><FormattedMessage id='server_banner.learn_more' defaultMessage='Learn more' /></Link>
       </div>
     );
   }

app/javascript/flavours/glitch/features/compose/components/language_dropdown.jsx

@@ -110,18 +110,6 @@ class LanguageDropdownMenu extends PureComponent {
     }).map(result => result.obj);
   }
 
-  frequentlyUsed () {
-    const { languages, value } = this.props;
-    const current = languages.find(lang => lang[0] === value);
-    const results = [];
-
-    if (current) {
-      results.push(current);
-    }
-
-    return results;
-  }
-
   handleClick = e => {
     const value = e.currentTarget.getAttribute('data-index');
 

app/javascript/flavours/glitch/features/explore/components/author_link.jsx

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+
+import { Avatar } from 'flavours/glitch/components/avatar';
+import { Permalink } from 'flavours/glitch/components/permalink';
+import { useAppSelector } from 'flavours/glitch/store';
+
+export const AuthorLink = ({ accountId }) => {
+  const account = useAppSelector(state => state.getIn(['accounts', accountId]));
+
+  return (
+    <Permalink href={account.get('url')} to={`/@${account.get('acct')}`} className='story__details__shared__author-link'>
+      <Avatar account={account} size={16} />
+      <bdi dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} />
+    </Permalink>
+  );
+};
+
+AuthorLink.propTypes = {
+  accountId: PropTypes.string.isRequired,
+};

app/javascript/flavours/glitch/features/explore/components/story.jsx

@@ -1,61 +1,89 @@
 import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
+import { useState, useCallback } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
 import classNames from 'classnames';
 
+
 import { Blurhash } from 'flavours/glitch/components/blurhash';
-import { accountsCountRenderer } from 'flavours/glitch/components/hashtag';
 import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
 import { ShortNumber } from 'flavours/glitch/components/short_number';
 import { Skeleton } from 'flavours/glitch/components/skeleton';
 
-export default class Story extends PureComponent {
+import { AuthorLink } from './author_link';
 
-  static propTypes = {
-    url: PropTypes.string,
-    title: PropTypes.string,
-    lang: PropTypes.string,
-    publisher: PropTypes.string,
-    publishedAt: PropTypes.string,
-    author: PropTypes.string,
-    sharedTimes: PropTypes.number,
-    thumbnail: PropTypes.string,
-    thumbnailDescription: PropTypes.string,
-    blurhash: PropTypes.string,
-    expanded: PropTypes.bool,
-  };
+const sharesCountRenderer = (displayNumber, pluralReady) => (
+  <FormattedMessage
+    id='link_preview.shares'
+    defaultMessage='{count, plural, one {{counter} post} other {{counter} posts}}'
+    values={{
+      count: pluralReady,
+      counter: <strong>{displayNumber}</strong>,
+    }}
+  />
+);
 
-  state = {
-    thumbnailLoaded: false,
-  };
+export const Story = ({
+  url,
+  title,
+  lang,
+  publisher,
+  publishedAt,
+  author,
+  authorAccount,
+  sharedTimes,
+  thumbnail,
+  thumbnailDescription,
+  blurhash,
+  expanded
+}) => {
+  const [thumbnailLoaded, setThumbnailLoaded] = useState(false);
 
-  handleImageLoad = () => this.setState({ thumbnailLoaded: true });
+  const handleImageLoad = useCallback(() => {
+    setThumbnailLoaded(true);
+  }, [setThumbnailLoaded]);
 
-  render () {
-    const { expanded, url, title, lang, publisher, author, publishedAt, sharedTimes, thumbnail, thumbnailDescription, blurhash } = this.props;
-
-    const { thumbnailLoaded } = this.state;
-
-    return (
-      <a className={classNames('story', { expanded })} href={url} target='blank' rel='noopener'>
-        <div className='story__details'>
-          <div className='story__details__publisher'>{publisher ? <span lang={lang}>{publisher}</span> : <Skeleton width={50} />}{publishedAt && <> · <RelativeTimestamp timestamp={publishedAt} /></>}</div>
-          <div className='story__details__title' lang={lang}>{title ? title : <Skeleton />}</div>
-          <div className='story__details__shared'>{author && <><FormattedMessage id='link_preview.author' defaultMessage='By {name}' values={{ name: <strong>{author}</strong> }} /> · </>}{typeof sharedTimes === 'number' ? <ShortNumber value={sharedTimes} renderer={accountsCountRenderer} /> : <Skeleton width={100} />}</div>
+  return (
+    <div className={classNames('story', { expanded })}>
+      <div className='story__details'>
+        <div className='story__details__publisher'>
+          {publisher ? <span lang={lang}>{publisher}</span> : <Skeleton width={50} />}{publishedAt && <> · <RelativeTimestamp timestamp={publishedAt} /></>}
         </div>
 
-        <div className='story__thumbnail'>
-          {thumbnail ? (
-            <>
-              <div className={classNames('story__thumbnail__preview', { 'story__thumbnail__preview--hidden': thumbnailLoaded })}><Blurhash hash={blurhash} /></div>
-              <img src={thumbnail} onLoad={this.handleImageLoad} alt={thumbnailDescription} title={thumbnailDescription} lang={lang} />
-            </>
-          ) : <Skeleton />}
+        <a className='story__details__title' lang={lang} href={url} target='blank' rel='noopener'>
+          {title ? title : <Skeleton />}
+        </a>
+
+        <div className='story__details__shared'>
+          {author ? <FormattedMessage id='link_preview.author' className='story__details__shared__author' defaultMessage='By {name}' values={{ name: authorAccount ? <AuthorLink accountId={authorAccount} /> : <strong>{author}</strong> }} /> : <span />}
+          {typeof sharedTimes === 'number' ? <span className='story__details__shared__pill'><ShortNumber value={sharedTimes} renderer={sharesCountRenderer} /></span> : <Skeleton width='10ch' />}
         </div>
+      </div>
+
+      <a className='story__thumbnail' href={url} target='blank' rel='noopener'>
+        {thumbnail ? (
+          <>
+            <div className={classNames('story__thumbnail__preview', { 'story__thumbnail__preview--hidden': thumbnailLoaded })}><Blurhash hash={blurhash} /></div>
+            <img src={thumbnail} onLoad={handleImageLoad} alt={thumbnailDescription} title={thumbnailDescription} lang={lang} />
+          </>
+        ) : <Skeleton />}
       </a>
-    );
-  }
+    </div>
+  );
+};
 
-}
+Story.propTypes = {
+  url: PropTypes.string,
+  title: PropTypes.string,
+  lang: PropTypes.string,
+  publisher: PropTypes.string,
+  publishedAt: PropTypes.string,
+  author: PropTypes.string,
+  authorAccount: PropTypes.string,
+  sharedTimes: PropTypes.number,
+  thumbnail: PropTypes.string,
+  thumbnailDescription: PropTypes.string,
+  blurhash: PropTypes.string,
+  expanded: PropTypes.bool,
+};

app/javascript/flavours/glitch/features/explore/links.jsx

@@ -13,7 +13,7 @@ import { DismissableBanner } from 'flavours/glitch/components/dismissable_banner
 import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
 import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
 
-import Story from './components/story';
+import { Story } from './components/story';
 
 const mapStateToProps = state => ({
   links: state.getIn(['trends', 'links', 'items']),
@@ -75,6 +75,7 @@ class Links extends PureComponent {
             publisher={link.get('provider_name')}
             publishedAt={link.get('published_at')}
             author={link.get('author_name')}
+            authorAccount={link.getIn(['author_account', 'id'])}
             sharedTimes={link.getIn(['history', 0, 'accounts']) * 1 + link.getIn(['history', 1, 'accounts']) * 1}
             thumbnail={link.get('image')}
             thumbnailDescription={link.get('image_description')}

app/javascript/flavours/glitch/features/notifications/components/column_settings.jsx

@@ -25,7 +25,7 @@ class ColumnSettings extends PureComponent {
     alertsEnabled: PropTypes.bool,
     browserSupport: PropTypes.bool,
     browserPermission: PropTypes.string,
-    notificationPolicy: ImmutablePropTypes.map,
+    notificationPolicy: PropTypes.object.isRequired,
     onChangePolicy: PropTypes.func.isRequired,
   };
 
@@ -84,22 +84,22 @@ class ColumnSettings extends PureComponent {
           <h3><FormattedMessage id='notifications.policy.title' defaultMessage='Filter out notifications from…' /></h3>
 
           <div className='column-settings__row'>
-            <CheckboxWithLabel checked={notificationPolicy.get('filter_not_following')} onChange={this.handleFilterNotFollowing}>
+            <CheckboxWithLabel checked={notificationPolicy.filter_not_following} onChange={this.handleFilterNotFollowing}>
               <strong><FormattedMessage id='notifications.policy.filter_not_following_title' defaultMessage="People you don't follow" /></strong>
               <span className='hint'><FormattedMessage id='notifications.policy.filter_not_following_hint' defaultMessage='Until you manually approve them' /></span>
             </CheckboxWithLabel>
 
-            <CheckboxWithLabel checked={notificationPolicy.get('filter_not_followers')} onChange={this.handleFilterNotFollowers}>
+            <CheckboxWithLabel checked={notificationPolicy.filter_not_followers} onChange={this.handleFilterNotFollowers}>
               <strong><FormattedMessage id='notifications.policy.filter_not_followers_title' defaultMessage='People not following you' /></strong>
               <span className='hint'><FormattedMessage id='notifications.policy.filter_not_followers_hint' defaultMessage='Including people who have been following you fewer than {days, plural, one {one day} other {# days}}' values={{ days: 3 }} /></span>
             </CheckboxWithLabel>
 
-            <CheckboxWithLabel checked={notificationPolicy.get('filter_new_accounts')} onChange={this.handleFilterNewAccounts}>
+            <CheckboxWithLabel checked={notificationPolicy.filter_new_accounts} onChange={this.handleFilterNewAccounts}>
               <strong><FormattedMessage id='notifications.policy.filter_new_accounts_title' defaultMessage='New accounts' /></strong>
               <span className='hint'><FormattedMessage id='notifications.policy.filter_new_accounts.hint' defaultMessage='Created within the past {days, plural, one {one day} other {# days}}' values={{ days: 30 }} /></span>
             </CheckboxWithLabel>
 
-            <CheckboxWithLabel checked={notificationPolicy.get('filter_private_mentions')} onChange={this.handleFilterPrivateMentions}>
+            <CheckboxWithLabel checked={notificationPolicy.filter_private_mentions} onChange={this.handleFilterPrivateMentions}>
               <strong><FormattedMessage id='notifications.policy.filter_private_mentions_title' defaultMessage='Unsolicited private mentions' /></strong>
               <span className='hint'><FormattedMessage id='notifications.policy.filter_private_mentions_hint' defaultMessage="Filtered unless it's in reply to your own mention or if you follow the sender" /></span>
             </CheckboxWithLabel>

app/javascript/flavours/glitch/features/notifications/components/filtered_notifications_banner.jsx

@@ -1,49 +0,0 @@
-import { useEffect } from 'react';
-
-import { FormattedMessage } from 'react-intl';
-
-import { Link } from 'react-router-dom';
-
-import { useDispatch, useSelector } from 'react-redux';
-
-import InventoryIcon from '@/material-icons/400-24px/inventory_2.svg?react';
-import { fetchNotificationPolicy } from 'flavours/glitch/actions/notifications';
-import { Icon } from 'flavours/glitch/components/icon';
-import { toCappedNumber } from 'flavours/glitch/utils/numbers';
-
-export const FilteredNotificationsBanner = () => {
-  const dispatch = useDispatch();
-  const policy = useSelector(state => state.get('notificationPolicy'));
-
-  useEffect(() => {
-    dispatch(fetchNotificationPolicy());
-
-    const interval = setInterval(() => {
-      dispatch(fetchNotificationPolicy());
-    }, 120000);
-
-    return () => {
-      clearInterval(interval);
-    };
-  }, [dispatch]);
-
-  if (policy === null || policy.getIn(['summary', 'pending_notifications_count']) === 0) {
-    return null;
-  }
-
-  return (
-    <Link className='filtered-notifications-banner' to='/notifications/requests'>
-      <Icon icon={InventoryIcon} />
-
-      <div className='filtered-notifications-banner__text'>
-        <strong><FormattedMessage id='filtered_notifications_banner.title' defaultMessage='Filtered notifications' /></strong>
-        <span><FormattedMessage id='filtered_notifications_banner.pending_requests' defaultMessage='Notifications from {count, plural, =0 {no one} one {one person} other {# people}} you may know' values={{ count: policy.getIn(['summary', 'pending_requests_count']) }} /></span>
-      </div>
-
-      <div className='filtered-notifications-banner__badge'>
-        <div className='filtered-notifications-banner__badge__badge'>{toCappedNumber(policy.getIn(['summary', 'pending_notifications_count']))}</div>
-        <FormattedMessage id='filtered_notifications_banner.mentions' defaultMessage='{count, plural, one {mention} other {mentions}}' values={{ count: policy.getIn(['summary', 'pending_notifications_count']) }} />
-      </div>
-    </Link>
-  );
-};

app/javascript/flavours/glitch/features/notifications/components/filtered_notifications_banner.tsx

@@ -0,0 +1,68 @@
+import { useEffect } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import { Link } from 'react-router-dom';
+
+import InventoryIcon from '@/material-icons/400-24px/inventory_2.svg?react';
+import { fetchNotificationPolicy } from 'flavours/glitch/actions/notification_policies';
+import { Icon } from 'flavours/glitch/components/icon';
+import { useAppSelector, useAppDispatch } from 'flavours/glitch/store';
+import { toCappedNumber } from 'flavours/glitch/utils/numbers';
+
+export const FilteredNotificationsBanner: React.FC = () => {
+  const dispatch = useAppDispatch();
+  const policy = useAppSelector((state) => state.notificationPolicy);
+
+  useEffect(() => {
+    void dispatch(fetchNotificationPolicy());
+
+    const interval = setInterval(() => {
+      void dispatch(fetchNotificationPolicy());
+    }, 120000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [dispatch]);
+
+  if (policy === null || policy.summary.pending_notifications_count === 0) {
+    return null;
+  }
+
+  return (
+    <Link
+      className='filtered-notifications-banner'
+      to='/notifications/requests'
+    >
+      <Icon icon={InventoryIcon} id='filtered-notifications' />
+
+      <div className='filtered-notifications-banner__text'>
+        <strong>
+          <FormattedMessage
+            id='filtered_notifications_banner.title'
+            defaultMessage='Filtered notifications'
+          />
+        </strong>
+        <span>
+          <FormattedMessage
+            id='filtered_notifications_banner.pending_requests'
+            defaultMessage='Notifications from {count, plural, =0 {no one} one {one person} other {# people}} you may know'
+            values={{ count: policy.summary.pending_requests_count }}
+          />
+        </span>
+      </div>
+
+      <div className='filtered-notifications-banner__badge'>
+        <div className='filtered-notifications-banner__badge__badge'>
+          {toCappedNumber(policy.summary.pending_notifications_count)}
+        </div>
+        <FormattedMessage
+          id='filtered_notifications_banner.mentions'
+          defaultMessage='{count, plural, one {mention} other {mentions}}'
+          values={{ count: policy.summary.pending_notifications_count }}
+        />
+      </div>
+    </Link>
+  );
+};

app/javascript/flavours/glitch/features/notifications/containers/column_settings_container.js

@@ -4,7 +4,8 @@ import { connect } from 'react-redux';
 
 import { showAlert } from '../../../actions/alerts';
 import { openModal } from '../../../actions/modal';
-import { setFilter, clearNotifications, requestBrowserPermission, updateNotificationsPolicy } from '../../../actions/notifications';
+import { updateNotificationsPolicy } from '../../../actions/notification_policies';
+import { setFilter, clearNotifications, requestBrowserPermission } from '../../../actions/notifications';
 import { changeAlerts as changePushNotifications } from '../../../actions/push_notifications';
 import { changeSetting } from '../../../actions/settings';
 import ColumnSettings from '../components/column_settings';
@@ -15,13 +16,16 @@ const messages = defineMessages({
   permissionDenied: { id: 'notifications.permission_denied_alert', defaultMessage: 'Desktop notifications can\'t be enabled, as browser permission has been denied before' },
 });
 
+/**
+ * @param {import('flavours/glitch/store').RootState} state
+ */
 const mapStateToProps = state => ({
   settings: state.getIn(['settings', 'notifications']),
   pushSettings: state.get('push_notifications'),
   alertsEnabled: state.getIn(['settings', 'notifications', 'alerts']).includes(true),
   browserSupport: state.getIn(['notifications', 'browserSupport']),
   browserPermission: state.getIn(['notifications', 'browserPermission']),
-  notificationPolicy: state.get('notificationPolicy'),
+  notificationPolicy: state.notificationPolicy,
 });
 
 const mapDispatchToProps = (dispatch, { intl }) => ({

app/javascript/flavours/glitch/features/status/components/card.jsx

@@ -11,10 +11,9 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import DescriptionIcon from '@/material-icons/400-24px/description-fill.svg?react';
 import OpenInNewIcon from '@/material-icons/400-24px/open_in_new.svg?react';
 import PlayArrowIcon from '@/material-icons/400-24px/play_arrow-fill.svg?react';
-import { Avatar } from 'flavours/glitch/components/avatar';
 import { Blurhash } from 'flavours/glitch/components/blurhash';
 import { Icon }  from 'flavours/glitch/components/icon';
-import { Permalink } from 'flavours/glitch/components/permalink';
+import { MoreFromAuthor } from 'flavours/glitch/components/more_from_author';
 import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
 import { useBlurhash } from 'flavours/glitch/initial_state';
 import { decode as decodeIDNA } from 'flavours/glitch/utils/idna';
@@ -48,20 +47,6 @@ const addAutoPlay = html => {
   return html;
 };
 
-const MoreFromAuthor = ({ author }) => (
-  <div className='more-from-author'>
-    <svg viewBox='0 0 79 79' className='logo logo--icon' role='img'>
-      <use xlinkHref='#logo-symbol-icon' />
-    </svg>
-
-    <FormattedMessage id='link_preview.more_from_author' defaultMessage='More from {name}' values={{ name: <Permalink href={author.get('url')} to={`/@${author.get('acct')}`}><Avatar account={author} size={16} /> {author.get('display_name')}</Permalink> }} />
-  </div>
-);
-
-MoreFromAuthor.propTypes = {
-  author: ImmutablePropTypes.map,
-};
-
 export default class Card extends PureComponent {
 
   static propTypes = {
@@ -248,7 +233,7 @@ export default class Card extends PureComponent {
           {description}
         </a>
 
-        {showAuthor && <MoreFromAuthor author={card.get('author_account')} />}
+        {showAuthor && <MoreFromAuthor accountId={card.get('author_account')} />}
       </>
     );
   }

app/javascript/flavours/glitch/features/ui/components/sign_in_banner.jsx

@@ -22,7 +22,8 @@ const SignInBanner = () => {
   if (sso_redirect) {
     return (
       <div className='sign-in-banner'>
-        <p><FormattedMessage id='sign_in_banner.text' defaultMessage='Login to follow profiles or hashtags, favorite, share and reply to posts. You can also interact from your account on a different server.' /></p>
+        <p><strong><FormattedMessage id='sign_in_banner.mastodon_is' defaultMessage="Mastodon is the best way to keep up with what's happening." /></strong></p>
+        <p><FormattedMessage id='sign_in_banner.follow_anyone' defaultMessage='Follow anyone across the fediverse and see it all in chronological order. No algorithms, ads, or clickbait in sight.' /></p>
         <a href={sso_redirect} data-method='post' className='button button--block button-tertiary'><FormattedMessage id='sign_in_banner.sso_redirect' defaultMessage='Login or Register' /></a>
       </div>
     );
@@ -44,7 +45,8 @@ const SignInBanner = () => {
 
   return (
     <div className='sign-in-banner'>
-      <p><FormattedMessage id='sign_in_banner.text' defaultMessage='Login to follow profiles or hashtags, favorite, share and reply to posts. You can also interact from your account on a different server.' /></p>
+      <p><strong><FormattedMessage id='sign_in_banner.mastodon_is' defaultMessage="Mastodon is the best way to keep up with what's happening." /></strong></p>
+      <p><FormattedMessage id='sign_in_banner.follow_anyone' defaultMessage='Follow anyone across the fediverse and see it all in chronological order. No algorithms, ads, or clickbait in sight.' /></p>
       {signupButton}
       <a href='/auth/sign_in' className='button button--block button-tertiary'><FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Login' /></a>
     </div>

app/javascript/flavours/glitch/models/notification_policy.ts

@@ -0,0 +1,3 @@
+import type { NotificationPolicyJSON } from 'flavours/glitch/api_types/notification_policies';
+
+export type NotificationPolicy = NotificationPolicyJSON; // No changes from the API type

app/javascript/flavours/glitch/reducers/notification_policy.js

@@ -1,12 +0,0 @@
-import { fromJS } from 'immutable';
-
-import { NOTIFICATION_POLICY_FETCH_SUCCESS } from 'flavours/glitch/actions/notifications';
-
-export const notificationPolicyReducer = (state = null, action) => {
-  switch(action.type) {
-  case NOTIFICATION_POLICY_FETCH_SUCCESS:
-    return fromJS(action.policy);
-  default:
-    return state;
-  }
-};

app/javascript/flavours/glitch/reducers/notification_policy.ts

@@ -0,0 +1,18 @@
+import { createReducer, isAnyOf } from '@reduxjs/toolkit';
+
+import {
+  fetchNotificationPolicy,
+  updateNotificationsPolicy,
+} from 'flavours/glitch/actions/notification_policies';
+import type { NotificationPolicy } from 'flavours/glitch/models/notification_policy';
+
+export const notificationPolicyReducer =
+  createReducer<NotificationPolicy | null>(null, (builder) => {
+    builder.addMatcher(
+      isAnyOf(
+        fetchNotificationPolicy.fulfilled,
+        updateNotificationsPolicy.fulfilled,
+      ),
+      (_state, action) => action.payload,
+    );
+  });

app/javascript/flavours/glitch/styles/components.scss

@@ -952,9 +952,15 @@ body > [data-popper-placement] {
   padding: 10px;
 
   p {
+    font-size: 15px;
+    line-height: 22px;
     color: $darker-text-color;
     margin-bottom: 20px;
 
+    strong {
+      font-weight: 700;
+    }
+
     a {
       color: $secondary-text-color;
       text-decoration: none;
@@ -1472,7 +1478,7 @@ body > [data-popper-placement] {
     .status__action-bar,
     .reactions-bar {
       margin-inline-start: $thread-margin;
-      width: calc(100% - ($thread-margin));
+      width: calc(100% - $thread-margin);
     }
 
     .status__content__read-more-button {
@@ -4379,6 +4385,13 @@ a.status-card {
   border-end-start-radius: 0;
 }
 
+.status-card.bottomless .status-card__image,
+.status-card.bottomless .status-card__image-image,
+.status-card.bottomless .status-card__image-preview {
+  border-end-end-radius: 0;
+  border-end-start-radius: 0;
+}
+
 .status-card.expanded > a {
   width: 100%;
 }
@@ -9392,43 +9405,80 @@ noscript {
   display: flex;
   align-items: center;
   color: $primary-text-color;
-  text-decoration: none;
-  padding: 15px;
+  padding: 16px;
   border-bottom: 1px solid var(--background-border-color);
-  gap: 15px;
+  gap: 16px;
 
   &:last-child {
     border-bottom: 0;
   }
 
-  &:hover,
-  &:active,
-  &:focus {
-    color: $highlight-text-color;
-
-    .story__details__publisher,
-    .story__details__shared {
-      color: $highlight-text-color;
-    }
-  }
-
   &__details {
     flex: 1 1 auto;
 
     &__publisher {
       color: $darker-text-color;
       margin-bottom: 8px;
+      font-size: 14px;
+      line-height: 20px;
     }
 
     &__title {
+      display: block;
       font-size: 19px;
       line-height: 24px;
       font-weight: 500;
       margin-bottom: 8px;
+      text-decoration: none;
+      color: $primary-text-color;
+
+      &:hover,
+      &:active,
+      &:focus {
+        color: $highlight-text-color;
+      }
     }
 
     &__shared {
+      display: flex;
+      align-items: center;
       color: $darker-text-color;
+      gap: 8px;
+      justify-content: space-between;
+      font-size: 14px;
+      line-height: 20px;
+
+      & > span {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      &__pill {
+        background: var(--surface-variant-background-color);
+        border-radius: 4px;
+        color: inherit;
+        text-decoration: none;
+        padding: 4px 12px;
+        font-size: 12px;
+        font-weight: 500;
+        line-height: 16px;
+      }
+
+      &__author-link {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        color: $primary-text-color;
+        font-weight: 500;
+        text-decoration: none;
+
+        &:hover,
+        &:active,
+        &:focus {
+          color: $highlight-text-color;
+        }
+      }
     }
 
     strong {
@@ -9493,14 +9543,14 @@ noscript {
 }
 
 .server-banner {
-  padding: 20px 0;
-
   &__introduction {
+    font-size: 15px;
+    line-height: 22px;
     color: $darker-text-color;
     margin-bottom: 20px;
 
     strong {
-      font-weight: 600;
+      font-weight: 700;
     }
 
     a {
@@ -9528,6 +9578,9 @@ noscript {
   }
 
   &__description {
+    font-size: 15px;
+    line-height: 22px;
+    color: $darker-text-color;
     margin-bottom: 20px;
   }
 
@@ -10499,14 +10552,14 @@ noscript {
     color: inherit;
     text-decoration: none;
     padding: 4px 12px;
-    background: $ui-base-color;
+    background: var(--surface-variant-background-color);
     border-radius: 4px;
     font-weight: 500;
 
     &:hover,
     &:focus,
     &:active {
-      background: lighten($ui-base-color, 4%);
+      background: var(--surface-variant-active-background-color);
     }
   }
 
@@ -10837,6 +10890,7 @@ noscript {
 }
 
 .more-from-author {
+  box-sizing: border-box;
   font-size: 14px;
   color: $darker-text-color;
   background: var(--surface-background-color);

app/javascript/flavours/glitch/styles/variables.scss

@@ -112,4 +112,6 @@ $dismiss-overlay-width: 4rem;
   --background-color: #{darken($ui-base-color, 8%)};
   --background-color-tint: #{rgba(darken($ui-base-color, 8%), 0.9)};
   --surface-background-color: #{darken($ui-base-color, 4%)};
+  --surface-variant-background-color: #{$ui-base-color};
+  --surface-variant-active-background-color: #{lighten($ui-base-color, 4%)};
 }