From d9a5fe4ea02700d9316943fe6616db30a40dd89b Mon Sep 17 00:00:00 2001 From: diondiondion Date: Tue, 25 Aug 2026 12:52:11 +0000 Subject: [PATCH] Redesign: Add app icon to navigation header (#40270) --- app/javascript/mastodon/api_types/instance.ts | 1 + .../account_card_and_menu.module.scss | 5 ++++ .../redesign/footer_links.module.scss | 1 + .../redesign/header.module.scss | 24 +++++++++++++-- .../navigation_panel/redesign/header.tsx | 29 ++++++++++++------- app/javascript/mastodon/initial_state.ts | 2 ++ app/serializers/initial_state_serializer.rb | 2 ++ 7 files changed, 51 insertions(+), 13 deletions(-) diff --git a/app/javascript/mastodon/api_types/instance.ts b/app/javascript/mastodon/api_types/instance.ts index 361dade4c72..46bdce3f41c 100644 --- a/app/javascript/mastodon/api_types/instance.ts +++ b/app/javascript/mastodon/api_types/instance.ts @@ -56,6 +56,7 @@ export interface ApiInstanceJSON { description: string; versions?: Record; }; + icon: { src: string; size: string }[]; contact: { email: string | null; account: ApiAccountJSON | null; diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/account_card_and_menu.module.scss b/app/javascript/mastodon/features/navigation_panel/redesign/account_card_and_menu.module.scss index 4209dc218ef..20cbc147a37 100644 --- a/app/javascript/mastodon/features/navigation_panel/redesign/account_card_and_menu.module.scss +++ b/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; + } } diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/footer_links.module.scss b/app/javascript/mastodon/features/navigation_panel/redesign/footer_links.module.scss index 6aa093671dd..016a048a2c3 100644 --- a/app/javascript/mastodon/features/navigation_panel/redesign/footer_links.module.scss +++ b/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; diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/header.module.scss b/app/javascript/mastodon/features/navigation_panel/redesign/header.module.scss index 395492502c4..be5a158657a 100644 --- a/app/javascript/mastodon/features/navigation_panel/redesign/header.module.scss +++ b/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 { diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/header.tsx b/app/javascript/mastodon/features/navigation_panel/redesign/header.tsx index 5c1b2e51f5b..9176aa9ca77 100644 --- a/app/javascript/mastodon/features/navigation_panel/redesign/header.tsx +++ b/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 (
- {siteName} - - , - }} - /> + {customAppIcon && ( + + )} + + + {siteName ?? title ?? domain} + + + , + }} + /> +
diff --git a/app/javascript/mastodon/initial_state.ts b/app/javascript/mastodon/initial_state.ts index d452ad88614..1da918c8480 100644 --- a/app/javascript/mastodon/initial_state.ts +++ b/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'); diff --git a/app/serializers/initial_state_serializer.rb b/app/serializers/initial_state_serializer.rb index a8e4b1d7f79..03468f23dfc 100644 --- a/app/serializers/initial_state_serializer.rb +++ b/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,