Left Menu: Add Telegram Features, Report Bug and app info items

package.json

@@ -7,7 +7,7 @@
     "dev": "cross-env APP_ENV=development webpack-dev-server -d",
     "build": "webpack -p",
     "build:staging": "rm -rf dist/ && APP_ENV=staging npm run build && ./deploy/copy_to_dist.sh",
-    "build:production": "rm -rf dist/ && APP_ENV=production npm run build -- --env.noSourceMap && ./deploy/copy_to_dist.sh",
+    "build:production": "rm -rf dist/ && APP_INFO=\"Telegram WebZ alpha $(git rev-parse --short HEAD)\" APP_ENV=production npm run build -- --env.noSourceMap && ./deploy/copy_to_dist.sh",
     "deploy:contest": "./deploy/contest.sh",
     "perf:serve": "APP_ENV=perf parcel src/index-perf.html",
     "lint": "eslint . --ext .ts,.tsx",

src/components/left/main/LeftMainHeader.scss

@@ -57,6 +57,10 @@
     flex-shrink: 0;
   }
 
+  .Menu .bubble {
+    min-width: 17rem;
+  }
+
   // @optimization
   @include while-transition() {
     .Menu .bubble {

src/components/left/main/LeftMainHeader.tsx

@@ -7,6 +7,7 @@ import { GlobalActions } from '../../../global/types';
 import { LeftColumnContent, ISettings } from '../../../types';
 import { ApiChat } from '../../../api/types';
 
+import { APP_INFO, FEEDBACK_URL } from '../../../config';
 import { IS_MOBILE_SCREEN } from '../../../util/environment';
 import buildClassName from '../../../util/buildClassName';
 import { pick } from '../../../util/iteratees';
@@ -45,8 +46,9 @@ type StateProps = {
   chatsById?: Record<number, ApiChat>;
 };
 
-type DispatchProps = Pick<GlobalActions,
+type DispatchProps = Pick<GlobalActions, (
-'openChat'| 'openSupportChat' | 'setGlobalSearchDate' | 'setGlobalSearchChatId' | 'setSettingOption'>;
+  'openChat' | 'openTipsChat' | 'setGlobalSearchDate' | 'setGlobalSearchChatId' | 'setSettingOption'
+)>;
 
 const ANIMATION_LEVEL_OPTIONS = [0, 1, 2];
 
@@ -68,7 +70,7 @@ const LeftMainHeader: FC<OwnProps & StateProps & DispatchProps> = ({
   animationLevel,
   chatsById,
   openChat,
-  openSupportChat,
+  openTipsChat,
   setGlobalSearchDate,
   setSettingOption,
 }) => {
@@ -144,9 +146,11 @@ const LeftMainHeader: FC<OwnProps & StateProps & DispatchProps> = ({
 
   const lang = useLang();
 
-  const isSearchFocused = Boolean(globalSearchChatId)
+  const isSearchFocused = (
-  || content === LeftColumnContent.GlobalSearch
+    Boolean(globalSearchChatId)
-  || content === LeftColumnContent.Contacts;
+    || content === LeftColumnContent.GlobalSearch
+    || content === LeftColumnContent.Contacts
+  );
 
   const searchInputPlaceholder = content === LeftColumnContent.Contacts
     ? lang('SearchFriends')
@@ -157,6 +161,7 @@ const LeftMainHeader: FC<OwnProps & StateProps & DispatchProps> = ({
       <div id="LeftMainHeader" className="left-header">
         <DropdownMenu
           trigger={MainButton}
+          footer={APP_INFO}
         >
           <MenuItem
             icon="saved-messages"
@@ -209,9 +214,15 @@ const LeftMainHeader: FC<OwnProps & StateProps & DispatchProps> = ({
           </MenuItem>
           <MenuItem
             icon="help"
-            onClick={openSupportChat}
+            onClick={openTipsChat}
           >
-            {lang('BotHelp')}
+            Telegram Features
+          </MenuItem>
+          <MenuItem
+            icon="bug"
+            href={FEEDBACK_URL}
+          >
+            Report Bug
           </MenuItem>
         </DropdownMenu>
         <SearchInput
@@ -273,7 +284,7 @@ export default memo(withGlobal<OwnProps>(
   },
   (setGlobal, actions): DispatchProps => pick(actions, [
     'openChat',
-    'openSupportChat',
+    'openTipsChat',
     'setGlobalSearchDate',
     'setGlobalSearchChatId',
     'setSettingOption',

src/components/ui/DropdownMenu.tsx

@@ -9,17 +9,18 @@ type OwnProps = {
   trigger: FC<{ onTrigger: () => void; isOpen?: boolean }>;
   positionX?: 'left' | 'right';
   positionY?: 'top' | 'bottom';
+  footer?: string;
   children: any;
 };
 
-const DropdownMenu: FC<OwnProps> = (props) => {
+const DropdownMenu: FC<OwnProps> = ({
-  const {
+  trigger,
-    trigger,
+  className,
-    className,
+  children,
-    children,
+  positionX = 'left',
-    positionX = 'left',
+  positionY = 'top',
-    positionY = 'top',
+  footer,
-  } = props;
+}) => {
   // eslint-disable-next-line no-null/no-null
   const menuRef = useRef<HTMLDivElement>(null);
   // eslint-disable-next-line no-null/no-null
@@ -64,6 +65,7 @@ const DropdownMenu: FC<OwnProps> = (props) => {
         className={className || ''}
         positionX={positionX}
         positionY={positionY}
+        footer={footer}
         autoClose
         onClose={handleClose}
       >

src/components/ui/Menu.scss

@@ -14,6 +14,7 @@
   }
 
   .bubble {
+    overflow: hidden;
     display: block;
     list-style: none;
     padding: 0.5rem 0;
@@ -63,5 +64,17 @@
     &.right {
       right: var(--offset-x);
     }
+
+    &.with-footer {
+      padding-bottom: 0;
+    }
+  }
+
+  .footer {
+    padding: 0.5rem 0;
+    background: #F4F4F5;
+    color: var(--color-text-secondary);
+    font-size: 0.8125rem;
+    text-align: center;
   }
 }

src/components/ui/Menu.tsx

@@ -20,6 +20,7 @@ type OwnProps = {
   positionX?: 'left' | 'right';
   positionY?: 'top' | 'bottom';
   autoClose?: boolean;
+  footer?: string;
   noCloseOnBackdrop?: boolean;
   onKeyDown?: (e: React.KeyboardEvent<any>) => void;
   onCloseAnimationEnd?: () => void;
@@ -41,6 +42,7 @@ const Menu: FC<OwnProps> = ({
   positionX = 'left',
   positionY = 'top',
   autoClose = false,
+  footer,
   noCloseOnBackdrop = false,
   onCloseAnimationEnd,
   onClose,
@@ -72,6 +74,14 @@ const Menu: FC<OwnProps> = ({
     noCloseOnBackdrop ? undefined : onClose,
   );
 
+  const bubbleClassName = buildClassName(
+    'bubble menu-container custom-scroll',
+    positionY,
+    positionX,
+    footer && 'with-footer',
+    transitionClassNames,
+  );
+
   return (
     <div
       className={buildClassName('Menu no-selection', className)}
@@ -87,12 +97,13 @@ const Menu: FC<OwnProps> = ({
       )}
       <div
         ref={menuRef}
-        className={buildClassName('bubble menu-container custom-scroll', positionY, positionX, transitionClassNames)}
+        className={bubbleClassName}
         // @ts-ignore teact feature
         style={`transform-origin: ${positionY} ${positionX}`}
         onClick={autoClose ? onClose : undefined}
       >
         {children}
+        {footer && <div className="footer">{footer}</div>}
       </div>
     </div>
   );

src/components/ui/MenuItem.scss

@@ -16,6 +16,8 @@
 
   &:hover, &:focus {
     background-color: var(--color-chat-hover);
+    text-decoration: none;
+    color: inherit;
   }
 
   i {

src/components/ui/MenuItem.tsx

@@ -82,6 +82,8 @@ const MenuItem: FC<OwnProps> = (props) => {
         download={download}
         aria-label={ariaLabel}
         title={ariaLabel}
+        target="_blank"
+        rel="noopener noreferrer"
       >
         {content}
       </a>

src/config.ts

@@ -1,3 +1,5 @@
+export const APP_INFO = process.env.APP_INFO || 'Telegram T';
+
 export const DEBUG = (
   process.env.APP_ENV !== 'production' && process.env.APP_ENV !== 'perf' && process.env.APP_ENV !== 'test'
 );
@@ -115,3 +117,5 @@ export const MAX_ACTIVE_PINNED_CHATS = 5;
 export const SCHEDULED_WHEN_ONLINE = 0x7FFFFFFE;
 export const DEFAULT_LANG_PACK = 'android';
 export const LANG_PACKS = ['android', 'ios'];
+export const TIPS_USERNAME = 'TelegramTips';
+export const FEEDBACK_URL = 'https://bugs.telegram.org/?tag_ids=41&sort=time';

src/global/types.ts

@@ -385,7 +385,8 @@ export type ActionTypes = (
   'setAuthPhoneNumber' | 'setAuthCode' | 'setAuthPassword' | 'signUp' | 'returnToAuthPhoneNumber' | 'signOut' |
   'setAuthRememberMe' | 'clearAuthError' | 'uploadProfilePhoto' | 'gotToAuthQrCode' | 'clearCache' |
   // chats
-  'preloadTopChatMessages' | 'loadChats' | 'loadMoreChats' | 'openChat' | 'openChatWithInfo' | 'openSupportChat' |
+  'preloadTopChatMessages' | 'loadChats' | 'loadMoreChats' | 'openChat' | 'openChatWithInfo' |
+  'openSupportChat' | 'openTipsChat' |
   'loadFullChat' | 'loadSuperGroupOnlines' | 'loadTopChats' | 'requestChatUpdate' | 'updateChatMutedState' |
   'joinChannel' | 'leaveChannel' | 'deleteChannel' | 'toggleChatPinned' | 'toggleChatArchived' | 'toggleChatUnread' |
   'loadChatFolders' | 'loadRecommendedChatFolders' | 'editChatFolder' | 'addChatFolder' | 'deleteChatFolder' |

src/modules/actions/api/chats.ts

@@ -13,8 +13,9 @@ import {
   TOP_CHAT_MESSAGES_PRELOAD_LIMIT,
   CHAT_LIST_LOAD_SLICE,
   RE_TME_LINK,
-
+  TIPS_USERNAME,
 } from '../../../config';
+import { IS_TOUCH_ENV } from '../../../util/environment';
 import { callApi } from '../../../api/gramjs';
 import {
   addChats,
@@ -43,7 +44,6 @@ import { debounce, pause, throttle } from '../../../util/schedulers';
 import {
   isChatSummaryOnly, isChatArchived, prepareChatList, isChatBasicGroup,
 } from '../../helpers';
-import { IS_TOUCH_ENV } from '../../../util/environment';
 
 const TOP_CHATS_PRELOAD_PAUSE = 200;
 // We expect this ID does not exist
@@ -136,6 +136,10 @@ addReducer('openSupportChat', (global, actions) => {
   })();
 });
 
+addReducer('openTipsChat', (global, actions) => {
+  actions.openChatByUsername({ username: TIPS_USERNAME });
+});
+
 addReducer('loadMoreChats', (global, actions, payload) => {
   const { listType = 'active' } = payload!;
   const listIds = global.chats.listIds[listType as ('active' | 'archived')];

src/styles/icons.scss

@@ -22,6 +22,9 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-bug:before {
+  content: "\e97d";
+}
 .icon-darkmode:before {
   content: "\e979";
 }

webpack.config.js

@@ -103,6 +103,7 @@ module.exports = (env = {}, argv = {}) => {
         ignoreOrder: true,
       }),
       new EnvironmentPlugin({
+        APP_INFO: 'Telegram T',
         APP_ENV: 'production',
         TELEGRAM_T_API_ID: '',
         TELEGRAM_T_API_HASH: '',