Merge commit 'd20d04922672ed016029c40ed64798f341ebca91' into glitch-soc/merge-upstream

app/controllers/api/v1/admin/reports_controller.rb

@@ -16,6 +16,7 @@ class Api::V1::Admin::ReportsController < Api::BaseController
 
   FILTER_PARAMS = %i(
     resolved
+    unresolved
     account_id
     target_account_id
   ).freeze

app/javascript/mastodon/actions/compose.js

@@ -329,7 +329,7 @@ export function uploadCompose(files) {
       dispatch(showAlert({ message: messages.uploadQuote }));
       return;
     }
-    const uploadLimit = getState().getIn(['server', 'server', 'configuration', 'statuses', 'max_media_attachments']);
+    const uploadLimit = getState().getIn(['server', 'server', 'item', 'configuration', 'statuses', 'max_media_attachments']);
     const media = getState().getIn(['compose', 'media_attachments']);
     const pending = getState().getIn(['compose', 'pending_media_attachments']);
     const progress = new Array(files.length).fill(0);

app/javascript/mastodon/actions/importer/emoji.ts

@@ -1,5 +1,8 @@
 import type { ApiCustomEmojiJSON } from '@/mastodon/api_types/custom_emoji';
 import { loadCustomEmoji } from '@/mastodon/features/emoji';
+import { emojiLogger } from '@/mastodon/features/emoji/utils';
+
+const log = emojiLogger('actions');
 
 export async function importCustomEmoji(emojis: ApiCustomEmojiJSON[]) {
   if (emojis.length === 0) {
@@ -18,5 +21,11 @@ export async function importCustomEmoji(emojis: ApiCustomEmojiJSON[]) {
   if (existingEmojis.length < emojis.length) {
     await clearCache('custom');
     await loadCustomEmoji();
+
+    const { reloadCustomEmojis } =
+      await import('@/mastodon/features/emoji/picker');
+    await reloadCustomEmojis();
+
+    log('Custom emojis updated, reloaded cache and picker data.');
   }
 }

app/javascript/mastodon/actions/server.ts

@@ -16,19 +16,33 @@ export const fetchServer = createDataLoadingThunk(
       dispatch(importFetchedAccount(instance.contact.account));
     }
   },
+  {
+    condition: (_, { getState }) => !getState().server.server.isLoading,
+  },
 );
 
 export const fetchExtendedDescription = createDataLoadingThunk(
   'server/extended_description',
   () => apiGetExtendedDescription(),
+  {
+    condition: (_, { getState }) =>
+      !getState().server.extendedDescription.isLoading,
+  },
 );
 
 export const fetchServerTranslationLanguages = createDataLoadingThunk(
   'server/translation_languages',
   () => apiGetTranslationLanguages(),
+  {
+    condition: (_, { getState }) =>
+      !getState().server.translationLanguages.isLoading,
+  },
 );
 
 export const fetchDomainBlocks = createDataLoadingThunk(
   'server/domain_blocks',
   () => apiGetDomainBlocks(),
+  {
+    condition: (_, { getState }) => !getState().server.domainBlocks.isLoading,
+  },
 );

app/javascript/mastodon/components/account_header/styles.module.scss

@@ -480,6 +480,7 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;
   justify-content: center;
   align-items: flex-start;
   margin: 16px 0;
