Composer: Add silent post button and hide them on text (#5749)

Author: zubiden

src/api/gramjs/methods/chats.ts

@@ -735,27 +735,26 @@ async function getFullChannelInfo(
   };
 }
 
-export function updateChatMutedState({
-  chat, isMuted, mutedUntil = 0,
+export function updateChatNotifySettings({
+  chat, settings,
 }: {
-  chat: ApiChat; isMuted?: boolean; mutedUntil?: number;
+  chat: ApiChat; settings: Partial<ApiPeerNotifySettings>;
 }) {
-  if (isMuted && !mutedUntil) {
-    mutedUntil = MAX_INT_32;
-  }
   invokeRequest(new GramJs.account.UpdateNotifySettings({
     peer: new GramJs.InputNotifyPeer({
       peer: buildInputPeer(chat.id, chat.accessHash),
     }),
-    settings: new GramJs.InputPeerNotifySettings({ muteUntil: mutedUntil }),
+    settings: new GramJs.InputPeerNotifySettings({
+      muteUntil: settings.mutedUntil,
+      showPreviews: settings.shouldShowPreviews,
+      silent: settings.isSilentPosting,
+    }),
   }));
 
   sendApiUpdate({
     '@type': 'updateChatNotifySettings',
     chatId: chat.id,
-    settings: {
-      mutedUntil,
-    },
+    settings,
   });
 
   void requestChatUpdate({

src/assets/localization/fallback.strings

@@ -1271,6 +1271,18 @@
 "AriaOpenBotMenu" = "Open bot menu";
 "AriaOpenSymbolMenu" = "Choose emoji, sticker or GIF";
 "AriaComposerOpenScheduled" = "Open scheduled messages";
+"AriaComposerBotKeyboard" = "Show bot keyboard";
+"AriaComposerSilentPostingEnable" = "Enable silent notifications.";
+"AriaComposerSilentPostingDisable" = "Disable silent notifications.";
+"ComposerSilentPostingEnabledTootlip" = "Subscribers will receive a silent notification.";
+"ComposerSilentPostingDisabledTootlip" = "Subscribers will be notified when you post.";
+"ComposerPlaceholder" = "Message";
+"ComposerPlaceholderBroadcast" = "Broadcast";
+"ComposerPlaceholderBroadcastSilent" = "Silent Broadcast";
+"ComposerPlaceholderTopic" = "Message in {topic}";
+"ComposerPlaceholderTopicGeneral" = "Message in General";
+"ComposerStoryPlaceholderLocked" = "Replies restricted";
+"ComposerPlaceholderNoText" = "Text not allowed";
 "AriaComposerCancelVoice" = "Cancel voice recording";
 "PreviewForwardedMessage_one" = "{count} forwarded message";
 "PreviewForwardedMessage_other" = "{count} forwarded messages";

src/components/common/Composer.scss

@@ -292,6 +292,24 @@
       color: #fff;
     }
   }
+
+  .composer-action-buttons-container {
+    width: auto;
+    position: relative;
+
+    + .AttachMenu {
+      margin-left: var(--action-button-compact-fix);
+    }
+  }
+
+  .composer-action-buttons {
+    display: flex;
+    top: 0;
+    right: 0;
+    left: auto;
+    width: auto;
+    height: auto;
+  }
 }
 
 .mobile-symbol-menu-button {
@@ -384,25 +402,32 @@
 }
 
 .message-input-wrapper {
+  --action-button-size: var(--base-height, 3.5rem);
+  --action-button-compact-fix: -1rem;
   display: flex;
 
+  @media (max-width: 600px) {
+    --action-button-size: 2.875rem;
+    --action-button-compact-fix: -0.6875rem;
+  }
+
   .input-scroller {
-    margin-right: 0.5rem;
-    padding-right: 0.25rem;
+    --_scroller-right-gap: calc((var(--action-button-size) + var(--action-button-compact-fix) - 0.125rem));
+    margin-right: calc(-1 * var(--_scroller-right-gap));
+    padding-right: var(--_scroller-right-gap);
   }
 
   > .Spinner {
     align-self: center;
     --spinner-size: 1.5rem;
-    margin-right: -0.5rem;
+    margin-right: 0.5rem;
   }
 
-  > .AttachMenu > .Button,
-  > .Button {
+  .composer-action-button {
     flex-shrink: 0;
     background: none !important;
-    width: var(--base-height, 3.5rem);
-    height: var(--base-height, 3.5rem);
+    width: var(--action-button-size);
+    height: var(--action-button-size);
     margin: 0;
     padding: 0;
     align-self: flex-end;
@@ -411,17 +436,8 @@
       color: var(--color-composer-button);
     }
 
-    + .Button, + .AttachMenu {
-      margin-left: -1rem;
-    }
-
-    @media (max-width: 600px) {
-      width: 2.875rem;
-      height: 2.875rem;
-
-      + .Button, + .AttachMenu {
-        margin-left: -0.6875rem;
-      }
+    + .composer-action-button {
+      margin-left: var(--action-button-compact-fix);
     }
 
     &.bot-menu {