Set messages font size

src/components/sidebarLeft/tabs/generalSettings.ts

@@ -5,11 +5,15 @@ import { clamp } from "../../../helpers/number";
 import Button from "../../button";
 import CheckboxField from "../../checkbox";
 import RadioField from "../../radioField";
+import appStateManager from "../../../lib/appManagers/appStateManager";
+import rootScope from "../../../lib/rootScope";
 
 export class RangeSettingSelector {
   public container: HTMLDivElement;
   private range: RangeSelector;
 
+  public onChange: (value: number) => void;
+
   constructor(name: string, step: number, initialValue: number, minValue: number, maxValue: number) {
     const BASE_CLASS = 'range-setting-selector';
     this.container = document.createElement('div');
@@ -32,6 +36,10 @@ export class RangeSettingSelector {
     this.range.setListeners();
     this.range.setHandlers({
       onScrub: value => {
+        if(this.onChange) {
+          this.onChange(value);
+        }
+
         //console.log('font size scrub:', value);
         valueDiv.innerText = '' + value;
       }
@@ -73,7 +81,10 @@ export default class AppGeneralSettingsTab extends SliderSuperTab {
     {
       const container = generateSection('Settings');
       
-      const range = new RangeSettingSelector('Message Text Size', 1, 16, 12, 20);
+      const range = new RangeSettingSelector('Message Text Size', 1, rootScope.settings.messagesTextSize, 12, 20);
+      range.onChange = (value) => {
+        appStateManager.setByKey('settings.messagesTextSize', value);
+      };
 
       const chatBackgroundButton = Button('btn-primary btn-transparent', {icon: 'photo', text: 'Chat Background'});
 

src/lib/appManagers/appImManager.ts

@@ -145,6 +145,13 @@ export class AppImManager {
 
       location.hash = '';
     });
+
+    this.setSettings();
+    rootScope.on('settings_updated', () => this.setSettings());
+  }
+
+  private setSettings() {
+    document.documentElement.style.setProperty('--messages-text-size', rootScope.settings.messagesTextSize + 'px');
   }
 
   private chatsSelectTab(tab: HTMLElement) {
@@ -199,11 +206,11 @@ export class AppImManager {
         return;
       } else if(e.code === 'ArrowUp') {
         if(!chat.input.editMsgId) {
-          const history = appMessagesManager.getHistoryStorage(chat.peerId);
+          const history = appMessagesManager.getHistoryStorage(chat.peerId, chat.threadId);
           if(history.history.length) {
             let goodMid: number;
             for(const mid of history.history) {
-              const message = appMessagesManager.getMessageByPeer(chat.peerId, mid);
+              const message = chat.getMessage(mid);
               const good = this.myId === chat.peerId ? message.fromId === this.myId : message.pFlags.out;
 
               if(good) {

src/lib/appManagers/appStateManager.ts

@@ -15,7 +15,7 @@ import { copy, setDeepProperty, isObject, validateInitObject } from '../../helpe
 const REFRESH_EVERY = 24 * 60 * 60 * 1000; // 1 day
 const STATE_VERSION = App.version;
 
-type State = Partial<{
+export type State = Partial<{
   dialogs: Dialog[],
   allDialogsLoaded: DialogsStorage['allDialogsLoaded'],
   chats: {[peerId: string]: ReturnType<AppChatsManager['getChat']>},
@@ -38,6 +38,7 @@ type State = Partial<{
   authState: AuthState,
   hiddenPinnedMessages: {[peerId: string]: number},
   settings: {
+    messagesTextSize: number,
     sendShortcut: 'enter' | 'ctrlEnter',
     animationsEnabled: boolean,
     autoDownload: {
@@ -78,6 +79,7 @@ const STATE_INIT: State = {
   },
   hiddenPinnedMessages: {},
   settings: {
+    messagesTextSize: 16,
     sendShortcut: 'enter',
     animationsEnabled: true,
     autoDownload: {
@@ -154,6 +156,9 @@ export class AppStateManager extends EventListenerBase<{
         this.state = state;
         this.state.version = STATE_VERSION;
 
+        // ! probably there is better place for it
+        rootScope.settings = this.state.settings;
+
         this.log('state res', state);
         
         //return resolve();
@@ -206,6 +211,7 @@ export class AppStateManager extends EventListenerBase<{
 
   public setByKey(key: string, value: any) {
     setDeepProperty(this.state, key, value);
+    rootScope.broadcast('settings_updated', {key, value});
   }
 
   public pushToState<T extends keyof State>(key: T, value: State[T]) {

src/lib/rootScope.ts

@@ -6,6 +6,7 @@ import type { MyDialogFilter } from "./storages/filters";
 import type { ConnectionStatusChange } from "../types";
 import type { UserTyping } from "./appManagers/appChatsManager";
 import { DEBUG, MOUNT_CLASS_TO, UserAuth } from "./mtproto/mtproto_config";
+import { State } from "./appManagers/appStateManager";
 
 type BroadcastEvents = {
   'user_update': number,
@@ -72,7 +73,8 @@ type BroadcastEvents = {
 
   'apiUpdate': Update,
   'download_progress': any,
-  'connection_status_change': ConnectionStatusChange
+  'connection_status_change': ConnectionStatusChange,
+  'settings_updated': {key: string, value: any},
   //'draft_updated': any,
 };
 
@@ -83,6 +85,7 @@ class RootScope {
     isIDLE: false
   };
   public connectionStatus: {[name: string]: ConnectionStatusChange} = {};
+  public settings: State['settings'];
 
   constructor() {
     this.on('user_auth', (e) => {

src/pages/pageIm.ts

@@ -60,17 +60,6 @@ let onFirstMount = () => {
         }, 'image/jpeg', 1);
       };
     }); */
-  
-    /* toggleEmoticons.onclick = (e) => {
-      if(!emoticonsDropdown) {
-        emoticonsDropdown = initEmoticonsDropdown(pageEl, appImManager, 
-          appMessagesManager, messageInput, toggleEmoticons);
-      } else {
-        emoticonsDropdown.classList.toggle('active');
-      }
-  
-      toggleEmoticons.classList.toggle('active');
-    }; */
   //});
 
   return promise;

src/scss/partials/_chatBubble.scss

@@ -755,6 +755,7 @@ $bubble-margin: .25rem;
     .name {
       letter-spacing: -.3px;
       display: block;
+      font-size: calc(1rem - 1px);
       
       html.no-touch &:hover {
         text-decoration: underline;
@@ -767,7 +768,7 @@ $bubble-margin: .25rem;
       line-height: 1.2;
       letter-spacing: -.3px;
       margin-top: 2px;
-      font-size: .965rem;
+      font-size: var(--messages-secondary-text-size);
     }
 
     .quote {
@@ -780,7 +781,7 @@ $bubble-margin: .25rem;
   }
   
   .web, .reply {
-    font-size: .95rem;
+    font-size: var(--messages-secondary-text-size);
     //transition: anim(background-color);
     
     /* &:hover {
@@ -873,14 +874,14 @@ $bubble-margin: .25rem;
   }
   
   .message {
-    font-size: 16px;
+    font-size: var(--messages-text-size);
     //padding: 0 9px .2675rem 9px;
     padding: 0 9px 6px 9px;
     /* overflow: hidden;
     text-overflow: ellipsis; */
     max-width: 100%;
     color: #000;
-    line-height: 21px;
+    line-height: 1.3125; // 21 / 16
     word-break: break-word;
     white-space: pre-wrap; // * fix spaces on line begin
     position: relative;
@@ -894,10 +895,6 @@ $bubble-margin: .25rem;
       //padding-top: .2675rem;
       padding-top: 6px;
     }
-
-    .emoji {
-      font-size: 1.2rem;
-    }
   }
 
   .audio {

src/scss/partials/_document.scss

@@ -94,12 +94,13 @@
     white-space: nowrap;
     font-weight: 500;
     line-height: 1.3;
+    font-size: 1rem;
   }
   
   &-size {
     white-space: nowrap;
     color: $color-gray;
-    font-size: 14px;
+    font-size: .875rem;
     //padding-right: 32px;
     line-height: 1.3;
   }

src/scss/partials/_leftSidebar.scss

@@ -875,11 +875,6 @@
     .checkbox-field {
       padding: 0 .875rem;
     }
-
-    .radio-field {
-      &-main {
-      }
-    }
   }
 
   &-h2 {

src/scss/style.scss

@@ -91,6 +91,8 @@ $chat-padding-handhelds: .5rem;
   --message-beside-button-margin: 2.875rem;
   --message-time-background: rgba(0, 0, 0, .35);
   --messages-container-width: #{$messages-container-width};
+  --messages-text-size: 16px;
+  --messages-secondary-text-size: calc(var(--messages-text-size) - 1px);
   --esg-sticker-size: 80px;
 
   @include respond-to(handhelds) {