Added possibility to join public channels/chats

src/index.hbs

@@ -476,7 +476,8 @@
               </div>
             </div>
           </div>
-          <div class="btn-icon rp chat-mute-button" style="display: none;"></div>
+          <button class="btn-primary rp chat-join hide">SUBSCRIBE</button>
+          <div class="btn-icon rp chat-mute-button hide"></div>
           <div class="btn-icon rp tgico-search chat-search-button"></div>
           <div class="btn-icon btn-menu-toggle rp tgico-more chat-more-button">
             <div class="btn-menu bottom-left">

src/lib/appManagers/appChatsManager.ts

@@ -6,7 +6,7 @@ import apiUpdatesManager from "./apiUpdatesManager";
 import appProfileManager from "./appProfileManager";
 import searchIndexManager from "../searchIndexManager";
 
-type Channel = {
+export type Channel = {
   _: 'channel',
   flags: number,
   pFlags: Partial<{
@@ -37,8 +37,28 @@ type Channel = {
   participants_count: number
 };
 
+export type Chat = {
+  _: 'chat',
+  flags: number,
+  pFlags: Partial<{
+    creator: true,
+    kicked: true,
+    left: true,
+    deactivated: true
+  }>,
+  id: number,
+  title: string,
+  photo: any,
+  participants_count: number,
+  date: number,
+  version: number,
+  migrated_to?: any,
+  admin_rights?: any,
+  default_banned_rights?: any
+};
+
 export class AppChatsManager {
-  public chats: {[id: number]: Channel | any} = {};
+  public chats: {[id: number]: Channel | Chat | any} = {};
   public usernames: any = {};
   public channelAccess: any = {};
   public megagroups: any = {};
@@ -49,10 +69,11 @@ export class AppChatsManager {
   constructor() {
     $rootScope.$on('apiUpdate', (e: CustomEvent) => {
       // console.log('on apiUpdate', update)
-      let update = e.detail;
+      const update = e.detail;
       switch(update._) {
         case 'updateChannel':
-          var channelID = update.channel_id;
+          const channelID = update.channel_id;
+          console.log('updateChannel:', update);
           $rootScope.$broadcast('channel_settings', {channelID: channelID});
           break;
       }
@@ -126,12 +147,12 @@ export class AppChatsManager {
 
   public getChat(id: number) {
     if(id < 0) id = -id;
-    return this.chats[id] || {id: id, deleted: true, access_hash: this.channelAccess[id]};
+    return this.chats[id] || {_: 'chatEmpty', id: id, deleted: true, access_hash: this.channelAccess[id]};
   }
 
   public hasRights(id: number, action: 'send' | 'edit_title' | 'edit_photo' | 'invite' | 'pin' | 'deleteRevoke') {
     const chat = this.getChat(id);
-    if(!chat) return false;
+    if(chat._ == 'chatEmpty') return false;
 
     if(chat._ == 'chatForbidden' ||
         chat._ == 'channelForbidden' ||
@@ -220,6 +241,7 @@ export class AppChatsManager {
   }
 
   public isChannel(id: number) {
+    if(id < 0) id = -id;
     let chat = this.chats[id];
     if(chat && (chat._ == 'channel' || chat._ == 'channelForbidden') || this.channelAccess[id]) {
       return true;
@@ -248,6 +270,7 @@ export class AppChatsManager {
       return {_: 'inputChannelEmpty'};
     }
 
+    if(id < 0) id = -id;
     return {
       _: 'inputChannel',
       channel_id: id,
@@ -455,6 +478,28 @@ export class AppChatsManager {
       return 1;
     }
   }
+
+  onChatUpdated = (chatID: number, updates: any) => {
+    apiUpdatesManager.processUpdateMessage(updates);
+    if(updates &&
+        updates.updates &&
+        updates.updates.length &&
+        this.isChannel(chatID)) {
+      appProfileManager.invalidateChannelParticipants(chatID);
+    }
+  }
+
+  public leaveChannel(id: number) {
+    return apiManager.invokeApi('channels.leaveChannel', {
+      channel: this.getChannelInput(id)
+    }).then(this.onChatUpdated.bind(this, id));
+  }
+
+  public joinChannel(id: number) {
+    return apiManager.invokeApi('channels.joinChannel', {
+      channel: this.getChannelInput(id)
+    }).then(this.onChatUpdated.bind(this, id));
+  }
 }
 
 export default new AppChatsManager();

src/lib/appManagers/appDialogsManager.ts

@@ -77,10 +77,14 @@ class DialogsContextMenu {
     this.buttons.delete.addEventListener('click', () => {
       let firstName = appPeersManager.getPeerTitle(this.selectedID, false, true);
 
-      let callback = (justClear: boolean) => {
+      let callbackFlush = (justClear: boolean) => {
         appMessagesManager.flushHistory(this.selectedID, justClear);
       };
 
+      let callbackLeave = () => {
+        appChatsManager.leaveChannel(-this.selectedID);
+      };
+
       let title: string, description: string, buttons: PopupButton[];
       switch(this.peerType) {
         case 'channel': {
@@ -89,7 +93,7 @@ class DialogsContextMenu {
           buttons = [{
             text: 'LEAVE ' + firstName,
             isDanger: true,
-            callback: () => callback(true)
+            callback: callbackLeave
           }];
 
           break;
@@ -101,7 +105,7 @@ class DialogsContextMenu {
           buttons = [{
             text: 'LEAVE ' + firstName,
             isDanger: true,
-            callback: () => callback(true)
+            callback: callbackLeave
           }];
 
           break;
@@ -113,11 +117,11 @@ class DialogsContextMenu {
           buttons = [{
             text: 'DELETE FOR ME AND ' + firstName,
             isDanger: true,
-            callback: () => callback(false)
+            callback: () => callbackFlush(false)
           }, {
             text: 'DELETE JUST FOR ME',
             isDanger: true,
-            callback: () => callback(true)
+            callback: () => callbackFlush(true)
           }];
 
           break;
@@ -129,7 +133,7 @@ class DialogsContextMenu {
           buttons = [{
             text: 'DELETE SAVED MESSAGES',
             isDanger: true,
-            callback: () => callback(false)
+            callback: () => callbackFlush(false)
           }];
 
           break;
@@ -141,7 +145,7 @@ class DialogsContextMenu {
           buttons = [{
             text: 'DELETE AND LEAVE ' + firstName,
             isDanger: true,
-            callback: () => callback(true)
+            callback: () => callbackFlush(true)
           }];
 
           break;

src/lib/appManagers/appImManager.ts

@@ -13,7 +13,7 @@ import appSidebarRight from './appSidebarRight';
 import { logger, LogLevels } from "../logger";
 import appMediaViewer from "./appMediaViewer";
 import appSidebarLeft from "./appSidebarLeft";
-import appChatsManager from "./appChatsManager";
+import appChatsManager, { Channel, Chat } from "./appChatsManager";
 import { wrapDocument, wrapPhoto, wrapVideo, wrapSticker, wrapReply, wrapAlbum, wrapPoll, formatDate } from '../../components/wrappers';
 import ProgressivePreloader from '../../components/preloader';
 import { openBtnMenu, formatPhoneNumber, positionMenu, ripple, parseMenuButtonsTo, horizontalMenu, attachContextMenuListener } from '../../components/misc';
@@ -461,6 +461,7 @@ class ChatAudio {
 
 export class AppImManager {
   public columnEl = document.getElementById('column-center') as HTMLDivElement;
+  public btnJoin = this.columnEl.querySelector('.chat-join') as HTMLButtonElement;
   public btnMute = this.columnEl.querySelector('.chat-mute-button') as HTMLButtonElement;
   public avatarEl = document.getElementById('im-avatar') as AvatarElement;
   public titleEl = document.getElementById('im-title') as HTMLDivElement;
@@ -625,6 +626,15 @@ export class AppImManager {
         this.deleteMessagesByIDs(Object.keys(this.bubbles).map(m => +m));
       }
     });
+
+    $rootScope.$on('chat_update', (e: CustomEvent) => {
+      const peerID: number = e.detail;
+      if(this.peerID == -peerID) {
+        const chat = appChatsManager.getChat(peerID) as Channel | Chat;
+        
+        this.btnJoin.classList.toggle('hide', !chat?.pFlags?.left);
+      }
+    });
     
     // Calls when message successfully sent and we have an ID
     $rootScope.$on('message_sent', (e: CustomEvent) => {
@@ -959,6 +969,15 @@ export class AppImManager {
       cancelEvent(e);
       this.mutePeer(this.peerID);
     });
+
+    this.btnJoin.addEventListener('click', (e) => {
+      cancelEvent(e);
+
+      this.btnJoin.setAttribute('disabled', 'true');
+      appChatsManager.joinChannel(-this.peerID).finally(() => {
+        this.btnJoin.removeAttribute('disabled');
+      });
+    });
     
     this.menuButtons.mute.addEventListener('click', (e) => {
       this.mutePeer(this.peerID);
@@ -1042,6 +1061,10 @@ export class AppImManager {
     });
 
     this.unreadedObserver = new IntersectionObserver((entries) => {
+      if(this.offline) {
+        return;
+      }
+
       let readed: number[] = [];
     
       entries.forEach(entry => {
@@ -1118,7 +1141,7 @@ export class AppImManager {
     }, {once: true});
     newPinned.append(close);
 
-    this.topbar.insertBefore(newPinned, this.btnMute);
+    this.topbar.insertBefore(newPinned, this.btnJoin);
     this.topbar.classList.add('is-pinned-shown');
 
     if(this.pinnedMessageContainer) {
@@ -1588,6 +1611,7 @@ export class AppImManager {
 
     this.avatarEl.setAttribute('peer', '' + this.peerID);
 
+    const isAnyGroup = appPeersManager.isAnyGroup(peerID);
     const isChannel = appPeersManager.isChannel(peerID);
     const hasRights = isChannel && appChatsManager.hasRights(-peerID, 'send');
     this.chatInner.classList.toggle('has-rights', hasRights);
@@ -1597,10 +1621,12 @@ export class AppImManager {
     this.topbar.classList.remove('is-pinned-shown');
     this.topbar.style.display = '';
 
-    this.chatInner.classList.toggle('is-chat', appPeersManager.isAnyGroup(peerID) || peerID == this.myID);
+    this.chatInner.classList.toggle('is-chat', isAnyGroup || peerID == this.myID);
     this.chatInner.classList.toggle('is-channel', isChannel);
 
-    this.btnMute.style.display = appPeersManager.isBroadcast(peerID) ? '' : 'none';
+    this.btnMute.classList.toggle('hide', !appPeersManager.isBroadcast(peerID));
+    this.btnJoin.classList.toggle('hide', !appChatsManager.getChat(-this.peerID)?.pFlags?.left);
+    
     this.menuButtons.mute.style.display = this.myID == this.peerID ? 'none' : '';
 
     const pinned = appMessagesManager.getPinnedMessage(peerID);

src/lib/appManagers/appMessagesManager.ts

@@ -2500,7 +2500,7 @@ export class AppMessagesManager {
         }
 
         // @ts-ignore
-        str = langPack[_] + suffix;
+        str = (langPack[_] || action._) + suffix;
       }
 
       //this.log('message action:', action);

src/lib/utils.js

@@ -145,9 +145,9 @@ export function getRichElementValue (node, lines, line, selNode, selOffset) {
 
 export const $rootScope = {
   $broadcast: (name/* : string */, detail/*? : any */) => {
-    /* if(name != 'user_update') {
+    if(name != 'user_update') {
-      console.log(dT(), 'Broadcasting ' + name + ' event, with args:', detail);
+      console.debug(dT(), 'Broadcasting ' + name + ' event, with args:', detail);
-    } */
+    }
 
     let myCustomEvent = new CustomEvent(name, {detail});
     document.dispatchEvent(myCustomEvent);

src/materialize.css

@@ -1,554 +0,0 @@
-/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
-/* Document
-   ========================================================================== */
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in
- *    IE on Windows Phone and in iOS.
- */
-html {
-  line-height: 1.15;
-  /* 1 */
-  -ms-text-size-adjust: 100%;
-  /* 2 */
-  -webkit-text-size-adjust: 100%;
-  /* 2 */
-}
-
-/* Sections
-   ========================================================================== */
-/**
- * Remove the margin in all browsers (opinionated).
- */
-body {
-  margin: 0;
-}
-
-/**
- * Add the correct display in IE 9-.
- */
-article,
-aside,
-footer,
-header,
-nav,
-section {
-  display: block;
-}
-
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-/* Grouping content
-   ========================================================================== */
-/**
- * Add the correct display in IE 9-.
- * 1. Add the correct display in IE.
- */
-figcaption,
-figure,
-main {
-  /* 1 */
-  display: block;
-}
-
-/**
- * Add the correct margin in IE 8.
- */
-figure {
-  margin: 1em 40px;
-}
-
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-hr {
-  -webkit-box-sizing: content-box;
-          box-sizing: content-box;
-  /* 1 */
-  height: 0;
-  /* 1 */
-  overflow: visible;
-  /* 2 */
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-pre {
-  font-family: monospace, monospace;
-  /* 1 */
-  font-size: 1em;
-  /* 2 */
-}
-
-/* Text-level semantics
-   ========================================================================== */
-/**
- * 1. Remove the gray background on active links in IE 10.
- * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
- */
-a {
-  background-color: transparent;
-  /* 1 */
-  -webkit-text-decoration-skip: objects;
-  /* 2 */
-}
-
-/**
- * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
-abbr[title] {
-  border-bottom: none;
-  /* 1 */
-  text-decoration: underline;
-  /* 2 */
-  -webkit-text-decoration: underline dotted;
-          text-decoration: underline dotted;
-  /* 2 */
-}
-
-/**
- * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
- */
-b,
-strong {
-  font-weight: inherit;
-}
-
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-b,
-strong {
-  font-weight: bolder;
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-code,
-kbd,
-samp {
-  font-family: monospace, monospace;
-  /* 1 */
-  font-size: 1em;
-  /* 2 */
-}
-
-/**
- * Add the correct font style in Android 4.3-.
- */
-dfn {
-  font-style: italic;
-}
-
-/**
- * Add the correct background and color in IE 9-.
- */
-mark {
-  background-color: #ff0;
-  color: #000;
-}
-
-/**
- * Add the correct font size in all browsers.
- */
-small {
-  font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/* Embedded content
-   ========================================================================== */
-/**
- * Add the correct display in IE 9-.
- */
-audio,
-video {
-  display: inline-block;
-}
-
-/**
- * Add the correct display in iOS 4-7.
- */
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-
-/**
- * Remove the border on images inside links in IE 10-.
- */
-img {
-  border-style: none;
-}
-
-/**
- * Hide the overflow in IE.
- */
-svg:not(:root) {
-  overflow: hidden;
-}
-
-/* Forms
-   ========================================================================== */
-/**
- * 1. Change the font styles in all browsers (opinionated).
- * 2. Remove the margin in Firefox and Safari.
- */
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: sans-serif;
-  /* 1 */
-  font-size: 100%;
-  /* 1 */
-  line-height: 1.15;
-  /* 1 */
-  margin: 0;
-  /* 2 */
-}
-
-/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-button,
-input {
-  /* 1 */
-  overflow: visible;
-}
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-button,
-select {
-  /* 1 */
-  text-transform: none;
-}
-
-/**
- * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
- *    controls in Android 4.
- * 2. Correct the inability to style clickable types in iOS and Safari.
- */
-button,
-html [type="button"],
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button;
-  /* 2 */
-}
-
-/**
- * Remove the inner border and padding in Firefox.
- */
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-/**
- * Correct the padding in Firefox.
- */
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
-}
-
-/**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
- */
-legend {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  /* 1 */
-  color: inherit;
-  /* 2 */
-  display: table;
-  /* 1 */
-  max-width: 100%;
-  /* 1 */
-  padding: 0;
-  /* 3 */
-  white-space: normal;
-  /* 1 */
-}
-
-/**
- * 1. Add the correct display in IE 9-.
- * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-progress {
-  display: inline-block;
-  /* 1 */
-  vertical-align: baseline;
-  /* 2 */
-}
-
-/**
- * Remove the default vertical scrollbar in IE.
- */
-textarea {
-  overflow: auto;
-}
-
-/**
- * 1. Add the correct box sizing in IE 10-.
- * 2. Remove the padding in IE 10-.
- */
-[type="checkbox"],
-[type="radio"] {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  /* 1 */
-  padding: 0;
-  /* 2 */
-}
-
-/**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-[type="search"] {
-  -webkit-appearance: textfield;
-  /* 1 */
-  outline-offset: -2px;
-  /* 2 */
-}
-
-/**
- * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
- */
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  /* 1 */
-  font: inherit;
-  /* 2 */
-}
-
-/* Interactive
-   ========================================================================== */
-/*
- * Add the correct display in IE 9-.
- * 1. Add the correct display in Edge, IE, and Firefox.
- */
-details,
-menu {
-  display: block;
-}
-
-/*
- * Add the correct display in all browsers.
- */
-summary {
-  display: list-item;
-}
-
-/* Scripting
-   ========================================================================== */
-/**
- * Add the correct display in IE 9-.
- */
-canvas {
-  display: inline-block;
-}
-
-/**
- * Add the correct display in IE.
- */
-template {
-  display: none;
-}
-
-/* Hidden
-   ========================================================================== */
-/**
- * Add the correct display in IE 10-.
- */
-[hidden] {
-  display: none;
-}
-
-html {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-}
-
-*, *:before, *:after {
-  -webkit-box-sizing: inherit;
-          box-sizing: inherit;
-}
-
-ul:not(.browser-default) {
-  padding-left: 0;
-  list-style-type: none;
-}
-
-ul:not(.browser-default) > li {
-  list-style-type: none;
-}
-
-a {
-  text-decoration: none;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.valign-wrapper {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-}
-
-.z-depth-0 {
-  -webkit-box-shadow: none !important;
-          box-shadow: none !important;
-}
-
-/* 2dp elevation modified*/
-.z-depth-1 {
-  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
-          box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
-}
-
-.z-depth-1-half {
-  -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
-          box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
-}
-
-/* 6dp elevation modified*/
-.z-depth-2 {
-  -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
-          box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
-}
-
-/* 12dp elevation modified*/
-.z-depth-3 {
-  -webkit-box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
-          box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
-}
-
-/* 16dp elevation */
-.z-depth-4 {
-  -webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2);
-          box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2);
-}
-
-/* 24dp elevation */
-.z-depth-5 {
-  -webkit-box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
-          box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
-}
-
-/*******************
-Utility Classes
-*******************/
-.hide {
-  display: none !important;
-}
-
-.no-select {
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-}
-
-.center-align {
-  text-align: center;
-}
-
-a {
-  text-decoration: none;
-}
-
-html {
-  line-height: 1.5;
-  font-weight: normal;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  line-height: 1.3;
-}
-
-em {
-  font-style: italic;
-}
-
-strong {
-  font-weight: 500;
-}
-
-small {
-  font-size: 75%;
-}
-/*# sourceMappingURL=materialize.css.map */

src/scss/partials/_chat.scss

@@ -61,8 +61,6 @@ $time-background: rgba(0, 0, 0, .35);
 	} */
 
 	.chat-more-button {
-		margin-left: 8px;
-
 		.btn-menu {
 			top: calc(100% + 7px);
 
@@ -79,6 +77,19 @@ $time-background: rgba(0, 0, 0, .35);
 	.chat-info {
 		flex-grow: 1;
 	}
+
+	.chat-join {
+		width: auto;
+		padding: 0 22.185px;
+		height: 36px;
+		font-weight: 400;
+		font-size: 0.875rem;
+		margin-right: .5rem;
+
+		&:not(.hide) + .chat-mute-button {
+			display: none;
+		}
+	}
 	
 	.content {
 		flex: 1;

src/scss/tgico.css

@@ -1,476 +0,0 @@
-@charset "UTF-8";
-@font-face {
-  font-family: "tgico";
-  src: url("assets/fonts/tgico.eot?owpifk");
-  src: url("assets/fonts/tgico.eot?owpifk#iefix") format("embedded-opentype"), url("assets/fonts/tgico.ttf?owpifk") format("truetype"), url("assets/fonts/tgico.woff?owpifk") format("woff"), url("assets/fonts/tgico.svg?owpifk#tgico") format("svg");
-  font-weight: normal;
-  font-style: normal;
-  font-display: block;
-}
-
-/* [class^="tgico-"]:before,
-[class^="tgico-"]:after, */
-[class^="tgico-"],
-.tgico:before,
-.tgico:after,
-[class*=" tgico-"]:before,
-[class*=" tgico-"]:after {
-  font-family: "tgico" !important;
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.tgico-check:before {
-  content: "";
-}
-
-.tgico-checks:before {
-  content: "";
-}
-
-.tgico-activesessions:before {
-  content: "\e902";
-}
-
-.tgico-add:before {
-  content: "\e903";
-}
-
-.tgico-addmember_filled:before {
-  content: "\e904";
-}
-
-.tgico-adduser:before {
-  content: "\e905";
-}
-
-.tgico-admin:before {
-  content: "\e906";
-}
-
-.tgico-animals:before {
-  content: "\e907";
-}
-
-.tgico-archive:before {
-  content: "";
-}
-
-.tgico-attach:before {
-  content: "\e909";
-}
-
-.tgico-avatar_archivedchats:before {
-  content: "\e90a";
-}
-
-.tgico-avatar_deletedaccount:before {
-  content: "\e90b";
-}
-
-.tgico-avatar_savedmessages:before {
-  content: "\e90c";
-}
-
-.tgico-back:before {
-  content: "";
-}
-
-.tgico-bots:before {
-  content: "\e90e";
-}
-
-.tgico-calendar:before {
-  content: "\e90f";
-}
-
-.tgico-camera:before {
-  content: "\e910";
-}
-
-.tgico-cameraadd:before {
-  content: "\e911";
-}
-
-.tgico-car:before {
-  content: "\e912";
-}
-
-.tgico-channel:before {
-  content: "\e913";
-}
-
-.tgico-channelviews:before {
-  content: "\e914";
-}
-
-.tgico-chatsplaceholder:before {
-  content: "\e915";
-}
-
-.tgico-check1:before {
-  content: "\e916";
-}
-
-.tgico-checkbox:before {
-  content: "\e917";
-}
-
-.tgico-checkboxblock:before {
-  content: "\e918";
-}
-
-.tgico-checkboxempty:before {
-  content: "\e919";
-}
-
-.tgico-checkboxon:before {
-  content: "\e91a";
-}
-
-.tgico-close:before {
-  content: "";
-}
-
-.tgico-clouddownload:before {
-  content: "\e91c";
-}
-
-.tgico-colorize:before {
-  content: "\e91d";
-}
-
-.tgico-copy:before {
-  content: "\e91e";
-}
-
-.tgico-data:before {
-  content: "\e91f";
-}
-
-.tgico-delete:before {
-  content: "\e920";
-}
-
-.tgico-delete_filled:before {
-  content: "\e921";
-}
-
-.tgico-deleteleft:before {
-  content: "\e922";
-}
-
-.tgico-deleteuser:before {
-  content: "\e923";
-}
-
-.tgico-document:before {
-  content: "\e924";
-}
-
-.tgico-down:before {
-  content: "\e925";
-}
-
-.tgico-download:before {
-  content: "\e926";
-}
-
-.tgico-eats:before {
-  content: "\e927";
-}
-
-.tgico-edit:before {
-  content: "\e928";
-}
-
-.tgico-eye1:before {
-  content: "\e929";
-}
-
-.tgico-eye2:before {
-  content: "\e92a";
-}
-
-.tgico-favourites:before {
-  content: "\e92b";
-}
-
-.tgico-flag:before {
-  content: "\e92c";
-}
-
-.tgico-folder:before {
-  content: "\e92d";
-}
-
-.tgico-forward:before {
-  content: "\e92e";
-}
-
-.tgico-fullscreen:before {
-  content: "\e92f";
-}
-
-.tgico-gifs:before {
-  content: "\e930";
-}
-
-.tgico-group:before {
-  content: "\e931";
-}
-
-.tgico-help:before {
-  content: "\e932";
-}
-
-.tgico-info:before {
-  content: "\e933";
-}
-
-.tgico-info2:before {
-  content: "\e934";
-}
-
-.tgico-keyboard:before {
-  content: "";
-}
-
-.tgico-lamp:before {
-  content: "\e936";
-}
-
-.tgico-language:before {
-  content: "\e937";
-}
-
-.tgico-largepause:before {
-  content: "\e938";
-}
-
-.tgico-largeplay:before {
-  content: "";
-}
-
-.tgico-livelocation:before {
-  content: "\e93a";
-}
-
-.tgico-location:before {
-  content: "\e93b";
-}
-
-.tgico-lock:before {
-  content: "\e93c";
-}
-
-.tgico-logout:before {
-  content: "\e93d";
-}
-
-.tgico-menu:before {
-  content: "\e93e";
-}
-
-.tgico-message:before {
-  content: "\e93f";
-}
-
-.tgico-microphone:before {
-  content: "\e940";
-}
-
-.tgico-microphone2:before {
-  content: "\e941";
-}
-
-.tgico-minus:before {
-  content: "\e942";
-}
-
-.tgico-more:before {
-  content: "\e943";
-}
-
-.tgico-mute:before {
-  content: "";
-}
-
-.tgico-muted:before {
-  content: "\e945";
-}
-
-.tgico-newchannel:before {
-  content: "\e946";
-}
-
-.tgico-newchat_filled:before {
-  content: "\e947";
-}
-
-.tgico-newgroup:before {
-  content: "\e948";
-}
-
-.tgico-newprivate:before {
-  content: "\e949";
-}
-
-.tgico-next:before {
-  content: "";
-}
-
-.tgico-noncontacts:before {
-  content: "\e94b";
-}
-
-.tgico-nosound:before {
-  content: "\e94c";
-}
-
-.tgico-pause:before {
-  content: "\e94d";
-}
-
-.tgico-permissions:before {
-  content: "\e94e";
-}
-
-.tgico-phone:before {
-  content: "\e94f";
-}
-
-.tgico-photo:before {
-  content: "\e950";
-}
-
-.tgico-pin:before {
-  content: "";
-}
-
-.tgico-pinnedchat:before {
-  content: "\e952";
-}
-
-.tgico-play:before {
-  content: "\e953";
-}
-
-.tgico-poll:before {
-  content: "\e954";
-}
-
-.tgico-radiooff:before {
-  content: "\e955";
-}
-
-.tgico-radioon:before {
-  content: "\e956";
-}
-
-.tgico-readchats:before {
-  content: "";
-}
-
-.tgico-recent:before {
-  content: "\e958";
-}
-
-.tgico-reply:before {
-  content: "\e959";
-}
-
-.tgico-revote:before {
-  content: "\e95a";
-}
-
-.tgico-savedmessages:before {
-  content: "\e95b";
-}
-
-.tgico-search:before {
-  content: "\e95c";
-}
-
-.tgico-send:before {
-  content: "\e95d";
-}
-
-.tgico-send2:before {
-  content: "\e95e";
-}
-
-.tgico-sending:before {
-  content: "";
-}
-
-.tgico-sendingerror:before {
-  content: "\e960";
-}
-
-.tgico-settings:before {
-  content: "\e961";
-}
-
-.tgico-smallscreen:before {
-  content: "\e962";
-}
-
-.tgico-smile:before {
-  content: "";
-}
-
-.tgico-sport:before {
-  content: "\e964";
-}
-
-.tgico-stickers:before {
-  content: "\e965";
-}
-
-.tgico-stop:before {
-  content: "\e966";
-}
-
-.tgico-tip:before {
-  content: "\e967";
-}
-
-.tgico-unarchive:before {
-  content: "";
-}
-
-.tgico-unlock:before {
-  content: "\e969";
-}
-
-.tgico-unmute:before {
-  content: "";
-}
-
-.tgico-unpin:before {
-  content: "";
-}
-
-.tgico-unread:before {
-  content: "";
-}
-
-.tgico-up:before {
-  content: "\e96d";
-}
-
-.tgico-user:before {
-  content: "\e96e";
-}
-
-.tgico-username:before {
-  content: "\e96f";
-}
-/*# sourceMappingURL=tgico.css.map */