Redesign: Add app icon to navigation header (#40270)

app/javascript/mastodon/api_types/instance.ts

@@ -56,6 +56,7 @@ export interface ApiInstanceJSON {
     description: string;
     versions?: Record<string, string>;
   };
+  icon: { src: string; size: string }[];
   contact: {
     email: string | null;
     account: ApiAccountJSON | null;

app/javascript/mastodon/features/navigation_panel/redesign/account_card_and_menu.module.scss

@@ -16,4 +16,9 @@
     --account-handle-color: var(--color-text-secondary);
     --account-handle-size: var(--fs-2xs);
   }
+
+  & :global(.display-name) {
+    // Allow display name to wrap instead of truncating with ellipsis
+    white-space: normal;
+  }
 }

app/javascript/mastodon/features/navigation_panel/redesign/footer_links.module.scss

@@ -4,6 +4,7 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
+  gap: var(--space-xs);
   margin-top: var(--space-xl);
 
   @include mixins.type-label-sm;

app/javascript/mastodon/features/navigation_panel/redesign/header.module.scss

@@ -15,11 +15,14 @@
 }
 
 .siteNameLink {
+  --app-icon-size: 40px;
+
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  column-gap: var(--space-xs);
+  min-width: 0;
   color: inherit;
   text-decoration: none;
-  overflow-wrap: anywhere;
   outline-offset: var(--space-3xs);
 
   &:hover {
@@ -27,13 +30,30 @@
   }
 }
 
+.content {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.appIcon {
+  align-self: center;
+  width: var(--app-icon-size);
+  aspect-ratio: 1;
+}
+
 .serverName {
   @include mixins.type-heading-sm;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .poweredBy {
   @include mixins.type-label-sm;
 
+  grid-column: 2;
   color: var(--color-text-tertiary);
 
   svg {

app/javascript/mastodon/features/navigation_panel/redesign/header.tsx

@@ -5,25 +5,32 @@ import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
 import { IconLogo } from '@/mastodon/components/logo';
-import { domain } from '@/mastodon/initial_state';
+import { customAppIcon, domain, title } from '@/mastodon/initial_state';
 
 import classes from './header.module.scss';
 
 export const NavigationHeader: React.FC<{ siteName?: string }> = ({
-  siteName = domain,
+  siteName,
 }) => {
   return (
     <header className={classes.root}>
       <Link to='/' className={classes.siteNameLink}>
-        <span className={classes.serverName}>{siteName}</span>
-        <span className={classes.poweredBy}>
-          <FormattedMessage
-            id='navigation_bar.powered_by_mastodon'
-            defaultMessage='powered by {logo}Mastodon'
-            values={{
-              logo: <IconLogo role='presentation' />,
-            }}
-          />
+        {customAppIcon && (
+          <img src={customAppIcon} alt='' className={classes.appIcon} />
+        )}
+        <span className={classes.content}>
+          <span className={classes.serverName}>
+            {siteName ?? title ?? domain}
+          </span>
+          <span className={classes.poweredBy}>
+            <FormattedMessage
+              id='navigation_bar.powered_by_mastodon'
+              defaultMessage='powered by {logo}Mastodon'
+              values={{
+                logo: <IconLogo role='presentation' />,
+              }}
+            />
+          </span>
         </span>
       </Link>
     </header>

app/javascript/mastodon/initial_state.ts

@@ -43,6 +43,7 @@ interface InitialStateMeta {
   local_topic_feed_access: 'public' | 'authenticated';
   remote_topic_feed_access: 'public' | 'authenticated' | 'disabled';
   title: string;
+  custom_app_icon: string | null;
   show_trends: boolean;
   landing_page: 'about' | 'trends' | 'local_feed';
   use_blurhash: boolean;
@@ -142,6 +143,7 @@ export const remoteLiveFeedAccess = getMeta('remote_live_feed_access');
 export const localTopicFeedAccess = getMeta('local_topic_feed_access');
 export const remoteTopicFeedAccess = getMeta('remote_topic_feed_access');
 export const title = getMeta('title');
+export const customAppIcon = getMeta('custom_app_icon');
 export const landingPage = getMeta('landing_page');
 export const useBlurhash = getMeta('use_blurhash');
 export const usePendingItems = getMeta('use_pending_items');

app/serializers/initial_state_serializer.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 class InitialStateSerializer < ActiveModel::Serializer
+  include InstanceHelper
   include RoutingHelper
 
   attributes :meta, :compose, :accounts,
@@ -124,6 +125,7 @@ class InitialStateSerializer < ActiveModel::Serializer
       status_page_url: Setting.status_page_url,
       streaming_api_base_url: Rails.configuration.x.streaming_api_base_url,
       title: instance_presenter.title,
+      custom_app_icon: app_icon_path(120),
       landing_page: Setting.landing_page,
       trends_enabled: Setting.trends,
       version: instance_presenter.version,