Action Message: Add blur background (#6691)

2026-02-22 23:43:53 +01:00 · 2026-02-22 23:43:53 +01:00 · 48b722939b
commit 48b722939b
parent 42c86e50a5
21 changed files with 91 additions and 48 deletions
--- a/src/assets/localization/fallback.strings
+++ b/src/assets/localization/fallback.strings
@ -686,6 +686,7 @@
 "SettingsPerformanceComposer" = "Message Composer Animations";
 "SettingsPerformanceContextAnimation" = "Context Menu Animation";
 "SettingsPerformanceContextBlur" = "Context Menu Blur";
+"SettingsPerformanceMessageBlur" = "Message Blur";
 "SettingsPerformanceRightColumn" = "Right Column Animation";
 "SettingsPerformanceThanos" = "Dust-effect deletion";
 "SettingsPerformanceAnimatedEmoji" = "Allow Animated Emoji";
@ -1458,7 +1459,7 @@
 "AriaMenuEnableNightMode" = "Enable night mode";
 "AriaMenuDisableNightMode" = "Disable night mode";
 "AriaSettingsEditProfilePhoto" = "Edit profile photo";
-"MenuAnimationsSwitch" = "Animations";
+"MenuUIFeaturesSwitch" = "UI Features";
 "MenuTelegramFeatures" = "Telegram Features";
 "TelegramFeaturesUsername" = "TelegramTips";
 "RemoveEffect" = "Remove effect";
--- a/src/components/left/main/LeftSideMenuItems.tsx
+++ b/src/components/left/main/LeftSideMenuItems.tsx
@ -222,7 +222,7 @@ const LeftSideMenuItems = ({
              icon="animations"
              onClick={handleAnimationLevelChange}
            >
-              <span className="menu-item-name capitalize">{lang('MenuAnimationsSwitch')}</span>
+              <span className="menu-item-name capitalize">{lang('MenuUIFeaturesSwitch')}</span>
              <Toggle value={animationLevelValue} />
            </MenuItem>
            <MenuSeparator />
--- a/src/components/left/settings/SettingsPerformance.tsx
+++ b/src/components/left/settings/SettingsPerformance.tsx
@ -61,6 +61,7 @@ const PERFORMANCE_OPTIONS: PerformanceSection[] = [
    { key: 'messageComposerAnimations', label: 'SettingsPerformanceComposer' },
    { key: 'contextMenuAnimations', label: 'SettingsPerformanceContextAnimation' },
    { key: 'contextMenuBlur', label: 'SettingsPerformanceContextBlur', disabled: !IS_BACKDROP_BLUR_SUPPORTED },
+    { key: 'messageBlur', label: 'SettingsPerformanceMessageBlur', disabled: !IS_BACKDROP_BLUR_SUPPORTED },
    { key: 'rightColumnAnimations', label: 'SettingsPerformanceRightColumn' },
    { key: 'snapEffect', label: 'SettingsPerformanceThanos' },
  ]],
--- a/src/components/middle/ContactGreeting.module.scss
+++ b/src/components/middle/ContactGreeting.module.scss
@ -1,3 +1,5 @@
+@use "../../styles/mixins";
+
 .root {
  display: flex;
  flex-direction: column;
@ -21,7 +23,7 @@

    color: #fff;

-    background: var(--action-message-bg);
+    @include mixins.action-message-bg($isModule: true);
  }

  .explainer {
@ -33,7 +35,7 @@
    color: #fff;
    text-wrap: balance;

-    background: var(--action-message-bg);
+    @include mixins.action-message-bg($isModule: true);
  }

  .title {
--- a/src/components/middle/MessageList.scss
+++ b/src/components/middle/MessageList.scss
@ -1,3 +1,5 @@
+@use "../../styles/mixins";
+
 .MessageList {
  overflow-x: hidden;
  overflow-y: scroll;
@ -186,7 +188,7 @@
    .Message,
    .ActionMessage {
      &::before {
-        background-color: var(--action-message-bg);
+        @include mixins.action-message-bg;
      }

      &.focused,
@ -228,12 +230,10 @@
    > span {
      position: relative;
      z-index: 0;
-
      border-radius: var(--border-radius-messages);
-
      color: white;

-      background-color: var(--action-message-bg);
+      @include mixins.action-message-bg;

      body.is-ios &,
      body.is-macos & {
--- a/src/components/middle/NoMessages.scss
+++ b/src/components/middle/NoMessages.scss
@ -1,3 +1,5 @@
+@use "../../styles/mixins";
+
 .NoMessages {
  display: flex;
  align-items: center;
@ -29,7 +31,7 @@

    color: #fff;

-    background: var(--action-message-bg);
+    @include mixins.action-message-bg;

    &[dir="rtl"] {
      text-align: right;
--- a/src/components/middle/RequirementToContactMessage.module.scss
+++ b/src/components/middle/RequirementToContactMessage.module.scss
@ -1,3 +1,5 @@
+@use "../../styles/mixins";
+
 .root {
  display: flex;
  align-items: center;
@ -17,13 +19,12 @@
    color: var(--color-white);
    text-transform: none;

-    background: var(--action-message-bg);
+    @include mixins.action-message-bg($isModule: true);

    transition: filter 150ms ease-in-out;

    &:not(.disabled):not(:disabled):hover {
-      background-color: var(--action-message-bg);
-      filter: brightness(1.05);
+      opacity: 0.85;
    }
  }
 }
@ -37,7 +38,7 @@
  padding: 1.0625rem 0;
  border-radius: 1.5rem;

-  background: var(--action-message-bg);
+  @include mixins.action-message-bg($isModule: true);

  &[dir="rtl"] {
    text-align: right;
--- a/src/components/middle/message/ActionMessage.module.scss
+++ b/src/components/middle/message/ActionMessage.module.scss
@ -1,3 +1,5 @@
+@use "../../../styles/mixins";
+
 .root {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
@ -28,7 +30,7 @@

  color: white;

-  background-color: var(--action-message-bg);
+  @include mixins.action-message-bg($isModule: true);
 }

 .textContent {
@ -43,7 +45,7 @@

  color: white;

-  background-color: var(--action-message-bg);
+  @include mixins.action-message-bg($isModule: true);
 }

 .hasFullContent {
@ -120,6 +122,7 @@

  .textContent {
    background-color: transparent !important;
+    backdrop-filter: none !important;
  }
 }

@ -156,7 +159,7 @@

  font-weight: var(--font-weight-semibold);

-  background-color: var(--action-message-bg);
+  @include mixins.action-message-bg($isModule: true);

  transition: opacity 0.15s;

@ -193,7 +196,7 @@

    border-radius: calc(var(--border-radius-messages) + 0.25rem);

-    background: var(--action-message-bg);
+    @include mixins.action-message-bg($isModule: true);
  }
 }

@ -298,7 +301,8 @@
  padding: 1.25rem;
  border-radius: 50%;
  font-size: 2.5rem;
-  background-color: var(--action-message-bg);
+
+  @include mixins.action-message-bg($isModule: true);
 }

 .botForumTopicTitle {
--- a/src/components/middle/message/CommentButton.scss
+++ b/src/components/middle/message/CommentButton.scss
@ -1,3 +1,5 @@
+@use "../../../styles/mixins";
+
 .CommentButton {
  --background-color: var(--color-background);
  --hover-color: var(--color-chat-hover);
@ -66,7 +68,8 @@
    color: white;

    opacity: 0;
-    background-color: var(--pattern-color);
+
+    @include mixins.action-message-bg;

    &::after {
      content: attr(data-cnt);
@ -84,16 +87,12 @@
    }

    &:hover {
-      background-color: var(--pattern-color);
-      backdrop-filter: brightness(115%);
-
-      @supports not (backdrop-filter: brightness(115%)) {
-        filter: brightness(115%);
-      }
+      opacity: 0.85;
+      background-color: var(--action-message-bg);
    }

    &.disabled {
-      background-color: var(--pattern-color);
+      background-color: var(--action-message-bg);
    }

    .Message:hover &, &.loading {
--- a/src/components/middle/message/InlineButtons.module.scss
+++ b/src/components/middle/message/InlineButtons.module.scss
@ -1,3 +1,5 @@
+@use "../../../styles/mixins";
+
 .root {
  display: flex;
  flex-direction: column;
@ -16,9 +18,9 @@
  font-weight: var(--font-weight-medium);
  line-height: 1.25;

-  background-color: var(--action-message-bg);
+  @include mixins.action-message-bg($isModule: true);

-  transition: background-color 150ms, color 150ms, backdrop-filter 150ms, filter 150ms;
+  transition: background-color 150ms, color 150ms, backdrop-filter 150ms, filter 150ms, opacity 150ms;

  &::before {
    content: '';
@ -38,12 +40,8 @@
  &:active,
  &:hover,
  &:focus {
+    opacity: 0.85;
    background-color: var(--action-message-bg) !important;
-    backdrop-filter: brightness(115%);
-
-    @supports not (backdrop-filter: brightness(115%)) {
-      filter: brightness(115%);
-    }
  }

  &:first-of-type {
--- a/src/components/middle/message/Message.scss
+++ b/src/components/middle/message/Message.scss
@ -1,4 +1,5 @@
@use "message-content";
+@use "../../../styles/mixins";

 // General styles
 .Message {
@ -752,7 +753,8 @@
    border-radius: 1.125rem;

    opacity: 0;
-    background-color: var(--action-message-bg);
+
+    @include mixins.action-message-bg;

    transition: opacity 150ms;

--- a/src/components/middle/message/MessageMeta.scss
+++ b/src/components/middle/message/MessageMeta.scss
@ -1,3 +1,5 @@
+@use "../../../styles/mixins";
+
 .MessageMeta {
  cursor: var(--custom-cursor, pointer);
  user-select: none;
@ -137,7 +139,7 @@
  }

  .Message .custom-shape & {
-    background: var(--action-message-bg);
+    @include mixins.action-message-bg;
  }

  .voice &[dir="rtl"] {
--- a/src/components/middle/message/_message-content.scss
+++ b/src/components/middle/message/_message-content.scss
@ -1,5 +1,6 @@
@use "sass:map";
@use "../../../styles/icons";
+@use "../../../styles/mixins";

@mixin subheader-styles() {
  overflow: hidden;
@ -12,7 +13,8 @@

  font-size: calc(var(--message-text-size, 1rem) - 0.125rem);

-  background-color: var(--action-message-bg);
+  @include mixins.action-message-bg;
+
  box-shadow: 0 1px 2px var(--color-default-shadow);

  @media (max-width: 600px) {
--- a/src/components/middle/message/actions/StarGiftPurchaseOffer.module.scss
+++ b/src/components/middle/message/actions/StarGiftPurchaseOffer.module.scss
@ -8,16 +8,11 @@

  &.clickable {
    cursor: var(--custom-cursor, pointer);
-    transition: background-color 150ms, backdrop-filter 150ms, filter 150ms;
+    transition: background-color 150ms, backdrop-filter 150ms, filter 150ms, opacity 150ms;

-    &:hover,
-    &:focus {
+    &:hover {
+      opacity: 0.85;
      background: var(--action-message-bg) !important;
-      backdrop-filter: brightness(115%);
-
-      @supports not (backdrop-filter: brightness(115%)) {
-        filter: brightness(115%);
-      }
    }
  }
 }
--- a/src/components/middle/message/reactions/Reactions.scss
+++ b/src/components/middle/message/reactions/Reactions.scss
@ -1,3 +1,5 @@
+@use "../../../../styles/mixins";
+
 .Reactions {
  overflow: visible;
  display: flex;
@ -12,6 +14,10 @@

  &.is-outside {
    margin-top: 0.25rem;
+
+    .message-reaction {
+      @include mixins.action-message-bg($noBackground: true);
+    }
  }

  .is-forwarded.is-inverted-media & {
--- a/src/global/cache.ts
+++ b/src/global/cache.ts
@ -353,6 +353,10 @@ function unsafeMigrateCache(cached: GlobalState, initialState: GlobalState) {
    cachedSharedSettings.performance = INITIAL_PERFORMANCE_STATE_MED;
  }

+  if (cachedSharedSettings.performance.messageBlur === undefined) {
+    cachedSharedSettings.performance.messageBlur = false;
+  }
+
  if (!cachedSharedSettings.foldersPosition) {
    cachedSharedSettings.foldersPosition = FOLDERS_POSITION_DEFAULT;
  }
--- a/src/global/initialState.ts
+++ b/src/global/initialState.ts
@ -19,6 +19,7 @@ import { IS_IOS, IS_MAC_OS } from '../util/browser/windowEnvironment';
 import { DEFAULT_APP_CONFIG } from '../limits';

 export const INITIAL_PERFORMANCE_STATE_MAX: PerformanceType = {
+  messageBlur: true,
  animatedEmoji: true,
  autoplayGifs: true,
  autoplayVideos: true,
@ -37,6 +38,7 @@ export const INITIAL_PERFORMANCE_STATE_MAX: PerformanceType = {
 };

 export const INITIAL_PERFORMANCE_STATE_MED: PerformanceType = {
+  messageBlur: false,
  animatedEmoji: true,
  autoplayGifs: true,
  autoplayVideos: true,
@ -55,6 +57,7 @@ export const INITIAL_PERFORMANCE_STATE_MED: PerformanceType = {
 };

 export const INITIAL_PERFORMANCE_STATE_MIN: PerformanceType = {
+  messageBlur: false,
  animatedEmoji: false,
  autoplayGifs: false,
  autoplayVideos: false,
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@ -256,3 +256,21 @@
    @include chat-pattern-styles($path);
  }
 }
+
+@mixin action-message-bg($isModule: false, $noBackground: false) {
+  @if not $noBackground {
+    background-color: var(--action-message-bg);
+  }
+
+  @if $isModule {
+    :global(body.with-message-blur) & {
+      backdrop-filter: blur(4px);
+    }
+  }
+
+  @else {
+    body.with-message-blur & {
+      backdrop-filter: blur(4px);
+    }
+  }
+}
--- a/src/types/index.ts
+++ b/src/types/index.ts
@ -103,9 +103,9 @@ export type AnimationLevel = 0 | 1 | 2;
 export type FoldersPosition = 'top' | 'left';
 export type PerformanceTypeKey = (
  'pageTransitions' | 'messageSendingAnimations' | 'mediaViewerAnimations'
-  | 'messageComposerAnimations' | 'contextMenuAnimations' | 'contextMenuBlur' | 'rightColumnAnimations'
-  | 'animatedEmoji' | 'loopAnimatedStickers' | 'reactionEffects' | 'stickerEffects' | 'autoplayGifs' | 'autoplayVideos'
-  | 'storyRibbonAnimations' | 'snapEffect'
+  | 'messageComposerAnimations' | 'contextMenuAnimations' | 'contextMenuBlur' | 'messageBlur'
+  | 'rightColumnAnimations' | 'animatedEmoji' | 'loopAnimatedStickers' | 'reactionEffects' | 'stickerEffects'
+  | 'autoplayGifs' | 'autoplayVideos' | 'storyRibbonAnimations' | 'snapEffect'
 );
 export type PerformanceType = Record<PerformanceTypeKey, boolean>;

--- a/src/types/language.d.ts
+++ b/src/types/language.d.ts
@ -608,6 +608,7 @@ export interface LangPair {
  'SettingsPerformanceComposer': undefined;
  'SettingsPerformanceContextAnimation': undefined;
  'SettingsPerformanceContextBlur': undefined;
+  'SettingsPerformanceMessageBlur': undefined;
  'SettingsPerformanceRightColumn': undefined;
  'SettingsPerformanceThanos': undefined;
  'SettingsPerformanceAnimatedEmoji': undefined;
@ -1243,7 +1244,7 @@ export interface LangPair {
  'AriaMenuEnableNightMode': undefined;
  'AriaMenuDisableNightMode': undefined;
  'AriaSettingsEditProfilePhoto': undefined;
-  'MenuAnimationsSwitch': undefined;
+  'MenuUIFeaturesSwitch': undefined;
  'MenuTelegramFeatures': undefined;
  'TelegramFeaturesUsername': undefined;
  'RemoveEffect': undefined;
--- a/src/util/perfomanceSettings.ts
+++ b/src/util/perfomanceSettings.ts
@ -8,6 +8,7 @@ export function applyPerformanceSettings(performanceType: PerformanceType) {
    messageComposerAnimations,
    contextMenuAnimations,
    contextMenuBlur,
+    messageBlur,
    rightColumnAnimations,
  } = performanceType;

@ -19,5 +20,6 @@ export function applyPerformanceSettings(performanceType: PerformanceType) {
  root.classList.toggle('no-message-composer-animations', !messageComposerAnimations);
  root.classList.toggle('no-context-menu-animations', !contextMenuAnimations);
  root.classList.toggle('no-menu-blur', !contextMenuBlur);
+  root.classList.toggle('with-message-blur', messageBlur);
  root.classList.toggle('no-right-column-animations', !rightColumnAnimations);
 }