+  padding: 16px;
 }
 
 .bannerBaseCentered {

app/javascript/mastodon/components/hover_card_controller.tsx

@@ -144,11 +144,16 @@ export const HoverCardController: React.FC = () => {
       setScrollTimeout(handleScrollEnd, 100);
     };
 
-    const handleMouseMove = () => {
+    const handleMouseMove = (e: MouseEvent) => {
       if (isUsingTouch) {
         isUsingTouch = false;
       }
 
+      const hasMoved = Math.max(e.movementX, e.movementY) > 0;
+      if (!hasMoved) {
+        return;
+      }
+
       delayEnterTimeout(enterDelay);
 
       cancelMoveTimeout();

app/javascript/mastodon/components/scrollable_list/index.jsx

@@ -285,7 +285,7 @@ class ScrollableList extends PureComponent {
     if (this.props.bindToDocument) {
       document.removeEventListener('scroll', this.handleScroll);
       document.removeEventListener('wheel', this.handleWheel, listenerOptions);
-    } else {
+    } else if (this.node) {
       this.node.removeEventListener('scroll', this.handleScroll);
       this.node.removeEventListener('wheel', this.handleWheel, listenerOptions);
     }

app/javascript/mastodon/components/status/header.tsx

@@ -20,7 +20,8 @@ export interface StatusHeaderProps {
   status: Status;
   account?: Account;
   avatarSize?: number;
-  children?: ReactNode;
+  contentBeforeDate?: ReactNode;
+  contentAfterDate?: ReactNode;
   wrapperProps?: HTMLAttributes<HTMLDivElement>;
   displayNameProps?: DisplayNameProps;
   onHeaderClick?: MouseEventHandler<HTMLDivElement>;
@@ -33,10 +34,11 @@ export type StatusHeaderRenderFn = (args: StatusHeaderProps) => ReactNode;
 export const StatusHeader: FC<StatusHeaderProps> = ({
   status,
   account,
-  children,
   className,
   avatarSize = 48,
   wrapperProps,
+  contentBeforeDate,
+  contentAfterDate,
   onHeaderClick,
 }) => {
   const statusAccount = status.get('account') as Account | undefined;
@@ -51,6 +53,14 @@ export const StatusHeader: FC<StatusHeaderProps> = ({
       className={classNames('status__info', className)}
       /* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
     >
+      <StatusDisplayName
+        statusAccount={statusAccount}
+        friendAccount={account}
+        avatarSize={avatarSize}
+      />
+
+      {contentBeforeDate}
+
       <Link
         to={`/@${statusAccount?.acct}/${status.get('id') as string}`}
         className='status__relative-time'
@@ -60,13 +70,7 @@ export const StatusHeader: FC<StatusHeaderProps> = ({
         {editedAt && <StatusEditedAt editedAt={editedAt} />}
       </Link>
 
-      <StatusDisplayName
+      {contentAfterDate}
-        statusAccount={statusAccount}
-        friendAccount={account}
-        avatarSize={avatarSize}
-      />
-
-      {children}
     </div>
   );
 };

app/javascript/mastodon/components/status_content.jsx

@@ -69,7 +69,7 @@ class TranslateButton extends PureComponent {
 }
 
 const mapStateToProps = state => ({
-  languages: state.server.translationLanguages.items,
+  languages: state.server.translationLanguages.item,
 });
 
 class StatusContent extends PureComponent {
@@ -187,7 +187,7 @@ class StatusContent extends PureComponent {
 
     const renderReadMore = this.props.onClick && status.get('collapsed');
     const contentLocale = intl.locale.replace(/[_-].*/, '');
-    const targetLanguages = this.props.languages?.get(status.get('language') || 'und');
+    const targetLanguages = this.props.languages?.[status.get('language') || 'und'];
     const renderTranslate = this.props.onTranslate && this.props.identity.signedIn && ['public', 'unlisted'].includes(status.get('visibility')) && status.get('search_index').trim().length > 0 && targetLanguages?.includes(contentLocale);
 
     const content = statusContent ?? getStatusContent(status);

app/javascript/mastodon/components/status_quoted.tsx

@@ -225,17 +225,20 @@ export const QuotedStatus: React.FC<QuotedStatusProps> = ({
   const intl = useIntl();
   const headerRenderFn: StatusHeaderRenderFn = useCallback(
     (props) => (
-      <StatusHeader {...props}>
+      <StatusHeader
-        {onQuoteCancel && (
+        {...props}
-          <IconButton
+        contentAfterDate={
-            onClick={onQuoteCancel}
+          onQuoteCancel && (
-            className='status__quote-cancel'
+            <IconButton
-            title={intl.formatMessage(quoteCancelMessage)}
+              onClick={onQuoteCancel}
-            icon='cancel-fill'
+              className='status__quote-cancel'
-            iconComponent={CancelFillIcon}
+              title={intl.formatMessage(quoteCancelMessage)}
-          />
+              icon='cancel-fill'
-        )}
+              iconComponent={CancelFillIcon}
-      </StatusHeader>
+            />
+          )
+        }
+      />
     ),
     [intl, onQuoteCancel],
   );

app/javascript/mastodon/features/account_timeline/components/pinned_statuses.tsx

@@ -22,18 +22,22 @@ export const renderPinnedStatusHeader: StatusHeaderRenderFn = ({
     return <StatusHeader {...args} />;
   }
   return (
-    <StatusHeader {...args} className={classes.pinnedStatusHeader}>
+    <StatusHeader
-      <Badge
+      {...args}
-        className={classes.pinnedBadge}
+      className={classes.pinnedStatusHeader}
-        icon={<Icon id='pinned' icon={IconPinned} />}
+      contentBeforeDate={
-        label={
+        <Badge
-          <FormattedMessage
+          className={classes.pinnedBadge}
-            id='account.timeline.pinned'
+          icon={<Icon id='pinned' icon={IconPinned} />}
-            defaultMessage='Pinned'
+          label={
-          />
+            <FormattedMessage
-        }
+              id='account.timeline.pinned'
-      />
+              defaultMessage='Pinned'
-    </StatusHeader>
+            />
+          }
+        />
+      }
+    />
   );
 };
 

app/javascript/mastodon/features/account_timeline/styles.module.scss

@@ -126,4 +126,7 @@
 
 .pinnedBadge {
   justify-self: end;
+
+  // Allow "click to open post" event to pass through
+  pointer-events: none;
 }

app/javascript/mastodon/features/collections/components/collection_list_item.tsx

@@ -27,14 +27,14 @@ export const CollectionListItem: React.FC<CollectionListItemProps> = ({
   ...otherProps
 }) => {
   const uniqueId = useId();
-  const linkId = `${uniqueId}-link`;
+  const titleId = `${uniqueId}-title`;
-  const infoId = `${uniqueId}-info`;
+  const subtitleId = `${uniqueId}-info`;
 
   return (
     <Article
       focusable
-      aria-labelledby={linkId}
+      aria-labelledby={titleId}
-      aria-describedby={infoId}
+      aria-describedby={subtitleId}
       aria-posinset={positionInList}
       aria-setsize={listSize}
     >
@@ -52,6 +52,8 @@ export const CollectionListItem: React.FC<CollectionListItemProps> = ({
             className={classes.menuButton}
           />
         }
+        titleId={titleId}
+        subtitleId={subtitleId}
         {...otherProps}
       />
     </Article>

app/javascript/mastodon/features/collections/components/collection_lockup.tsx

@@ -48,6 +48,8 @@ export interface CollectionLockupProps {
   sideContent?: React.ReactNode;
   className?: string;
   headingLevel?: 'h2' | 'h3' | 'h4';
+  titleId?: string;
+  subtitleId?: string;
 }
 
 export const CollectionLockup: React.FC<CollectionLockupProps> = ({
@@ -56,6 +58,8 @@ export const CollectionLockup: React.FC<CollectionLockupProps> = ({
   withTimestamp,
   sideContent,
   headingLevel = 'h3',
+  titleId,
+  subtitleId,
   className,
 }) => {
   const { id, name } = collection;
@@ -74,6 +78,7 @@ export const CollectionLockup: React.FC<CollectionLockupProps> = ({
       <ListItemLink
         as={headingLevel}
         to={getCollectionPath(id)}
+        id={titleId}
         subtitle={
           <CollectionInfo
             collection={collection}
@@ -81,6 +86,7 @@ export const CollectionLockup: React.FC<CollectionLockupProps> = ({
             withTimestamp={withTimestamp}
           />
         }
+        subtitleId={subtitleId}
       >
         {name}
       </ListItemLink>

app/javascript/mastodon/features/compose/components/compose_form.jsx

@@ -248,7 +248,15 @@ class ComposeForm extends ImmutablePureComponent {
     const { intl, onPaste, onDrop, autoFocus, withoutNavigation, maxChars, isSubmitting } = this.props;
 
     return (
-      <form className='compose-form' onSubmit={this.handleSubmit}>
+      <form
+        className='compose-form'
+        role='region'
+        aria-label={intl.formatMessage({
+          id: 'tabs_bar.publish',
+          defaultMessage: 'New Post'
+        })}
+        onSubmit={this.handleSubmit}
+      >
         <ReplyIndicator />
         {!withoutNavigation && <NavigationBar />}
         <Warning />

app/javascript/mastodon/features/compose/components/poll_form.jsx

@@ -58,7 +58,7 @@ const Option = ({ multipleChoice, index, title, autoFocus }) => {
   const dispatch = useDispatch();
   const suggestions = useSelector(state => state.getIn(['compose', 'suggestions']));
   const lang = useSelector(state => state.getIn(['compose', 'language']));
-  const maxOptions = useSelector(state => state.getIn(['server', 'server', 'configuration', 'polls', 'max_options']));
+  const maxOptions = useSelector(state => state.getIn(['server', 'server', 'item', 'configuration', 'polls', 'max_options']));
 
   const handleChange = useCallback(({ target: { value } }) => {
     dispatch(changePollOption(index, value, maxOptions));

app/javascript/mastodon/features/compose/components/search.tsx

@@ -547,11 +547,15 @@ export const Search: React.FC<{
   const searchOptionsHeading = useId();
 
   return (
-    <form ref={formRef} className={classNames('search', { active: expanded })}>
+    <form
+      role='search'
+      ref={formRef}
+      className={classNames('search', { active: expanded })}
+    >
       <input
         ref={searchInputRef}
         className='search__input'
-        type='text'
+        type='search'
         placeholder={intl.formatMessage(
           signedIn ? messages.placeholderSignedIn : messages.placeholder,
         )}

app/javascript/mastodon/features/compose/containers/upload_button_container.js

@@ -9,7 +9,7 @@ const mapStateToProps = state => {
   const readyAttachmentsSize = state.getIn(['compose', 'media_attachments']).size ?? 0;
   const pendingAttachmentsSize = state.getIn(['compose', 'pending_media_attachments']).size ?? 0;
   const attachmentsSize = readyAttachmentsSize + pendingAttachmentsSize;
-  const isOverLimit = attachmentsSize > state.getIn(['server', 'server', 'configuration', 'statuses', 'max_media_attachments'])-1;
+  const isOverLimit = attachmentsSize > state.getIn(['server', 'server', 'item', 'configuration', 'statuses', 'max_media_attachments'])-1;
   const hasVideoOrAudio = state.getIn(['compose', 'media_attachments']).some(m => ['video', 'audio'].includes(m.get('type')));
   const hasQuote = !!state.compose.get('quoted_status_id');
 

app/javascript/mastodon/features/compose/index.tsx

@@ -87,12 +87,11 @@ const Compose: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
 
   if (multiColumn) {
     return (
-      <div
+      <div className='drawer'>
-        className='drawer'
+        <nav
-        role='region'
+          className='drawer__header'
-        aria-label={intl.formatMessage(navbarMessages.publish)}
+          aria-label={intl.formatMessage(navbarMessages.advancedUiQuickLinks)}
-      >
+        >
-        <nav className='drawer__header'>
           <Link
             to='/getting-started'
             className='drawer__tab'
@@ -163,7 +162,11 @@ const Compose: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
 
         <Search singleColumn={false} />
 
-        <div className='drawer__pager'>
+        <div
+          className='drawer__pager'
+          role='region'
+          aria-label={intl.formatMessage(navbarMessages.publish)}
+        >
           <div className='drawer__inner'>
             <ComposeFormContainer />
 

app/javascript/mastodon/features/custom_homepage/about.tsx

@@ -0,0 +1,75 @@
+import { useEffect } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import { fetchExtendedDescription } from 'mastodon/actions/server';
+import { Account } from 'mastodon/components/account';
+import { Skeleton } from 'mastodon/components/skeleton';
+import { useAppSelector, useAppDispatch } from 'mastodon/store';
+
+import classes from './styles.module.scss';
+
+const Placeholder = () => (
+  <div className={classes.placeholder}>
+    <Skeleton width='100%' />
+    <Skeleton width='100%' />
+    <Skeleton width='100%' />
+  </div>
+);
+
+export const About = () => {
+  const dispatch = useAppDispatch();
+  const server = useAppSelector((state) => state.server.server);
+  const extendedDescription = useAppSelector(
+    (state) => state.server.extendedDescription,
+  );
+
+  const accountId = server.item?.contact.account?.id ?? '';
+  const isLoading = extendedDescription.isLoading;
+  const hasContent = (extendedDescription.item?.content.length ?? 0) > 0;
+  const content = extendedDescription.item?.content ?? '';
+
+  useEffect(() => {
+    void dispatch(fetchExtendedDescription());
+  }, [dispatch]);
+
+  return (
+    <>
+      <div className={classes.block}>
+        <h2>
+          <FormattedMessage
+            id='custom_homepage.administered_by'
+            defaultMessage='Administered by'
+          />
+        </h2>
+        <Account id={accountId} size={36} minimal />
+      </div>
+
+      <div className={classes.block}>
+        <h2>
+          <FormattedMessage
+            id='custom_homepage.about_this_server'
+            defaultMessage='About this server'
+          />
+        </h2>
+        {isLoading ? (
+          <Placeholder />
+        ) : hasContent ? (
+          <div
+            className='prose'
+            dangerouslySetInnerHTML={{ __html: content }}
+          />
+        ) : (
+          <div className='prose'>
+            <p>
+              <FormattedMessage
+                id='about.not_available'
+                defaultMessage='This information has not been made available on this server.'
+              />
+            </p>
+          </div>
+        )}
+      </div>
+    </>
+  );
+};

app/javascript/mastodon/features/custom_homepage/components/footer.tsx

@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import { Link } from 'react-router-dom';
+
+import { fetchServer } from 'mastodon/actions/server';
+import { useAppDispatch, useAppSelector } from 'mastodon/store';
+
+import classes from '../styles.module.scss';
+
+export const Footer = () => {
+  const dispatch = useAppDispatch();
+  const server = useAppSelector((state) => state.server.server);
+  const email = server.item?.contact.email ?? '';
+
+  useEffect(() => {
+    void dispatch(fetchServer());
+  }, [dispatch]);
+
+  return (
+    <footer className={classes.minimalFooter}>
+      <div className={classes.contact}>
+        <FormattedMessage
+          id='custom_homepage.contact'
+          defaultMessage='Contact:'
+        />
+        <a href={`mailto:${email}`}>{email}</a>
+      </div>
+
+      <Link to='/privacy-policy' rel='privacy-policy'>
+        <FormattedMessage
+          id='footer.privacy_policy'
+          defaultMessage='Privacy policy'
+        />
+      </Link>
+    </footer>
+  );
+};

app/javascript/mastodon/features/custom_homepage/components/header.tsx

@@ -0,0 +1,25 @@
+import { FormattedMessage } from 'react-intl';
+
+import { Link } from 'react-router-dom';
+
+import { domain, sso_redirect } from 'mastodon/initial_state';
+
+import classes from '../styles.module.scss';
+
+export const Header = () => (
+  <div className={classes.minimalHeader}>
+    <div className={classes.leftSide}>
+      <Link to='/overview'>{domain}</Link>
+    </div>
+
+    <div className={classes.rightSide}>
+      <a
+        href={sso_redirect ?? '/auth/sign_in'}
+        data-method={sso_redirect ? 'post' : undefined}
+        className='button button-secondary'
+      >
+        <FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Login' />
+      </a>
+    </div>
+  </div>
+);

app/javascript/mastodon/features/custom_homepage/index.tsx

@@ -0,0 +1,71 @@
+import { useEffect } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import { Route, Switch, useRouteMatch } from 'react-router-dom';
+
+import { Helmet } from '@unhead/react/helmet';
+
+import { fetchServer } from 'mastodon/actions/server';
+import { ServerHeroImage } from 'mastodon/components/server_hero_image';
+import { TabLink, TabList } from 'mastodon/components/tab_list';
+import { useAppSelector, useAppDispatch } from 'mastodon/store';
+
+import { About } from './about';
+import { LatestActivity } from './latest_activity';
+import classes from './styles.module.scss';
+
+export const CustomHomepage: React.FC = () => {
+  const dispatch = useAppDispatch();
+  const server = useAppSelector((state) => state.server.server);
+  const { path } = useRouteMatch();
+
+  useEffect(() => {
+    void dispatch(fetchServer());
+  }, [dispatch]);
+
+  return (
+    <div className={classes.page}>
+      <ServerHeroImage
+        alt={server.item?.thumbnail.description ?? ''}
+        blurhash={server.item?.thumbnail.blurhash ?? ''}
+        src={server.item?.thumbnail.url ?? ''}
+        srcSet={Object.keys(server.item?.thumbnail.versions ?? {})
+          .map(
+            (key) =>
+              `${server.item?.thumbnail.versions?.[key]} ${key.replace('@', '')}`,
+          )
+          .join(', ')}
+        className={classes.header}
+      />
+
+      <div className={classes.topSection}>
+        <h1>{server.item?.domain}</h1>
+        <p>{server.item?.description}</p>
+      </div>
+
+      <TabList>
+        <TabLink to={path} exact>
+          <FormattedMessage
+            id='custom_homepage.latest_activity'
+            defaultMessage='Latest activity'
+          />
+        </TabLink>
+
+        <TabLink to={`${path}/about`} exact>
+          <FormattedMessage id='custom_homepage.about' defaultMessage='About' />
+        </TabLink>
+      </TabList>
+
+      <Switch>
+        <Route path={path} exact component={LatestActivity} />
+        <Route path={`${path}/about`} exact component={About} />
+      </Switch>
+
+      <Helmet>
+        <title>{server.item?.domain}</title>
+        <meta name='robots' content='all' />
+      </Helmet>
+    </div>
+  );
+};

app/javascript/mastodon/features/custom_homepage/latest_activity.tsx

@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import { expandCommunityTimeline } from 'mastodon/actions/timelines';
+import { Callout } from 'mastodon/components/callout';
+import StatusListContainer from 'mastodon/features/ui/containers/status_list_container';
+import { useAppDispatch } from 'mastodon/store';
+
+import classes from './styles.module.scss';
+
+export const LatestActivity = () => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    void dispatch(expandCommunityTimeline());
+  }, [dispatch]);
+
+  return (
+    <StatusListContainer
+      prepend={
+        <Callout className={classes.banner}>
+          <FormattedMessage
+            id='custom_homepage.these_are_the_latest_posts'
+            defaultMessage='These are the latest 40 posts from accounts on this server.'
+          />
+        </Callout>
+      }
+      scrollKey='custom_homepage'
+      timelineId='community'
+      maxItems={40}
+      bindToDocument
+    />
+  );
+};

app/javascript/mastodon/features/custom_homepage/styles.module.scss

@@ -0,0 +1,145 @@
+.page {
+  border-radius: 16px;
+  border: 1px solid var(--color-border-primary);
+  background: var(--color-bg-primary);
+  min-height: 100%;
+
+  :global(.item-list) article:last-child :global(.status) {
+    border-bottom: 0;
+  }
+
+  @media screen and (width <= 1175px) {
+    border-radius: 0;
+  }
+}
+
+.header {
+  aspect-ratio: 40/21;
+  border-radius: 16px 16px 0 0;
+
+  @media screen and (width <= 1175px) {
+    border-radius: 0;
+  }
+}
+
+.banner {
+  margin: 16px;
+  margin-bottom: 0;
+}
+
+.topSection {
+  display: flex;
+  padding: 16px;
+  flex-direction: column;
+  gap: 8px;
+  color: var(--color-text-primary);
+
+  h1 {
+    font-size: 24px;
+    font-weight: 500;
+    line-height: 30px;
+    letter-spacing: -0.12px;
+  }
+
+  p {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    font-size: 16px;
+    line-height: 24px;
+    text-overflow: ellipsis;
+  }
+}
+
+.block {
+  padding: 16px;
+
+  h2 {
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 22.4px;
+    margin-bottom: 8px;
+  }
+
+  :global(.account) {
+    border: 1px solid var(--color-border-primary);
+    padding: 18px 16px;
+    border-radius: 12px;
+
+    --avatar-border-radius: 50%;
+  }
+}
+
+.placeholder {
+  padding: 4px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  :global(.skeleton) {
+    height: 40px;
+    border-radius: 12px;
+    background: var(--color-bg-overlay-highlight);
+  }
+}
+
+.minimalHeader {
+  padding-top: 24px;
+  padding-bottom: 12px;
+  display: flex;
+  align-items: center;
+
+  @media screen and (width <= 1175px) {
+    padding-inline-start: 12px;
+    padding-inline-end: 12px;
+  }
+}
+
+.leftSide {
+  font-size: 15px;
+  font-weight: 600;
+  max-width: 300px;
+
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
+}
+
+.rightSide {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 4px;
+  flex: 1 0 0;
+}
+
+.minimalFooter {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--color-text-secondary);
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 22.4px;
+  padding-top: 28px;
+  padding-bottom: 54px;
+  gap: 8px;
+  flex-wrap: wrap;
+
+  a {
+    color: inherit;
+    text-decoration: underline;
+  }
+
+  @media screen and (width <= 1175px) {
+    justify-content: center;
+    padding-inline-start: 12px;
+    padding-inline-end: 12px;
+  }
+}
+
+.contact {
+  display: flex;
+  gap: 8px;
+}

app/javascript/mastodon/features/emoji/database.ts

@@ -85,13 +85,16 @@ export async function search({
     // Only query the range for the last token to allow partial matches.
     const range =
       i === queryTokens.length - 1
-        ? IDBKeyRange.bound(token, token + '\uffff')
+        ? IDBKeyRange.lowerBound(token)
         : IDBKeyRange.only(token);
 
-    const [unicodeResults, customResults] = await Promise.all([
+    const [unicodeResults, customResults, shortcodeResults] = await Promise.all(
-      db.getAllFromIndex(locale, 'tokens', range),
+      [
-      db.getAllFromIndex('custom', 'tokens', range),
+        db.getAllFromIndex(locale, 'tokens', range),
-    ]);
+        db.getAllFromIndex('custom', 'tokens', range),
+        db.getAllFromIndex('shortcodes', 'shortcodes', range),
+      ],
+    );
     const resultMap: ScoreMap = new Map();
     for (const emoji of unicodeResults) {
       const score = getScoreForEmoji(emoji, token);
@@ -107,6 +110,22 @@ export async function search({
       }
       resultMap.set(emoji.shortcode, { ...emoji, score });
     }
+
+    for (const shortcodeResult of shortcodeResults) {
+      if (resultMap.has(shortcodeResult.hexcode)) {
+        continue;
+      }
+      const emoji = await db.get(locale, shortcodeResult.hexcode);
+      if (!emoji) {
+        continue;
+      }
+      const score = getScoreForEmoji(emoji, token);
+      if (score === null) {
+        continue;
+      }
+      resultMap.set(emoji.hexcode, { ...emoji, score });
+    }
+
     log('found %d results for token "%s"', resultMap.size, token);
     resultArrays.push(resultMap);
   }
@@ -147,7 +166,7 @@ function getScoreForEmoji(emoji: AnyEmojiData, query: string) {
   }
 
   let index = 1;
-  for (const token of [id, emoji.tokens]) {
+  for (const token of [id, ...emoji.tokens]) {
     const tokenIndex = token.indexOf(query);
     if (tokenIndex !== -1) {
       return index + tokenIndex / token.length;

app/javascript/mastodon/features/emoji/index.ts

@@ -2,6 +2,7 @@ import { initialState } from '@/mastodon/initial_state';
 
 import type { EMOJI_DB_NAME_SHORTCODES } from './constants';
 import { toSupportedLocale } from './locale';
+import { reloadCustomEmojis } from './picker';
 import type { LocaleOrCustom } from './types';
 import { emojiLogger } from './utils';
 
@@ -90,6 +91,7 @@ export async function loadCustomEmoji() {
     const emojis = await importCustomEmojiData();
     if (emojis && emojis.length > 0) {
       log('loaded %d custom emojis', emojis.length);
+      await reloadCustomEmojis();
     }
   }
 }

app/javascript/mastodon/features/emoji/normalize.ts

@@ -14,6 +14,7 @@ import {
   EMOJIS_REQUIRING_INVERSION_IN_DARK_MODE,
   EMOJI_MIN_TOKEN_LENGTH,
 } from './constants';
+import { localeToSegmenter } from './locale';
 import type {
   CustomEmojiData,
   CustomEmojiMapArg,
@@ -92,10 +93,11 @@ export function transformEmojiData(
 export function transformCustomEmojiData(
   emoji: ApiCustomEmojiJSON,
 ): CustomEmojiData {
-  const tokens = emoji.shortcode
+  const tokens = extractTokens(emoji.shortcode, localeToSegmenter('en'));
-    .split('_')
+  if (!tokens.includes(emoji.shortcode)) {
-    .filter((word) => word.length >= EMOJI_MIN_TOKEN_LENGTH)
+    tokens.unshift(emoji.shortcode);
-    .map((word) => word.toLowerCase());
+  }
+
   return {
     ...emoji,
     tokens,
@@ -215,7 +217,9 @@ export function extractTokens(
   // Prefer to use Intl.Segmenter if available for better locale support.
   if (segmenter) {
     for (const { isWordLike, segment } of segmenter.segment(
-      input.replaceAll('_', ' '), // Handle underscores from shortcodes.
+      input
+        .replaceAll(/[_-]+/g, ' ') // Handle underscores from shortcodes.
+        .replaceAll(/([a-z])([A-Z])/g, '$1 $2'), // Handle camelCase.
     )) {
       if (isWordLike && segment.length >= EMOJI_MIN_TOKEN_LENGTH) {
         tokens.push(segment.toLowerCase());

app/javascript/mastodon/features/emoji/picker.ts

@@ -82,13 +82,22 @@ type LegacyEmoji =
       custom: true;
     };
 
+export async function reloadCustomEmojis() {
+  customEmojis = null;
+
+  const { loadEmojisIntoCache } =
+    await import('@/mastodon/hooks/useCustomEmojis');
+
+  await Promise.all([fetchCustomEmojiData(), loadEmojisIntoCache()]);
+}
+
 // Replicates the old legacy search function.
 export async function emojiMartSearch(
   token: string,
   locale: string,
   limit = 5,
 ): Promise<LegacyEmoji[]> {
-  const query = token.replace(':', '').toLowerCase().trim();
+  const query = token.replace(':', '').trim();
   if (!query.length) {
     return [];
   }

app/javascript/mastodon/features/getting_started/index.tsx

@@ -4,14 +4,16 @@ import { Helmet } from '@unhead/react/helmet';
 
 import { Column } from 'mastodon/components/column';
 
-import { NavigationPanel } from '../navigation_panel';
+import { NavigationPanel, messages } from '../navigation_panel';
 import { LinkFooter } from '../ui/components/link_footer';
 
 const GettingStarted: React.FC = () => {
   const intl = useIntl();
   return (
     <Column>
-      <NavigationPanel multiColumn />
+      <nav aria-label={intl.formatMessage(messages.main)}>
+        <NavigationPanel multiColumn />
+      </nav>
 
       <LinkFooter context='multi-column' />
 

app/javascript/mastodon/features/navigation_panel/index.tsx

@@ -60,7 +60,7 @@ import { MoreLink } from './components/more_link';
 import { SignInBanner } from './components/sign_in_banner';
 import { Trends } from './components/trends';
 
-const messages = defineMessages({
+export const messages = defineMessages({
   home: { id: 'tabs_bar.home', defaultMessage: 'Home' },
   notifications: {
     id: 'tabs_bar.notifications',
@@ -72,6 +72,12 @@ const messages = defineMessages({
     id: 'column.firehose_singular',
     defaultMessage: 'Live feed',
   },
+  main: {
+    id: 'navigation_bar.main',
+    defaultMessage: 'Main',
+    description:
+      'Label for the main navigation; should not contain the word "navigation".',
+  },
   direct: { id: 'navigation_bar.direct', defaultMessage: 'Private mentions' },
   favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favorites' },
   bookmarks: { id: 'navigation_bar.bookmarks', defaultMessage: 'Bookmarks' },
@@ -419,6 +425,7 @@ export const NavigationPanel: React.FC<{ multiColumn?: boolean }> = ({
 };
 
 export const CollapsibleNavigationPanel: React.FC = () => {
+  const intl = useIntl();
   const open = useAppSelector((state) => state.navigation.open);
   const dispatch = useAppDispatch();
   const openable = useBreakpoint('openable');
@@ -527,7 +534,8 @@ export const CollapsibleNavigationPanel: React.FC = () => {
   const showOverlay = openable && open;
 
   return (
-    <div
+    <nav
+      aria-label={intl.formatMessage(messages.main)}
       className={classNames(
         'columns-area__panels__pane columns-area__panels__pane--start columns-area__panels__pane--navigational',
         { 'columns-area__panels__pane--overlay': showOverlay },
@@ -541,6 +549,6 @@ export const CollapsibleNavigationPanel: React.FC = () => {
       >
         <NavigationPanel />
       </animated.div>
-    </div>
+    </nav>
   );
 };

app/javascript/mastodon/features/ui/components/columns_area.tsx

@@ -12,6 +12,8 @@ import classNames from 'classnames';
 import type { List, Record } from 'immutable';
 
 import { useAppSelector } from '@/mastodon/store';
+import { Footer } from 'mastodon/features/custom_homepage/components/footer';
+import { Header } from 'mastodon/features/custom_homepage/components/header';
 import { CollapsibleNavigationPanel } from 'mastodon/features/navigation_panel';
 
 import { useBreakpoint } from '../hooks/useBreakpoint';
@@ -85,9 +87,10 @@ export const ColumnsArea = forwardRef<
   HTMLDivElement,
   {
     singleColumn?: boolean;
+    minimalShell?: boolean;
     children: React.ReactElement | React.ReactElement[];
   }
->(({ children, singleColumn }, ref) => {
+>(({ children, minimalShell, singleColumn }, ref) => {
   const renderComposePanel = !useBreakpoint('full');
   const columns = useAppSelector((state) =>
     (state.settings as Record<{ columns: List<Record<Column>> }>).get(
@@ -98,6 +101,24 @@ export const ColumnsArea = forwardRef<
     (state) => !state.modal.get('stack').isEmpty(),
   );
 
+  if (minimalShell) {
+    return (
+      <div className='columns-area__panels'>
+        <div className='columns-area__panels__main'>
+          <Header />
+
+          <div className='tabs-bar__wrapper'>
+            <TabsBarPortal />
+          </div>
+
+          <div className='columns-area columns-area--mobile'>{children}</div>
+
+          <Footer />
+        </div>
+      </div>
+    );
+  }
+
   if (singleColumn) {
     return (
       <div className='columns-area__panels'>
@@ -108,12 +129,13 @@ export const ColumnsArea = forwardRef<
           </div>
         </div>
 
-        <div className='columns-area__panels__main'>
+        <main className='columns-area__panels__main'>
           <div className='tabs-bar__wrapper'>
             <TabsBarPortal />
           </div>
+
           <div className='columns-area columns-area--mobile'>{children}</div>
-        </div>
+        </main>
 
         <CollapsibleNavigationPanel />
       </div>
@@ -121,7 +143,7 @@ export const ColumnsArea = forwardRef<
   }
 
   return (
-    <div
+    <main
       className={classNames('columns-area', { unscrollable: isModalOpen })}
       ref={ref}
       tabIndex={isModalOpen ? undefined : 0}
@@ -160,7 +182,7 @@ export const ColumnsArea = forwardRef<
           cloneElement(child, { multiColumn: true }),
         )}
       </ColumnIndexContext.Provider>
-    </div>
+    </main>
   );
 });
 

app/javascript/mastodon/features/ui/components/link_footer.module.scss

@@ -41,6 +41,10 @@
 
     &:not(:last-child)::after {
       content: ' · ';
+
+      @supports (content: 'x' / 'y') {
+        content: ' · ' / '';
+      }
     }
   }
 

app/javascript/mastodon/features/ui/components/navigation_bar.tsx

@@ -31,6 +31,10 @@ export const messages = defineMessages({
     defaultMessage: 'Notifications',
   },
   menu: { id: 'tabs_bar.menu', defaultMessage: 'Menu' },
+  advancedUiQuickLinks: {
+    id: 'tabs_bar.quick_links',
+    defaultMessage: 'Quick links',
+  },
 });
 
 const IconLabelButton: React.FC<{

app/javascript/mastodon/features/ui/containers/status_list_container.js

@@ -11,7 +11,15 @@ import { me } from '@/mastodon/initial_state';
 
 const makeGetStatusIds = (pending = false) => createSelector([
   (state, { type }) => state.getIn(['settings', type], ImmutableMap()),
-  (state, { type }) => state.getIn(['timelines', type, pending ? 'pendingItems' : 'items'], ImmutableList()),
+  (state, { type, maxItems }) => {
+    const items = state.getIn(['timelines', type, pending ? 'pendingItems' : 'items'], ImmutableList());
+
+    if (maxItems) {
+      return items.take(maxItems);
+    }
+
+    return items;
+  },
   (state)           => state.get('statuses'),
 ], (columnSettings, statusIds, statuses) => {
   return statusIds.filter(id => {
@@ -41,8 +49,15 @@ const makeMapStateToProps = () => {
   const getStatusIds = makeGetStatusIds();
   const getPendingStatusIds = makeGetStatusIds(true);
 
-  const mapStateToProps = (state, { timelineId, initialLoadingState = true }) => ({
+  /**
-    statusIds: getStatusIds(state, { type: timelineId }),
+   * @param {import('mastodon/store').RootState} state
+   * @param {Object} props
+   * @param {string} props.timelineId
+   * @param {boolean} [props.initialLoadingState]
+   * @param {number} [props.maxItems]
+   */
+  const mapStateToProps = (state, { timelineId, initialLoadingState = true, maxItems }) => ({
+    statusIds: getStatusIds(state, { type: timelineId, maxItems }),
     lastId:    state.getIn(['timelines', timelineId, 'items'])?.last(),
     isLoading: state.getIn(['timelines', timelineId, 'isLoading'], initialLoadingState),
     isPartial: state.getIn(['timelines', timelineId, 'isPartial'], false),

app/javascript/mastodon/features/ui/index.jsx

@@ -29,7 +29,7 @@ import { uploadCompose, resetCompose, changeComposeSpoilerness } from '../../act
 import { clearHeight } from '../../actions/height_cache';
 import { fetchServer, fetchServerTranslationLanguages } from '../../actions/server';
 import { expandHomeTimeline } from '../../actions/timelines';
-import { initialState, me, owner, singleUserMode, trendsEnabled, landingPage, localLiveFeedAccess, disableHoverCards } from '../../initial_state';
+import { initialState, me, owner, singleUserMode, trendsEnabled, landingPage, localLiveFeedAccess, disableHoverCards, domain } from '../../initial_state';
 
 import BundleColumnError from './components/bundle_column_error';
 import { NavigationBar } from './components/navigation_bar';
@@ -88,6 +88,7 @@ import {
 import { ColumnsContextProvider } from './util/columns_context';
 import { focusColumn, getFocusedItemIndex, focusItemSibling, focusFirstItem } from './util/focusUtils';
 import { WrappedSwitch, WrappedRoute } from './util/react_router_helpers';
+import { CustomHomepage } from 'mastodon/features/custom_homepage';
 
 // Dummy import, to make sure that <Status /> ends up in the application bundle.
 // Without this it ends up in ~8 very commonly used bundles.
@@ -105,7 +106,7 @@ const mapStateToProps = state => ({
   hasComposingContents: state.getIn(['compose', 'text']).trim().length !== 0 || state.getIn(['compose', 'media_attachments']).size > 0 || state.getIn(['compose', 'poll']) !== null || state.getIn(['compose', 'quoted_status_id']) !== null,
   canUploadMore:
     !state.getIn(['compose', 'media_attachments']).some(x => ['audio', 'video'].includes(x.get('type')))
-    && state.getIn(['compose', 'media_attachments']).size < state.getIn(['server', 'server', 'configuration', 'statuses', 'max_media_attachments']),
+    && state.getIn(['compose', 'media_attachments']).size < state.getIn(['server', 'server', 'item', 'configuration', 'statuses', 'max_media_attachments']),
   isUploadEnabled:
     state.getIn(['compose', 'isDragDisabled']) !== true,
   firstLaunch: state.getIn(['settings', 'introductionVersion'], 0) < INTRODUCTION_VERSION,
@@ -177,13 +178,15 @@ class SwitchingColumnsArea extends PureComponent {
       rootRedirect = '/explore';
     } else if (localLiveFeedAccess === 'public' && landingPage === 'local_feed') {
       rootRedirect = '/public/local';
+    } else if (landingPage === 'overview') {
+      rootRedirect = '/overview';
     } else {
       rootRedirect = '/about';
     }
 
     return (
       <ColumnsContextProvider multiColumn={!singleColumn}>
-        <ColumnsArea ref={this.setRef} singleColumn={singleColumn}>
+        <ColumnsArea ref={this.setRef} singleColumn={singleColumn} domain={domain} minimalShell={!signedIn && landingPage === 'overview'}>
           <WrappedSwitch>
             <Redirect from='/' to={{pathname: rootRedirect, state: this.props.location.state}} exact />
 
@@ -262,6 +265,8 @@ class SwitchingColumnsArea extends PureComponent {
             <WrappedRoute path='/followed_tags' component={FollowedTags} content={children} />
             <WrappedRoute path='/mutes' component={Mutes} content={children} />
             <WrappedRoute path='/lists' component={Lists} content={children} />
+
+            <Route path='/overview' component={CustomHomepage} />
             <Route component={BundleColumnError} />
           </WrappedSwitch>
         </ColumnsArea>
@@ -633,13 +638,18 @@ class UI extends PureComponent {
       cheat: this.handleDonate,
     };
 
+    const minimalShell = !this.props.identity.signedIn && landingPage === 'overview';
+
     return (
       <Hotkeys global handlers={handlers}>
         <div className={classNames('ui', { 'is-composing': isComposing })} ref={this.setRef}>
-          <SkipLinks
+          {!minimalShell && (
-            multiColumn={layout === 'multi-column'}
+            <SkipLinks
-            onFocusGettingStartedColumn={this.handleHotkeyGoToStart}
+              multiColumn={layout === 'multi-column'}
-          />
+              onFocusGettingStartedColumn={this.handleHotkeyGoToStart}
+            />
+          )}
+
           <SwitchingColumnsArea
             identity={this.props.identity}
             location={location}
@@ -650,7 +660,7 @@ class UI extends PureComponent {
             {children}
           </SwitchingColumnsArea>
 
-          <NavigationBar />
+          {!minimalShell && <NavigationBar />}
           {layout !== 'mobile' && <PictureInPicture />}
           <AlertsController />
           {!disableHoverCards && <HoverCardController />}

app/javascript/mastodon/hooks/useCustomEmojis.ts

@@ -20,7 +20,7 @@ export function useCustomEmojis() {
   return emojis;
 }
 
-async function loadEmojisIntoCache() {
+export async function loadEmojisIntoCache() {
   const { loadAllCustomEmoji } = await import('../features/emoji/database');
   const emojisRaw = await loadAllCustomEmoji();
   if (emojisRaw === null) {

app/javascript/mastodon/locales/en.json

@@ -584,6 +584,12 @@
   "copy_icon_button.copy_this_text": "Copy link to clipboard",
   "copypaste.copied": "Copied",
   "copypaste.copy_to_clipboard": "Copy to clipboard",
+  "custom_homepage.about": "About",
+  "custom_homepage.about_this_server": "About this server",
+  "custom_homepage.administered_by": "Administered by",
+  "custom_homepage.contact": "Contact:",
+  "custom_homepage.latest_activity": "Latest activity",
+  "custom_homepage.these_are_the_latest_posts": "These are the latest 40 posts from accounts on this server.",
   "directory.federated": "From known fediverse",
   "directory.local": "From {domain} only",
   "directory.new_arrivals": "New arrivals",
@@ -908,6 +914,7 @@
   "navigation_bar.live_feed_local": "Live feed (local)",
   "navigation_bar.live_feed_public": "Live feed (public)",
   "navigation_bar.logout": "Logout",
+  "navigation_bar.main": "Main",
   "navigation_bar.moderation": "Moderation",
   "navigation_bar.more": "More",
   "navigation_bar.mutes": "Muted users",
@@ -1305,6 +1312,7 @@
   "tabs_bar.menu": "Menu",
   "tabs_bar.notifications": "Notifications",
   "tabs_bar.publish": "New Post",
+  "tabs_bar.quick_links": "Quick links",
   "tabs_bar.search": "Search",
   "tag.remove": "Remove",
   "terms_of_service.effective_as_of": "Effective as of {date}",

app/javascript/styles/mastodon/admin.scss

@@ -411,7 +411,7 @@ $content-width: 840px;
         display: flex;
       }
 
-      & > ul {
+      & > nav > ul {
         display: none;
 
         &.visible {

app/javascript/styles/mastodon/components.scss

@@ -1613,7 +1613,6 @@ body > [data-popper-placement] {
   font-size: 15px;
   line-height: 22px;
   height: 40px;
-  order: 2;
   flex: 0 0 auto;
   color: var(--color-text-secondary);
 }
@@ -1666,7 +1665,6 @@ body > [data-popper-placement] {
 
 .status__quote-cancel {
   align-self: self-start;
-  order: 5;
 }
 
 .status__info {
@@ -10778,6 +10776,7 @@ noscript {
     -webkit-box-orient: vertical;
     max-height: 2 * 20px;
     overflow: hidden;
+    overflow-wrap: anywhere;
 
     p {
       margin-bottom: 0;

app/models/form/admin_settings.rb

@@ -109,7 +109,7 @@ class Form::AdminSettings
   REGISTRATION_MODES = %w(open approved none).freeze
   FEED_ACCESS_MODES = %w(public authenticated disabled).freeze
   ALTERNATE_FEED_ACCESS_MODES = %w(public authenticated).freeze
-  LANDING_PAGE = %w(trends about local_feed).freeze
+  LANDING_PAGE = %w(trends overview local_feed about).freeze
 
   attr_accessor(*KEYS)
 

app/models/report_filter.rb

@@ -3,6 +3,7 @@
 class ReportFilter
   KEYS = %i(
     resolved
+    unresolved
     account_id
     target_account_id
     by_target_domain
@@ -16,7 +17,7 @@ class ReportFilter
   end
 
   def results
-    scope = Report.unresolved
+    scope = status_scope
 
     relevant_params.each do |key, value|
       scope = scope.merge scope_for(key, value)
@@ -28,7 +29,7 @@ class ReportFilter
   private
 
   def relevant_params
-    params.tap do |args|
+    params.except(:resolved, :unresolved).tap do |args|
       args.delete(:target_origin) if origin_is_remote_and_domain_present?
     end
   end
@@ -37,12 +38,20 @@ class ReportFilter
     params[:target_origin] == 'remote' && params[:by_target_domain].present?
   end
 
+  def status_scope
+    resolved = params.key?(:resolved)
+    unresolved = params.key?(:unresolved)
+
+    return Report.all if resolved && unresolved
+    return Report.resolved if resolved
+
+    Report.unresolved
+  end
+
   def scope_for(key, value)
     case key.to_sym
     when :by_target_domain
       Report.where(target_account: Account.where(domain: value))
-    when :resolved
-      Report.resolved
     when :account_id
       Report.where(account_id: value)
     when :target_account_id

app/views/admin/settings/branding/show.html.haml

@@ -75,10 +75,11 @@
 
   .fields-row
     = f.input :landing_page,
+              as: :radio_buttons,
               collection: f.object.class::LANDING_PAGE,
               include_blank: false,
-              label_method: ->(page) { I18n.t("admin.settings.landing_page.values.#{page}") },
+              label_method: ->(page) { safe_join([I18n.t("admin.settings.landing_page.values.#{page}"), content_tag(:span, I18n.t("admin.settings.landing_page.hints.#{page}_html"), class: 'hint')]) },
-              wrapper: :with_label
+              wrapper: :with_block_label
 
   .actions
     = f.button :button, t('generic.save_changes'), type: :submit

app/views/layouts/admin.html.haml

@@ -8,7 +8,7 @@
 - content_for :content do
   %a.navigation-skip-link{ href: '#content' }= t('admin.skip_to_content')
   .admin-wrapper
-    %nav.sidebar-wrapper
+    %header.sidebar-wrapper
       .sidebar-wrapper__inner
         .sidebar
           = link_to root_path do
@@ -23,7 +23,8 @@
               = material_symbol 'menu'
               = material_symbol 'close'
 
-          = render_navigation
+          %nav
+            = render_navigation
 
     %main.content-wrapper#content
       .content

config/locales/en.yml

@@ -956,10 +956,16 @@ en:
           disabled: Require specific user role
           public: Everyone
       landing_page:
+        hints:
+          about_html: A page with the description, contact information, rules and other information regarding this server.
+          local_feed_html: A live feed featuring most recent posts by users on this server.
+          overview_html: A page showcasing the description of your server alongside the most recent local posts by users on this server.
+          trends_html: A page featuring what's popular on this server right now.
         values:
-          about: About
+          about: About page
-          local_feed: Local feed
+          local_feed: Local live feed
-          trends: Trends
+          overview: Overview
+          trends: Trending
       registrations:
         moderation_recommandation: Please make sure you have an adequate and reactive moderation team before you open registrations to everyone!
         preamble: Control who can create an account on your server.

config/routes/web_app.rb

@@ -34,4 +34,6 @@
   /search
   /start/(*any)
   /statuses/(*any)
+  /overview
+  /overview/about
 ).each { |path| get path, to: 'home#index' }

package.json

@@ -164,7 +164,7 @@
     "@vitest/browser-playwright": "^4.1.0",
     "@vitest/coverage-v8": "^4.1.0",
     "@vitest/ui": "^4.1.0",
-    "chromatic": "^16.0.0",
+    "chromatic": "^17.0.0",
     "eslint": "^9.39.2",
     "eslint-import-resolver-typescript": "^4.2.5",
     "eslint-plugin-formatjs": "^6.0.0",

spec/requests/api/v1/admin/reports_spec.rb

@@ -78,6 +78,17 @@ RSpec.describe 'Reports' do
         end
       end
 
+      context 'with both resolved and unresolved params' do
+        let(:params) { { resolved: true, unresolved: true } }
+        let(:scope)  { Report.all }
+
+        it 'returns all reports' do
+          subject
+
+          expect(response.parsed_body).to match_array(expected_response)
+        end
+      end
+
       context 'with account_id param' do
         let(:params) { { account_id: reporter.id } }
         let(:scope)  { Report.unresolved.where(account: reporter) }

spec/system/unlogged_spec.rb

@@ -12,6 +12,6 @@ RSpec.describe 'UnloggedBrowsing', :js, :streaming do
   it 'loads the home page' do
     expect(subject).to have_css('div.app-holder')
 
-    expect(subject).to have_css('div.columns-area__panels__main')
+    expect(subject).to have_css('main.columns-area__panels__main')
   end
 end

yarn.lock

@@ -2964,7 +2964,7 @@ __metadata:
     axios: "npm:^1.4.0"
     babel-plugin-transform-react-remove-prop-types: "npm:^0.4.24"
     blurhash: "npm:^2.0.5"
-    chromatic: "npm:^16.0.0"
+    chromatic: "npm:^17.0.0"
     classnames: "npm:^2.3.2"
     cocoon-js-vanilla: "npm:^1.5.1"
     color-blend: "npm:^4.0.0"
@@ -6830,22 +6830,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chromatic@npm:^16.0.0":
+"chromatic@npm:^17.0.0":
-  version: 16.0.0
+  version: 17.0.0
-  resolution: "chromatic@npm:16.0.0"
+  resolution: "chromatic@npm:17.0.0"
+  dependencies:
+    semver: "npm:^7.3.5"
   peerDependencies:
     "@chromatic-com/cypress": ^0.*.* || ^1.0.0
     "@chromatic-com/playwright": ^0.*.* || ^1.0.0
+    "@chromatic-com/vitest": ^0.*.* || ^1.0.0
   peerDependenciesMeta:
     "@chromatic-com/cypress":
       optional: true
     "@chromatic-com/playwright":
       optional: true
+    "@chromatic-com/vitest":
+      optional: true
   bin:
-    chroma: dist/bin.js
+    chroma: dist/bin.cjs
-    chromatic: dist/bin.js
+    chromatic: dist/bin.cjs
-    chromatic-cli: dist/bin.js
+    chromatic-cli: dist/bin.cjs
-  checksum: 10c0/ebebbf1c7d57e1ee9863997416c5125aab0a1886dce60fcb0358d34a51e0e1a45edc4635c8f8fb56d9facbcf21cd48014320c550f723b4791da51dde8552ee2b
+  checksum: 10c0/962c86feec17b12757fa3327b7e98abff272a048c03227bb21ecb51c7f1d7ec3589386611ece8e2c413ac4049f26d71e9c9226a5fb7628fdcbb47e87905863a0
   languageName: node
   linkType: hard